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

packages/grafana-ui/src/components/Spinner/Spinner.story.tsx

 import React from 'react';
 import React from 'react';
 
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Spinner } from './Spinner';
 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 (
   return (
     <div>
     <div>
       <Spinner />
       <Spinner />
     </div>
     </div>
   );
   );
-});
+};

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx

 import React from 'react';
 import React from 'react';
 
 
-import { storiesOf } from '@storybook/react';
 import TableInputCSV from './TableInputCSV';
 import TableInputCSV from './TableInputCSV';
 import { action } from '@storybook/addon-actions';
 import { action } from '@storybook/addon-actions';
 import { DataFrame } from '@grafana/data';
 import { DataFrame } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 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 (
   return (
     <TableInputCSV
     <TableInputCSV
       width={400}
       width={400}
@@ -22,4 +23,4 @@ TableInputStories.add('default', () => {
       }}
       }}
     />
     />
   );
   );
-});
+};

packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx

 import React from 'react';
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { action } from '@storybook/addon-actions';
 
 
 import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
 import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
 import { UseState } from '../../utils/storybook/UseState';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 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 = [
 const options = [
   { value: 'first', label: 'First' },
   { value: 'first', label: 'First' },
@@ -14,9 +17,7 @@ const options = [
   { value: 'third', label: 'Third' },
   { value: 'third', label: 'Third' },
 ];
 ];
 
 
-ToggleButtonGroupStories.addDecorator(withCenteredStory);
-
-ToggleButtonGroupStories.add('default', () => {
+export const basic = () => {
   return (
   return (
     <UseState
     <UseState
       initialState={{
       initialState={{
@@ -46,4 +47,4 @@ ToggleButtonGroupStories.add('default', () => {
       }}
       }}
     </UseState>
     </UseState>
   );
   );
-});
+};

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx

 import React from 'react';
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { action } from '@storybook/addon-actions';
 import { ValueMappingsEditor } from './ValueMappingsEditor';
 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')} />;
   return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;
-});
+};

packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx

 import React from 'react';
 import React from 'react';
 
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from './storybook/withCenteredStory';
 import { withCenteredStory } from './storybook/withCenteredStory';
 import { useDelayedSwitch } from './useDelayedSwitch';
 import { useDelayedSwitch } from './useDelayedSwitch';
 import { boolean, number } from '@storybook/addon-knobs';
 import { boolean, number } from '@storybook/addon-knobs';
@@ -19,8 +18,11 @@ function StoryWrapper() {
   return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
   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 />;
   return <StoryWrapper />;
-});
+};