feat: storybook dark mode (#1061)

* feat: storybook dark mode

* push npm-shrinkwrap

* build(npm): dedupe overriden packages from top level package.json

* fix(npm): dedupe storybook addons accurately

* build(npm): update testing libraries

* build(npm): update jest breaking react 16 polyfill

* build(npm): update graphql-js to latest version

Co-authored-by: TED Vortex <ted.vortex@gmail.com>

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    "@babel/env",
-    "@babel/react"
+    "react-app"
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",

.storybook/index.css

@@ -0,0 +1,116 @@
+/* stylelint-disable */
+:root {
+  font-size: 62.5%;
+
+  /* colors */
+  --cheesyYellow: #f6d809;
+  --offWhite: #faeace;
+  --lightestGrey: #e6e6e6;
+  --lighterGrey: #bcbcbc;
+  --lightGrey: #8b8b8b;
+  --grey: #313d3e;
+  --backgroundGrey:#2F372E;
+  --darkestGrey:#0F0F0F;
+  --gold: #f6bc00;
+  --orange: #fe9d68;
+  --blue: #4d9abf;
+  --green: #00c7b7;
+  --darkGreen: #03b1a3;
+  --red: #fa3946;
+  --darkRed: #fa3946;
+  --saucyRed: #fa3946;
+
+  /* typography */
+  --thin: 100;
+  --light: 300;
+  --regular: 400;
+  --semibold: 500;
+  --bold: 700;
+  --black: 900;
+
+  /* padding */
+  --micro: 8px;
+  --tiny: 16px;
+  --small: 24px;
+  --medium: 40px;
+  --large: 64px;
+  --xl: 104px;
+  --xxl: 168px;
+
+  /* border radius */
+  --smallBorderRadius: 4px;
+  --borderRadius: 10px;
+
+  /* responsive breakpoints */
+  --mobile: 480px;
+  --tablet: 768px;
+  --blogNavBreak: 930px;
+  --desktop: 960px;
+  --display: 1200px;
+}
+
+#root {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+a {
+  cursor: pointer;
+}
+
+body {
+  background: var(--offWhite);
+  color: var(--grey);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  margin: 0 auto;
+}
+
+h1 {
+  margin: var(--micro) 0;
+}
+
+p {
+  margin: 0 0 var(--small) 0;
+}
+
+.greyed {
+  color: var(--lightGrey);
+}
+
+.form-control {
+  padding: 10px;
+}
+
+section {
+  padding: var(--tiny);
+  margin: 0 auto;
+}
+
+footer {
+  margin: auto;
+  padding: 32px 50px;
+  width: 300px;
+}
+body.dark {
+  background: var(--darkestGrey);
+  color: var(--lightestGrey);
+}
+body.dark img.svg {
+  filter: invert();
+}
+body.dark svg.svg {
+  fill: var(--lightestGrey);
+}
+body.dark select {
+  color: var(--lightestGrey);
+}
+body.dark .react-loading-skeleton{
+  background-color: var(--backgroundGrey);
+  background-image: linear-gradient(
+    90deg,
+    var(--backgroundGrey),
+    var(--grey),
+    var(--backgroundGrey)
+  );
+}
+

.storybook/main.js

@@ -1,20 +1,12 @@
+
 module.exports = {
   "stories": [
     "../stories/**/*.stories.js"
   ],
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-storysource"
-  ],
-  webpackFinal: async config => {
-    config.resolve.alias ={
-      ...config.resolve.alias,
-      // this is needed because there is some other packages that needs a different version of core-js
-      // so what this does is references the core-js version specific to storybook
-      "core-js/modules":"@storybook/core/node_modules/core-js/modules"
-    }
-
-    return config
-  }
-}
+    "@storybook/addon-storysource",
+    "storybook-dark-mode",
+  ]
+}

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/index.css" />

.storybook/preview.js

@@ -0,0 +1,7 @@
+export const parameters = {
+    darkMode: {
+        stylePreview: true,
+        darkClass: "dark",
+        lightClass: "light",
+    }
+};

config/polyfills.js

@@ -1,3 +1,5 @@
+window.global = window;
+
 if (typeof Promise === "undefined") {
   // Rejection tracking prevents a common issue where React gets into an
   // inconsistent state due to an error, but it gets swallowed by a Promise,
@@ -12,8 +14,3 @@ require("whatwg-fetch");
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require("object-assign");
-
-// https://github.com/facebook/jest/issues/4545
-global.requestAnimationFrame = function(callback) {
-  setTimeout(callback, 0);
-};