Merge pull request #22169 from gitstart/fix/wrong-multiple-mapped-args

fix: multiple mapped args return array of labels

code/lib/preview-api/src/modules/store/csf/prepareStory.ts

@@ -105,8 +105,19 @@ export function prepareStory<TRenderer extends Renderer>(
     }
 
     const mappedArgs = Object.entries(finalContext.args).reduce((acc, [key, val]) => {
-      const mapping = finalContext.argTypes[key]?.mapping;
-      acc[key] = mapping && val in mapping ? mapping[val] : val;
+      if (!finalContext.argTypes[key]?.mapping) {
+        acc[key] = val;
+
+        return acc;
+      }
+
+      const mappingFn = (originalValue: any) =>
+        originalValue in finalContext.argTypes[key].mapping
+          ? finalContext.argTypes[key].mapping[originalValue]
+          : originalValue;
+
+      acc[key] = Array.isArray(val) ? val.map(mappingFn) : mappingFn(val);
+
       return acc;
     }, {} as Args);
 

code/lib/store/template/stories/argMapping.stories.ts

@@ -0,0 +1,71 @@
+import { global as globalThis } from '@storybook/global';
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const arrows = {
+  ArrowUp: { name: 'ArrowUp' },
+  ArrowDown: { name: 'ArrowDown' },
+  ArrowLeft: { name: 'ArrowLeft' },
+  ArrowRight: { name: 'ArrowRight' },
+};
+
+const labels = {
+  ArrowUp: 'Up',
+  ArrowDown: 'Down',
+  ArrowLeft: 'Left',
+  ArrowRight: 'Right',
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: context.args },
+      });
+    },
+  ],
+};
+
+export const Single = {
+  args: {
+    mappingArg: 'ArrowRight',
+  },
+  argTypes: {
+    mappingArg: {
+      options: Object.keys(arrows),
+      mapping: arrows,
+      control: {
+        type: 'select',
+        labels,
+      },
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      mappingArg: { name: 'ArrowRight' },
+    });
+  },
+};
+
+export const Multiple = {
+  args: {
+    mappingArg: ['ArrowRight', 'ArrowLeft'],
+  },
+  argTypes: {
+    mappingArg: {
+      options: Object.keys(arrows),
+      mapping: arrows,
+      control: {
+        type: 'multi-select',
+        labels,
+      },
+    },
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      mappingArg: [{ name: 'ArrowRight' }, { name: 'ArrowLeft' }],
+    });
+  },
+};