docs(web-components): match storybook argTypes to custom element manifest

[davatron5000]

Previous Behavior

Nearly all stories had either an error or some sort of missing property

New Behavior

• Generated a verify-storybook script that verifies that Storybook matches the CEM
• verify-storybook will also surface missing JSDocs for cssProps/cssVars/events in the component class
• Updated all stories with missing attributes, properties, events, etc (nearly all stories)
• Added sorting for stories
• Patched up a few quick and styling gaps
• Removed autofocus from all component classes because this is a feature of HTML, not our components (Tests passed in all browsers locally)

Related Issue(s)

• Fixes #

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[davatron5000]

@radium-v @marchbox Thanks for the feedback because it made me realize there's got to be a better way. I pushed up some changes to the extent that this could be considered an entirely different PR. Here's what changed from before:

• Abandoned the verify-storybook.js script
• Forked @wc-toolkit/storybook-helpers to support FAST
• Converted all Storybook stories to use the argTypes from the new .storybook/wc-toolkit-helpers.ts

This has cleaned up a lot of the gnarliness from the previous PR and exposed some documentation pieces my previous verify-storybook script had missed. It also fixes some of the naming consistency issues brought up in the previous PR review.

The wc-toolkit fork is 90% the same but with three critical differences that map to how our stories work:

• Supports FASTElement - wc-toolkit's version has a peer dependency on lit and tries to negotiate a TemplateResult with Lit for the story template. Becuase we have all our renderComponent() helper logic in there, I removed all the Lit-specific template result and how we pass templates into the story is still the same.
• **Hides all fooAttributeChanged methods - I found the fooAttributeChanged methods to be a bit noisy. I removed them from the methods block in the argTypes table.
• Follows our fooSlottedContent pattern - Rather than re-write all our stories, I made the helper follow our pattern for customized slotted content at the story-level.
  • default slots map to slottedContent: () => {}
  • slot="foo" maps to fooSlottedContent: () => {}

The biggest change here is that we're leveraging the CEM for 90% of our storybook argTypes with a few additions here and there. Overall this feels like a major upgrade in terms of maintainability and quality because I was able to surface and fix up broken CEM tags.

Possible future explorations are fixing ordering and using the CEM for default args values as well.

Feedback was addressed. @radium-v went on vacation (yay!) and the only lingering point of feedback is about grouping aria-* attributes and that can be addressed in a follow up PR. This is also blocking a PR around TextInput autofocus.