diff --git a/packages/grafana-ui/README.md b/packages/grafana-ui/README.md index 06847c62701..ea8e3ee48de 100644 --- a/packages/grafana-ui/README.md +++ b/packages/grafana-ui/README.md @@ -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) diff --git a/packages/grafana-ui/src/Intro.story.mdx b/packages/grafana-ui/src/Intro.story.mdx index 0bd64325aec..e97c1db82d4 100644 --- a/packages/grafana-ui/src/Intro.story.mdx +++ b/packages/grafana-ui/src/Intro.story.mdx @@ -1,5 +1,34 @@ - + -# @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/) diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 3c9a42932f4..a9055562a74 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/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: { diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx index e2672caac6c..3e0f92824f8 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx +++ b/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 } = { diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx index e45a1a56942..73b1874c013 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx +++ b/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', () => ); diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx index 71a7c29a8d0..1e9195ab462 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.mdx @@ -1,11 +1,11 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # 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`. diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx index bc44f8b0207..af3e91b8c46 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx index c0a66c473a6..fcb70b2916b 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 1e98f3c635e..798cf7ddfcc 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('Forms/ConfirmButton', module) +storiesOf('Buttons/ConfirmButton', module) .addDecorator(withCenteredStory) .add('default', () => { const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs(); diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx index 051b426c588..b7447a10a02 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx +++ b/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(); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx index 0611741a5e0..04d722ccbbc 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx @@ -35,6 +35,6 @@ const Wrapper = () => { return 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', () => ); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx index e1575baac79..7aafe0e6219 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx index ce93a82192d..abb402cae79 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index 99aebb5a96f..917b6555e5a 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/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, }, diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx index ab7ab8f1088..5f1dad0bfaf 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx +++ b/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: { diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx index 99df293771e..8579b5992ae 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx +++ b/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: { diff --git a/packages/grafana-ui/src/components/List/List.story.internal.tsx b/packages/grafana-ui/src/components/List/List.story.internal.tsx index ea875b9635d..537a647ebef 100644 --- a/packages/grafana-ui/src/components/List/List.story.internal.tsx +++ b/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) => { diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx index b9d1f689be0..42bb475ad19 100644 --- a/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx +++ b/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: { diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx index 881107e7696..fa9f0aa32c3 100644 --- a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx +++ b/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 ( diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx index eaac9abfd9d..a6f00c274d2 100644 --- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx index a855646bebe..f9ee4abd70d 100644 --- a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx +++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx @@ -6,6 +6,9 @@ export default { component: ThemeColors, decorators: [], parameters: { + options: { + showPanel: false, + }, docs: {}, }, }; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx index ecfcb7bdfae..5a1c04902bd 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx index 525eea27fad..8057c6d3e2d 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx +++ b/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); diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx index e2f67a8d794..e8f53ccadb0 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx +++ b/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);