Storybook: Update categories (#21898)

* Update paths for Storybook categories

* Restructure categories

packages/grafana-ui/.storybook/preview.ts

@@ -35,6 +35,7 @@ addParameters({
   info: {},
   options: {
     showPanel: true,
+    showRoots: true,
     panelPosition: 'bottom',
     showNav: true,
     isFullscreen: false,

packages/grafana-ui/src/Intro.story.mdx

-<Meta title="Intro" parameters={{ options: { isToolshown: false}}}/>
+<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false}, id: 1}}/>
 
 # @grafana/ui
 

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

@@ -11,7 +11,7 @@ const getKnobs = () => {
   };
 };
 
-const BigValueStories = storiesOf('UI/BigValue', module);
+const BigValueStories = storiesOf('Visualizations/BigValue', module);
 
 BigValueStories.addDecorator(withCenteredStory);
 

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

@@ -7,7 +7,7 @@ import { ThemeableCombinationsRowRenderer } from '../../utils/storybook/Combinat
 import { boolean } from '@storybook/addon-knobs';
 import { getIconKnob } from '../../utils/storybook/knobs';
 
-const ButtonStories = storiesOf('UI/Button', module);
+const ButtonStories = storiesOf('General/Button', module);
 
 const defaultProps = {
   onClick: [action('Button clicked')],

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: 'UI/ButtonCascader',
+  title: 'General/ButtonCascader',
   component: ButtonCascader,
   decorators: [withKnobs, withCenteredStory],
 };

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

@@ -6,7 +6,7 @@ import { select, text } from '@storybook/addon-knobs';
 import { Button } from '../Button/Button';
 import { action } from '@storybook/addon-actions';
 
