Wrong prop types displayed in Storybook props table

[mimarz]

When declaring a default value for native props in our preview story, wrong type is displayed in the props table. It uses the type for the value declared in the preview story instead of the actual type on the component.

Notes;

• Alert has defined a string default value for children in its preview story, resulting in string being shown as the prop type instead of the native one, ReactNode
• Maybe there is a solution in tweaking our reactDocgen settings/parsing

[elaffen]

Why should you list the children prop unless it's something else than the default ReactNode?

• One reason could be that you want to add some valuable description/doc for the usage of children in the component.
• You would like the type to be something else. For example 'string'
  There is an option for reactDocgenTypescriptOptions which will let you skip the listing of children: skipChildrenPropWithoutDoc: false,

[mimarz]

Aye, having tested a bit this looks to be related specifically to the children prop.

Its a good point of declaring jsdoc for children for more composed component such as Accordion, where we expect the children to be multiple Accordion.Item, but for something like Button maybe not so, we still want that to be?

I agree we should document when children is expected to be a set of specific sub-components.

Lets do some testing with the skipChildrenPropWithoutDoc option. Maybe that can be a quick fix for now and we'll get some proper jsdoc for the children prop sorted later.

[elaffen]

Your propFilter prevents the children from being Docgenerated. That is why you need to define the prop yourself or tweak the filter.

designsystemet/apps/storybook/.storybook/main.ts

Line 19 in 6c59fc5

? !/node_modules/.test(prop.parent.fileName)

But because you have specified that children arg in the Alert-story, Storybook guesses that children is of type 'string'

designsystemet/packages/react/src/components/Alert/Alert.stories.tsx

Line 24 in 6c59fc5

children: 'En beskjed det er viktig at brukeren ser',

If you change the value of children in the story to true children: true, in Alert.stories.tsx line 24, Storybook will list the prop as boolean.

[mimarz]

Your propFilter prevents the children from being Docgenerated. That is why you need to define the prop yourself or tweak the filter.

designsystemet/apps/storybook/.storybook/main.ts

Line 19 in 6c59fc5

? !/node_modules/.test(prop.parent.fileName)

But because you have specified that children arg in the Alert-story, Storybook guesses that children is of type 'string'

designsystemet/packages/react/src/components/Alert/Alert.stories.tsx

Line 24 in 6c59fc5

children: 'En beskjed det er viktig at brukeren ser',

If you change the value of children in the story to true children: true, in Alert.stories.tsx line 24, Storybook will list the prop as boolean.

yeah, good catch! We added that filter because of performance problems locally with react-docgen scanning for types everywhere. We'll have to fix this somehow so that we get the correct types for children on all our components :)