chore(storybook): add Storybook

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-knobs",
+    "@storybook/addon-links"
+  ]
+}

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<!-- Copyright © 2014 Monotype Imaging Inc. All rights reserved -->
+<link href="https://cdn.jsdelivr.net/npm/boosted@next/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-2W6Ddgejs+ZLUHWL9OWpfdx8K+DR+e1Muc2B220lXZmOgfxlJhYwD4YAC3AY5Kdx" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/boosted@next/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-iwr9aweSNic6ztcMiv2FDED5xfxEQWs1RqIePrGPaPvFBXHU3a7Q8/daP3P2sTgx" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/boosted@next/dist/js/boosted.bundle.min.js" integrity="sha384-H5G8iVLIwNC33L+kHC9kBSQQB4NHO36ZYt7soh3Fg54QSiEzBG+JadsuOX9jjBxu" crossorigin="anonymous"></script>

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -76,7 +76,9 @@
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
     "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
-    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
+    "storybook": "start-storybook -p 6006 --no-dll",
+    "build-storybook": "build-storybook --no-dll"
   },
   "style": "dist/css/boosted.css",
   "sass": "scss/boosted.scss",
@@ -90,7 +92,9 @@
     "url": "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues"
   },
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "@storybook/addon-knobs": "^6.1.0"
+  },
   "peerDependencies": {
     "popper.js": "^1.16.1"
   },
@@ -101,9 +105,15 @@
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
+    "@storybook/addon-actions": "^6.1.0",
+    "@storybook/addon-essentials": "^6.1.0",
+    "@storybook/addon-links": "^6.1.0",
+    "@storybook/html": "^6.1.0",
     "autoprefixer": "^10.0.2",
+    "babel-loader": "^8.2.1",
     "bundlewatch": "^0.3.1",
     "clean-css-cli": "^4.3.0",
+    "core-js": "^3.7.0",
     "cross-env": "^7.0.2",
     "delay-cli": "^1.1.0",
     "eslint": "^7.13.0",
@@ -135,6 +145,7 @@
     "popper.js": "^1.16.1",
     "postcss": "^8.1.6",
     "postcss-cli": "^8.2.0",
+    "react-is": "^17.0.1",
     "rollup": "^2.33.1",
     "rollup-plugin-istanbul": "^2.0.1",
     "sass": "^1.29.0",

stories/Alerts/alert-no-knobs.stories.js

@@ -0,0 +1,38 @@
+export default {
+  title: 'Components/Alerts (no knobs)'
+}
+
+export const Alerts = () => {
+  return `<div class="alert alert-dismissible alert-success" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>\
+  </div>
+  <div class="alert alert-info" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>
+  <div class="alert alert-success alert-sm" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>Success notification text goes here.</p>
+  </div>
+  <div class="alert alert-info alert-sm" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Info</span></span>
+    <p>Information notification text goes here.</p>
+  </div>
+  <div class="alert alert-warning alert-sm" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+    <p>Warning notification text goes here.</p>
+  </div>
+  <div class="alert alert-danger alert-sm" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Error</span></span>
+    <p>Error notification text goes here.</p>
+  </div>`
+}

stories/Alerts/alert.stories.js

@@ -0,0 +1,70 @@
+import {
+  withKnobs,
+  select,
+  text,
+  boolean
+} from '@storybook/addon-knobs'
+
+export default {
+  title: 'Components/Alerts',
+  decorators: [
+    withKnobs
+  ]
+}
+
+const Type = {
+  Success: {
+    class: 'alert-success',
+    text: 'Success notification test goes here.',
+    visuallyHiddenText: 'Success'
+  },
+  Information: {
+    class: 'alert-info',
+    text: 'Information notification test goes here.',
+    visuallyHiddenText: 'Information'
+  },
+  Warning: {
+    class: 'alert-warning',
+    text: 'Warning notification test goes here.',
+    visuallyHiddenText: 'Warning'
+  },
+  Danger: {
+    class: 'alert-danger',
+    text: 'Danger notification test goes here.',
+    visuallyHiddenText: 'Danger'
+  }
+}
+
+const Size = {
+  Small: {
+    class: 'alert-sm'
+  },
+  Medium: {
+    class: ''
+  }
+}
+
+export const Alerts = () => {
+  const type = select('Type', Type, Type.Success)
+  const typeClass = type.class
+  const mainText = text('Text', Type.Success.text)
+  const sizeClass = select('Size', Size, Size.Medium).class
+
+  const additionalContent = boolean('Additional content', false)
+
+  if (additionalContent) {
+    const description = text('Description', 'Description text goes here')
+    return `<div class="alert ${typeClass} ${sizeClass}" role="alert">
+      <span class="alert-icon"><span class="visually-hidden">${type.visuallyHiddenText}</span></span>
+      <div>
+        <h4 class="alert-heading">${mainText}</h4>
+        <p>${description}</p>
+      </div>
+    </div>`
+  }
+
+  return `<div class="alert ${typeClass} ${sizeClass}" role="alert">
+    <span class="alert-icon"><span class="visually-hidden">Success</span></span>
+    <p>${mainText}</p>
+  </div>`
+}

stories/Introduction.stories.mdx

@@ -0,0 +1,207 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/storybook-examples` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/storybook-examples/welcome.mdx</code>
+</div>