fix: update storybook to use custom element definitions and fix rollup #4629

nicholasrice · 2021-04-22T22:13:09Z

Pull Request

📖 Description

This PR updates the Storybook configuration to use component definitions. It updates the index-rollup.ts file to export a DesignSystem instance that has all components exported by the package registered to it, and the DesignSystem applied to the document body. Importing this side-effect into storybook's preview script causes all components to be defined for the Storybook inner-loop.

This PR also ensures that consumers of fast-components.min.js have FAST elements defined when the script is added, which is the desired experience for that script.

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

I have included a change request file using $ yarn change
I have added tests for my changes.
I have tested my changes.
I have updated the project documentation to reflect my changes.
I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

I have added a new component
I have modified an existing component
I have updated the definition file
I have updated the configuration file

⏭ Next Steps

EisenbergEffect

Awesome! I didn't know you were working on this. Let's get this in ASAP. I have some improvements I need to make to the DesignSystem API and would love to do that as a follow up to this. Marking this one off my list though 😄

chrisdholt

Let's go!

chrisdholt

@nicholasrice do you want to add a change file for this describing it?

nicholasrice · 2021-04-22T22:23:34Z

@EisenbergEffect yea I was porting of the DesignSystem to DesignTokens and realized I couldn't boot storybook to validate things were working!

EisenbergEffect · 2021-04-22T22:25:09Z

That's definitely a motivator to get this in 😉

#4629) * update storybook to use custom element defintions * Change files Co-authored-by: nicholasrice <[email protected]>

…#4634) * vNext: update components to extend FoundationElement (#4570) * support foundation element on accordion and accordion item * update anchor to use foundation element * update AnchoredRegion to extend FoundationElement * update Badge to extend FoundationElement * update breadcrumb and breadcrumb item to extend FoundationElement * update Button to extend FoundationElement * update checkbox to extend from FoundationElement * update Dialog to extend FoundationElement * update disclosure to extend FoundationElement * update divider to extend FoundationElement * update Flipper to extend FoundationElement * update horizontal scroll to extend FoundationElement * update Listbox and ListboxOption to extend FoundationElement * update combobox to extend FoundationElement * update select to extend combobox and update tests * fix listbox option styles and export * update tests (wip) * update Menu and MenuItem to extend FoundationElement * update number field to extend FoundationElement * update base name values * fix: prevent the mixin helper from copying over constructor properties * feat: fixture ergonomic improvements for foundation elements * test: fix Anchor and associated unit tests based on new system * remove incorrect tagFor usage * update radio and radiogroup * update skeleton * update slider and slider label * update switch * update tabs et all to use FoundationElement * update text area and text field to use foundation el * Update tooltip to use FoundationElement * update tests and tree item and view * remove website from lerna packages in favor of npm registry to prevent breaking changes for the time being * update progress and progress ring to use Foundation element * fixing the tests * feat: enable fixtures to handle N foundation elements and custom system * fixing tests! * Change files * fix errors in fast-website * update typings for explorer * update naming convention to lowercase fast * update imports for sites * Change files * update template names to lowercase * update style casing and apply updates to component registries * update tsdoc links for templates Co-authored-by: Rob Eisenberg <[email protected]> * (vNext) update casing for style exports (#4618) * update casing for style exports to illustrate they are functions * Change files * add api report * feat: refactor color recipes (#4623) * refactor color recipes away from DesignSystem data structure * rename dir * cleanup * factor binary-search out to it's own file * updating code docs * Change files * fixing binary-search * Update packages/web-components/fast-components/src/color-vNext/palette.ts Co-authored-by: Brian Heston <[email protected]> * addressing feedback * adding readme * pretty pretty closes #3833 Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Brian Heston <[email protected]> * fix: update storybook to use custom element definitions and fix rollup (#4629) * update storybook to use custom element defintions * Change files Co-authored-by: nicholasrice <[email protected]> * feat(design-system): better integrate with DI and enforce constraints * test(DesignSystem): add basic tests for new API behavior * fix(fast-components): update rollup index to use the new DS API * Change files Co-authored-by: Chris Holt <[email protected]> Co-authored-by: Nicholas Rice <[email protected]> Co-authored-by: Brian Heston <[email protected]> Co-authored-by: nicholasrice <[email protected]> Co-authored-by: EisenbergEffect <[email protected]>