From 37b1ae32cc04e2fdc3b14ceaf95a827f5f1eb70d Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Thu, 30 Apr 2020 13:30:23 +0200 Subject: [PATCH] More Storybook csf conversion (#24090) * Convert ClipboardButton to CSF * Convert CallToActionCard to CSF * Convert BarGauge to CSF * Convert DataSourceHttpSettings to CSF * Convert ConfirmModal to CSF * Convert FormField to CSF * Convert Input to CSF * Convert ButtonSelect to CSF * Removed unused import from ButtonSelect story * Convert InfoTooltip to CSF * Convert List to CSF * Convert QueryField to CSF * Convert RefreshPicker to CSF * Convert SecretFormField to CSF --- .../Forms/Legacy/Input/Input.story.internal.tsx | 11 +++++++---- .../Legacy/Select/ButtonSelect.story.internal.tsx | 13 +++++++------ .../src/components/Forms/Legend.story.tsx | 10 ++++++---- .../components/InfoTooltip/InfoTooltip.story.tsx | 12 ++++++++---- .../src/components/List/List.story.internal.tsx | 14 ++++++++------ .../src/components/QueryField/QueryField.story.tsx | 13 +++++++------ .../RefreshPicker/RefreshPicker.story.tsx | 13 +++++++------ .../SecretFormField.story.internal.tsx | 12 +++++++----- 8 files changed, 57 insertions(+), 41 deletions(-) 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 04d722ccbbc..a2b831be7fb 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 @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { zip, fromPairs } from 'lodash'; -import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory'; import { Input } from './Input'; import { text, select } from '@storybook/addon-knobs'; @@ -35,6 +34,10 @@ const Wrapper = () => { return setValue(e.currentTarget.value)} validationEvents={validations} />; }; -const story = storiesOf('Forms/Legacy/Input', module); -story.addDecorator(withCenteredStory); -story.add('input', () => ); +export default { + title: 'Forms/Legacy/Input', + component: Input, + decorators: [withCenteredStory], +}; + +export const basic = () => ; 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 7aafe0e6219..881d540bf0b 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 @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, object, text } from '@storybook/addon-knobs'; import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory'; @@ -7,11 +6,13 @@ import { UseState } from '../../../../utils/storybook/UseState'; import { SelectableValue } from '@grafana/data'; import { ButtonSelect } from './ButtonSelect'; -const ButtonSelectStories = storiesOf('Forms/Select/ButtonSelect', module); +export default { + title: 'Forms/Select/ButtonSelect', + component: ButtonSelect, + decorators: [withCenteredStory, withKnobs], +}; -ButtonSelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs); - -ButtonSelectStories.add('default', () => { +export const basic = () => { const intialState: SelectableValue = { label: 'A label', value: 'A value' }; const value = object>('Selected Value:', intialState); const options = object>>('Options:', [ @@ -38,4 +39,4 @@ ButtonSelectStories.add('default', () => { }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/Forms/Legend.story.tsx b/packages/grafana-ui/src/components/Forms/Legend.story.tsx index 2eb2b3be0c2..f119641deda 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Legend.story.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { text } from '@storybook/addon-knobs'; import { Legend } from './Legend'; @@ -10,10 +9,13 @@ const getKnobs = () => { }; }; -const story = storiesOf('Forms', module); +export default { + title: 'Forms/Legend', + component: Legend, +}; -story.add('Legend', () => { +export const basic = () => { const { label } = getKnobs(); return {label}; -}); +}; diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx index 4323afab164..e976abf0eb0 100644 --- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx +++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { InfoTooltip } from './InfoTooltip'; +import { Tooltip } from '../Chart/Tooltip'; -const story = storiesOf('Overlays/Tooltip', module); -story.addDecorator(withCenteredStory); -story.add('InfoTooltip', () => This is the content of the tooltip); +export default { + title: 'Overlays/Tooltip', + component: Tooltip, + decorators: [withCenteredStory], +}; + +export const basic = () => This is the content of the tooltip; 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 537a647ebef..98577a29e61 100644 --- a/packages/grafana-ui/src/components/List/List.story.internal.tsx +++ b/packages/grafana-ui/src/components/List/List.story.internal.tsx @@ -1,12 +1,14 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { number, select } from '@storybook/addon-knobs'; import { List } from './List'; import { css, cx } from 'emotion'; import tinycolor from 'tinycolor2'; import { InlineList } from './InlineList'; -const ListStories = storiesOf('Layout/List', module); +export default { + title: 'Layout/List', + component: List, +}; const generateListItems = (numberOfItems: number) => { return [...new Array(numberOfItems)].map((item, i) => { @@ -57,12 +59,12 @@ const getStoriesKnobs = (inline = false) => { }; }; -ListStories.add('default', () => { +export const basic = () => { const { numberOfItems, renderItem } = getStoriesKnobs(); return ; -}); +}; -ListStories.add('inline', () => { +export const inline = () => { const { numberOfItems, renderItem } = getStoriesKnobs(true); return ; -}); +}; diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx index 62db5d0f68d..98abf95b34a 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { QueryField } from './QueryField'; -const QueryFieldStories = storiesOf('Data Source/QueryField', module); +export default { + title: 'Data Source/QueryField', + component: QueryField, + decorators: [withCenteredStory], +}; -QueryFieldStories.addDecorator(withCenteredStory); - -QueryFieldStories.add('default', () => { +export const basic = () => { return ; -}); +}; diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx index 6a2ac846569..f4ec91d6827 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx @@ -1,15 +1,16 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { UseState } from '../../utils/storybook/UseState'; import { RefreshPicker } from './RefreshPicker'; -const RefreshSelectStories = storiesOf('Pickers and Editors/RefreshPicker', module); +export default { + title: 'Pickers and Editors/RefreshPicker', + component: RefreshPicker, + decorators: [withCenteredStory], +}; -RefreshSelectStories.addDecorator(withCenteredStory); - -RefreshSelectStories.add('default', () => { +export const basic = () => { return ( {(value, updateValue) => { @@ -29,4 +30,4 @@ RefreshSelectStories.add('default', () => { }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx index c9c0324d4d0..b9532685d99 100644 --- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx +++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { boolean } from '@storybook/addon-knobs'; @@ -7,16 +6,19 @@ import { SecretFormField } from './SecretFormField'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { UseState } from '../../utils/storybook/UseState'; -const SecretFormFieldStories = storiesOf('Forms/SecretFormField', module); +export default { + title: 'Forms/SecretFormField', + component: SecretFormField, + decorators: [withCenteredStory], +}; -SecretFormFieldStories.addDecorator(withCenteredStory); const getSecretFormFieldKnobs = () => { return { isConfigured: boolean('Set configured state', false), }; }; -SecretFormFieldStories.add('default', () => { +export const basic = () => { const knobs = getSecretFormFieldKnobs(); return ( @@ -35,4 +37,4 @@ SecretFormFieldStories.add('default', () => { )} ); -}); +};