Should CSF Next meta.story() inherit from preview.meta args?

[lancegliser]

Summary

Trying out 10.2's CSF next updates. I configured with #storybook/ using a tsconfig and it's that's working no issue.

Stories themselves seem to have a typescript specific issue. Here's an example of a generic MUI dialog.

import { useState } from 'react';

import { faker } from '@faker-js/faker';
import {
  Button,
  DialogActions,
  DialogContent,
  Stack,
  TextField,
} from '@mui/material';
import { fn } from 'storybook/test';

import preview from '#storybook/preview';

import { DialogForm, DialogHeader } from './components';
import { Dialog, DialogProps } from './dialog';

const text = (
  <Stack gap={1}>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
    <Text>{faker.lorem.lines(6)}</Text>
  </Stack>
);

const meta = preview.meta({
  component: Dialog,
  tags: ['!autodocs'],
  // More on Storybook args: https://storybook.js.org/docs/react/writing-stories/args
  args: {
    onClose: fn(),
    maxWidth: 'md',
    headerTitle: 'Example of a dialog',
    children: (
      <DialogContent dividers>
        <h1>This is my content</h1>
        {text}
      </DialogContent>
    ),
    open: true, // We have clearly defined `open` here in the preview.
  },
  render: (args) => {
    const [isOpen, setIsOpen] = useState(true);
    const onClose: DialogProps['onClose'] = args.onClose
      ? (event, reason) => {
          args.onClose!(event, reason);
          setIsOpen(false);
        }
      : undefined;

    return (
      <>
        <Dialog {...args} open={isOpen} onClose={onClose} />
        <Button onClick={() => setIsOpen(!isOpen)}>Toggle Dialog</Button>
      </>
    );
  },
});

export const Default = meta.story({
  args: {
    // open: true, // Causes a TS Error if absent
  },
});

The actual rendering works and inherits it as you'd expect when it's running. It's just missing type chain inheritance. Have I missed something, or is this piece still in progress?

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @lancegliser! I'm Dosu and I’m helping the storybook team.

CSF Next in Storybook 10.2+ is designed so that the args from preview.meta and meta.story() are combined, and the union must satisfy your component's required props. If all required args are provided in preview.meta, you can call meta.story() with empty args and TypeScript will accept it. If you split required args between meta and story, TypeScript checks the combined shape for validity. However, story args alone do not automatically inherit the meta args types—they must be combined to satisfy the component's requirements. If the combined meta and story args are missing required fields, TypeScript will error as expected. This is a limitation of the current implementation and TypeScript's inference, not a bug (example test).

For best results and to avoid type errors—especially with custom args—explicitly type your render function's args parameter as an intersection of your component's props and any custom args. For example:

type DialogArgs = DialogProps & { customArg?: string };

const meta = preview.meta({
  component: Dialog,
  render: (args: DialogArgs) => { /* ... */ },
});

This pattern helps TypeScript understand the full shape of args passed from both meta and story (see discussion). There are ongoing improvements to type inference, but explicit typing is still recommended for complex scenarios.

If you have a more complex typing case, let me know and I can help with a more specific example.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}