Upgrade react and storybook

ts/components/conversation/GroupDescription.stories.tsx

@@ -4,7 +4,6 @@
 import React from 'react';
 
 import { text } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
 
 import type { PropsType } from './GroupDescription';
 import { GroupDescription } from './GroupDescription';
@@ -13,7 +12,9 @@ import enMessages from '../../../_locales/en/messages.json';
 
 const i18n = setupI18n('en', enMessages);
 
-const story = storiesOf('Components/Conversation/GroupDescription', module);
+export default {
+  title: 'Components/Conversation/GroupDescription',
+};
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
@@ -21,44 +22,62 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   text: text('text', overrideProps.text || 'Default group description'),
 });
 
-story.add('Default', () => <GroupDescription {...createProps()} />);
+export const Default = (): JSX.Element => (
+  <GroupDescription {...createProps()} />
+);
 
-story.add('Long', () => (
+export const Long = (): JSX.Element => (
   <GroupDescription
     {...createProps({
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed vehicula urna. Ut rhoncus, justo a vestibulum elementum, libero ligula molestie massa, et volutpat nibh ipsum sit amet enim. Vestibulum ac mi enim. Nulla fringilla justo justo, volutpat semper ex convallis quis. Proin posuere, mi at auctor tincidunt, magna turpis mattis nibh, ullamcorper vehicula lectus mauris in mauris. Nullam blandit sapien tortor, quis vehicula quam molestie nec. Nam sagittis dolor in eros dapibus scelerisque. Proin vitae ex sed magna lobortis tincidunt. Aenean dictum laoreet dolor, at suscipit ligula fermentum ac. Nam condimentum turpis quis sollicitudin rhoncus.',
     })}
   />
-));
+);
 
-story.add('With newlines', () => (
+export const WithNewlines = (): JSX.Element => (
   <GroupDescription
     {...createProps({
       text: 'This is long\n\nSo many lines\n\nToo many lines?',
     })}
   />
-));
+);
 
-story.add('With emoji', () => (
+WithNewlines.story = {
+  name: 'With newlines',
+};
+
+export const WithEmoji = (): JSX.Element => (
   <GroupDescription
     {...createProps({
       text: '🍒🍩🌭',
     })}
   />
-));
+);
 
-story.add('With link', () => (
+WithEmoji.story = {
+  name: 'With emoji',
+};
+
+export const WithLink = (): JSX.Element => (
   <GroupDescription
     {...createProps({
       text: 'I love https://example.com and http://example.com and example.com, but not https://user:bar@example.com',
     })}
   />
-));
+);
 
-story.add('Kitchen sink', () => (
+WithLink.story = {
+  name: 'With link',
+};
+
+export const KitchenSink = (): JSX.Element => (
   <GroupDescription
     {...createProps({
       text: '🍒 https://example.com this is a long thing\nhttps://example.com on another line\nhttps://example.com',
     })}
   />
-));
+);
+
+KitchenSink.story = {
+  name: 'Kitchen sink',
+};