🔧 Adjusted storybook display and added viewports.

D1no · Mar 7, 2022 · 3424c35 · 3424c35
1 parent a25d4ee
commit 3424c35
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -5,6 +5,7 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/preset-create-react-app",
+    "storybook-dark-mode",
   ],
   framework: "@storybook/react",
   core: {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,32 @@
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { themes } from "@storybook/theming";
+
+import {
+  goldenRatioLongContent,
+  goldenRatioShort,
+} from "@cv/views/DesignSystem";
 import DesignSystem from "@cv/views/DesignSystem";
 
 // TODO: Add ViewPort as Page Segments
 //       https://storybook.js.org/docs/react/essentials/viewport#add-new-devices
+
+const pageSegmentView = {
+  pageNarrow: {
+    name: "CV Section",
+    styles: {
+      width: `${goldenRatioShort}px`,
+      height: `${goldenRatioShort * 1.5}px`,
+    },
+  },
+  pageWide: {
+    name: "CV Content",
+    styles: {
+      width: `${goldenRatioLongContent}px`,
+      height: `${goldenRatioShort * 1.5}px`,
+    },
+  },
+};
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -10,15 +35,26 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  layout: "fullscreen",
+  viewport: {
+    viewports: { ...pageSegmentView, ...MINIMAL_VIEWPORTS },
+    defaultViewport: "pageNarrow",
+  },
   backgrounds: {
+    default: "light",
     grid: {
       cellSize: 14,
-      opacity: 0.5,
-      cellAmount: 4,
-      offsetX: 16,
-      offsetY: 16,
+      opacity: 0.2,
+      cellAmount: 2,
     },
   },
+  darkMode: {
+    // Override the default dark theme
+    dark: { ...themes.dark },
+    // Override the default light theme
+    light: { ...themes.normal },
+    current: "dark",
+  },
 };
 
 export const decorators = [

diff --git a/package.json b/package.json
@@ -113,14 +113,15 @@
     "@types/jest": "^27.4.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.26",
+    "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.13",
-    "@types/qrcode.react": "^1.0.2",
     "husky": "4",
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
     "react-scripts": "5.0.0",
     "sortier": "1.0.1",
+    "storybook-dark-mode": "^1.0.9",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -8356,6 +8356,7 @@ __metadata:
     react-router-dom: ^6.2.2
     react-scripts: 5.0.0
     sortier: 1.0.1
+    storybook-dark-mode: ^1.0.9
     typescript: ^4.6.2
     web-vitals: ^2.1.4
     webpack: ^5.70.0
@@ -9817,7 +9818,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
+"fast-deep-equal@npm:^3.0.0, fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
   checksum: e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d
@@ -18146,6 +18147,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-dark-mode@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "storybook-dark-mode@npm:1.0.9"
+  dependencies:
+    fast-deep-equal: ^3.0.0
+    memoizerific: ^1.11.3
+  peerDependencies:
+    "@storybook/addons": ^6.0.0
+    "@storybook/api": ^6.0.0
+    "@storybook/components": ^6.0.0
+    "@storybook/core-events": ^6.0.0
+    "@storybook/theming": ^6.0.0
+  checksum: e73d2cff9bbdd83f574142ad44446938d543efe5dbecac17e2d90e8b3a3a7c3841ac72d382bbe73d2e2c6059d85b488570d21db3a2356bae235aa95f74b65e91
+  languageName: node
+  linkType: hard
+
 "stream-browserify@npm:^2.0.1":
   version: 2.0.2
   resolution: "stream-browserify@npm:2.0.2"