storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.93k stars 9.21k forks source link

[Feature Request]: [Storybook] [web components] [renderer] only add type to items at category 'properties' from custom-element.json #19582

Open mgutbor opened 1 year ago

mgutbor commented 1 year ago

Is your feature request related to a problem? Please describe

We are trying to create all controls from all elements extracted from custom-element.json without writing it on story index as argTypes.

We work with lit, analize all documentation in the components with web component analyzer to create custom-element.json.

We discovered in this file custom-elements.ts a function mapItem that takes individual elements from each section on custom-element.json and creates from them the argTypes of the story.

The first line of this function:

const type = category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };

only assigns type from the previous item to the items on category "properties", and assigns type 'void' to all other categories on custom-element.json.

Describe the solution you'd like

At category 'css custom properties' in custom-element.json, we have added:

"type": "color"

to all the custom css properties like this:

"name": "--button-color-background", "description": "Component surface color", "default": "\"--theme-color-background\"", "type": "color"

and none of them maintains color type when the previous file create its argType.

Would be perfect that previous mapItem function will add type (if included) to all items in all categories at custom-element.json file, not only to items at 'properties' category.

Describe alternatives you've considered

As workaround, we propose to change line 50/51 from custom-elements.ts file:

const type = category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };

to

const type = item.type !== undefined ? { name: item.type?.text || item.type } : { name: 'void' };

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

BodhisattaKumar commented 1 year ago

i want to like work in this issue please assign me this issue