undefined}
- i18n={i18n}
- onCancel={action('cancel')}
- onConfirm={action('confirm')}
- renderSafetyNumber={() => {
- action('renderSafetyNumber');
- return This is a mock Safety Number View
;
- }}
- theme={theme}
- />
- );
- })
- .add('Different Confirmation Text', () => {
- const theme = useTheme();
- return (
- undefined}
- i18n={i18n}
- onCancel={action('cancel')}
- onConfirm={action('confirm')}
- renderSafetyNumber={() => {
- action('renderSafetyNumber');
- return This is a mock Safety Number View
;
- }}
- theme={theme}
- />
- );
- })
- .add('Multi Contact Dialog', () => {
- const theme = useTheme();
- return (
- undefined}
- i18n={i18n}
- onCancel={action('cancel')}
- onConfirm={action('confirm')}
- renderSafetyNumber={() => {
- action('renderSafetyNumber');
- return This is a mock Safety Number View
;
- }}
- theme={theme}
- />
- );
- })
- .add('Multiple contacts, all with badges', () => {
- const theme = useTheme();
- return (
- getFakeBadge()}
- i18n={i18n}
- onCancel={action('cancel')}
- onConfirm={action('confirm')}
- renderSafetyNumber={() => {
- action('renderSafetyNumber');
- return This is a mock Safety Number View
;
- }}
- theme={theme}
- />
- );
- })
- .add('Scroll Dialog', () => {
- const theme = useTheme();
- return (
- undefined}
- i18n={i18n}
- onCancel={action('cancel')}
- onConfirm={action('confirm')}
- renderSafetyNumber={() => {
- action('renderSafetyNumber');
- return This is a mock Safety Number View
;
- }}
- theme={theme}
- />
- );
- });
+export default {
+ title: 'Components/SafetyNumberChangeDialog',
+};
+
+export const SingleContactDialog = (): JSX.Element => {
+ const theme = useTheme();
+ return (
+ undefined}
+ i18n={i18n}
+ onCancel={action('cancel')}
+ onConfirm={action('confirm')}
+ renderSafetyNumber={() => {
+ action('renderSafetyNumber');
+ return This is a mock Safety Number View
;
+ }}
+ theme={theme}
+ />
+ );
+};
+
+export const DifferentConfirmationText = (): JSX.Element => {
+ const theme = useTheme();
+ return (
+ undefined}
+ i18n={i18n}
+ onCancel={action('cancel')}
+ onConfirm={action('confirm')}
+ renderSafetyNumber={() => {
+ action('renderSafetyNumber');
+ return This is a mock Safety Number View
;
+ }}
+ theme={theme}
+ />
+ );
+};
+
+export const MultiContactDialog = (): JSX.Element => {
+ const theme = useTheme();
+ return (
+ undefined}
+ i18n={i18n}
+ onCancel={action('cancel')}
+ onConfirm={action('confirm')}
+ renderSafetyNumber={() => {
+ action('renderSafetyNumber');
+ return This is a mock Safety Number View
;
+ }}
+ theme={theme}
+ />
+ );
+};
+
+export const MultipleContactsAllWithBadges = (): JSX.Element => {
+ const theme = useTheme();
+ return (
+ getFakeBadge()}
+ i18n={i18n}
+ onCancel={action('cancel')}
+ onConfirm={action('confirm')}
+ renderSafetyNumber={() => {
+ action('renderSafetyNumber');
+ return This is a mock Safety Number View
;
+ }}
+ theme={theme}
+ />
+ );
+};
+
+MultipleContactsAllWithBadges.story = {
+ name: 'Multiple contacts, all with badges',
+};
+
+export const ScrollDialog = (): JSX.Element => {
+ const theme = useTheme();
+ return (
+ undefined}
+ i18n={i18n}
+ onCancel={action('cancel')}
+ onConfirm={action('confirm')}
+ renderSafetyNumber={() => {
+ action('renderSafetyNumber');
+ return This is a mock Safety Number View
;
+ }}
+ theme={theme}
+ />
+ );
+};
diff --git a/ts/components/SafetyNumberViewer.stories.tsx b/ts/components/SafetyNumberViewer.stories.tsx
index 10526053e..1a0881578 100644
--- a/ts/components/SafetyNumberViewer.stories.tsx
+++ b/ts/components/SafetyNumberViewer.stories.tsx
@@ -4,7 +4,6 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
import type { PropsType } from './SafetyNumberViewer';
import { SafetyNumberViewer } from './SafetyNumberViewer';
@@ -61,13 +60,15 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({
onClose: action('onClose'),
});
-const story = storiesOf('Components/SafetyNumberViewer', module);
+export default {
+ title: 'Components/SafetyNumberViewer',
+};
-story.add('Safety Number', () => {
+export const SafetyNumber = (): JSX.Element => {
return {
})}
/>
);
-});
+};
-story.add('Verification Disabled', () => {
+SafetyNumberNotVerified.story = {
+ name: 'Safety Number (not verified)',
+};
+
+export const VerificationDisabled = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('Safety Number (dialog close)', () => {
+export const SafetyNumberDialogClose = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('Just Profile and Number', () => {
+SafetyNumberDialogClose.story = {
+ name: 'Safety Number (dialog close)',
+};
+
+export const JustProfileAndNumber = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('Just Number', () => {
+JustProfileAndNumber.story = {
+ name: 'Just Profile and Number',
+};
+
+export const JustNumber = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('No Phone Number (cannot verify)', () => {
+export const NoPhoneNumberCannotVerify = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
+
+NoPhoneNumberCannotVerify.story = {
+ name: 'No Phone Number (cannot verify)',
+};
diff --git a/ts/components/Select.stories.tsx b/ts/components/Select.stories.tsx
index 97ac048d3..6c6a42422 100644
--- a/ts/components/Select.stories.tsx
+++ b/ts/components/Select.stories.tsx
@@ -3,13 +3,14 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
import { Select } from './Select';
-const story = storiesOf('Components/Select', module);
+export default {
+ title: 'Components/Select',
+};
-story.add('Normal', () => {
+export const Normal = (): JSX.Element => {
const [value, setValue] = useState(0);
const onChange = action('onChange');
@@ -28,9 +29,9 @@ story.add('Normal', () => {
}}
/>
);
-});
+};
-story.add('With disabled options', () => (
+export const WithDisabledOptions = (): JSX.Element => (
(
onChange={action('onChange')}
value="c"
/>
-));
+);
+
+WithDisabledOptions.story = {
+ name: 'With disabled options',
+};
diff --git a/ts/components/ShortcutGuide.stories.tsx b/ts/components/ShortcutGuide.stories.tsx
index 4fe9da46c..add18a970 100644
--- a/ts/components/ShortcutGuide.stories.tsx
+++ b/ts/components/ShortcutGuide.stories.tsx
@@ -3,7 +3,6 @@
import * as React from 'react';
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
import { boolean, select } from '@storybook/addon-knobs';
import { setupI18n } from '../util/setupI18n';
@@ -12,7 +11,10 @@ import type { Props } from './ShortcutGuide';
import { ShortcutGuide } from './ShortcutGuide';
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/ShortcutGuide', module);
+
+export default {
+ title: 'Components/ShortcutGuide',
+};
const createProps = (overrideProps: Partial = {}): Props => ({
i18n,
@@ -31,17 +33,17 @@ const createProps = (overrideProps: Partial = {}): Props => ({
),
});
-story.add('Default', () => {
+export const Default = (): JSX.Element => {
const props = createProps({});
return = {}): Props => ({
size: text('size', overrideProps.size || ''),
@@ -24,24 +25,36 @@ const createProps = (overrideProps: Partial = {}): Props => ({
),
});
-story.add('Normal', () => {
+export const Normal = (): JSX.Element => {
const props = createProps();
return (
})}
isThumbnail
/>
-));
+);
-story.add('Broken Image', () => (
+PendingDownloadThumbnail.story = {
+ name: 'Pending download (thumbnail)',
+};
+
+export const BrokenImage = (): JSX.Element => (
(
})}
isThumbnail
/>
-));
+);
-story.add('Video', () => (
+BrokenImageThumbnail.story = {
+ name: 'Broken Image (thumbnail)',
+};
+
+export const Video = (): JSX.Element => (
(
url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
})}
/>
-));
+);
diff --git a/ts/components/StoryListItem.stories.tsx b/ts/components/StoryListItem.stories.tsx
index 5371a0bb8..57c255f42 100644
--- a/ts/components/StoryListItem.stories.tsx
+++ b/ts/components/StoryListItem.stories.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryListItem';
@@ -17,7 +16,9 @@ import {
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/StoryListItem', module);
+export default {
+ title: 'Components/StoryListItem',
+};
function getDefaultProps(): PropsType {
return {
@@ -34,7 +35,7 @@ function getDefaultProps(): PropsType {
};
}
-story.add('My Story', () => (
+export const MyStory = (): JSX.Element => (
(
timestamp: Date.now(),
}}
/>
-));
+);
-story.add('My Story (many)', () => (
+export const MyStoryMany = (): JSX.Element => (
(
}}
hasMultiple
/>
-));
+);
-story.add("Someone's story", () => (
+MyStoryMany.story = {
+ name: 'My Story (many)',
+};
+
+export const SomeonesStory = (): JSX.Element => (
(
timestamp: Date.now(),
}}
/>
-));
+);
+
+SomeonesStory.story = {
+ name: "Someone's story",
+};
diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx
index 1fc04654e..803330a1e 100644
--- a/ts/components/StoryViewer.stories.tsx
+++ b/ts/components/StoryViewer.stories.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryViewer';
@@ -14,7 +13,9 @@ import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/StoryViewer', module);
+export default {
+ title: 'Components/StoryViewer',
+};
function getDefaultProps(): PropsType {
const sender = getDefaultConversation();
@@ -56,9 +57,15 @@ function getDefaultProps(): PropsType {
};
}
-story.add("Someone's story", () => (
},
]}
/>
-));
+);
-story.add('In a group', () => (
+WideStory.story = {
+ name: 'Wide story',
+};
+
+export const InAGroup = (): JSX.Element => (
(
type: 'group',
})}
/>
-));
+);
-story.add('Multi story', () => {
+InAGroup.story = {
+ name: 'In a group',
+};
+
+export const MultiStory = (): JSX.Element => {
const sender = getDefaultConversation();
return (
{
]}
/>
);
-});
+};
-story.add('Caption', () => (
+MultiStory.story = {
+ name: 'Multi story',
+};
+
+export const Caption = (): JSX.Element => (
(
},
]}
/>
-));
+);
-story.add('Long Caption', () => (
+export const LongCaption = (): JSX.Element => (
(
},
]}
/>
-));
+);
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
index 72cf82721..3dad3219b 100644
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './StoryViewsNRepliesModal';
@@ -16,7 +15,9 @@ import { setupI18n } from '../util/setupI18n';
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/StoryViewsNRepliesModal', module);
+export default {
+ title: 'Components/StoryViewsNRepliesModal',
+};
function getDefaultProps(): PropsType {
return {
@@ -100,23 +101,35 @@ function getViewsAndReplies() {
};
}
-story.add('Can reply', () => (
+export const CanReply = (): JSX.Element => (
(
textStyle: 1,
}}
/>
-));
+);
-story.add('Gradient', () => (
+SolidBgTextBg.story = {
+ name: 'Solid bg + text bg',
+};
+
+export const Gradient = (): JSX.Element => (
(
textStyle: 1,
}}
/>
-));
+);
-story.add('Text with line breaks (condensed font)', () => (
+export const TextWithLineBreaksCondensedFont = (): JSX.Element => (
(
textStyle: 5,
}}
/>
-));
+);
-story.add('Text with line breaks + Autowrap (serif font)', () => (
+TextWithLineBreaksCondensedFont.story = {
+ name: 'Text with line breaks (condensed font)',
+};
+
+export const TextWithLineBreaksAutowrapSerifFont = (): JSX.Element => (
(
textStyle: 3,
}}
/>
-));
+);
-story.add('Autowrap text', () => (
+TextWithLineBreaksAutowrapSerifFont.story = {
+ name: 'Text with line breaks + Autowrap (serif font)',
+};
+
+export const AutowrapText = (): JSX.Element => (
(
textStyle: 1,
}}
/>
-));
+);
-story.add('Romeo & Juliet', () => (
+AutowrapText.story = {
+ name: 'Autowrap text',
+};
+
+export const RomeoJuliet = (): JSX.Element => (
(
textStyle: 4,
}}
/>
-));
+);
-story.add('Overflow newline numbers', () => (
+RomeoJuliet.story = {
+ name: 'Romeo & Juliet',
+};
+
+export const OverflowNewlineNumbers = (): JSX.Element => (
(
textStyle: 1,
}}
/>
-));
+);
-story.add('Character wrap (bold)', () => (
+OverflowNewlineNumbers.story = {
+ name: 'Overflow newline numbers',
+};
+
+export const CharacterWrapBold = (): JSX.Element => (
(
textStyle: 2,
}}
/>
-));
+);
-story.add('Mix of newlines, overflow, autowrap', () => (
+CharacterWrapBold.story = {
+ name: 'Character wrap (bold)',
+};
+
+export const MixOfNewlinesOverflowAutowrap = (): JSX.Element => (
(
textStyle: 1,
}}
/>
-));
+);
-story.add('Link preview', () => (
+MixOfNewlinesOverflowAutowrap.story = {
+ name: 'Mix of newlines, overflow, autowrap',
+};
+
+export const LinkPreview = (): JSX.Element => (
(
},
}}
/>
-));
+);
-story.add('Link preview (thumbnail)', () => (
+LinkPreview.story = {
+ name: 'Link preview',
+};
+
+export const LinkPreviewThumbnail = (): JSX.Element => (
(
},
}}
/>
-));
+);
-story.add('Link preview (long title)', () => (
+LinkPreviewThumbnail.story = {
+ name: 'Link preview (thumbnail)',
+};
+
+export const LinkPreviewLongTitle = (): JSX.Element => (
(
textForegroundColor: 4294704123,
}}
/>
-));
+);
-story.add('Link preview (just url)', () => (
+LinkPreviewLongTitle.story = {
+ name: 'Link preview (long title)',
+};
+
+export const LinkPreviewJustUrl = (): JSX.Element => (
(
},
}}
/>
-));
+);
-story.add('Link preview (just url + text)', () => (
+LinkPreviewJustUrl.story = {
+ name: 'Link preview (just url)',
+};
+
+export const LinkPreviewJustUrlText = (): JSX.Element => (
(
text: 'Check this out!',
}}
/>
-));
+);
-story.add('Link preview (really long domain)', () => (
+LinkPreviewJustUrlText.story = {
+ name: 'Link preview (just url + text)',
+};
+
+export const LinkPreviewReallyLongDomain = (): JSX.Element => (
(
},
}}
/>
-));
+);
-story.add('Link Preview w/ R&J', () => (
+LinkPreviewReallyLongDomain.story = {
+ name: 'Link preview (really long domain)',
+};
+
+export const LinkPreviewWRJ = (): JSX.Element => (
(
},
}}
/>
-));
+);
+
+LinkPreviewWRJ.story = {
+ name: 'Link Preview w/ R&J',
+};
diff --git a/ts/components/ToastAlreadyGroupMember.stories.tsx b/ts/components/ToastAlreadyGroupMember.stories.tsx
index 16d24b6ee..d48bb227d 100644
--- a/ts/components/ToastAlreadyGroupMember.stories.tsx
+++ b/ts/components/ToastAlreadyGroupMember.stories.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ToastAlreadyGroupMember } from './ToastAlreadyGroupMember';
@@ -16,8 +15,14 @@ const defaultProps = {
onClose: action('onClose'),
};
-const story = storiesOf('Components/ToastAlreadyGroupMember', module);
+export default {
+ title: 'Components/ToastAlreadyGroupMember',
+};
-story.add('ToastAlreadyGroupMember', () => (
+export const _ToastAlreadyGroupMember = (): JSX.Element => (
= {}): PropsType => ({
theme: overrideProps.theme,
});
-const story = storiesOf('Components/Tooltip', module);
+export default {
+ title: 'Components/Tooltip',
+};
const Trigger = (
);
-story.add('Top', () => (
+export const _Top = (): JSX.Element => (
(
>
{Trigger}
-));
+);
-story.add('Right', () => (
+export const _Right = (): JSX.Element => (
(
>
{Trigger}
-));
+);
-story.add('Bottom', () => (
+export const _Bottom = (): JSX.Element => (
(
>
{Trigger}
-));
+);
-story.add('Left', () => (
+export const _Left = (): JSX.Element => (
(
>
{Trigger}
-));
+);
-story.add('Sticky', () => (
+export const Sticky = (): JSX.Element => (
(
>
{Trigger}
-));
+);
-story.add('With Applied Popper Modifiers', () => {
+export const WithAppliedPopperModifiers = (): JSX.Element => {
return (
{
{Trigger}
);
-});
+};
-story.add('Dark Theme', () => (
+export const DarkTheme = (): JSX.Element => (
(
>
{Trigger}
-));
+);
diff --git a/ts/components/WhatsNewModal.stories.tsx b/ts/components/WhatsNewModal.stories.tsx
index 77d2cc53d..5e4485d69 100644
--- a/ts/components/WhatsNewModal.stories.tsx
+++ b/ts/components/WhatsNewModal.stories.tsx
@@ -2,7 +2,6 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import type { PropsType } from './WhatsNewModal';
@@ -12,11 +11,15 @@ import { setupI18n } from '../util/setupI18n';
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/WhatsNewModal', module);
+export default {
+ title: 'Components/WhatsNewModal',
+};
const getDefaultProps = (): PropsType => ({
hideWhatsNewModal: action('hideWhatsNewModal'),
i18n,
});
-story.add('Modal', () => = {}): Props => ({
renderNonNewLine: overrideProps.renderNonNewLine,
text: text('text', overrideProps.text || ''),
});
-story.add('All newlines', () => {
+export const AllNewlines = (): JSX.Element => {
const props = createProps({
text: '\n\n\n',
});
return = {}): Props => ({
bodyRanges: overrideProps.bodyRanges,
@@ -23,15 +24,19 @@ const createProps = (overrideProps: Partial = {}): Props => ({
text: text('text', overrideProps.text || ''),
});
-story.add('No @mentions', () => {
+export const NoMentions = (): JSX.Element => {
const props = createProps({
text: 'Hello World',
});
return > = {}
@@ -36,7 +37,7 @@ const createProps = (
onCloseAttachment: action('onCloseAttachment'),
});
-story.add('One File', () => {
+export const OneFile = (): JSX.Element => {
const props = createProps({
attachments: [
fakeDraftAttachment({
@@ -47,9 +48,9 @@ story.add('One File', () => {
],
});
return = {}): PropsType => ({
cancelRecording: action('cancelRecording'),
@@ -37,11 +38,11 @@ const createProps = (overrideProps: Partial = {}): PropsType => ({
startRecording: action('startRecording'),
});
-story.add('Default', () => {
+export const Default = (): JSX.Element => {
return {
})}
/>
);
-});
+};
-story.add('Recording', () => {
+export const _Recording = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('Voice Limit', () => {
+export const VoiceLimit = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
-story.add('Switched Apps', () => {
+export const SwitchedApps = (): JSX.Element => {
return (
{
})}
/>
);
-});
+};
diff --git a/ts/components/conversation/CallingNotification.stories.tsx b/ts/components/conversation/CallingNotification.stories.tsx
index 14e8ef949..fba15f651 100644
--- a/ts/components/conversation/CallingNotification.stories.tsx
+++ b/ts/components/conversation/CallingNotification.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';
@@ -13,7 +12,9 @@ import type { CallingNotificationType } from '../../util/callingNotification';
const i18n = setupI18n('en', enMessages);
-const story = storiesOf('Components/Conversation/CallingNotification', module);
+export default {
+ title: 'Components/Conversation/CallingNotification',
+};
const getCommonProps = () => ({
conversationId: 'fake-conversation-id',
@@ -25,30 +26,115 @@ const getCommonProps = () => ({
startCallingLobby: action('startCallingLobby'),
});
-[false, true].forEach(wasIncoming => {
- [false, true].forEach(wasVideoCall => {
- [false, true].forEach(wasDeclined => {
- const direction = wasIncoming ? 'incoming' : 'outgoing';
- const type = wasVideoCall ? 'video' : 'audio';
- const acceptance = wasDeclined ? 'declined' : 'accepted';
- const storyName = `Direct call: ${direction} ${type} call, ${acceptance}`;
+/*
+ (
maxDevices={16}
startedTime={1618894800000}
/>
-));
+);
-story.add('Group call: ended', () => (
+GroupCallActiveCallFull.story = {
+ name: 'Group call: active, call full',
+};
+
+export const GroupCallEnded = (): JSX.Element => (
(
maxDevices={16}
startedTime={1618894800000}
/>
-));
+);
+
+GroupCallEnded.story = {
+ name: 'Group call: ended',
+};
diff --git a/ts/components/conversation/ChangeNumberNotification.stories.tsx b/ts/components/conversation/ChangeNumberNotification.stories.tsx
index 9e73efe77..7a3457d28 100644
--- a/ts/components/conversation/ChangeNumberNotification.stories.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.stories.tsx
@@ -3,29 +3,27 @@
import * as React from 'react';
-import { storiesOf } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { ChangeNumberNotification } from './ChangeNumberNotification';
-const story = storiesOf(
- 'Components/Conversation/ChangeNumberNotification',
- module
-);
+export default {
+ title: 'Components/Conversation/ChangeNumberNotification',
+};
const i18n = setupI18n('en', enMessages);
-story.add('Default', () => (
+export const Default = (): JSX.Element => (