Storybook: Organizing (#23572)

* Initial reorganizing

* Update Layout props table

* Change sorting and move stories

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,

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],
 };

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: {

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);
 

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);
 

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();

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);
 

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],
 };

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx

@@ -31,7 +31,7 @@ const settingsMock: DataSourceSettings<any, any> = {
   readOnly: true,
 };
 
-const DataSourceHttpSettingsStories = storiesOf('Panel/DataSource/DataSourceHttpSettings', module);
+const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module);
 
 DataSourceHttpSettingsStories.add('default', () => {
   return (

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: {

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);
 

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],
 };

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],
 };

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', () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>);

packages/grafana-ui/src/components/Layout/Layout.mdx

@@ -1,7 +1,7 @@
-import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Story, Preview, Props } from "@storybook/addon-docs/blocks";
-import { Layout, HorizontalGroup, VerticalGroup } from './Layout';
+import { Layout, HorizontalGroup, VerticalGroup } from "./Layout";
-import { Button } from '../Button';
+import { Button } from "../Button";
-import { Select } from '../index';
+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
+
 <Props of={Layout} />
 
 ## Horizontal
 
 Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them.
-<Preview>
-    <HorizontalGroup>
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
-    </HorizontalGroup>
- </Preview>
-
- <Preview>
-   <HorizontalGroup>
-     <Select
-       size='sm'
-       onChange={() => {}}
-       options={[
-         { value: 1, label: 'Option 1' },
-         { value: 2, label: 'Option 2' },
-       ]}
-     />
-     <Select
-       size='sm'
-       onChange={() => {}}
-       options={[
-         { value: 1, label: 'Option 1' },
-         { value: 2, label: 'Option 2' },
-       ]}
-     />
-     <Select
-       size='sm'
-       onChange={() => {}}
-       options={[
-         { value: 1, label: 'Option 1' },
-         { value: 2, label: 'Option 2' },
-       ]}
-     />
-   </HorizontalGroup>
- </Preview>
-
-
-### Props
-<Props of={HorizontalGroup} />
 
+<Preview>
+  <HorizontalGroup>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </HorizontalGroup>
+</Preview>
+<Preview>
+  <HorizontalGroup>
+    <Select
+      size="sm"
+      onChange={() => {}}
+      options={[
+        { value: 1, label: "Option 1" },
+        { value: 2, label: "Option 2" },
+      ]}
+    />
+    <Select
+      size="sm"
+      onChange={() => {}}
+      options={[
+        { value: 1, label: "Option 1" },
+        { value: 2, label: "Option 2" },
+      ]}
+    />
+    <Select
+      size="sm"
+      onChange={() => {}}
+      options={[
+        { value: 1, label: "Option 1" },
+        { value: 2, label: "Option 2" },
+      ]}
+    />
+  </HorizontalGroup>
+</Preview>
 
 ## Vertical
 
 Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them.
-<Preview>
-    <VerticalGroup>
-      <Button>Button 1</Button>
-      <Button>Button 2</Button>
-      <Button>Button 3</Button>
-    </VerticalGroup>
- </Preview>
 
- <Preview>
+<Preview>
-   <VerticalGroup justify='center'>
+  <VerticalGroup>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </VerticalGroup>
+</Preview>
+<Preview>
+  <VerticalGroup justify="center">
     <Select
-      size='sm'
+      size="sm"
       onChange={() => {}}
       options={[
-        { value: 1, label: 'Option 1' },
+        { value: 1, label: "Option 1" },
-        { value: 2, label: 'Option 2' },
+        { value: 2, label: "Option 2" },
       ]}
     />
     <Select
-      size='sm'
+      size="sm"
       onChange={() => {}}
       options={[
-        { value: 1, label: 'Option 1' },
+        { value: 1, label: "Option 1" },
-        { value: 2, label: 'Option 2' },
+        { value: 2, label: "Option 2" },
       ]}
     />
     <Select
-      size='sm'
+      size="sm"
       onChange={() => {}}
       options={[
-        { value: 1, label: 'Option 1' },
+        { value: 1, label: "Option 1" },
-        { value: 2, label: 'Option 2' },
+        { value: 2, label: "Option 2" },
       ]}
     />
-   </VerticalGroup>
+  </VerticalGroup>
- </Preview>
+</Preview>
-
-
-### Props
-<Props of={VerticalGroup} />

packages/grafana-ui/src/components/Layout/Layout.story.tsx

@@ -10,6 +10,7 @@ export default {
   title: 'Layout/Groups',
   component: Layout,
   decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory],
+  subcomponents: { HorizontalGroup, VerticalGroup },
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Legend/Legend.story.tsx

@@ -87,7 +87,7 @@ const getStoriesKnobs = (table = false) => {
   };
 };
 
