From 82f055ac1da3efc3f76f547f4b129c7164411e05 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Wed, 29 Apr 2020 13:08:27 +0200 Subject: [PATCH] Storybook: Rewrite stories to CSF (#23989) * ColorPicker to CSF format * Convert stories to CSF * Do not export ClipboardButton * Update ConfirmButton * Remove unused imports * Fix feedback --- ...{ColorPicker.story.mdx => ColorPicker.mdx} | 5 +- .../ColorPicker/ColorPicker.story.tsx | 24 ++-- .../ColorPicker/ColorPickerPopover.story.tsx | 17 ++- .../ColorPicker/NamedColorsPalette.story.tsx | 38 +++--- .../ColorPicker/NamedColorsPalette.tsx | 2 +- .../ColorPicker/SpectrumPalette.story.tsx | 19 ++- .../ConfirmButton/ConfirmButton.story.tsx | 122 +++++++++++------- .../ConfirmButton/ConfirmButton.tsx | 2 +- .../ConfirmButton/DeleteButton.story.tsx | 34 ----- .../components/ConfirmButton/DeleteButton.tsx | 2 +- .../components/TagsInput/TagsInput.story.tsx | 16 ++- 11 files changed, 150 insertions(+), 131 deletions(-) rename packages/grafana-ui/src/components/ColorPicker/{ColorPicker.story.mdx => ColorPicker.mdx} (86%) delete mode 100644 packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx similarity index 86% rename from packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx rename to packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx index 1e9195ab462..0976bea2258 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx @@ -1,4 +1,5 @@ -import { Meta } from '@storybook/addon-docs/blocks'; +import { Meta, Props } from '@storybook/addon-docs/blocks'; +import { ColorPicker } from './ColorPicker'; @@ -9,3 +10,5 @@ The `ColorPicker` component group consists of several building blocks that are c The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are opimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`. The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`. + + diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index 27f4b55f6d7..bdb85d07867 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { boolean } from '@storybook/addon-knobs'; import { SeriesColorPicker, ColorPicker } from './ColorPicker'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { UseState } from '../../utils/storybook/UseState'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; +import mdx from './ColorPicker.mdx'; const getColorPickerKnobs = () => { return { @@ -13,11 +13,19 @@ const getColorPickerKnobs = () => { }; }; -const ColorPickerStories = storiesOf('Pickers and Editors/ColorPicker/Pickers', module); +export default { + title: 'Pickers and Editors/ColorPicker', + component: ColorPicker, + subcomponents: { SeriesColorPicker }, + decorators: [withCenteredStory], + parameters: { + docs: { + page: mdx, + }, + }, +}; -ColorPickerStories.addDecorator(withCenteredStory); - -ColorPickerStories.add('default', () => { +export const basic = () => { const { enableNamedColors } = getColorPickerKnobs(); return ( @@ -34,9 +42,9 @@ ColorPickerStories.add('default', () => { }} ); -}); +}; -ColorPickerStories.add('Series color picker', () => { +export const seriesColorPicker = () => { const { enableNamedColors } = getColorPickerKnobs(); return ( @@ -65,4 +73,4 @@ ColorPickerStories.add('Series color picker', () => { }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx index 22813e5be56..5b04d0da970 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx @@ -1,27 +1,30 @@ -import { storiesOf } from '@storybook/react'; import { ColorPickerPopover } from './ColorPickerPopover'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; -const ColorPickerPopoverStories = storiesOf('Pickers and Editors/ColorPicker/Popovers', module); -ColorPickerPopoverStories.addDecorator(withCenteredStory); +export default { + title: 'Pickers and Editors/ColorPicker/Popovers', + component: ColorPickerPopover, + subcomponents: { SeriesColorPickerPopover }, + decorators: [withCenteredStory], +}; -ColorPickerPopoverStories.add('default', () => { +export const basic = () => { return renderComponentWithTheme(ColorPickerPopover, { color: '#BC67E6', onChange: (color: any) => { console.log(color); }, }); -}); +}; -ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => { +export const seriesColorPickerPopover = () => { return renderComponentWithTheme(SeriesColorPickerPopover, { color: '#BC67E6', onChange: (color: any) => { console.log(color); }, }); -}); +}; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx index af3e91b8c46..1e04b4446d7 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx @@ -1,21 +1,28 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { NamedColorsPalette } from './NamedColorsPalette'; import { getColorName, getColorDefinitionByName } from '@grafana/data'; import { select } from '@storybook/addon-knobs'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { UseState } from '../../utils/storybook/UseState'; +import mdx from './ColorPicker.mdx'; const BasicGreen = getColorDefinitionByName('green'); const BasicRed = getColorDefinitionByName('red'); const LightBlue = getColorDefinitionByName('light-blue'); -const NamedColorsPaletteStories = storiesOf('Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette', module); +export default { + title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette', + component: NamedColorsPalette, + decorators: [withCenteredStory], + parameters: { + docs: { + page: mdx, + }, + }, +}; -NamedColorsPaletteStories.addDecorator(withCenteredStory); - -NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => { +export const namedColors = () => { const selectedColor = select( 'Selected color', { @@ -36,16 +43,15 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors', }} ); -}).add('Named colors swatch - support for hex values', () => { - const selectedColor = select( - 'Selected color', - { - Green: BasicGreen.variants.dark, - Red: BasicRed.variants.dark, - 'Light blue': LightBlue.variants.dark, - }, - 'red' - ); +}; + +export const hexValues = () => { + let hexVals: any = {}; + hexVals[BasicGreen.variants.dark] = BasicGreen.variants.dark; + hexVals[BasicRed.variants.dark] = BasicRed.variants.dark; + hexVals[LightBlue.variants.dark] = LightBlue.variants.dark; + + const selectedColor = select('Selected color', hexVals, 'red'); return ( {(selectedColor, updateSelectedColor) => { @@ -56,4 +62,4 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors', }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx index f65b8785f02..65f7f890255 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx @@ -3,7 +3,7 @@ import { Color, getNamedColorPalette } from '@grafana/data'; import { Themeable } from '../../types/index'; import NamedColorsGroup from './NamedColorsGroup'; -interface NamedColorsPaletteProps extends Themeable { +export interface NamedColorsPaletteProps extends Themeable { color?: Color; onChange: (colorName: string) => void; } diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx index fcb70b2916b..dc6713e3e93 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx @@ -1,15 +1,22 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import SpectrumPalette from './SpectrumPalette'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { UseState } from '../../utils/storybook/UseState'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; +import mdx from './ColorPicker.mdx'; -const SpectrumPaletteStories = storiesOf('Pickers and Editors/ColorPicker/Palettes/SpectrumPalette', module); +export default { + title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette', + component: SpectrumPalette, + decorators: [withCenteredStory], + parameters: { + docs: { + page: mdx, + }, + }, +}; -SpectrumPaletteStories.addDecorator(withCenteredStory); - -SpectrumPaletteStories.add('default', () => { +export const simple = () => { return ( {(selectedColor, updateSelectedColor) => { @@ -17,4 +24,4 @@ SpectrumPaletteStories.add('default', () => { }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 798cf7ddfcc..1627e3e1253 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -1,11 +1,10 @@ -export { ClipboardButton } from '../ClipboardButton/ClipboardButton'; import React from 'react'; -import { storiesOf } from '@storybook/react'; import { text, boolean, select } from '@storybook/addon-knobs'; import { ConfirmButton } from './ConfirmButton'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { action } from '@storybook/addon-actions'; import { Button } from '../Button'; +import { DeleteButton } from './DeleteButton'; const getKnobs = () => { return { @@ -27,53 +26,78 @@ const getKnobs = () => { }; }; -storiesOf('Buttons/ConfirmButton', module) - .addDecorator(withCenteredStory) - .add('default', () => { - const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs(); - return ( - <> -
-
- { - action('Saved')('save!'); - }} - > +export default { + title: 'Buttons/ConfirmButton', + component: ConfirmButton, + decorators: [withCenteredStory], + subcomponents: { DeleteButton }, +}; + +export const basic = () => { + const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs(); + return ( + <> +
+
+ { + action('Saved')('save!'); + }} + > + {buttonText} + +
+
+ + ); +}; + +export const withCustomButton = () => { + const { buttonText, confirmText, confirmVariant, disabled, size, closeOnConfirm } = getKnobs(); + return ( + <> +
+
+ { + action('Saved')('save!'); + }} + > +
+ +
- - ); - }) - .add('with custom button', () => { - const { buttonText, confirmText, confirmVariant, disabled, size, closeOnConfirm } = getKnobs(); - return ( - <> -
-
- { - action('Saved')('save!'); - }} - > - - -
+
+ + ); +}; + +export const deleteButton = () => { + const { disabled, size } = getKnobs(); + return ( + <> +
+
+ { + action('Deleted')('delete!'); + }} + />
- - ); - }); +
+ + ); +}; diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index bb8b34d05fb..a350eed41ac 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx @@ -52,7 +52,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { }; }); -interface Props extends Themeable { +export interface Props extends Themeable { className?: string; size?: ComponentSize; confirmText?: string; diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx deleted file mode 100644 index b7447a10a02..00000000000 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { boolean, select } from '@storybook/addon-knobs'; -import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { action } from '@storybook/addon-actions'; -import { DeleteButton } from './DeleteButton'; - -const getKnobs = () => { - return { - size: select('Size', ['sm', 'md', 'lg'], 'md'), - disabled: boolean('Disabled', false), - }; -}; - -storiesOf('Buttons/ConfirmButton', module) - .addDecorator(withCenteredStory) - .add('delete button', () => { - const { disabled, size } = getKnobs(); - return ( - <> -
-
- { - action('Deleted')('delete!'); - }} - /> -
-
- - ); - }); diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx index e464afe98c2..084254ce9c6 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx @@ -3,7 +3,7 @@ import { ConfirmButton } from './ConfirmButton'; import { ComponentSize } from '../../types/size'; import { Button } from '../Button'; -interface Props { +export interface Props { size?: ComponentSize; disabled?: boolean; onConfirm(): void; diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx index 774623d561d..c9a9c07f4a1 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx @@ -1,20 +1,22 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { UseState } from '../../utils/storybook/UseState'; import { TagsInput } from './TagsInput'; -const TagsInputStories = storiesOf('Forms/TagsInput', module); const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component']; -TagsInputStories.addDecorator(withCenteredStory); +export default { + title: 'Forms/TagsInput', + component: TagsInput, + decorators: [withCenteredStory], +}; -TagsInputStories.add('default', () => { +export const basic = () => { return action('tags updated')(tags)} />; -}); +}; -TagsInputStories.add('with mock tags', () => { +export const withMockTags = () => { return ( {tags => { @@ -22,4 +24,4 @@ TagsInputStories.add('with mock tags', () => { }} ); -}); +};