Storybook: Add intro and reorganize (#23924)

* Update Intro

* Reorganize stories

* Hide panel for ThemeColors

* Update packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx

Co-Authored-By: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update intro

* Hide panel on Icon story

* Update README

* Add link

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-ui/README.md

 # Grafana UI components library
 
-> **@grafana/toolkit is currently in ALPHA**. Core API is unstable and can be a subject of breaking changes!
+> **@grafana/ui is currently in BETA**.
 
 @grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
 

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

-<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false}, id: 1}}/>
+<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false }, id: 1 }} />
 
-# @grafana/ui
+# Grafana UI library
 
-Welcome to @grafana/ui
+> **@grafana/ui is currently in BETA**.
+
+@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
+
+If you're a plugin developer, you can use these component to give your plugin an official look-and-feel.
+
+## Get started
+
+- **Explore UI components**
+  Click on any of the component in the sidebar to see how they look, and how to configure them. Each component pages contains documentation of its properties, as well as code examples for how to use it.
+- **Try them out**
+  - Experiment with different properties, by clicking **Canvas** at the top of each component page.
+  - Change the properties under **Knobs** in the bottom panel.
+- **Use them**
+  Once you've found the right component for your use case, click the **Story** tab to see the code implementation, or look at examples under **Docs**.
+
+  For more details, refer to the [package source](https://github.com/grafana/grafana/tree/master/packages/grafana-ui).
+
+## Installation
+
+`yarn add @grafana/ui`
+
+`npm install @grafana/ui`
+
+## Related links
+
+- [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin/#0)
+- [Plugin Developer guide](https://grafana.com/docs/grafana/latest/plugins/developing/development/)
+- [Boilerplate Panel Plugin](https://github.com/grafana/simple-react-panel)
+- [Grafana Tutorials](https://grafana.com/tutorials/)

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

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

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.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('General/CallToActionCard', module);
+const CallToActionCardStories = storiesOf('Layout/CallToActionCard', module);
 
 CallToActionCardStories.add('default', () => {
   const ctaElements: { [key: string]: JSX.Element } = {

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

@@ -35,6 +35,6 @@ const Wrapper = () => {
   );
 };
 
-const story = storiesOf('General/ClipboardButton', module);
+const story = storiesOf('Buttons/ClipboardButton', module);
 story.addDecorator(withCenteredStory);
 story.add('copy to clipboard', () => <Wrapper />);

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

 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="General/ColorPicker/ColorPicker"/>
+<Meta title="Pickers and Editors/ColorPicker/ColorPicker" />
 
 # ColorPicker
 
 The `ColorPicker` component group consists of several building blocks that are combined in Grafana to create the `ColorPicker`: popover, pickers and palettes. There are different combinations of these building blocks depending on where the `ColorPicker` is used in Grafana.
 
-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 `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`.

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('General/ColorPicker/Palettes/NamedColorsPalette', module);
+const NamedColorsPaletteStories = storiesOf('Pickers and Editors/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('General/ColorPicker/Palettes/SpectrumPalette', module);
+const SpectrumPaletteStories = storiesOf('Pickers and Editors/ColorPicker/Palettes/SpectrumPalette', module);
 
 SpectrumPaletteStories.addDecorator(withCenteredStory);
 

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

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

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

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

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

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

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

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

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

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

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

@@ -14,6 +14,9 @@ export default {
   component: Icon,
   decorators: [withCenteredStory],
   parameters: {
+    options: {
+      showPanel: false,
+    },
     docs: {
       page: mdx,
     },

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

@@ -7,7 +7,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { IconSize, IconName } from '../../types';
 
 export default {
-  title: 'General/IconButton',
+  title: 'Buttons/IconButton',
   component: IconButton,
   decorators: [withCenteredStory],
   parameters: {

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

@@ -3,7 +3,7 @@ import { number } from '@storybook/addon-knobs';
 import { InfoBox } from './InfoBox';
 
 export default {
-  title: 'General/InfoBox',
+  title: 'Layout/InfoBox',
   component: InfoBox,
   decorators: [],
   parameters: {

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

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

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

@@ -11,7 +11,7 @@ export const WithPages = () => {
 };
 
 export default {
-  title: 'General/Pagination',
+  title: 'Buttons/Pagination',
   component: WithPages,
   decorators: [withCenteredStory],
   parameters: {

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('General/Spinner', module);
+const story = storiesOf('Visualizations/Spinner', module);
 story.addDecorator(withCenteredStory);
 story.add('spinner', () => {
   return (

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('Internal/TableInputCSV', module);
+const TableInputStories = storiesOf('Forms/TableInputCSV', module);
 
 TableInputStories.addDecorator(withCenteredStory);
 

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

@@ -6,6 +6,9 @@ export default {
   component: ThemeColors,
   decorators: [],
   parameters: {
+    options: {
+      showPanel: false,
+    },
     docs: {},
   },
 };

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('General/TimeOfDayPicker', module);
+const TimeOfDayPickerStories = storiesOf('Pickers and Editors/TimeOfDayPicker', module);
 
 TimeOfDayPickerStories.addDecorator(withCenteredStory);
 

packages/grafana-ui/src/components/TimePicker/TimeRangePicker.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 TimeRangePickerStories = storiesOf('General/TimeRangePicker', module);
+const TimeRangePickerStories = storiesOf('Pickers and Editors/TimeRangePicker', module);
 
 TimeRangePickerStories.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('General/TimeZonePicker', module);
+const TimeZonePickerStories = storiesOf('Pickers and Editors/TimeZonePicker', module);
 
 TimeZonePickerStories.addDecorator(withCenteredStory);