-const CallToActionCardStories = storiesOf('UI/CallToActionCard', module);
+const CallToActionCardStories = storiesOf('General/CallToActionCard', module);
 
 CallToActionCardStories.add('default', () => {
   const ctaElements: { [key: string]: JSX.Element } = {

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: 'UI/Cascader',
+  title: 'General/Cascader',
   component: Cascader,
   decorators: [withCenteredStory],
   parameters: {

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

@@ -13,7 +13,7 @@ const getColorPickerKnobs = () => {
   };
 };
 
-const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module);
+const ColorPickerStories = storiesOf('General/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('UI/ColorPicker/Popovers', module);
+const ColorPickerPopoverStories = storiesOf('General/ColorPicker/Popovers', module);
 
 ColorPickerPopoverStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -11,7 +11,7 @@ const BasicGreen = getColorDefinitionByName('green');
 const BasicRed = getColorDefinitionByName('red');
 const LightBlue = getColorDefinitionByName('light-blue');
 
-const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
+const NamedColorsPaletteStories = storiesOf('General/ColorPicker/Palettes/NamedColorsPalette', module);
 
 NamedColorsPaletteStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

@@ -5,7 +5,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
-const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
+const SpectrumPaletteStories = storiesOf('General/ColorPicker/Palettes/SpectrumPalette', module);
 
 SpectrumPaletteStories.addDecorator(withCenteredStory);
 

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

@@ -26,7 +26,7 @@ const getKnobs = () => {
   };
 };
 
-storiesOf('UI/ConfirmButton', module)
+storiesOf('General/ConfirmButton', module)
   .addDecorator(withCenteredStory)
   .add('default', () => {
     const { size, buttonText, confirmText, confirmVariant, disabled } = getKnobs();

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx

@@ -12,7 +12,7 @@ const getKnobs = () => {
   };
 };
 
-storiesOf('UI/ConfirmButton', module)
+storiesOf('General/ConfirmButton', module)
   .addDecorator(withCenteredStory)
   .add('delete button', () => {
     const { disabled, size } = getKnobs();

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

@@ -24,7 +24,7 @@ const defaultActions = {
   },
 };
 
-const ConfirmModalStories = storiesOf('UI/ConfirmModal', module);
+const ConfirmModalStories = storiesOf('General/ConfirmModal', module);
 
 ConfirmModalStories.addDecorator(withCenteredStory);
 

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

@@ -31,7 +31,7 @@ const settingsMock: DataSourceSettings<any, any> = {
   readOnly: true,
 };
 
-const DataSourceHttpSettingsStories = storiesOf('UI/DataSource/DataSourceHttpSettings', module);
+const DataSourceHttpSettingsStories = storiesOf('Panel/DataSource/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: 'UI/Drawer',
+  title: 'General/Drawer',
   component: Drawer,
   decorators: [withCenteredStory],
   parameters: {

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

@@ -14,7 +14,7 @@ const getKnobs = () => {
   };
 };
 
-const FormFieldStories = storiesOf('UI/FormField', module);
+const FormFieldStories = storiesOf('General/FormField', module);
 
 FormFieldStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/Forms/Button.story.tsx

@@ -7,7 +7,7 @@ import { ButtonSize } from '../Button/types';
 import mdx from './Button.mdx';
 
 export default {
-  title: 'UI/Forms/Button',
+  title: 'Forms/Button',
   component: Button,
   decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {

packages/grafana-ui/src/components/Forms/Checkbox.story.tsx

@@ -3,7 +3,7 @@ import mdx from './Checkbox.mdx';
 import { Checkbox } from './Checkbox';
 
 export default {
-  title: 'UI/Forms/Checkbox',
+  title: 'Forms/Checkbox',
   component: Checkbox,
   parameters: {
     docs: {

packages/grafana-ui/src/components/Forms/Field.story.tsx

@@ -6,7 +6,7 @@ import { Switch } from './Switch';
 import mdx from './Field.mdx';
 
 export default {
-  title: 'UI/Forms/Field',
+  title: 'Forms/Field',
   component: Field,
   parameters: {
     docs: {

packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx

@@ -9,7 +9,7 @@ const getKnobs = () => {
 };
 
 export default {
-  title: 'UI/Forms/FieldValidationMessage',
+  title: 'Forms/FieldValidationMessage',
   component: FieldValidationMessage,
 };
 

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -16,7 +16,7 @@ import Forms from './index';
 import mdx from './Form.mdx';
 
 export default {
-  title: 'UI/Forms/Test forms',
+  title: 'Forms/Test forms',
   decorators: [withStoryContainer, withCenteredStory],
   parameters: {
     docs: {

packages/grafana-ui/src/components/Forms/Input/Input.story.tsx

@@ -9,7 +9,7 @@ import { KeyValue } from '@grafana/data';
 import { Icon } from '../../Icon/Icon';
 
 export default {
-  title: 'UI/Forms/Input',
+  title: 'Forms/Input',
   component: Input,
   decorators: [withCenteredStory],
   parameters: {

packages/grafana-ui/src/components/Forms/Label.story.tsx

@@ -12,7 +12,7 @@ const getKnobs = () => {
 };
 
 export default {
-  title: 'UI|Forms',
+  title: 'Forms',
   component: Label,
 };
 

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

@@ -10,7 +10,7 @@ const getKnobs = () => {
   };
 };
 
-const story = storiesOf('UI/Forms', module);
+const story = storiesOf('Forms', module);
 
 story.add('Legend', () => {
   const { label } = getKnobs();

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.story.tsx

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

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx

@@ -5,7 +5,7 @@ import { RadioButtonSize } from './RadioButton';
 import { boolean, select } from '@storybook/addon-knobs';
 
 export default {
-  title: 'UI/Forms/RadioButtonGroup',
+  title: 'Forms/RadioButtonGroup',
   component: RadioButtonGroup,
   parameters: {
     docs: {

packages/grafana-ui/src/components/Forms/Select/Select.story.tsx

@@ -11,7 +11,7 @@ import { getIconKnob } from '../../../utils/storybook/knobs';
 import kebabCase from 'lodash/kebabCase';
 
 export default {
-  title: 'UI/Forms/Select',
+  title: 'General/Select',
   component: Select,
   decorators: [withCenteredStory, withHorizontallyCenteredStory],
 };

packages/grafana-ui/src/components/Forms/Switch.story.tsx

@@ -5,7 +5,7 @@ import { Switch } from './Switch';
 import mdx from './Switch.mdx';
 
 export default {
-  title: 'UI/Forms/Switch',
+  title: 'Forms/Switch',
   component: Switch,
   decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {

packages/grafana-ui/src/components/Forms/TextArea/TextArea.story.tsx

@@ -5,7 +5,7 @@ import { boolean, number, select, text } from '@storybook/addon-knobs';
 import mdx from './TextArea.mdx';
 
 export default {
-  title: 'UI/Forms/TextArea',
+  title: 'Forms/TextArea',
   component: TextArea,
   decorators: [withCenteredStory],
   parameters: {

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/Graph',
   component: Graph,
   decorators: [withCenteredStory],
 };

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

@@ -8,7 +8,7 @@ import { useTheme, selectThemeVariant } from '../../themes';
 import mdx from './Icon.mdx';
 
 export default {
-  title: 'UI/Icon',
+  title: 'General/Icon',
   component: Icon,
   decorators: [withCenteredStory],
   parameters: {

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('UI/Tooltip', module);
+const story = storiesOf('General/Tooltip', module);
 story.addDecorator(withCenteredStory);
 story.add('InfoTooltip', () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>);

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

@@ -35,6 +35,6 @@ const Wrapper = () => {
   return <Input value={value} onChange={e => setValue(e.currentTarget.value)} validationEvents={validations} />;
 };
 
-const story = storiesOf('UI/Input', module);
+const story = storiesOf('General/Input', module);
 story.addDecorator(withCenteredStory);
 story.add('input', () => <Wrapper />);

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

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

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

@@ -6,7 +6,7 @@ import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
 import { InlineList } from './InlineList';
 
-const ListStories = storiesOf('UI/List', module);
+const ListStories = storiesOf('General/List', module);
 
 const generateListItems = (numberOfItems: number) => {
   return [...new Array(numberOfItems)].map((item, i) => {

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

@@ -23,7 +23,7 @@ amet.`
   };
 };
 
-const ModalStories = storiesOf('UI/Modal', module);
+const ModalStories = storiesOf('General/Modal', module);
 
 ModalStories.addDecorator(withCenteredStory);
 

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

@@ -24,7 +24,7 @@ const getKnobs = () => {
   };
 };
 
-const PieChartStories = storiesOf('UI/PieChart/PieChart', module);
+const PieChartStories = storiesOf('Visualizations/PieChart', module);
 
 PieChartStories.addDecorator(withCenteredStory);
 

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('UI/QueryField', module);
+const QueryFieldStories = storiesOf('Panel/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('UI/RefreshPicker', module);
+const RefreshSelectStories = storiesOf('Panel/RefreshPicker', module);
 
 RefreshSelectStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/SecretFormFied/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('UI/SecretFormField/SecretFormField', module);
+const SecretFormFieldStories = storiesOf('General/SecretFormField/SecretFormField', module);
 
 SecretFormFieldStories.addDecorator(withCenteredStory);
 const getSecretFormFieldKnobs = () => {

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

@@ -44,7 +44,7 @@ export const ArrayOptions = () => {
 };
 
 export default {
-  title: 'UI/Segment/SegmentSync',
+  title: 'Panel/Segment/SegmentSync',
   component: ArrayOptions,
 };
 

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

@@ -48,7 +48,7 @@ export const ArrayOptions = () => {
 };
 
 export default {
-  title: 'UI/Segment/SegmentAsync',
+  title: 'Panel/Segment/SegmentAsync',
   component: ArrayOptions,
 };
 

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

@@ -29,7 +29,7 @@ export const BasicInput = () => {
 };
 
 export default {
-  title: 'UI/Segment/SegmentInput',
+  title: 'Panel/Segment/SegmentInput',
   component: BasicInput,
 };
 

packages/grafana-ui/src/components/Select/ButtonSelect.story.tsx

@@ -7,7 +7,7 @@ import { UseState } from '../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
 import { ButtonSelect } from './ButtonSelect';
 
-const ButtonSelectStories = storiesOf('UI/Select/ButtonSelect', module);
+const ButtonSelectStories = storiesOf('Panel/Select/ButtonSelect', module);
 
 ButtonSelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
 

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

@@ -7,7 +7,7 @@ import { UseState } from '../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
 import { Select } from './Select';
 
-const SelectStories = storiesOf('UI/Select/Select', module);
+const SelectStories = storiesOf('General/Select/Select', module);
 
 SelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
 

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

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Spinner } from './Spinner';
 
-const story = storiesOf('UI/Spinner', module);
+const story = storiesOf('General/Spinner', module);
 story.addDecorator(withCenteredStory);
 story.add('spinner', () => {
   return (

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

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

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

@@ -14,7 +14,7 @@ const getStory = (title: string, component: any) => ({
   },
 });
 
-export default getStory('UI|Switch', Switch);
+export default getStory('General/Switch', Switch);
 
 const getKnobs = () => {
   return {

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.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('UI/Table/Input', module);
+const TableInputStories = storiesOf('General/Table/Input', 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: 'UI/Tabs/TabsExample',
+  title: 'General/Tabs/TabsExample',
   decorators: [withCenteredStory],
 };
 

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

@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './TabsBar.mdx';
 
 export default {
-  title: 'UI/Tabs/TabsBar',
+  title: 'General/Tabs/TabsBar',
   component: TabsBar,
   decorators: [withCenteredStory],
   parameters: {

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('UI/TagsInput', module);
+const TagsInputStories = storiesOf('General/TagsInput', module);
 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
 
 TagsInputStories.addDecorator(withCenteredStory);

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

@@ -6,7 +6,7 @@ import { ThresholdsEditor } from './ThresholdsEditor';
 import { getTheme } from '../../themes';
 import { ThresholdsMode, ThresholdsConfig } from '@grafana/data';
 
-const ThresholdsEditorStories = storiesOf('UI/ThresholdsEditor', module);
+const ThresholdsEditorStories = storiesOf('Panel/ThresholdsEditor', module);
 const thresholds: ThresholdsConfig = {
   mode: ThresholdsMode.Absolute,
   steps: [

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx

@@ -7,7 +7,7 @@ import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { dateTime } from '@grafana/data';
 
-const TimeOfDayPickerStories = storiesOf('UI/TimeOfDayPicker', module);
+const TimeOfDayPickerStories = storiesOf('General/TimeOfDayPicker', module);
 
 TimeOfDayPickerStories.addDecorator(withCenteredStory);
 

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

@@ -7,7 +7,7 @@ import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimeFragment, dateTime } from '@grafana/data';
 
-const TimePickerStories = storiesOf('UI/TimePicker', module);
+const TimePickerStories = storiesOf('General/TimePicker', module);
 
 TimePickerStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx

@@ -6,7 +6,7 @@ import { TimeZonePicker } from './TimeZonePicker';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const TimeZonePickerStories = storiesOf('UI/TimeZonePicker', module);
+const TimeZonePickerStories = storiesOf('General/TimeZonePicker', module);
 
 TimeZonePickerStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.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('UI/ToggleButtonGroup', module);
+const ToggleButtonGroupStories = storiesOf('General/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: 'UI/UnitPicker',
+  title: 'General/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('UI/ValueMappingsEditor', module);
+const ValueMappingsEditorStories = storiesOf('Panel/ValueMappingsEditor', module);
 
 ValueMappingsEditorStories.add('default', () => {
   return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;

packages/grafana-ui/src/utils/useDelayedSwitch.story.tsx

@@ -19,7 +19,7 @@ function StoryWrapper() {
   return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
 }
 
-const story = storiesOf('Utils/useDelayedSwitch', module);
+const story = storiesOf('useDelayedSwitch', module);
 story.addDecorator(withCenteredStory);
 story.add('useDelayedSwitch', () => {
   return <StoryWrapper />;