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 87 additions and 78 deletions
packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
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);
BarGaugeStories.addDecorator(withCenteredStory);
export default {
title: 'Visualizations/BarGauge',
component: BarGauge,
decorators: [withCenteredStory],
};
function addBarGaugeStory(name: string, overrides: Partial<Props>) {
BarGaugeStories.add(name, () => {
const {
value,
title,
minValue,
maxValue,
threshold1Color,
threshold2Color,
threshold1Value,
threshold2Value,
} = getKnobs();
function addBarGaugeStory(overrides: Partial<Props>) {
const {
value,
title,
minValue,
maxValue,
threshold1Color,
threshold2Color,
threshold1Value,
threshold2Value,
} = getKnobs();
const field: Partial<Field> = {
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<Field> = {
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,
......
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx
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: <h1>This is just H1 tag, you can any component as CTA element</h1>,
button: (
......@@ -31,4 +33,4 @@ CallToActionCardStories.add('default', () => {
callToActionElement: ctaElements[ctaElement],
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 { 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', () => <Wrapper />);
export default {
title: 'Buttons/ClipboardButton',
component: ClipboardButton,
decorators: [withCenteredStory],
};
export const copyToClipboard = () => <Wrapper />;
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
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);
ConfirmModalStories.addDecorator(withCenteredStory);
export default {
title: 'Overlays/ConfirmModal',
component: ConfirmModal,
decorators: [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}
/>
);
});
};
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;
......
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
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<any, any> = {
readOnly: true,
};
const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module);
export default {
title: 'Data Source/DataSourceHttpSettings',
component: DataSourceHttpSettings,
};
DataSourceHttpSettingsStories.add('default', () => {
export const basic = () => {
return (
<UseState initialState={settingsMock} logState>
{(dataSourceSettings, updateDataSourceSettings) => {
......@@ -48,4 +51,4 @@ DataSourceHttpSettingsStories.add('default', () => {
}}
</UseState>
);
});
};
packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx
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);
FormFieldStories.addDecorator(withCenteredStory);
export default {
title: 'Forms/Legacy/FormField',
component: FormField,
decorators: [withCenteredStory],
};
FormFieldStories.add('default', () => {
export const basic = () => {
const { inputWidth, label, labelWidth } = getKnobs();
return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
});
};
FormFieldStories.add('with tooltip', () => {
export const withTooltip = () => {
const { inputWidth, label, labelWidth, tooltip } = getKnobs();
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