Use Component Story Format for stories (#8108)

The recommended way of writing stories changed in Storybook v5.2 to
the Component Story Format (CSF). Instead of using `storiesOf` and
running everything upon module import, the new story format is a
declarative description of each component that uses ES6 import
semantics.

ui/app/components/ui/button-group/button-group.stories.js

@@ -1,12 +1,14 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import ButtonGroup from '.'
 import Button from '../button'
 import { text, boolean } from '@storybook/addon-knobs/react'
 
-storiesOf('ButtonGroup', module)
-  .add('with Buttons', () => (
+export default {
+  title: 'ButtonGroup',
+}
+
+export const withButtons = () => (
   <ButtonGroup
     style={{ width: '300px' }}
     disabled={boolean('Disabled', false)}
@@ -28,8 +30,9 @@ storiesOf('ButtonGroup', module)
       {text('Button3', 'Fast')}
     </Button>
   </ButtonGroup>
-  ))
-  .add('with a disabled Button', () => (
+)
+
+export const withDisabledButton = () => (
   <ButtonGroup
     style={{ width: '300px' }}
     disabled={boolean('Disabled', false)}
@@ -46,4 +49,4 @@ storiesOf('ButtonGroup', module)
       {text('Button2', 'Disabled')}
     </Button>
   </ButtonGroup>
-  ))
+)

ui/app/components/ui/button/button.stories.js

@@ -1,12 +1,13 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import Button from '.'
 import { text, boolean } from '@storybook/addon-knobs/react'
 
-// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
-storiesOf('Button', module)
-  .add('Button - Primary', () => (
+export default {
+  title: 'Button',
+}
+
+export const primaryType = () => (
   <Button
     onClick={action('clicked')}
     type="primary"
@@ -14,8 +15,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Secondary', () => (
+)
+
+export const secondaryType = () => (
   <Button
     onClick={action('clicked')}
     type="secondary"
@@ -23,8 +25,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Default', () => (
+)
+
+export const defaultType = () => (
   <Button
     onClick={action('clicked')}
     type="default"
@@ -32,8 +35,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Warning', () => (
+)
+
+export const warningType = () => (
   <Button
     onClick={action('clicked')}
     type="warning"
@@ -41,8 +45,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Danger', () => (
+)
+
+export const dangerType = () => (
   <Button
     onClick={action('clicked')}
     type="danger"
@@ -50,8 +55,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Danger Primary', () => (
+)
+
+export const dangerPrimaryType = () => (
   <Button
     onClick={action('clicked')}
     type="danger-primary"
@@ -59,8 +65,9 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
-  .add('Button - Link', () => (
+)
+
+export const linkType = () => (
   <Button
     onClick={action('clicked')}
     type="link"
@@ -68,4 +75,4 @@ storiesOf('Button', module)
   >
     {text('text', 'Click me')}
   </Button>
-  ))
+)

ui/app/components/ui/text-field/text-field.stories.js

@@ -1,53 +1,61 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import TextField from '.'
 
-storiesOf('TextField', module)
-  .add('text', () => (
+export default {
+  title: 'TextField',
+}
+
+export const text = () => (
   <TextField
     label="Text"
     type="text"
   />
-  ))
-  .add('password', () => (
+)
+
+export const password = () => (
   <TextField
     label="Password"
     type="password"
   />
-  ))
-  .add('error', () => (
+)
+
+export const error = () => (
   <TextField
     type="text"
     label="Name"
     error="Invalid value"
   />
-  ))
-  .add('Mascara text', () => (
+)
+
+export const mascaraText = () => (
   <TextField
     label="Text"
     type="text"
     largeLabel
   />
-  ))
-  .add('Material text', () => (
+)
+
+export const materialText = () => (
   <TextField
     label="Text"
     type="text"
     theme="material"
   />
-  ))
-  .add('Material password', () => (
+)
+
+export const materialPassword = () => (
   <TextField
     label="Password"
     type="password"
     theme="material"
   />
-  ))
-  .add('Material error', () => (
+)
+
+export const materialError = () => (
   <TextField
     type="text"
     label="Name"
     error="Invalid value"
     theme="material"
   />
-  ))
+)