Storybook enhancements

[julien-deramond]

Context

#565 introduced the usage of Storybook in Boosted as a link between Boosted documentation and the Design System Manager (DSM).
In some DSM "Develop" tabs, an iframe shows some components in action that are in fact Storybook stories from our "hidden" URL https://boosted.orange.com/storybook/.

However, the integration of Storybook within Boosted can be improved. This story is an epic one listing independent micro-tasks that should be tackled in different PRs. No need to create sub-issues.

Enhancements

• Introducing new dependencies ended up having some vulnerable dependencies in our package-lock.json

• trim-newlines that is patched in 3.0.1
• glob-parent that is patched in 5.1.2
• trim (because of @storybook/[email protected] and @storybook/[email protected]) that is patched in 0.0.3

Tackled by #2103 ?

---

• Error message when running npm run storybook-build and then npm run storybook

...
> [email protected] docs-vnu
> node build/vnu-jar.js

"file:/Users/ju/Orange-Boosted-Bootstrap/_site/storybook/index.html":1.38-1.60: info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.
"file:/Users/ju/Orange-Boosted-Bootstrap/_site/storybook/index.html":1.87-^C

vnu-jar.js doesn't like things generated in Storybook build. rm -rf site/storybook _site/storybook/ can help to reset the environment but a fix should be found to avoid having this error.

---

• Fix deprecation warning displayed when running npm run storybook

(node:24011) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)

---

• Bump sass-loader dep to the latest version

Right now if we do npm i sass-loader@latest and run npm run storybook we end up with the following error:

Tackled by #2103.

ERROR in ./.storybook/storybook.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./.storybook/storybook.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/ju/Orange-Boosted-Bootstrap/node_modules/sass-loader/dist/index.js:27:24)
 @ ./.storybook/storybook.scss 2:26-134 53:4-74:5 56:18-126
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/html/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/html/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/addon-a11y/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js

---

• Bump babel-loader dep to the latest version

Right now, npm run storybook crashes after the generation of all stories.

Tackled by #2103.

---

• Some addons can probably be removed safely to lighten our dev deps: @storybook/addon-actions, @storybook/addon-interaction and @storybook/addon-links

Tackled by #2103.

---

• JS is not working within the iframe in the DSM or within the Docs page in Storybook itself

Might be tackled by #2103. See https://deploy-preview-2103--boosted.netlify.app/storybook/?path=/docs/components-tooltips--docs.

Reproducible by going to https://boosted.orange.com/storybook/?path=/docs/components-tooltips--tooltips-0 and trying to play with the tooltips. Even if the JS code is embedded in the corresponding story, JS code isn't executed.

---

• Retrieve the list of components automatically in create-stories-from-doc.js. See

  Orange-Boosted-Bootstrap/stories/create-stories-from-doc.js

  Lines 41 to 78 in 3dfb87c

  	const files = [
  	['Accordion', '../_site/docs/5.2/components/accordion/index.html'],
  	['Alerts', '../_site/docs/5.2/components/alerts/index.html'],
  	['BackToTop', '../_site/docs/5.2/components/back-to-top/index.html'],
  	['Badge', '../_site/docs/5.2/components/badge/index.html'],
  	['Breadcrumb', '../_site/docs/5.2/components/breadcrumb/index.html'],
  	['ButtonGroup', '../_site/docs/5.2/components/button-group/index.html'],
  	['Buttons', '../_site/docs/5.2/components/buttons/index.html'],
  	['Card', '../_site/docs/5.2/components/card/index.html'],
  	['Carousel', '../_site/docs/5.2/components/carousel/index.html'],
  	['CloseButton', '../_site/docs/5.2/components/close-button/index.html'],
  	['Collapse', '../_site/docs/5.2/components/collapse/index.html'],
  	['Dropdowns', '../_site/docs/5.2/components/dropdowns/index.html'],
  	['Footer', '../_site/docs/5.2/components/footer/index.html'],
  	['ListGroup', '../_site/docs/5.2/components/list-group/index.html'],
  	['Modal', '../_site/docs/5.2/components/modal/index.html'],
  	['Navbar', '../_site/docs/5.2/components/navbar/index.html'],
  	['NavsTabs', '../_site/docs/5.2/components/navs-tabs/index.html'],
  	['OffCanvas', '../_site/docs/5.2/components/offcanvas/index.html'],
  	['OrangeNavbar', '../_site/docs/5.2/components/orange-navbar/index.html'],
  	['Pagination', '../_site/docs/5.2/components/pagination/index.html'],
  	['Placeholders', '../_site/docs/5.2/components/placeholders/index.html'],
  	['Popovers', '../_site/docs/5.2/components/popovers/index.html'],
  	['Progress', '../_site/docs/5.2/components/progress/index.html'],
  	['Scrollspy', '../_site/docs/5.2/components/scrollspy/index.html'],
  	['Spinners', '../_site/docs/5.2/components/spinners/index.html'],
  	['SteppedProcess', '../_site/docs/5.2/components/stepped-process/index.html'],
  	['Sticker', '../_site/docs/5.2/components/sticker/index.html'],
  	['Tags', '../_site/docs/5.2/components/tags/index.html'],
  	['TitleBars', '../_site/docs/5.2/components/title-bars/index.html'],
  	['Toasts', '../_site/docs/5.2/components/toasts/index.html'],
  	['Tooltips',
  	'../_site/docs/5.2/components/tooltips/index.html',
  	'var tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));\
  	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\
  	return new boosted.Tooltip(tooltipTriggerEl);\
  	})']
  	]

  .

Tackled via #2130.

---

• Avoid having to duplicate the JS code to embed in the stories.

Tackled via #2130.

Orange-Boosted-Bootstrap/stories/create-stories-from-doc.js

Lines 72 to 77 in 3dfb87c

	['Tooltips',
	'../_site/docs/5.2/components/tooltips/index.html',
	'var tooltipTriggerList = [].slice.call(document.querySelectorAll(\'[data-bs-toggle="tooltip"]\'));\
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {\
	return new boosted.Tooltip(tooltipTriggerEl);\
	})']

We could probably use the same technic that is used for StackBlitz

---

• Make all JS components work in Storybook. Currently only the tooltips are working

Tackled by #2130.

---

• Go through each items in Add Storybook to the project #565 (comment) and create sub-tasks here to improve the rendering and manipulations of the components in Storybook. It is possibily linked to what's been done already for StackBlitz.

Tackled by #2130.

---

• Add Forms elements into Storybook: inputs, quantity selector, etc. #2134

Tackled by #2130.