React: Sound arg types for CSF3

[kasperpeulen]

Issue: #13747

Depends on this CSF pull request:
ComponentDriven/csf#49

What I did

Typesafe args

Changed StoryObj and Meta so that we have increased typesafety for when the user provides args partially in meta.

Considering a Component like this:

interface ButtonProps {
  label: string;
  disabled: boolean;
}

declare const Button: (props: ButtonProps) => JSX.Element;

It is valid to provide args like this:

// ✅ valid
const meta = {
  component: Button,
  args: { disabled: false },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic = {
  args: { label: 'good' }
} satisfies Story;

While it is invalid too forget an arg, in either meta or the story:

// ❌ invalid
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export const Basic = {
  args: { label: 'good' }
} satisfies Story;

// ❌ invalid
const meta = {
  component: Button,
  args: { label: 'good' }
} satisfies Meta<typeof Button>;

export const Basic = {} satisfies Story;

Changed Meta to make sure both a Component, as the Props of the component can be used:

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;

export const meta = {
  component: Button,
} satisfies Meta<ButtonProps>;

export default meta;

Typesafe decorators/loaders

Decorators now accept a new generic arg argument to be specified:

const withDecorator: DecoratorFn<{ decoratorArg: number }> = (Story, { args }) => (
  <>
    Decorator: {args.decoratorArg}
    <Story args={{ decoratorArg: 0 }} />
  </>
);

And the type of meta/story will check if this arg is part of the generic type:

type Props = ButtonProps & { decoratorArg: number };

const meta = {
  component: Button,
  args: { disabled: false },
  decorators: [withDecorator],
} satisfies Meta<Props>;

type Story = StoryObj<typeof meta>;
const Basic: Story = { args: { decoratorArg: 0, label: 'good' } };

How to test

You can test it by playing with test-d file.

[shilman]

Awesome! I think we need to make this as non-breaking as possible so that we can postpone figuring out the automigration strategy for now. Will review in more detail next time 🙏

[tmeasday]

This looks really great. I have a suggestion for one more test.

[yannbf]

can you specify the path e.g. './index'