From 0a1ab60b8c683201265ec00d2762286406d0b251 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Wed, 15 Apr 2020 21:51:20 +0200 Subject: [PATCH] Storybook: Organizing (#23572) * Initial reorganizing * Update Layout props table * Change sorting and move stories --- packages/grafana-ui/.storybook/preview.ts | 9 +- .../ButtonCascader/ButtonCascader.story.tsx | 2 +- .../components/Cascader/Cascader.story.tsx | 2 +- ...tsx => ClipboardButton.story.internal.tsx} | 0 .../ColorPicker/ColorPicker.story.tsx | 2 +- .../ColorPicker/ColorPickerPopover.story.tsx | 2 +- .../ConfirmButton/ConfirmButton.story.tsx | 2 +- .../ConfirmModal/ConfirmModal.story.tsx | 2 +- .../CustomHeaderSettings.story.tsx | 2 +- .../DataSourceHttpSettings.story.tsx | 2 +- .../src/components/Drawer/Drawer.story.tsx | 2 +- ...story.tsx => FormField.story.internal.tsx} | 2 +- .../Legacy/Select/Select.story.internal.tsx | 2 +- .../src/components/Graph/Graph.story.tsx | 2 +- .../InfoTooltip/InfoTooltip.story.tsx | 2 +- .../src/components/Layout/Layout.mdx | 128 ++++++++---------- .../src/components/Layout/Layout.story.tsx | 1 + .../src/components/Legend/Legend.story.tsx | 2 +- ...List.story.tsx => List.story.internal.tsx} | 0 .../src/components/Modal/Modal.story.tsx | 2 +- .../QueryField/QueryField.story.tsx | 2 +- .../RefreshPicker/RefreshPicker.story.tsx | 2 +- .../SecretFormField/SecretFormField.story.tsx | 2 +- .../src/components/Segment/Segment.story.tsx | 4 +- .../components/Segment/SegmentAsync.story.tsx | 4 +- .../components/Segment/SegmentInput.story.tsx | 4 +- .../src/components/Slider/Slider.story.tsx | 2 +- .../StatsPicker/StatsPicker.story.tsx | 2 +- ...y.tsx => TableInputCSV.story.internal.tsx} | 2 +- .../src/components/Tabs/Tabs.story.tsx | 2 +- .../components/TagsInput/TagsInput.story.tsx | 2 +- .../ThresholdsEditor.story.tsx | 2 +- ...x => ToggleButtonGroup.story.internal.tsx} | 2 +- .../UnitPicker/UnitPicker.story.tsx | 2 +- .../ValueMappingsEditor.story.tsx | 2 +- .../ValuePicker/ValuePicker.story.tsx | 2 +- ...sx => useDelayedSwitch.story.internal.tsx} | 0 37 files changed, 103 insertions(+), 103 deletions(-) rename packages/grafana-ui/src/components/ClipboardButton/{ClipboardButton.story.tsx => ClipboardButton.story.internal.tsx} (100%) rename packages/grafana-ui/src/components/FormField/{FormField.story.tsx => FormField.story.internal.tsx} (93%) rename packages/grafana-ui/src/components/List/{List.story.tsx => List.story.internal.tsx} (100%) rename packages/grafana-ui/src/components/TableInputCSV/{TableInputCSV.story.tsx => TableInputCSV.story.internal.tsx} (88%) rename packages/grafana-ui/src/components/ToggleButtonGroup/{ToggleButtonGroup.story.tsx => ToggleButtonGroup.story.internal.tsx} (94%) rename packages/grafana-ui/src/utils/{useDelayedSwitch.story.tsx => useDelayedSwitch.story.internal.tsx} (100%) diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts index f79088c384e..902c0327320 100644 --- a/packages/grafana-ui/.storybook/preview.ts +++ b/packages/grafana-ui/.storybook/preview.ts @@ -45,7 +45,14 @@ addParameters({ showNav: true, isFullscreen: false, isToolshown: true, - storySort: (a: any, b: any) => a[1].id.localeCompare(b[1].id), + storySort: (a: any, b: any) => { + if (a[1].kind.split('/')[0] === 'Docs Overview') { + return -1; + } else if (b[1].kind.split('/')[0] === 'Docs Overview') { + return 1; + } + return a[1].id.localeCompare(b[1].id); + }, }, knobs: { escapeHTML: false, diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx index a08d4d57845..0813313a152 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx @@ -4,7 +4,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ButtonCascader } from './ButtonCascader'; export default { - title: 'General/ButtonCascader', + title: 'Forms/Cascader/ButtonCascader', component: ButtonCascader, decorators: [withKnobs, withCenteredStory], }; diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx index 6320b48707e..4d19cc00c23 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx @@ -6,7 +6,7 @@ import mdx from './Cascader.mdx'; import React from 'react'; export default { - title: 'General/Cascader', + title: 'Forms/Cascader', component: Cascader, decorators: [withCenteredStory], parameters: { diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx similarity index 100% rename from packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.tsx rename to packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index 93e085f6381..27f4b55f6d7 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -13,7 +13,7 @@ const getColorPickerKnobs = () => { }; }; -const ColorPickerStories = storiesOf('General/ColorPicker/Pickers', module); +const ColorPickerStories = storiesOf('Pickers and Editors/ColorPicker/Pickers', module); ColorPickerStories.addDecorator(withCenteredStory); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx index d1629db28a9..22813e5be56 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx @@ -4,7 +4,7 @@ import { ColorPickerPopover } from './ColorPickerPopover'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; -const ColorPickerPopoverStories = storiesOf('General/ColorPicker/Popovers', module); +const ColorPickerPopoverStories = storiesOf('Pickers and Editors/ColorPicker/Popovers', module); ColorPickerPopoverStories.addDecorator(withCenteredStory); diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 74fb8ca5a64..1e98f3c635e 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -27,7 +27,7 @@ const getKnobs = () => { }; }; -storiesOf('General/ConfirmButton', module) +storiesOf('Forms/ConfirmButton', module) .addDecorator(withCenteredStory) .add('default', () => { const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs(); diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx index 68dff7b4853..ef49fc25ea2 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx @@ -24,7 +24,7 @@ const defaultActions = { }, }; -const ConfirmModalStories = storiesOf('General/ConfirmModal', module); +const ConfirmModalStories = storiesOf('Overlays/ConfirmModal', module); ConfirmModalStories.addDecorator(withCenteredStory); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx index 3e78d19e05b..fea0ad5adcc 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx @@ -4,7 +4,7 @@ import { CustomHeadersSettings } from './CustomHeadersSettings'; import { DataSourceSettings } from '@grafana/data'; export default { - title: 'Panel/DataSource/CustomHeadersSettings', + title: 'Data Source/CustomHeadersSettings', component: CustomHeadersSettings, decorators: [withCenteredStory, withHorizontallyCenteredStory], }; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx index 118026de1d5..a07a066585a 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx @@ -31,7 +31,7 @@ const settingsMock: DataSourceSettings = { readOnly: true, }; -const DataSourceHttpSettingsStories = storiesOf('Panel/DataSource/DataSourceHttpSettings', module); +const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module); DataSourceHttpSettingsStories.add('default', () => { return ( diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx index 63aae5ca576..75b82b3914c 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx @@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './Drawer.mdx'; export default { - title: 'General/Drawer', + title: 'Overlays/Drawer', component: Drawer, decorators: [withCenteredStory], parameters: { diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx similarity index 93% rename from packages/grafana-ui/src/components/FormField/FormField.story.tsx rename to packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx index f19802c19ff..754f98bf505 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.story.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx @@ -14,7 +14,7 @@ const getKnobs = () => { }; }; -const FormFieldStories = storiesOf('General/FormField', module); +const FormFieldStories = storiesOf('Forms/Legacy/FormField', module); FormFieldStories.addDecorator(withCenteredStory); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx index f2356ee0a6b..620a868ff63 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx @@ -7,7 +7,7 @@ import { SelectableValue } from '@grafana/data'; import { Select, AsyncSelect } from './Select'; export default { - title: 'General/Select/Select', + title: 'Forms/Legacy/Select', component: Select, decorators: [withCenteredStory, withKnobs], }; diff --git a/packages/grafana-ui/src/components/Graph/Graph.story.tsx b/packages/grafana-ui/src/components/Graph/Graph.story.tsx index eb1feeadc00..8af308fc78e 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.story.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.story.tsx @@ -8,7 +8,7 @@ import { TooltipContentProps } from '../Chart/Tooltip'; import { JSONFormatter } from '../JSONFormatter/JSONFormatter'; export default { - title: 'Visualizations|Graph/Graph', + title: 'Visualizations/Graph', component: Graph, decorators: [withCenteredStory], }; diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx index 4a2fbd34014..4323afab164 100644 --- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx +++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx @@ -4,6 +4,6 @@ import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { InfoTooltip } from './InfoTooltip'; -const story = storiesOf('General/Tooltip', module); +const story = storiesOf('Overlays/Tooltip', module); story.addDecorator(withCenteredStory); story.add('InfoTooltip', () => This is the content of the tooltip); diff --git a/packages/grafana-ui/src/components/Layout/Layout.mdx b/packages/grafana-ui/src/components/Layout/Layout.mdx index da91db1d3bd..304c2adb3a1 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.mdx +++ b/packages/grafana-ui/src/components/Layout/Layout.mdx @@ -1,7 +1,7 @@ -import { Story, Preview, Props } from '@storybook/addon-docs/blocks'; -import { Layout, HorizontalGroup, VerticalGroup } from './Layout'; -import { Button } from '../Button'; -import { Select } from '../index'; +import { Story, Preview, Props } from "@storybook/addon-docs/blocks"; +import { Layout, HorizontalGroup, VerticalGroup } from "./Layout"; +import { Button } from "../Button"; +import { Select } from "../index"; # Layout @@ -12,93 +12,85 @@ Used for aligning items in specified orientation. Useful for multiple elements t Expects multiple elements as `children` prop. This is the base for more specialised `Horizontal-` and `VerticalGroup` components. ### Props + ## Horizontal Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them. - - - - - - - - - - - {}} - options={[ - { value: 1, label: 'Option 1' }, - { value: 2, label: 'Option 2' }, - ]} - /> - {}} + options={[ + { value: 1, label: "Option 1" }, + { value: 2, label: "Option 2" }, + ]} + /> + {}} + options={[ + { value: 1, label: "Option 1" }, + { value: 2, label: "Option 2" }, + ]} + /> + + ## Vertical Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them. - - - - - - - - - + + + + + + + + + {}} options={[ - { value: 1, label: 'Option 1' }, - { value: 2, label: 'Option 2' }, + { value: 1, label: "Option 1" }, + { value: 2, label: "Option 2" }, ]} />