feat: add Storybook to link it to the DSM (#565)

.eslintignore

@@ -6,3 +6,5 @@
 /js/tests/integration/
 /site/static/sw.js
 /site/layouts/
+/site/storybook/
+/stories/auto/

.gitignore

@@ -48,3 +48,7 @@ Thumbs.db
 /.pa11y/
 /pa11y-ci-results.json
 /.github/release-drafter.yml
+
+# Storybook
+/stories/auto
+/site/storybook

.storybook/main.js

@@ -0,0 +1,18 @@
+// Note: addon-measure is forced to false in order to avoid it enabled in ZeroHeight
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-a11y",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        measure: false
+      }
+    },
+    "@storybook/preset-scss"
+  ],
+  "framework": "@storybook/html"
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import OrangeTheme from 'ods-storybook-theme/OrangeTheme.js';
+
+addons.setConfig({
+  theme: OrangeTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<!-- Preconnect to CDN: remove if not needed -->
+<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
+
+<!--
+  Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
+  Patent and Trademark Office and may be registered in certain other jurisdictions.
+  Copyright © 2014 Monotype Imaging Inc. All rights reserved.
+  Orange has purchased the right to use Helvetica in its websites and mobile applications.
+  If you are not autorized to used it, don't include the orangeHelvetica.css
+  See NOTICE.txt for more informations.
+-->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/fonts/HelvNeue55_W1G.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/fonts/HelvNeue75_W1G.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+<!-- Copyright © 2014 Monotype Imaging Inc. All rights reserved -->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/css/orange-helvetica.min.css" rel="stylesheet" crossorigin="anonymous">
+
+<!-- Boosted CSS -->
+<link href="https://cdn.jsdelivr.net/npm/boosted/dist/css/boosted.min.css" rel="stylesheet" crossorigin="anonymous">

.storybook/preview.js

@@ -0,0 +1,24 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import './storybook.scss';
+import prettier from 'prettier/esm/standalone';
+import htmlParser from 'prettier/esm/parser-html';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    expanded: true
+  },
+  viewport: { viewports: INITIAL_VIEWPORTS },
+  docs: {
+    transformSource: (src) => {
+      // Remove `() => `` from stories
+      const match = /^\(\) => [`'"](.*)['`"]$/sm.exec(src);
+      // Pretty print the Docs code source
+      return match ? prettier.format(match[1].trim(), {printWidth: 120, parser: "html", plugins: [htmlParser]}) : src;
+    }
+  }
+}

.storybook/storybook.scss

@@ -0,0 +1,15 @@
+pre.prismjs {
+  color: #fff;
+  font-size: .875rem;
+}
+
+// Bypass https://github.com/storybookjs/storybook/issues/15598
+.token.tag {
+  display: initial;
+  padding: initial;
+  font-size: .875rem;
+  font-weight: initial;
+  line-height: initial;
+  background-color: initial;
+  border: initial;
+}

config.yml

@@ -52,6 +52,8 @@ module:
       target:                       assets/js/vendor/tarteaucitron.js
     - source:                       node_modules/tarteaucitronjs/lang
       target:                       static/docs/5.2/assets/js/lang
+    - source:                       site/storybook
+      target:                       static/storybook
 
 params:
   subtitle:                         "Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library…"