Type of args no longer inferred in render

Hi, I found that I am getting a lot of typescript errors in my app after updating to storybook 6.5.0-alpha.50, and I think it’s due to https://github.com/ComponentDriven/csf/pull/33 now being included. I’d like to try to understand what I should do to resolve this. cc/ @tmeasday

First, here’s how I’ve been typing my stories. I’ve taken an approach based on https://github.com/storybookjs/storybook/issues/13747#issuecomment-901117408.

import type { Meta, StoryObj } from '@storybook/react';

export type CSF3<M extends Meta> = M extends {
  component: React.ComponentType<infer Props>;
  args: infer D;
}
  ? // Make the args which weren't in meta required
    { args: Omit<Props, keyof D> } & StoryObj<Props>
  : // If there are no args in the meta, make sure all props are specified in story
  M extends {
      component: React.ComponentType<infer Props>;
    }
  ? { args: Props } & StoryObj<Props>
  : never;

Then, in my story, I use it like so:

import type { CSF3, StoryObj } from '@dn-types/storybook';
import { Label, Input } from '../index';
import { HelpTip } from './HelpTip';

const meta = {
  title: 'Atoms/forms/<HelpTip>',
  component: HelpTip,
};
export default meta;

type Story = CSF3<typeof meta>;

export const WithLabelAndInput: Story = {
  render(args) {
    return (
      <div className="mt-32">
        <Label htmlFor="foo" className="mb-8">
          This is a label
          <HelpTip {...args} />
        </Label>
        <Input id="foo" />
      </div>
    );
  },
  args: {
    children: 'This is helpful text.',
  },
};

That used to work pretty well. The type of args in the story was passed to render, but now those args are just Args which is basically just “an object with anything in it”. So <HelpTip {...args} /> fails with Property 'children' is missing in type '{}' but required in type 'Props'.

Is there some other way I should be typing my stories? I’ve never been completely clear how to get good type coverage in stories, and the approach above was the closest I could get to a sane method, which will error if I do not provide all the needed props either through the default meta object, or the story itself.

[tmeasday]

@IanVS : https://github.com/ComponentDriven/csf/pull/43

[tmeasday]

Perhaps it might be best to reset it back to the way it was, at least for now until maybe a better approach can be found?

Yeah, fair enough, let’s do this.

Could you explain this one a bit?

I guess what I am thinking is if you have:

const meta = {
  args: { a: 'a' },
};
export default meta;

type Story = CSF3<typeof meta>;

export AStory : Story = {
  args: { b: 'b' },
  render: (args) => {}
};

Then the type of args in AStory will be { a: string, b: string }. But if you have:

const meta = {
  args: { a: 'a' },
};
export default meta;

export AStory : StoryObj = {
  args: { b: 'b' },
  render: (args) => {}
};

(The more “traditional” way to do it), then the type of args will be : { a: string }, which would be overly restrictive.

In the current way of doing it, the type of args is Args, which in theory is an object with any keys. I guess depending on your TS setup, that may or may not be an issue if you try and access args.b. It looks like in yours, Args is not OK. But for others, I am guessing it will be alright to do that for a generic type like Args?