Upgrade react and storybook

ts/components/Modal.stories.tsx

@@ -4,7 +4,6 @@
 import React from 'react';
 import { noop } from 'lodash';
 
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { setupI18n } from '../util/setupI18n';
@@ -14,25 +13,37 @@ import { Modal } from './Modal';
 
 const i18n = setupI18n('en', enMessages);
 
-const story = storiesOf('Components/Modal', module);
+export default {
+  title: 'Components/Modal',
+};
 
 const onClose = action('onClose');
 
 const LOREM_IPSUM =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
 
-story.add('Bare bones, short', () => <Modal i18n={i18n}>Hello world!</Modal>);
+export const BareBonesShort = (): JSX.Element => (
+  <Modal i18n={i18n}>Hello world!</Modal>
+);
 
-story.add('Bare bones, long', () => (
+BareBonesShort.story = {
+  name: 'Bare bones, short',
+};
+
+export const BareBonesLong = (): JSX.Element => (
   <Modal i18n={i18n}>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
   </Modal>
-));
+);
 
-story.add('Bare bones, long, with button', () => (
+BareBonesLong.story = {
+  name: 'Bare bones, long',
+};
+
+export const BareBonesLongWithButton = (): JSX.Element => (
   <Modal i18n={i18n}>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
@@ -42,18 +53,26 @@ story.add('Bare bones, long, with button', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('Title, X button, body, and button footer', () => (
+BareBonesLongWithButton.story = {
+  name: 'Bare bones, long, with button',
+};
+
+export const TitleXButtonBodyAndButtonFooter = (): JSX.Element => (
   <Modal i18n={i18n} title="Hello world" onClose={onClose} hasXButton>
     {LOREM_IPSUM}
     <Modal.ButtonFooter>
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('Lots of buttons in the footer', () => (
+TitleXButtonBodyAndButtonFooter.story = {
+  name: 'Title, X button, body, and button footer',
+};
+
+export const LotsOfButtonsInTheFooter = (): JSX.Element => (
   <Modal i18n={i18n} onClose={onClose}>
     Hello world!
     <Modal.ButtonFooter>
@@ -70,18 +89,26 @@ story.add('Lots of buttons in the footer', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('Long body with title', () => (
+LotsOfButtonsInTheFooter.story = {
+  name: 'Lots of buttons in the footer',
+};
+
+export const LongBodyWithTitle = (): JSX.Element => (
   <Modal i18n={i18n} title="Hello world" onClose={onClose}>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
   </Modal>
-));
+);
 
-story.add('Long body with title and button', () => (
+LongBodyWithTitle.story = {
+  name: 'Long body with title',
+};
+
+export const LongBodyWithTitleAndButton = (): JSX.Element => (
   <Modal i18n={i18n} title="Hello world" onClose={onClose}>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
@@ -91,9 +118,13 @@ story.add('Long body with title and button', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('Long body with long title and X button', () => (
+LongBodyWithTitleAndButton.story = {
+  name: 'Long body with title and button',
+};
+
+export const LongBodyWithLongTitleAndXButton = (): JSX.Element => (
   <Modal
     i18n={i18n}
     title={LOREM_IPSUM.slice(0, 104)}
@@ -105,9 +136,13 @@ story.add('Long body with long title and X button', () => (
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
   </Modal>
-));
+);
 
-story.add('With sticky buttons long body', () => (
+LongBodyWithLongTitleAndXButton.story = {
+  name: 'Long body with long title and X button',
+};
+
+export const WithStickyButtonsLongBody = (): JSX.Element => (
   <Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
     <p>{LOREM_IPSUM}</p>
     <p>{LOREM_IPSUM}</p>
@@ -118,9 +153,13 @@ story.add('With sticky buttons long body', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('With sticky buttons short body', () => (
+WithStickyButtonsLongBody.story = {
+  name: 'With sticky buttons long body',
+};
+
+export const WithStickyButtonsShortBody = (): JSX.Element => (
   <Modal hasStickyButtons hasXButton i18n={i18n} onClose={onClose}>
     <p>{LOREM_IPSUM.slice(0, 140)}</p>
     <Modal.ButtonFooter>
@@ -128,9 +167,13 @@ story.add('With sticky buttons short body', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
 
-story.add('Sticky footer, Lots of buttons', () => (
+WithStickyButtonsShortBody.story = {
+  name: 'With sticky buttons short body',
+};
+
+export const StickyFooterLotsOfButtons = (): JSX.Element => (
   <Modal hasStickyButtons i18n={i18n} onClose={onClose} title="OK">
     <p>{LOREM_IPSUM}</p>
     <Modal.ButtonFooter>
@@ -147,4 +190,8 @@ story.add('Sticky footer, Lots of buttons', () => (
       <Button onClick={noop}>Okay</Button>
     </Modal.ButtonFooter>
   </Modal>
-));
+);
+
+StickyFooterLotsOfButtons.story = {
+  name: 'Sticky footer, Lots of buttons',
+};