chore(storybook): deploy through Hugo instead of Chromatic

Orange-OpenSource · Feb 16, 2021 · 47692b7 · 47692b7
1 parent f1cf23b
commit 47692b7
Show file tree

Hide file tree

Showing 27 changed files with 447 additions and 50 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@
 /_gh_pages/
 /js/coverage/
 /site/static/sw.js
+/site/storybook/
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
diff --git a/.zeplin/components.json b/.zeplin/components.json
@@ -25,10 +25,10 @@
         {
             "name": "@zeplin/cli-connect-storybook-plugin",
             "config": {
-              "url": "https://storybook--5fc5eb7c9131880021f5e49c.chromatic.com",
+              "url": "https://deploy-preview-565--boosted.netlify.app/storybook",
               "fetchStories": false,
               "format": "new"
             }
         }
     ]
-}
+}
diff --git a/config.yml b/config.yml
@@ -46,6 +46,8 @@ module:
       target:           assets/js/vendor/tarteaucitron.js
     - source:           node_modules/tarteaucitronjs/lang
       target:           static/docs/5.0/assets/js/lang
+    - source:           site/storybook
+      target:           static/storybook
 
 params:
   description:          "Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.."

diff --git a/package.json b/package.json
@@ -86,8 +86,7 @@
     "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\"",
     "storybook": "start-storybook -p 6006 --no-manager-cache",
-    "storybook:build": "build-storybook",
-    "chromatic": "npx chromatic --project-token CHROMATIC_PROJECT_TOKEN"
+    "storybook:build": "build-storybook -o ./site/storybook",
   },
   "style": "dist/css/boosted.css",
   "sass": "scss/boosted.scss",
@@ -125,7 +124,6 @@
     "autoprefixer": "^10.2.4",
     "babel-loader": "^8.2.1",
     "bundlewatch": "^0.3.2",
-    "chromatic": "^5.4.0",
     "clean-css-cli": "^4.3.0",
     "core-js": "^3.7.0",
     "cross-env": "^7.0.3",

diff --git a/site/storybook/favicon.ico b/site/storybook/favicon.ico
diff --git a/site/storybook/iframe.html b/site/storybook/iframe.html
@@ -0,0 +1,133 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'preview',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-2W6Ddgejs+ZLUHWL9OWpfdx8K+DR+e1Muc2B220lXZmOgfxlJhYwD4YAC3AY5Kdx" crossorigin="anonymous"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-W2o49ENLT+DBWaKVqWtw/XBJz9PJBOF02ro9QBp2CGs45l8vRt0mY81zZNjSLxnU" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js" integrity="sha384-VzJG8txEnR93rWKSsWA5q4qsd8HzVgTF9D8j96AfQRwWr9a5M6IFgeJnd4Sbpg4P" crossorigin="anonymous"></script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";
+
+
+
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.40bed961612eaa67b18a.bundle.js"></script><script src="vendors~main.40bed961612eaa67b18a.bundle.js"></script><script src="main.40bed961612eaa67b18a.bundle.js"></script></body></html>
diff --git a/site/storybook/index.html b/site/storybook/index.html
@@ -0,0 +1,55 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }
+
+  window.onerror = function onerror(message, source, line, column, err) {
+    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
+    // eslint-disable-next-line no-var, vars-on-top
+    var xhr = new window.XMLHttpRequest();
+    xhr.open('POST', '/runtime-error');
+    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+    xhr.send(
+      JSON.stringify({
+        /* eslint-disable object-shorthand */
+        message: message,
+        source: source,
+        line: line,
+        column: column,
+        error: err && { message: err.message, name: err.name, stack: err.stack },
+        origin: 'manager',
+        /* eslint-enable object-shorthand */
+      })
+    );
+  };</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+
+
+
+              window['LOGLEVEL'] = "info";
+
+
+
+
+
+
+
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.2f5be1c5260834642668.bundle.js"></script><script src="main.5988f336ce852927ede5.bundle.js"></script></body></html>
diff --git a/site/storybook/main.40bed961612eaa67b18a.bundle.js b/site/storybook/main.40bed961612eaa67b18a.bundle.js
diff --git a/site/storybook/main.40bed961612eaa67b18a.bundle.js.map b/site/storybook/main.40bed961612eaa67b18a.bundle.js.map
diff --git a/site/storybook/main.5988f336ce852927ede5.bundle.js b/site/storybook/main.5988f336ce852927ede5.bundle.js
diff --git a/site/storybook/runtime~main.40bed961612eaa67b18a.bundle.js b/site/storybook/runtime~main.40bed961612eaa67b18a.bundle.js
diff --git a/site/storybook/runtime~main.40bed961612eaa67b18a.bundle.js.map b/site/storybook/runtime~main.40bed961612eaa67b18a.bundle.js.map
diff --git a/site/storybook/runtime~main.870e8ee0658e83d05c6b.bundle.js b/site/storybook/runtime~main.870e8ee0658e83d05c6b.bundle.js
diff --git a/site/storybook/static/media/code-brackets.2e1112d7.svg b/site/storybook/static/media/code-brackets.2e1112d7.svg