Description
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 - AngularMeta
definition doesn't seetype
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 thoughcompodoc
marks it asrequired: 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 seetype: {}
as valid if justrequired
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 thedocumentation.json
then automatically mark that control as required without having to manually add that info to the control. Much nicer dev experience