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,49 +1,52 @@
 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', () => (
-    <ButtonGroup
-      style={{ width: '300px' }}
-      disabled={boolean('Disabled', false)}
-      defaultActiveButtonIndex={1}
+export default {
+  title: 'ButtonGroup',
+}
+
+export const withButtons = () => (
+  <ButtonGroup
+    style={{ width: '300px' }}
+    disabled={boolean('Disabled', false)}
+    defaultActiveButtonIndex={1}
+  >
+    <Button
+      onClick={action('cheap')}
+    >
+      {text('Button1', 'Cheap')}
+    </Button>
+    <Button
+      onClick={action('average')}
+    >
+      {text('Button2', 'Average')}
+    </Button>
+    <Button
+      onClick={action('fast')}
+    >
+      {text('Button3', 'Fast')}
+    </Button>
+  </ButtonGroup>
+)
+
+export const withDisabledButton = () => (
+  <ButtonGroup
+    style={{ width: '300px' }}
+    disabled={boolean('Disabled', false)}
+  >
+    <Button
+      onClick={action('enabled')}
     >
-      <Button
-        onClick={action('cheap')}
-      >
-        {text('Button1', 'Cheap')}
-      </Button>
-      <Button
-        onClick={action('average')}
-      >
-        {text('Button2', 'Average')}
-      </Button>
-      <Button
-        onClick={action('fast')}
-      >
-        {text('Button3', 'Fast')}
-      </Button>
-    </ButtonGroup>
-  ))
-  .add('with a disabled Button', () => (
-    <ButtonGroup
-      style={{ width: '300px' }}
-      disabled={boolean('Disabled', false)}
+      {text('Button1', 'Enabled')}
+    </Button>
+    <Button
+      onClick={action('disabled')}
+      disabled
     >
-      <Button
-        onClick={action('enabled')}
-      >
-        {text('Button1', 'Enabled')}
-      </Button>
-      <Button
-        onClick={action('disabled')}
-        disabled
-      >
-        {text('Button2', 'Disabled')}
-      </Button>
-    </ButtonGroup>
-  ))
+      {text('Button2', 'Disabled')}
+    </Button>
+  </ButtonGroup>
+)

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

@@ -1,71 +1,78 @@
 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', () => (
-    <Button
-      onClick={action('clicked')}
-      type="primary"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Secondary', () => (
-    <Button
-      onClick={action('clicked')}
-      type="secondary"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Default', () => (
-    <Button
-      onClick={action('clicked')}
-      type="default"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Warning', () => (
-    <Button
-      onClick={action('clicked')}
-      type="warning"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Danger', () => (
-    <Button
-      onClick={action('clicked')}
-      type="danger"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Danger Primary', () => (
-    <Button
-      onClick={action('clicked')}
-      type="danger-primary"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
-  .add('Button - Link', () => (
-    <Button
-      onClick={action('clicked')}
-      type="link"
-      disabled={boolean('disabled', false)}
-    >
-      {text('text', 'Click me')}
-    </Button>
-  ))
+export default {
+  title: 'Button',
+}
+
+export const primaryType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="primary"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const secondaryType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="secondary"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const defaultType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="default"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const warningType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="warning"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const dangerType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="danger"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const dangerPrimaryType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="danger-primary"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)
+
+export const linkType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="link"
+    disabled={boolean('disabled', false)}
+  >
+    {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', () => (
-    <TextField
-      label="Text"
-      type="text"
-    />
-  ))
-  .add('password', () => (
-    <TextField
-      label="Password"
-      type="password"
-    />
-  ))
-  .add('error', () => (
-    <TextField
-      type="text"
-      label="Name"
-      error="Invalid value"
-    />
-  ))
-  .add('Mascara text', () => (
-    <TextField
-      label="Text"
-      type="text"
-      largeLabel
-    />
-  ))
-  .add('Material text', () => (
-    <TextField
-      label="Text"
-      type="text"
-      theme="material"
-    />
-  ))
-  .add('Material password', () => (
-    <TextField
-      label="Password"
-      type="password"
-      theme="material"
-    />
-  ))
-  .add('Material error', () => (
-    <TextField
-      type="text"
-      label="Name"
-      error="Invalid value"
-      theme="material"
-    />
-  ))
+export default {
+  title: 'TextField',
+}
+
+export const text = () => (
+  <TextField
+    label="Text"
+    type="text"
+  />
+)
+
+export const password = () => (
+  <TextField
+    label="Password"
+    type="password"
+  />
+)
+
+export const error = () => (
+  <TextField
+    type="text"
+    label="Name"
+    error="Invalid value"
+  />
+)
+
+export const mascaraText = () => (
+  <TextField
+    label="Text"
+    type="text"
+    largeLabel
+  />
+)
+
+export const materialText = () => (
+  <TextField
+    label="Text"
+    type="text"
+    theme="material"
+  />
+)
+
+export const materialPassword = () => (
+  <TextField
+    label="Password"
+    type="password"
+    theme="material"
+  />
+)
+
+export const materialError = () => (
+  <TextField
+    type="text"
+    label="Name"
+    error="Invalid value"
+    theme="material"
+  />
+)