updated storybook config

zookatron · Dec 13, 2018 · 307c9c2 · 307c9c2
1 parent 9833889
commit 307c9c2
Show file tree

Hide file tree

Showing 6 changed files with 328 additions and 47 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -1,5 +1,5 @@
 import "@storybook/addon-knobs/register";
+import "@storybook/addon-viewport/register";
+import "@storybook/addon-storysource/register";
 import "@storybook/addon-actions/register";
 import "@storybook/addon-options/register";
-import "@storybook/addon-a11y/register";
-import "@storybook/addon-viewport/register";
diff --git a/.storybook/config.ts b/.storybook/config.ts
@@ -1,25 +1,98 @@
-import { checkA11y } from "@storybook/addon-a11y";
-import { withInfo } from "@storybook/addon-info";
 import { withKnobs } from "@storybook/addon-knobs";
 import { setOptions } from "@storybook/addon-options";
+import {
+  configureViewport,
+  INITIAL_VIEWPORTS,
+} from "@storybook/addon-viewport";
 import { addDecorator, configure } from "@storybook/react";
 
 import "../src/index.module.sass";
 
+// addon-info is currently broken with prop types
+// import { withInfo } from "@storybook/addon-info";
+// addDecorator(
+//   withInfo({
+//     // propTables: false,
+//     source: false,
+//   }),
+// );
+
 setOptions({
-  name: "RBX",
+  name: "👟 rbx - Bulma UI",
   showAddonPanel: true,
   url: "https://github.com/dfee/rbx",
 });
 
-addDecorator(
-  withInfo({
-    // propTables: false,
-    source: false,
-  }),
-);
 addDecorator(withKnobs);
-addDecorator(checkA11y);
+
+configureViewport({
+  defaultViewport: "responsive",
+  // tslint:disable:object-literal-sort-keys
+  viewports: {
+    mobileSmall: {
+      name: "Mobile @ 480px",
+      styles: {
+        width: "480px",
+      },
+    },
+    mobileMax: {
+      name: "Mobile @ 768px (max)",
+      styles: {
+        width: "768px",
+      },
+    },
+    tabletMin: {
+      name: "Tablet @ 769px (min)",
+      styles: {
+        width: "769px",
+      },
+    },
+    tabletMax: {
+      name: "Tablet @ 1023px (max)",
+      styles: {
+        width: "1023px",
+      },
+    },
+    desktopMin: {
+      name: "Desktop @ 1024px (min)",
+      styles: {
+        width: "1024px",
+      },
+    },
+    desktopMax: {
+      name: "Desktop @ 1215px (max)",
+      styles: {
+        width: "1215px",
+      },
+    },
+    widescreenMin: {
+      name: "Widescreen @ 1216px (min)",
+      styles: {
+        width: "1216px",
+      },
+    },
+    widescreenMax: {
+      name: "Widescreen @ 1407px (max)",
+      styles: {
+        width: "1407px",
+      },
+    },
+    fullhdMin: {
+      name: "FullHD @ 1408px (min)",
+      styles: {
+        width: "1408px",
+      },
+    },
+    fullhdMax: {
+      name: "FullHD @ 2880px",
+      styles: {
+        width: "2880px",
+      },
+    },
+    ...INITIAL_VIEWPORTS,
+  },
+  // tslint:enable:object-literal-sort-keys
+});
 
 function loadStories() {
   const req = require.context("../stories", true, /\.story\.tsx$/);