-const LegendStories = storiesOf('General/Legend/Legend', module);
+const LegendStories = storiesOf('Visualizations/Legend', module);
 
 LegendStories.add('list', () => {
   const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs();

packages/grafana-ui/src/components/Modal/Modal.story.tsx

@@ -27,7 +27,7 @@ amet.`
   };
 };
 
-const ModalStories = storiesOf('General/Modal', module);
+const ModalStories = storiesOf('Overlays/Modal', module);
 ModalStories.addDecorator(withCenteredStory);
 
 ModalStories.add('default', () => {

packages/grafana-ui/src/components/QueryField/QueryField.story.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { QueryField } from './QueryField';
 
-const QueryFieldStories = storiesOf('Panel/QueryField', module);
+const QueryFieldStories = storiesOf('Data Source/QueryField', module);
 
 QueryFieldStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx

@@ -5,7 +5,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { RefreshPicker } from './RefreshPicker';
 
-const RefreshSelectStories = storiesOf('Panel/RefreshPicker', module);
+const RefreshSelectStories = storiesOf('Pickers and Editors/RefreshPicker', module);
 
 RefreshSelectStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.tsx

@@ -7,7 +7,7 @@ import { SecretFormField } from './SecretFormField';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 
-const SecretFormFieldStories = storiesOf('General/SecretFormField/SecretFormField', module);
+const SecretFormFieldStories = storiesOf('Forms/SecretFormField', module);
 
 SecretFormFieldStories.addDecorator(withCenteredStory);
 const getSecretFormFieldKnobs = () => {

packages/grafana-ui/src/components/Segment/Segment.story.tsx

@@ -45,8 +45,8 @@ export const ArrayOptions = () => {
 };
 
 export default {
-  title: 'Panel/Segment/SegmentSync',
+  title: 'Data Source/Segment/SegmentSync',
-  component: ArrayOptions,
+  component: Segment,
 };
 
 export const ArrayOptionsWithPrimitiveValue = () => {

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -49,8 +49,8 @@ export const ArrayOptions = () => {
 };
 
 export default {
-  title: 'Panel/Segment/SegmentAsync',
+  title: 'Data Source/Segment/SegmentAsync',
-  component: ArrayOptions,
+  component: SegmentAsync,
 };
 
 export const ArrayOptionsWithPrimitiveValue = () => {

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -30,8 +30,8 @@ export const BasicInput = () => {
 };
 
 export default {
-  title: 'Panel/Segment/SegmentInput',
+  title: 'Data Source/Segment/SegmentInput',
-  component: BasicInput,
+  component: SegmentInput,
 };
 
 export const BasicInputWithPlaceholder = () => {

packages/grafana-ui/src/components/Slider/Slider.story.tsx

@@ -3,7 +3,7 @@ import { Slider } from './Slider';
 import { select, number, boolean } from '@storybook/addon-knobs';
 
 export default {
-  title: 'General/Slider',
+  title: 'Forms/Slider',
   component: Slider,
 };
 

packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx

@@ -61,7 +61,7 @@ export class WrapperWithState extends PureComponent<any, State> {
   }
 }
 
-const story = storiesOf('Panel/StatsPicker', module);
+const story = storiesOf('Pickers and Editors/StatsPicker', module);
 story.addDecorator(withCenteredStory);
 story.add('picker', () => {
   const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs();

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx

@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import { DataFrame } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const TableInputStories = storiesOf('General/Experimental/TableInputCSV', module);
+const TableInputStories = storiesOf('Internal/TableInputCSV', module);
 
 TableInputStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -6,7 +6,7 @@ import { Tab } from './Tab';
 import { TabContent } from './TabContent';
 
 export default {
-  title: 'General/Tabs',
+  title: 'Layout/Tabs',
   decorators: [withCenteredStory],
 };
 

packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx

@@ -5,7 +5,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { TagsInput } from './TagsInput';
 
-const TagsInputStories = storiesOf('General/TagsInput', module);
+const TagsInputStories = storiesOf('Forms/TagsInput', module);
 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
 
 TagsInputStories.addDecorator(withCenteredStory);

packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.story.tsx

@@ -14,7 +14,7 @@ const thresholds: ThresholdsConfig = {
 };
 
 export default {
-  title: 'Panel/ThresholdsEditorNew',
+  title: 'Pickers and Editors/ThresholdsEditorNew',
   component: ThresholdsEditor,
   decorators: [withCenteredStory],
   parameters: {

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx

@@ -6,7 +6,7 @@ import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const ToggleButtonGroupStories = storiesOf('General/ToggleButtonGroup', module);
+const ToggleButtonGroupStories = storiesOf('Forms/Legacy/ToggleButtonGroup', module);
 
 const options = [
   { value: 'first', label: 'First' },

packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx

@@ -5,7 +5,7 @@ import { UnitPicker } from './UnitPicker';
 import mdx from './UnitPicker.mdx';
 
 export default {
-  title: 'General/UnitPicker',
+  title: 'Pickers and Editors/UnitPicker',
   component: UnitPicker,
   decorators: [withCenteredStory],
   parameters: {

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ValueMappingsEditor } from './ValueMappingsEditor';
 
-const ValueMappingsEditorStories = storiesOf('Panel/ValueMappingsEditor', module);
+const ValueMappingsEditorStories = storiesOf('Pickers and Editors/ValueMappingsEditor', module);
 
 ValueMappingsEditorStories.add('default', () => {
   return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;

packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { generateOptions } from '../Select/mockOptions';
 
 export default {
-  title: 'General/ValuePicker',
+  title: 'Pickers and Editors/ValuePicker',
   component: ValuePicker,
   decorators: [withCenteredStory],
 };