Why CSF Args Type is Partial type ?

Describe the bug

I use storybook for react on TypeScript and create stories using CSF format.

like this:

Component

type Props = {
  title: string;
  descriptions: string[];
};

export default function App(props: Props) {
...

Story

const meta: Meta = {
  title: "App",
  component: App
};
export default meta;

const Template: Story<React.ComponentProps<typeof App>> = (args) => (
  <App {...args} />
);

export const NgPattern = Template.bind({});

// expect type error
NgPattern.args = {
  title: "Title"
  // descriptions: [],
};

I do not know why component arg type is not strict. If I make a mistake in using it, please let me know.

To Reproduce

https://codesandbox.io/s/sharp-raman-2rbk6?file=/src/App.stories.tsx

Expected behavior

The props types error is showed like this:

Property 'descriptions' is missing in type '{ title: string; }' but required in type 'Props'.

System

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 14.15.4 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: 87.0.664.57
    Firefox: 70.0.1
    Safari: 14.0
  npmPackages:
    @storybook/react: 6.1.15 => 6.1.15

Additional context

If here type args?: Partial<Args>; become args?: Args;, It works as expected.

https://github.com/storybookjs/storybook/blob/next/lib/addons/src/types.ts#L171

[kasperpeulen]

Discussed another approach with @shilman and @yannbf that doesn’t use factories so that we have predictable AST for tools to statically analyze:

The helper:

import type { Meta, Story } from "@storybook/react";
import type { ComponentType } from "react";

export type CSFType<M extends Meta> = M extends {
  component: ComponentType<infer P>;
  args: infer D;
}
  ? { args: Omit<P, keyof D> } & Story<P>
  : never;

The component:

export const MyComponent = (props: { a: string; b: string }) => <>{JSON.stringify(props)}</>;

The story:

import type { CSFType } from "./helper";
import { MyComponent } from "./my-component";

const meta = { component: MyComponent, args: { a: "a" } };
type Story = CSFType<typeof meta>;

export default meta;
export const MyStory1: Story = { args: { b: "goodbye" } }; // Fine, a has default
export const MyStory2: Story = { args: { a: "hello hello" } }; // Error: Property 'b' is missing in type '{ a: string; }'
export const MyStory3: Story = { args: { a: "hello hello", b: "goodbye" } }; // Fine, can overwrite a

[IanVS]

I found that with CSFType above, args always has to be specified in meta. Here’s a version I adjusted which allows for a missing args key, which just makes all of the props required on each story’s args.

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;