From ab60a8d37acc25f31549c63d6dac0279c568c44e Mon Sep 17 00:00:00 2001
From: Jess <53754871+jessover9000@users.noreply.github.com>
Date: Thu, 30 Apr 2020 16:00:05 +0200
Subject: [PATCH] Another storybook csf conversion (#24097)

* Convert Spinner to CSF

* Convert TableInputCSV to CSF

* Convert ToggleButtonGroup to CSF

* Convert ValueMappingsEditor to CSF

* Convert useDelayedSwitch to CSF
---
 .../src/components/Spinner/Spinner.story.tsx        | 13 ++++++++-----
 .../TableInputCSV/TableInputCSV.story.internal.tsx  | 13 +++++++------
 .../ToggleButtonGroup.story.internal.tsx            | 13 +++++++------
 .../ValueMappingsEditor.story.tsx                   | 10 ++++++----
 .../src/utils/useDelayedSwitch.story.internal.tsx   | 12 +++++++-----
 5 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
index fa9f0aa32c3..d9b77073ca0 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
+++ b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Spinner } from './Spinner';
 
-const story = storiesOf('Visualizations/Spinner', module);
-story.addDecorator(withCenteredStory);
-story.add('spinner', () => {
+export default {
+  title: 'Visualizations/Spinner',
+  component: Spinner,
+  decorators: [withCenteredStory],
+};
+
+export const basic = () => {
   return (
     <div>
       <Spinner />
     </div>
   );
-});
+};
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 a6f00c274d2..ca4ba226f89 100644
--- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx
+++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import TableInputCSV from './TableInputCSV';
 import { action } from '@storybook/addon-actions';
 import { DataFrame } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const TableInputStories = storiesOf('Forms/TableInputCSV', module);
+export default {
+  title: 'Forms/TableInputCSV',
+  component: TableInputCSV,
+  decorators: [withCenteredStory],
+};
 
-TableInputStories.addDecorator(withCenteredStory);
-
-TableInputStories.add('default', () => {
+export const basic = () => {
   return (
     <TableInputCSV
       width={400}
@@ -22,4 +23,4 @@ TableInputStories.add('default', () => {
       }}
     />
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx
index c85d6c1a395..e55e3984417 100644
--- a/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx
+++ b/packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const ToggleButtonGroupStories = storiesOf('Forms/Legacy/ToggleButtonGroup', module);
+export default {
+  title: 'Forms/Legacy/ToggleButtonGroup',
+  component: ToggleButtonGroup,
+  decorators: [withCenteredStory],
+};
 
 const options = [
   { value: 'first', label: 'First' },
@@ -14,9 +17,7 @@ const options = [
   { value: 'third', label: 'Third' },
 ];
 
-ToggleButtonGroupStories.addDecorator(withCenteredStory);
-
-ToggleButtonGroupStories.add('default', () => {
+export const basic = () => {
   return (
     <UseState
       initialState={{
@@ -46,4 +47,4 @@ ToggleButtonGroupStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
index e06bc8a5ad2..e2a9e0140ad 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ValueMappingsEditor } from './ValueMappingsEditor';
 
-const ValueMappingsEditorStories = storiesOf('Pickers and Editors/ValueMappingsEditor', module);
+export default {
+  title: 'Pickers and Editors/ValueMappingsEditor',
+  component: ValueMappingsEditor,
+};
 
-ValueMappingsEditorStories.add('default', () => {
+export const basic = () => {
   return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;
-});
+};
diff --git a/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx b/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
index 9a62b099f2b..e7cd9e629c2 100644
--- a/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
+++ b/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from './storybook/withCenteredStory';
 import { useDelayedSwitch } from './useDelayedSwitch';
 import { boolean, number } from '@storybook/addon-knobs';
@@ -19,8 +18,11 @@ function StoryWrapper() {
   return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
 }
 
-const story = storiesOf('useDelayedSwitch', module);
-story.addDecorator(withCenteredStory);
-story.add('useDelayedSwitch', () => {
+export default {
+  title: 'useDelayedSwitch',
+  decorators: [withCenteredStory],
+};
+
+export const basic = () => {
   return <StoryWrapper />;
-});
+};