Add Storybook

.eslintignore

@@ -4,3 +4,4 @@
 /_site/
 /js/coverage/
 /site/static/sw.js
+/site/storybook/

.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,20 @@
+// 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",
+    "@storybook/addon-links",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        measure: false
+      }
+    },
+    "@storybook/addon-interactions",
+    "@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,19 @@
+
+<!-- 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@5/dist/fonts/HelvNeue55_W1G.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/boosted@5/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@5/dist/css/orange-helvetica.min.css" rel="stylesheet" crossorigin="anonymous">
+
+<!-- Boosted CSS -->
+<link href="https://cdn.jsdelivr.net/npm/boosted@5/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,7 @@
+pre.prismjs {
+  color: #fff;
+
+  code {
+    font-size: 0.8rem;
+  }
+}

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…"