mirror of https://github.com/apache/superset.git
chore: Removes common storybook (#14418)
This commit is contained in:
Michael S. Molina
GitHub
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 Icon from 'src/components/Icon';
|
||||
|
||||
interface InfoTooltipProps {
|
||||
export interface InfoTooltipProps {
|
||||
className?: string;
|
||||
tooltip: string;
|
||||
placement?:
|
||||
|
|
|
|||
|
|
@ -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 Button from 'src/components/Button';
|
||||
|
||||
interface ModalProps {
|
||||
export interface ModalProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
disablePrimaryButton?: boolean;
|
||||
|
|
|
|||
Loading…
Reference in New Issue