fix: multiple mapped args return array of labels

[gitstart]

Issue: #22042

What I did

Fix issue of configured mapping + control.type=multi-select argType component is rendered with wrong mapped arg value.

How to test

• Start a sandbox template: yarn task --task dev --template react-vite/default-ts
• In sandbox/react-vite-default-ts/src/stories/Button.stories.ts

const arrows = {
  ArrowUp: { name: 'ArrowUp' },
  ArrowDown: { name: 'ArrowDown' },
  ArrowLeft: { name: 'ArrowLeft' },
  ArrowRight: { name: 'ArrowRight' },
};

const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
    arrows: {
      options: Object.keys(arrows),
      mapping: arrows,
      control: {
        type: 'multi-select',
        labels: {
          ArrowUp: 'Up',
          ArrowDown: 'Down',
          ArrowLeft: 'Left',
          ArrowRight: 'Right',
        },
      },
    },
  },
} satisfies Meta<typeof Button>;

• Update Button.tsx with adding new prop arrows and console.log it inside Button render function
• Verify logged prop arrows value is corrected mapped array object

[gitstart]

@JReinhold Could you please review this PR?

[JReinhold]

Great find!

Just to summarize the issue for myself here. The problem with the current implementation, is that when there are multiple selected, the arg will be an array of the selected args. and so when we do val in mapping it will return false, because val will not be the actual key in the mapping, it will be a list of keys instead.

But this PR makes it so we handle it differently for arrays, and ensure that arrays of keys are mapped like a single key would be.

Would you be open to add some template stories that ensures this works? I think they would fit in here: https://github.com/storybookjs/storybook/blob/next/code/lib/store/template/stories/argTypes.stories.ts
AFAIK we don't have any stories that covers args mapping at all, so it would be great if you could add some for different use cases.

Let me know if you need more guidance on how to add and test template stories.

[gitstart]

Would you be open to add some template stories that ensures this works?

@JReinhold I added argMapping template stories. Could you please take a look?

[JReinhold]

This is great, thanks! 💪