Support Component Story Format (CSF)

[kof]

The idea is to use csf as a way to describe a component to the designer.

This format should let a component express:

• controls in the properties and style panels
• supported values for style and properties
• enable designer render any component with a story out of the box

This is a complex topic that needs research and prototyping.

Tasks

• add stories to primitives and describe all available properties for each component (includes all available html properties)
• make sure storybook can display those stories
• render autocomplete inputs in props panel using options and controls from stories
• think about how predefined styles on each component could also be expressed via CSF
• support boolean prop types
• support numeric prop types
• use docgen to generate argTypes
• improve types if needed for primitives to generate good argTypes
• better ux that lets user discover properties

PRs

• CSF in Properties #53
• Provide stories with argTypes for primitives webstudio-sdk#3

[kof]

Known issues in properties section

• Layout with value as an input field seems broken
  

• Wrong props don't show as error or something and also don't let me enter value, one of these needs to be enabled I guess?
  

• data- properties should always be enabled, right? Maybe except of the once we use in the system? e.g. data-component, data-id and a few more .... though maybe we just need to switch to something like data-webstudio-something to avoid conflicts
  

[SaraVieira]

• The HTML attribute class is not recognized as a valid attribute while classname is

[kof]

• cloned website in production now doesn't show correct attributes on elements: e.g. links don't have the href they used to have, saving new href works, but somehow we are not rendering the current value of an existing href neither in the properties panel nor on canvas

[kof]

I think we should close this one and create follow-up issues