[Bug]: Typings for args ignores custom argTypes #22578
Description
Describe the bug
When using mapping, I expect to be able to place my mapping keys into args and have them map over, to keep stories nice and tidy. This actually works! …but typescript doesn't like it—which I think is a bug. It doesn't pull in the keys as possible values for args.
import { Meta, StoryObj } from '@storybook/react'
const SimpleComponent = (props: { someObject: { foo: number } }) => <p>{props.someObject.foo}</p>
const meta: Meta<typeof SimpleComponent> = {
component: SimpleComponent,
args: {
someObject: 'large', // Type 'string' is not assignable to type '{ foo: number; }'
},
argTypes: {
someObject: {
control: { type: 'radio' },
options: ['large', 'small'],
mapping: {
large: { foo: 100 },
small: { foo: 3 },
},
},
},
}
export default meta
type Story = StoryObj<typeof SimpleComponent>
export const Default: Story = {}There's a partial workaround I'm using right now that involves creating mappings as objects and using them like this:
const someObjectMapping = {
large: { foo: 100 },
small: { foo: 3 },
}
const meta: Meta<typeof SimpleComponent> = {
argTypes: {
someObject: {
control: { type: 'radio' },
options: ['large', 'small'],
mapping: someObjectMapping,
},
},
}But the main problem with this approach is that although the arg gets fed into the story, storybook doesn't pick up on the arg when it draws the control panels:
__
Edit: Since I really want those default args to be populated, I've resorted to decorating the offending args with /** @ts-expect-error */
args: {
/** @ts-expect-error type mapping bug */
someObject: 'large',
},To Reproduce
https://stackblitz.com/edit/github-xtelxp?file=stories%2FSome.stories.tsx
System
Environment Info:
System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Browsers:
Chrome: 113.0.5672.92
Edge: 113.0.1774.35
Firefox: 112.0.1
Safari: 15.5
npmPackages:
@storybook/addon-a11y: 7.0.10 => 7.0.10
@storybook/addon-essentials: 7.0.10 => 7.0.10
@storybook/addon-interactions: ^7.0.10 => 7.0.10
@storybook/addon-links: ^7.0.10 => 7.0.10
@storybook/core-common: ^7.0.9 => 7.0.10
@storybook/core-server: 7.0.10 => 7.0.10
@storybook/nextjs: 7.0.10 => 7.0.10
@storybook/react: 7.0.10 => 7.0.10
@storybook/react-vite: 7.0.10 => 7.0.10Additional context
No response