Add Storybook to the project

[julien-deramond]

Closes #563

---

Preview: https://deploy-preview-565--boosted.netlify.app/storybook/

---

To-do

High priority

• Study Storybook sync with tools:
  • Zeplin
  • ZeroHeight
• If it is not needed to have dynamically properties, replace knobs addon with controls addon (more limited than knobs but this is an official addon)
• Add all the components
• Advanced theming : process in progress to have a specific Orange Open Source project to share a common configuration
• Stories automation:
  • Try to use our Hugo example shortcode (or any new one) to add stories content/examples?
• Add some guidance in the wiki:
  • e.g. if automation ↑ is not possible, we'll need to add related entries in DoDs:
    • for feature, add a new story;
    • for release: check stories got updated accordingly to latest changes.
• Mention Storybook somewhere in our docs? Is that useful at all?

Medium priority

• Try the official addons
  • Accessibility
    • Basic usage
    • Advanced usage
  • Actions
  • Backgrounds
  • Console
  • Controls.
  • Docs
  • Knobs
  • Links
  • Source
  • Storyshots
  • Toolbars
  • Viewport
• What about community addons? Or writing an addon?
• Add the global design rules?
• Try to apply some theming;
• Be able to deploy branches to specific temporary URLs to show a WIP

Integration

Default Storybook configuration created like this:

nvm use default # npm --version v6.14.5
npx sb init # chose HTML
npm i core-js --save-dev

How to test

npm i
npm run storybook

---

Dropped

Chromatic

Was setup for deployment convenience, but replaced with Storybook static build + Hugo mounts.

• Deploy Storybook v5-dev branch to a unique URL via GitHub Actions using Chromatic
  • Chromatic: https://www.chromatic.com/library?appId=5fc5eb7c9131880021f5e49c
  • Permalink: https://storybook--5fc5eb7c9131880021f5e49c.chromatic.com/
• Link the Chromatic project to this GitHub project (https://www.chromatic.com/docs/access). Otherwise, users must sign in to access to Storybook

[julien-deramond]

ℹ️ This comment will help me to track what I'm doing to try to connect Zeplin and Storybook.

• Zeplin Connected Components Documentation
  • getting started guide for all platforms/frameworks: guide which covers how to get started with Connected Components for any platform/framework.
    • Not yet useful: Created .zeplin/components.json with a nearly empty configuration
    • Not yet useful: Installed VS Code extension
  • Adding Storybook links
    • npm install -g @zeplin/cli
    • npm i @zeplin/cli-connect-storybook-plugin --save-dev
    • Created an account on Zeplin and installed the macOS app.
    • Created an account on Figma, a layer containing a component and exported it in Zeplin
    • Configured components.json
    • Run env ZEPLIN_ACCESS_TOKEN=xxxxxxx node_modules/.bin/zeplin connect (without proxy)
  • Adding repository links, e.g. GitHub.
    Note: this adds a link to https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/storybook/stories/Alerts/alert.stories.js

[julien-deramond]

ℹ️ This comment will help me to track what I'm doing to try to connect ZeroHeight and the rest of the World.

• Create an account on ZeroHeight - Ask me to invite you to be able to edit it!
• Deploy a styleguide -> https://zeroheight.com/7183633e4
• Create an 'Alerts' page -> https://zeroheight.com/7183633e4/p/67e8b2-alerts
• Embed Storybook story with addons

[ffoodd]

So after a few tries:

• Dropped Chromatic for now (keeping it in commit history for now, just in case → should be dropped completely through rebase if we don't go back)
• Use Storybook internal build command to get a static version, in ./site/storybook/
• Use Hugo mounts feature to get it through Hugo generation, moving it to /storybook path.

So as of now, Chromatic isn't needed and might be ignored if its design-collaboration features don't get GDL attention.

Note for future self:

• Keeping accessibility tests in Storybook: useful or not? since we already check docs through Pa11y.
• Should /storybook be added to Percy snapshots? I'd say no since we alreaédy check guidelines, and have a monthly quota for snapshots.

[ffoodd]

If/when IOT-Map-Component gets linked to Boosted in any way, Storybook composition might be welcome.

[julien-deramond]

Just for info, I've modified the Zeroheight page used in this PR to embed Storybook components now deployed in Netflify (instead of Chromatic - dropped): https://zeroheight.com/7183633e4/p/18af52-alerts-netlify.

[louismaximepiton]

Looks like the Hash of boosted.css and boosted.bundle.js are the same between main branch and this one. Do I need to chack all of them ?
We don't have any images like logos, or icons/images in localhost.

The changes seem to be great, but I have several questions before merging.

[louismaximepiton]

Do we need all of them ? (array)

[julien-deramond]

Probably not but too much to investigate right now. I'll put it in the issue created after the merge.

[louismaximepiton]

LGTM, let's try it

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
7 Code Smells

No Coverage information
0.0% Duplication