Upgrade react and storybook

ts/components/conversation/DeliveryIssueNotification.stories.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { setupI18n } from '../../util/setupI18n';
@@ -10,15 +9,14 @@ import enMessages from '../../../_locales/en/messages.json';
 import { DeliveryIssueNotification } from './DeliveryIssueNotification';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 
-const story = storiesOf(
-  'Components/Conversation/DeliveryIssueNotification',
-  module
-);
+export default {
+  title: 'Components/Conversation/DeliveryIssueNotification',
+};
 
 const i18n = setupI18n('en', enMessages);
 const sender = getDefaultConversation();
 
-story.add('Default', () => {
+export const Default = (): JSX.Element => {
   return (
     <DeliveryIssueNotification
       i18n={i18n}
@@ -27,9 +25,9 @@ story.add('Default', () => {
       sender={sender}
     />
   );
-});
+};
 
-story.add('With a long name', () => {
+export const WithALongName = (): JSX.Element => {
   const longName = '🤷🏽‍♀️❤️🐞'.repeat(50);
   return (
     <DeliveryIssueNotification
@@ -44,9 +42,13 @@ story.add('With a long name', () => {
       })}
     />
   );
-});
+};
 
-story.add('In Group', () => {
+WithALongName.story = {
+  name: 'With a long name',
+};
+
+export const InGroup = (): JSX.Element => {
   return (
     <DeliveryIssueNotification
       i18n={i18n}
@@ -55,4 +57,4 @@ story.add('In Group', () => {
       sender={sender}
     />
   );
-});
+};