From 15c44f3db54ceead73d9e2039b2a06581abd8556 Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Thu, 30 Apr 2020 12:58:17 +0200 Subject: [PATCH] Storybook csf conversion (#24084) * Convert ClipboardButton to CSF * Convert CallToActionCard to CSF * Convert BarGauge to CSF * Convert DataSourceHttpSettings to CSF * Convert ConfirmModal to CSF * Convert FormField to CSF --- .../components/BarGauge/BarGauge.story.tsx | 101 +++++++++--------- .../CallToActionCard.story.internal.tsx | 10 +- .../ClipboardButton.story.internal.tsx | 11 +- .../ConfirmModal/ConfirmModal.story.tsx | 13 +-- .../components/ConfirmModal/ConfirmModal.tsx | 2 +- .../DataSourceHttpSettings.story.tsx | 11 +- .../FormField/FormField.story.internal.tsx | 17 +-- 7 files changed, 87 insertions(+), 78 deletions(-) diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index f595a1ac4da..5a8364119b5 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react'; import { number, text } from '@storybook/addon-knobs'; import { BarGauge, Props, BarGaugeDisplayMode } from './BarGauge'; import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data'; @@ -18,75 +17,75 @@ const getKnobs = () => { }; }; -const BarGaugeStories = storiesOf('Visualizations/BarGauge', module); +export default { + title: 'Visualizations/BarGauge', + component: BarGauge, + decorators: [withCenteredStory], +}; -BarGaugeStories.addDecorator(withCenteredStory); +function addBarGaugeStory(overrides: Partial) { + const { + value, + title, + minValue, + maxValue, + threshold1Color, + threshold2Color, + threshold1Value, + threshold2Value, + } = getKnobs(); -function addBarGaugeStory(name: string, overrides: Partial) { - BarGaugeStories.add(name, () => { - const { - value, - title, - minValue, - maxValue, - threshold1Color, - threshold2Color, - threshold1Value, - threshold2Value, - } = getKnobs(); - - const field: Partial = { - type: FieldType.number, - config: { - min: minValue, - max: maxValue, - thresholds: { - mode: ThresholdsMode.Absolute, - steps: [ - { value: -Infinity, color: 'green' }, - { value: threshold1Value, color: threshold1Color }, - { value: threshold2Value, color: threshold2Color }, - ], - }, + const field: Partial = { + type: FieldType.number, + config: { + min: minValue, + max: maxValue, + thresholds: { + mode: ThresholdsMode.Absolute, + steps: [ + { value: -Infinity, color: 'green' }, + { value: threshold1Value, color: threshold1Color }, + { value: threshold2Value, color: threshold2Color }, + ], }, - }; - field.display = getDisplayProcessor({ field }); + }, + }; + field.display = getDisplayProcessor({ field }); - const props: Props = { - theme: {} as any, - width: 300, - height: 300, - value: { - text: value.toString(), - title: title, - numeric: value, - }, - orientation: VizOrientation.Vertical, - displayMode: BarGaugeDisplayMode.Basic, - field: field.config!, - display: field.display!, - }; + const props: Props = { + theme: {} as any, + width: 300, + height: 300, + value: { + text: value.toString(), + title: title, + numeric: value, + }, + orientation: VizOrientation.Vertical, + displayMode: BarGaugeDisplayMode.Basic, + field: field.config!, + display: field.display!, + }; - Object.assign(props, overrides); - return renderComponentWithTheme(BarGauge, props); - }); + Object.assign(props, overrides); + return renderComponentWithTheme(BarGauge, props); } -addBarGaugeStory('Gradient Vertical', { +export const gradientVertical = addBarGaugeStory({ displayMode: BarGaugeDisplayMode.Gradient, orientation: VizOrientation.Vertical, height: 500, width: 100, }); -addBarGaugeStory('Gradient Horizontal', { +export const gradientHorizontal = addBarGaugeStory({ displayMode: BarGaugeDisplayMode.Gradient, orientation: VizOrientation.Horizontal, height: 100, width: 500, }); -addBarGaugeStory('LCD Horizontal', { +export const lcdHorizontal = addBarGaugeStory({ displayMode: BarGaugeDisplayMode.Lcd, orientation: VizOrientation.Vertical, height: 500, 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 3e0f92824f8..5d2fe05430f 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx @@ -1,14 +1,16 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { CallToActionCard } from './CallToActionCard'; import { select, text } from '@storybook/addon-knobs'; import { Button } from '../Button/Button'; import { action } from '@storybook/addon-actions'; -const CallToActionCardStories = storiesOf('Layout/CallToActionCard', module); +export default { + title: 'Layout/CallToActionCard', + component: CallToActionCard, +}; -CallToActionCardStories.add('default', () => { +export const basic = () => { const ctaElements: { [key: string]: JSX.Element } = { custom:

This is just H1 tag, you can any component as CTA element

, button: ( @@ -31,4 +33,4 @@ CallToActionCardStories.add('default', () => { callToActionElement: ctaElements[ctaElement], footer: text('Call to action footer', 'Renders footer prop content'), }); -}); +}; 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 73b1874c013..f37b6a4a158 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx +++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; -import { storiesOf } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ClipboardButton } from './ClipboardButton'; import { Input } from '../Forms/Legacy/Input/Input'; @@ -35,6 +34,10 @@ const Wrapper = () => { ); }; -const story = storiesOf('Buttons/ClipboardButton', module); -story.addDecorator(withCenteredStory); -story.add('copy to clipboard', () => ); +export default { + title: 'Buttons/ClipboardButton', + component: ClipboardButton, + decorators: [withCenteredStory], +}; + +export const copyToClipboard = () => ; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx index ef49fc25ea2..226b0df5d3f 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { text, boolean, select } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -24,11 +23,13 @@ const defaultActions = { }, }; -const ConfirmModalStories = storiesOf('Overlays/ConfirmModal', module); +export default { + title: 'Overlays/ConfirmModal', + component: ConfirmModal, + decorators: [withCenteredStory], +}; -ConfirmModalStories.addDecorator(withCenteredStory); - -ConfirmModalStories.add('default', () => { +export const basic = () => { const { title, body, confirm, icon, visible } = getKnobs(); const { onConfirm, onDismiss } = defaultActions; return ( @@ -42,4 +43,4 @@ ConfirmModalStories.add('default', () => { onDismiss={onDismiss} /> ); -}); +}; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index be841a841ae..79a49beb76d 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -9,7 +9,7 @@ import { HorizontalGroup } from '..'; const defaultIcon: IconName = 'exclamation-triangle'; -interface Props { +export interface Props { isOpen: boolean; title: string; body: React.ReactNode; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx index a07a066585a..2af5d141daf 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; + import { DataSourceHttpSettings } from './DataSourceHttpSettings'; import { DataSourceSettings } from '@grafana/data'; import { UseState } from '../../utils/storybook/UseState'; @@ -31,9 +31,12 @@ const settingsMock: DataSourceSettings = { readOnly: true, }; -const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module); +export default { + title: 'Data Source/DataSourceHttpSettings', + component: DataSourceHttpSettings, +}; -DataSourceHttpSettingsStories.add('default', () => { +export const basic = () => { return ( {(dataSourceSettings, updateDataSourceSettings) => { @@ -48,4 +51,4 @@ DataSourceHttpSettingsStories.add('default', () => { }} ); -}); +}; diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx index 754f98bf505..776b9bad4a5 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { number, text } from '@storybook/addon-knobs'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -14,16 +13,18 @@ const getKnobs = () => { }; }; -const FormFieldStories = storiesOf('Forms/Legacy/FormField', module); +export default { + title: 'Forms/Legacy/FormField', + component: FormField, + decorators: [withCenteredStory], +}; -FormFieldStories.addDecorator(withCenteredStory); - -FormFieldStories.add('default', () => { +export const basic = () => { const { inputWidth, label, labelWidth } = getKnobs(); return ; -}); +}; -FormFieldStories.add('with tooltip', () => { +export const withTooltip = () => { const { inputWidth, label, labelWidth, tooltip } = getKnobs(); return ; -}); +};