infrastructure/update-storybook-config

[hawkticehurst]

Pull Request Checklist

• Name your pull request your-development-type/short-description. Ex: feature/read-tiff-files
• Link to any relevant issue in the PR description. Ex: Resolves [Update License to MIT #12], adds tiff file format support
• Provide context of changes.
• Provide relevant tests for your feature or bug fix.
• Provide or update documentation for any feature added by your pull request.

Summary Of Changes
PR includes various Storybook configuration updates, a new onboarding README, and version bumps to all Storybook packages.

Storybook Config Updates

• Custom CDP branding (in the future this can be replaced with the new logo)
• Revised and reordered file structure in the sidebar that I believe improves organization and navigation
• Installed Storybook essential addons
• Dark mode 🤩

A Note
The version bump to all Storybook packages seems to have changed (read: broken) some default styling of the current components. This issue has not been addressed due to the fact that issue #11 (adopting Mozilla styling protocol) will be resolved in the very near future and effectively make this problem moot.

Update: The "broken styling" was because I removed an import for Semantic UI CSS styles in preview.js. With the import returned all is well in the land of CSS again.

[hawkticehurst]

Another update I just realized I didn't mention is that I moved all the filter components and associated files inside of the components directory to better logically group components.

I'm not sure if there was an intentional reason that the filter components lived outside the components directory, but if there was I'm happy to reverse that change.

[tohuynh]

@hawkticehurst Could you add commits from a recent PR (#19 ) to your PR?

[evamaxfield]

Looks good to me. As @tohuynh mentioned, just merge main in to this branch prior to merging this.

[tohuynh]

Thanks for adding the essentials addons and the introduction doc, they are great. Just have a few requests for changes.

Since we are going to create an exportable App, changing the structure is fine as there will be other folders like state and containers later on.

Is it possible to make the background configurable in Docs mode as well? Right now, while in Docs mode, selecting light or grey doesn't change the background?

Could you add a prettierignore file to ignore SVG files? Right now running npm run format is returning an error since there's no parser for SVG files. https://prettier.io/docs/en/ignore.html

[hawkticehurst]

Also from what I could find in the storybook docs, there is no default way to dynamically change the doc theme from dark to light.

However, there seems to be an addon that will let users toggle between dark mode and light mode.

From my brief skim I'm not sure if this will also apply to docs as well (the app UI and docs are independent of each other in terms of theming), but I would be happy to take some time to experiment and add those changes to this PR if you'd prefer.

[tohuynh]

Also from what I could find in the storybook docs, there is no default way to dynamically change the doc theme from dark to light.

However, there seems to be an addon that will let users toggle between dark mode and light mode.

From my brief skim I'm not sure if this will also apply to docs as well (the app UI and docs are independent of each other in terms of theming), but I would be happy to take some time to experiment and add those changes to this PR if you'd prefer.

If it's not possible using what we currently have, then it's no big deal.