ICU types

ts/components/Intl.stories.tsx

@@ -1,9 +1,9 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { Meta, StoryFn } from '@storybook/react';
 import * as React from 'react';
 
+import type { ComponentMeta } from '../storybook/types';
 import type { Props } from './Intl';
 import { Intl } from './Intl';
 import { setupI18n } from '../util/setupI18n';
@@ -14,68 +14,77 @@ const i18n = setupI18n('en', enMessages);
 export default {
   title: 'Components/Intl',
   component: Intl,
-} satisfies Meta<Props>;
-
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  i18n,
-  id: overrideProps.id || '',
-  components: overrideProps.components,
-});
-
-// eslint-disable-next-line max-len
-// eslint-disable-next-line react/function-component-definition, local-rules/valid-i18n-keys
-const Template: StoryFn<Props> = args => <Intl {...args} />;
-
-export const NoReplacements = Template.bind({});
-NoReplacements.args = createProps({
-  id: 'icu:deleteAndRestart',
-});
-
-export const SingleStringReplacement = Template.bind({});
-SingleStringReplacement.args = createProps({
-  id: 'icu:leftTheGroup',
-  components: { name: 'Theodora' },
-});
-
-export const SingleTagReplacement = Template.bind({});
-SingleTagReplacement.args = createProps({
-  id: 'icu:leftTheGroup',
-  components: {
-    name: (
-      <button type="button" key="a-button">
-        Theodora
-      </button>
-    ),
+  args: {
+    i18n,
+    id: 'icu:ok',
+    components: undefined,
   },
-});
+} satisfies ComponentMeta<Props<'icu:ok'>>;
 
-export const MultipleStringReplacement = Template.bind({});
-MultipleStringReplacement.args = createProps({
-  id: 'icu:changedRightAfterVerify',
-  components: {
-    name1: 'Fred',
-    name2: 'The Fredster',
-  },
-});
-
-export const MultipleTagReplacement = Template.bind({});
-MultipleTagReplacement.args = createProps({
-  id: 'icu:changedRightAfterVerify',
-  components: {
-    name1: <b>Fred</b>,
-    name2: <b>The Fredster</b>,
-  },
-});
-
-export function Emoji(): JSX.Element {
-  const customI18n = setupI18n('en', {
-    'icu:emoji': {
-      messageformat: '<emojify>👋</emojify> Hello, world!',
-    },
-  });
+export function NoReplacements(
+  args: Props<'icu:deleteAndRestart'>
+): JSX.Element {
+  return <Intl {...args} id="icu:deleteAndRestart" />;
+}
 
+export function SingleStringReplacement(
+  args: Props<'icu:leftTheGroup'>
+): JSX.Element {
   return (
-    // eslint-disable-next-line local-rules/valid-i18n-keys
-    <Intl i18n={customI18n} id="icu:emoji" />
+    <Intl {...args} id="icu:leftTheGroup" components={{ name: 'Theodora' }} />
+  );
+}
+
+export function SingleTagReplacement(
+  args: Props<'icu:leftTheGroup'>
+): JSX.Element {
+  return (
+    <Intl
+      {...args}
+      id="icu:leftTheGroup"
+      components={{
+        name: (
+          <button type="button" key="a-button">
+            Theodora
+          </button>
+        ),
+      }}
+    />
+  );
+}
+
+export function MultipleStringReplacement(
+  args: Props<'icu:changedRightAfterVerify'>
+): JSX.Element {
+  return (
+    <Intl
+      {...args}
+      id="icu:changedRightAfterVerify"
+      components={{ name1: 'Fred', name2: 'The Fredster' }}
+    />
+  );
+}
+
+export function MultipleTagReplacement(
+  args: Props<'icu:changedRightAfterVerify'>
+): JSX.Element {
+  return (
+    <Intl
+      {...args}
+      id="icu:changedRightAfterVerify"
+      components={{ name1: <b>Fred</b>, name2: <b>The Fredster</b> }}
+    />
+  );
+}
+
+export function Emoji(
+  args: Props<'icu:Message__reaction-emoji-label--you'>
+): JSX.Element {
+  return (
+    <Intl
+      {...args}
+      id="icu:Message__reaction-emoji-label--you"
+      components={{ emoji: '😛' }}
+    />
   );
 }