From 92f2a6a38fa9bb13beafe640930b04ad35609765 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Wed, 5 May 2021 13:53:14 -0300 Subject: [PATCH] chore: Removes common storybook (#14418) --- .../src/common/components/common.stories.tsx | 134 ------------------ .../CronPicker/CronPicker.stories.tsx | 88 ++++++++++++ .../InfoTooltip/InfoTooltip.stories.tsx | 79 +++++++++++ .../src/components/InfoTooltip/index.tsx | 2 +- .../src/components/Modal/Modal.stories.tsx | 50 +++++++ .../src/components/Modal/Modal.tsx | 2 +- 6 files changed, 219 insertions(+), 136 deletions(-) delete mode 100644 superset-frontend/src/common/components/common.stories.tsx create mode 100644 superset-frontend/src/components/CronPicker/CronPicker.stories.tsx create mode 100644 superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx create mode 100644 superset-frontend/src/components/Modal/Modal.stories.tsx diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx deleted file mode 100644 index 333d0e974750..000000000000 --- a/superset-frontend/src/common/components/common.stories.tsx +++ /dev/null @@ -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 = () => ( - -
hi!
- -); - -export const StyledInfoTooltip = (args: any) => { - const styles = { - padding: '100px 0 0 200px', - }; - - return ( -
- -
- ); -}; - -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(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(); - - return ( -
- { - setValue(event.target.value); - }} - onPressEnter={() => { - setValue(inputRef.current?.input.value || ''); - }} - /> - - - - - -

- Error: {error ? error.description : 'undefined'} -

-
- ); -} diff --git a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx new file mode 100644 index 000000000000..7f8993684fe9 --- /dev/null +++ b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx @@ -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(null); + const [value, setValue] = useState(props.value); + const customSetValue = useCallback( + (newValue: string) => { + setValue(newValue); + inputRef.current?.setValue(newValue); + }, + [inputRef], + ); + const [error, onError] = useState(); + + return ( +
+ { + setValue(event.target.value); + }} + onChange={e => setValue(e.target.value || '')} + /> + + + {error &&

Error: {error.description}

} +
+ ); +}; + +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, + }, + }, +}; diff --git a/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx b/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx new file mode 100644 index 000000000000..d7c81966b65d --- /dev/null +++ b/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx @@ -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 ( +
+ +
+ ); +}; + +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, + }, + }, +}; diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx index 7091cd911b98..b3558593973f 100644 --- a/superset-frontend/src/components/InfoTooltip/index.tsx +++ b/superset-frontend/src/components/InfoTooltip/index.tsx @@ -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?: diff --git a/superset-frontend/src/components/Modal/Modal.stories.tsx b/superset-frontend/src/components/Modal/Modal.stories.tsx new file mode 100644 index 000000000000..4a7b06eaee4c --- /dev/null +++ b/superset-frontend/src/components/Modal/Modal.stories.tsx @@ -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) => ( + Hi +); + +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, + }, + }, +}; diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 5421f0a24a2c..661d216ce4f8 100644 --- a/superset-frontend/src/components/Modal/Modal.tsx +++ b/superset-frontend/src/components/Modal/Modal.tsx @@ -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;