Skip to content

N
nexpie-grafana-theme
Commit 15c44f3d by Jess Committed by GitHub
Options

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
parent e2436b29
Showing with 46 additions and 37 deletions
packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
import { storiesOf } from '@storybook/react';
import { number, text } from '@storybook/addon-knobs'; import { number, text } from '@storybook/addon-knobs';
import { BarGauge, Props, BarGaugeDisplayMode } from './BarGauge'; import { BarGauge, Props, BarGaugeDisplayMode } from './BarGauge';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data'; import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
...@@ -18,12 +17,13 @@ const getKnobs = () => { ...@@ -18,12 +17,13 @@ const getKnobs = () => {
}; };
}; };
const BarGaugeStories = storiesOf('Visualizations/BarGauge', module); export default {
title: 'Visualizations/BarGauge',
BarGaugeStories.addDecorator(withCenteredStory); component: BarGauge,
decorators: [withCenteredStory],
};
function addBarGaugeStory(name: string, overrides: Partial<Props>) { function addBarGaugeStory(overrides: Partial<Props>) {
BarGaugeStories.add(name, () => {
const { const {
value, value,
title, title,
...@@ -69,24 +69,23 @@ function addBarGaugeStory(name: string, overrides: Partial<Props>) { ...@@ -69,24 +69,23 @@ function addBarGaugeStory(name: string, overrides: Partial<Props>) {
Object.assign(props, overrides); Object.assign(props, overrides);
return renderComponentWithTheme(BarGauge, props); return renderComponentWithTheme(BarGauge, props);
});
} }
addBarGaugeStory('Gradient Vertical', { export const gradientVertical = addBarGaugeStory({
displayMode: BarGaugeDisplayMode.Gradient, displayMode: BarGaugeDisplayMode.Gradient,
orientation: VizOrientation.Vertical, orientation: VizOrientation.Vertical,
height: 500, height: 500,
width: 100, width: 100,
}); });
addBarGaugeStory('Gradient Horizontal', { export const gradientHorizontal = addBarGaugeStory({
displayMode: BarGaugeDisplayMode.Gradient, displayMode: BarGaugeDisplayMode.Gradient,
orientation: VizOrientation.Horizontal, orientation: VizOrientation.Horizontal,
height: 100, height: 100,
width: 500, width: 500,
}); });
addBarGaugeStory('LCD Horizontal', { export const lcdHorizontal = addBarGaugeStory({
displayMode: BarGaugeDisplayMode.Lcd, displayMode: BarGaugeDisplayMode.Lcd,
orientation: VizOrientation.Vertical, orientation: VizOrientation.Vertical,
height: 500, height: 500,
......
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import { CallToActionCard } from './CallToActionCard'; import { CallToActionCard } from './CallToActionCard';
import { select, text } from '@storybook/addon-knobs'; import { select, text } from '@storybook/addon-knobs';
import { Button } from '../Button/Button'; import { Button } from '../Button/Button';
import { action } from '@storybook/addon-actions'; 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 } = { const ctaElements: { [key: string]: JSX.Element } = {
custom: <h1>This is just H1 tag, you can any component as CTA element</h1>, custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
button: ( button: (
...@@ -31,4 +33,4 @@ CallToActionCardStories.add('default', () => { ...@@ -31,4 +33,4 @@ CallToActionCardStories.add('default', () => {
callToActionElement: ctaElements[ctaElement], callToActionElement: ctaElements[ctaElement],
footer: text('Call to action footer', 'Renders footer prop content'), footer: text('Call to action footer', 'Renders footer prop content'),
}); });
}); };
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ClipboardButton } from './ClipboardButton'; import { ClipboardButton } from './ClipboardButton';
import { Input } from '../Forms/Legacy/Input/Input'; import { Input } from '../Forms/Legacy/Input/Input';
...@@ -35,6 +34,10 @@ const Wrapper = () => { ...@@ -35,6 +34,10 @@ const Wrapper = () => {
); );
}; };
const story = storiesOf('Buttons/ClipboardButton', module); export default {
story.addDecorator(withCenteredStory); title: 'Buttons/ClipboardButton',
story.add('copy to clipboard', () => <Wrapper />); component: ClipboardButton,
decorators: [withCenteredStory],
};
export const copyToClipboard = () => <Wrapper />;
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { text, boolean, select } from '@storybook/addon-knobs'; import { text, boolean, select } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
...@@ -24,11 +23,13 @@ const defaultActions = { ...@@ -24,11 +23,13 @@ const defaultActions = {
}, },
}; };
const ConfirmModalStories = storiesOf('Overlays/ConfirmModal', module); export default {
title: 'Overlays/ConfirmModal',
ConfirmModalStories.addDecorator(withCenteredStory); component: ConfirmModal,
decorators: [withCenteredStory],
};
ConfirmModalStories.add('default', () => { export const basic = () => {
const { title, body, confirm, icon, visible } = getKnobs(); const { title, body, confirm, icon, visible } = getKnobs();
const { onConfirm, onDismiss } = defaultActions; const { onConfirm, onDismiss } = defaultActions;
return ( return (
...@@ -42,4 +43,4 @@ ConfirmModalStories.add('default', () => { ...@@ -42,4 +43,4 @@ ConfirmModalStories.add('default', () => {
onDismiss={onDismiss} onDismiss={onDismiss}
/> />
); );
}); };
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
...@@ -9,7 +9,7 @@ import { HorizontalGroup } from '..'; ...@@ -9,7 +9,7 @@ import { HorizontalGroup } from '..';
const defaultIcon: IconName = 'exclamation-triangle'; const defaultIcon: IconName = 'exclamation-triangle';
interface Props { export interface Props {
isOpen: boolean; isOpen: boolean;
title: string; title: string;
body: React.ReactNode; body: React.ReactNode;
......
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { DataSourceHttpSettings } from './DataSourceHttpSettings'; import { DataSourceHttpSettings } from './DataSourceHttpSettings';
import { DataSourceSettings } from '@grafana/data'; import { DataSourceSettings } from '@grafana/data';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
...@@ -31,9 +31,12 @@ const settingsMock: DataSourceSettings<any, any> = { ...@@ -31,9 +31,12 @@ const settingsMock: DataSourceSettings<any, any> = {
readOnly: true, readOnly: true,
}; };
const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module); export default {
title: 'Data Source/DataSourceHttpSettings',
component: DataSourceHttpSettings,
};
DataSourceHttpSettingsStories.add('default', () => { export const basic = () => {
return ( return (
<UseState initialState={settingsMock} logState> <UseState initialState={settingsMock} logState>
{(dataSourceSettings, updateDataSourceSettings) => { {(dataSourceSettings, updateDataSourceSettings) => {
...@@ -48,4 +51,4 @@ DataSourceHttpSettingsStories.add('default', () => { ...@@ -48,4 +51,4 @@ DataSourceHttpSettingsStories.add('default', () => {
}} }}
</UseState> </UseState>
); );
}); };
packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { number, text } from '@storybook/addon-knobs'; import { number, text } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
...@@ -14,16 +13,18 @@ const getKnobs = () => { ...@@ -14,16 +13,18 @@ const getKnobs = () => {
}; };
}; };
const FormFieldStories = storiesOf('Forms/Legacy/FormField', module); export default {
title: 'Forms/Legacy/FormField',
FormFieldStories.addDecorator(withCenteredStory); component: FormField,
decorators: [withCenteredStory],
};
FormFieldStories.add('default', () => { export const basic = () => {
const { inputWidth, label, labelWidth } = getKnobs(); const { inputWidth, label, labelWidth } = getKnobs();
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />; return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
}); };
FormFieldStories.add('with tooltip', () => { export const withTooltip = () => {
const { inputWidth, label, labelWidth, tooltip } = getKnobs(); const { inputWidth, label, labelWidth, tooltip } = getKnobs();
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />; return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />;
}); };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment