mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
chore: Removes common storybook (#14418)
This commit is contained in:
parent
b030c9801c
commit
7182a1b390
@ -1,134 +0,0 @@
|
|||||||
/**
|
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one
|
|
||||||
* or more contributor license agreements. See the NOTICE file
|
|
||||||
* distributed with this work for additional information
|
|
||||||
* regarding copyright ownership. The ASF licenses this file
|
|
||||||
* to you under the Apache License, Version 2.0 (the
|
|
||||||
* "License"); you may not use this file except in compliance
|
|
||||||
* with the License. You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing,
|
|
||||||
* software distributed under the License is distributed on an
|
|
||||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
||||||
* KIND, either express or implied. See the License for the
|
|
||||||
* specific language governing permissions and limitations
|
|
||||||
* under the License.
|
|
||||||
*/
|
|
||||||
import React, { useState, useRef, useCallback } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
|
||||||
import { CronPicker, CronError } from 'src/components/CronPicker';
|
|
||||||
import Modal from 'src/components/Modal';
|
|
||||||
import InfoTooltip from 'src/components/InfoTooltip';
|
|
||||||
import { Input, Divider } from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Common components',
|
|
||||||
decorators: [withKnobs],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const StyledModal = () => (
|
|
||||||
<Modal
|
|
||||||
disablePrimaryButton={false}
|
|
||||||
onHandledPrimaryAction={action('Primary action')}
|
|
||||||
primaryButtonName="Danger"
|
|
||||||
primaryButtonType="danger"
|
|
||||||
show
|
|
||||||
onHide={action('hidden')}
|
|
||||||
title="I'm a modal!"
|
|
||||||
>
|
|
||||||
<div>hi!</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const StyledInfoTooltip = (args: any) => {
|
|
||||||
const styles = {
|
|
||||||
padding: '100px 0 0 200px',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={styles}>
|
|
||||||
<InfoTooltip tooltip="This is the text that will display!" {...args} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
StyledInfoTooltip.args = {
|
|
||||||
placement: 'right',
|
|
||||||
trigger: 'hover',
|
|
||||||
};
|
|
||||||
|
|
||||||
StyledInfoTooltip.argTypes = {
|
|
||||||
placement: {
|
|
||||||
name: 'Placement',
|
|
||||||
control: {
|
|
||||||
type: 'select',
|
|
||||||
options: [
|
|
||||||
'bottom',
|
|
||||||
'left',
|
|
||||||
'right',
|
|
||||||
'top',
|
|
||||||
'topLeft',
|
|
||||||
'topRight',
|
|
||||||
'bottomLeft',
|
|
||||||
'bottomRight',
|
|
||||||
'leftTop',
|
|
||||||
'leftBottom',
|
|
||||||
'rightTop',
|
|
||||||
'rightBottom',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
trigger: {
|
|
||||||
name: 'Trigger',
|
|
||||||
control: {
|
|
||||||
type: 'select',
|
|
||||||
options: ['hover', 'click'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function StyledCronPicker() {
|
|
||||||
// @ts-ignore
|
|
||||||
const inputRef = useRef<Input>(null);
|
|
||||||
const defaultValue = '30 5 * * 1,6';
|
|
||||||
const [value, setValue] = useState(defaultValue);
|
|
||||||
const customSetValue = useCallback(
|
|
||||||
(newValue: string) => {
|
|
||||||
setValue(newValue);
|
|
||||||
inputRef.current?.setValue(newValue);
|
|
||||||
},
|
|
||||||
[inputRef],
|
|
||||||
);
|
|
||||||
const [error, onError] = useState<CronError>();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Input
|
|
||||||
ref={inputRef}
|
|
||||||
onBlur={event => {
|
|
||||||
setValue(event.target.value);
|
|
||||||
}}
|
|
||||||
onPressEnter={() => {
|
|
||||||
setValue(inputRef.current?.input.value || '');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<CronPicker
|
|
||||||
clearButton={false}
|
|
||||||
value={value}
|
|
||||||
setValue={customSetValue}
|
|
||||||
onError={onError}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p style={{ marginTop: 20 }}>
|
|
||||||
Error: {error ? error.description : 'undefined'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React, { useState, useRef, useCallback } from 'react';
|
||||||
|
import { Input, Divider } from 'src/common/components';
|
||||||
|
import { CronPicker, CronError, CronProps } from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'CronPicker',
|
||||||
|
component: CronPicker,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InteractiveCronPicker = (props: CronProps) => {
|
||||||
|
// @ts-ignore
|
||||||
|
const inputRef = useRef<Input>(null);
|
||||||
|
const [value, setValue] = useState(props.value);
|
||||||
|
const customSetValue = useCallback(
|
||||||
|
(newValue: string) => {
|
||||||
|
setValue(newValue);
|
||||||
|
inputRef.current?.setValue(newValue);
|
||||||
|
},
|
||||||
|
[inputRef],
|
||||||
|
);
|
||||||
|
const [error, onError] = useState<CronError>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Input
|
||||||
|
ref={inputRef}
|
||||||
|
onBlur={event => {
|
||||||
|
setValue(event.target.value);
|
||||||
|
}}
|
||||||
|
onChange={e => setValue(e.target.value || '')}
|
||||||
|
/>
|
||||||
|
<Divider />
|
||||||
|
<CronPicker
|
||||||
|
{...props}
|
||||||
|
value={value}
|
||||||
|
setValue={customSetValue}
|
||||||
|
onError={onError}
|
||||||
|
/>
|
||||||
|
{error && <p style={{ marginTop: 20 }}>Error: {error.description}</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveCronPicker.args = {
|
||||||
|
clearButton: false,
|
||||||
|
disabled: false,
|
||||||
|
readOnly: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveCronPicker.argTypes = {
|
||||||
|
value: {
|
||||||
|
defaultValue: '30 5 * * *',
|
||||||
|
table: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
table: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveCronPicker.story = {
|
||||||
|
parameters: {
|
||||||
|
knobs: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
@ -0,0 +1,79 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import InfoTooltip, { InfoTooltipProps } from 'src/components/InfoTooltip';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'InfoTooltip',
|
||||||
|
component: InfoTooltip,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InteractiveInfoTooltip = (props: InfoTooltipProps) => {
|
||||||
|
const styles = {
|
||||||
|
padding: '100px 0 0 200px',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={styles}>
|
||||||
|
<InfoTooltip {...props} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveInfoTooltip.args = {
|
||||||
|
tooltip: 'This is the text that will display!',
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveInfoTooltip.argTypes = {
|
||||||
|
placement: {
|
||||||
|
defaultValue: 'top',
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
'bottom',
|
||||||
|
'left',
|
||||||
|
'right',
|
||||||
|
'top',
|
||||||
|
'topLeft',
|
||||||
|
'topRight',
|
||||||
|
'bottomLeft',
|
||||||
|
'bottomRight',
|
||||||
|
'leftTop',
|
||||||
|
'leftBottom',
|
||||||
|
'rightTop',
|
||||||
|
'rightBottom',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
trigger: {
|
||||||
|
defaultValue: 'hover',
|
||||||
|
control: {
|
||||||
|
type: 'select',
|
||||||
|
options: ['hover', 'click'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveInfoTooltip.story = {
|
||||||
|
parameters: {
|
||||||
|
knobs: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
@ -22,7 +22,7 @@ import { styled } from '@superset-ui/core';
|
|||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import Icon from 'src/components/Icon';
|
import Icon from 'src/components/Icon';
|
||||||
|
|
||||||
interface InfoTooltipProps {
|
export interface InfoTooltipProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
tooltip: string;
|
tooltip: string;
|
||||||
placement?:
|
placement?:
|
||||||
|
50
superset-frontend/src/components/Modal/Modal.stories.tsx
Normal file
50
superset-frontend/src/components/Modal/Modal.stories.tsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import Modal, { ModalProps } from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Modal',
|
||||||
|
component: Modal,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InteractiveModal = (props: ModalProps) => (
|
||||||
|
<Modal {...props}>Hi</Modal>
|
||||||
|
);
|
||||||
|
|
||||||
|
InteractiveModal.args = {
|
||||||
|
disablePrimaryButton: false,
|
||||||
|
primaryButtonName: 'Danger',
|
||||||
|
primaryButtonType: 'danger',
|
||||||
|
show: true,
|
||||||
|
title: "I'm a modal!",
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveModal.argTypes = {
|
||||||
|
onHandledPrimaryAction: { action: 'onHandledPrimaryAction' },
|
||||||
|
onHide: { action: 'onHide' },
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveModal.story = {
|
||||||
|
parameters: {
|
||||||
|
knobs: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
@ -23,7 +23,7 @@ import { css } from '@emotion/react';
|
|||||||
import { Modal as BaseModal } from 'src/common/components';
|
import { Modal as BaseModal } from 'src/common/components';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
|
|
||||||
interface ModalProps {
|
export interface ModalProps {
|
||||||
className?: string;
|
className?: string;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
disablePrimaryButton?: boolean;
|
disablePrimaryButton?: boolean;
|
||||||
|
Loading…
Reference in New Issue
Block a user