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>
This commit is contained in:
Tobias Skarhed 2020-04-27 15:38:30 +02:00 committed by GitHub
parent be712157e3
commit 1b9a926afc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 60 additions and 25 deletions

View File

@ -1,6 +1,6 @@
# 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)

View File

@ -1,5 +1,34 @@
<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/)

View File

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

View File

@ -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 } = {

View File

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

View File

@ -1,11 +1,11 @@
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`.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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) => {

View File

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

View File

@ -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 (

View File

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

View File

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

View File

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

View File

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

View File

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