[Bug]: Storybook Angular not setting required Inputs() correctly

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

MIT License

84.7k stars 9.33k forks source link

Describe the bug

I have a very simple component with a story. The component has an input: @Input({ required: true }) public title: string;

Compodoc successfully generates the correct object:

   {
      "required": true,
      "name": "title",
      "deprecated": false,
      "deprecationMessage": "",
      "optional": false,
      "line": 20,
      "type": "string",
      "decorators": []
    }

However it appears the Storybook does not pick up the required property automatically (implied by the docs that Storybook will infer required fields) and set the argType in the table to required.

If I manually add the required flag to the argTypes in the story meta, it works (with some caveats)

Story meta (shortened for brevity)

const meta: Meta<TestComponent> = {
  title: 'TestComponent',
  component: TestComponent,
  argTypes: {
    title: {
      // @ts-ignore
      type: { required: true },
      control: { type: 'text' },
    },
  },
};

So here we see the second issue. I have to add @ts-ignore as it throws a Typescript error Type { required: true; } is not assignable to type - however it works, so feels like something is missing from the @storybook/angular Meta type

I've noticed that if you set argType with a name, typescript doesn't complain:

type: { name: 'string', required: true },

Feels strange having to set the name to one of the accepted types, as it doesn't appear to actually do anything. Could maybe make name optional?

Reproduction link

https://stackblitz.com/edit/storybook-angular-required-fields?file=src%2Fstories%2Fbutton.stories.ts

Reproduction steps

Go to the above link (might need to manually navigate to the Primary button story in the preview)
Note the required field is appearing after manually setting type: { required: true}
Remove @ts-ignore to see first issue - Angular Meta definition doesn't see type as valid
Remove the argType.primary config entirely so it reverts to Storybooks inferred setup for the control
Notice how the field is not marked as required even though compodoc marks it as required: true

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-essentials: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-interactions: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-links: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/addon-onboarding: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/angular: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/blocks: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    @storybook/test: ^8.3.0-alpha.2 => 8.3.0-alpha.2 
    storybook: ^8.3.0-alpha.2 => 8.3.0-alpha.2

Additional context

Feels like there's two issue here but closely related:

The Meta type from @storybook/angular needs to be able to see type: {} as valid if just required is set
Probably more important to me, Storybook needs to infer from compodoc that if a field is marked as required in the component and the property "required": true exists in the documentation.json then automatically mark that control as required without having to manually add that info to the control. Much nicer dev experience

// Path: /code/frameworks/angular/src/client/preview/angular/compodoc.ts function inferArgTypesFromCompodoc(compodocJson) { return compodocJson.reduce((acc, doc) => { acc[doc.name] = { type: { name: doc.type, required: doc.required }, // other properties... }; return acc; }, {}); }

// Path: /code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts const meta: Meta<DiComponent> = { component: DiComponent, argTypes: { title: { type: { name: 'string', required: true }, control: 'text' }, }, }; export default meta;

storybookjs / storybook