Improve Redux Storybook (#37227)

app/javascript/mastodon/components/account/account.stories.tsx

@@ -1,16 +1,28 @@
+import type { ComponentProps } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { accountFactoryState, relationshipsFactory } from '@/testing/factories';
 
 import { Account } from './index';
 
+type Props = Omit<ComponentProps<typeof Account>, 'id'> & {
+  name: string;
+  username: string;
+};
+
 const meta = {
   title: 'Components/Account',
-  component: Account,
   argTypes: {
-    id: {
+    name: {
       type: 'string',
-      description: 'ID of the account to display',
+      description: 'The display name of the account',
+      reduxPath: 'accounts.1.display_name_html',
+    },
+    username: {
+      type: 'string',
+      description: 'The username of the account',
+      reduxPath: 'accounts.1.acct',
     },
     size: {
       type: 'number',
@@ -40,7 +52,8 @@ const meta = {
     },
   },
   args: {
-    id: '1',
+    name: 'Test User',
+    username: 'testuser',
     size: 46,
     hidden: false,
     minimal: false,
@@ -55,17 +68,16 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Account>;
+  render(args) {
+    return <Account id='1' {...args} />;
+  },
+} satisfies Meta<Props>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
-  args: {
-    id: '1',
-  },
-};
+export const Primary: Story = {};
 
 export const Hidden: Story = {
   args: {

app/javascript/mastodon/components/emoji/emoji.stories.tsx

@@ -4,20 +4,22 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Emoji } from './index';
 
-type EmojiProps = ComponentProps<typeof Emoji> & { state: string };
+type EmojiProps = ComponentProps<typeof Emoji> & {
+  style: 'auto' | 'native' | 'twemoji';
+};
 
 const meta = {
   title: 'Components/Emoji',
   component: Emoji,
   args: {
     code: '🖤',
-    state: 'auto',
+    style: 'auto',
   },
   argTypes: {
     code: {
       name: 'Emoji',
     },
-    state: {
+    style: {
       control: {
         type: 'select',
         labels: {
@@ -28,11 +30,7 @@ const meta = {
       },
       options: ['auto', 'native', 'twemoji'],
       name: 'Emoji Style',
-      mapping: {
-        auto: { meta: { emoji_style: 'auto' } },
-        native: { meta: { emoji_style: 'native' } },
-        twemoji: { meta: { emoji_style: 'twemoji' } },
-      },
+      reduxPath: 'meta.emoji_style',
     },
   },
   render(args) {