refactored stories

.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "dist/index.js": {
-    "bundled": 74014,
-    "minified": 46422,
-    "gzipped": 8970
+    "bundled": 88776,
+    "minified": 58882,
+    "gzipped": 10585
   },
   "dist/index.es.js": {
     "bundled": 71172,
@@ -24,16 +24,16 @@
     "gzipped": 8795
   },
   "es/index.js": {
-    "bundled": 72918,
-    "minified": 45478,
-    "gzipped": 8733,
+    "bundled": 87646,
+    "minified": 57908,
+    "gzipped": 10344,
     "treeshaked": {
       "rollup": {
-        "code": 35116,
+        "code": 42405,
         "import_statements": 98
       },
       "webpack": {
-        "code": 37634
+        "code": 45291
       }
     }
   }

.storybook/addons.js

@@ -1,5 +1,4 @@
 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";

.storybook/config.ts

@@ -1,3 +1,4 @@
+import { withInfo } from "@storybook/addon-info";
 import { withKnobs } from "@storybook/addon-knobs";
 import { setOptions } from "@storybook/addon-options";
 import {
@@ -8,14 +9,7 @@ import { addDecorator, configure } from "@storybook/react";
 
 import "./storybook.sass";
 
-// addon-info is currently broken with prop types
-// import { withInfo } from "@storybook/addon-info";
-// addDecorator(
-//   withInfo({
-//     // propTables: false,
-//     source: false,
-//   }),
-// );
+addDecorator(withInfo());
 
 setOptions({
   name: "👟 rbx - Bulma UI",
@@ -27,8 +21,9 @@ addDecorator(withKnobs);
 
 configureViewport({
   defaultViewport: "responsive",
-  // tslint:disable:object-literal-sort-keys
   viewports: {
+    // tslint:disable:object-literal-sort-keys
+    responsive: INITIAL_VIEWPORTS.responsive,
     mobileSmall: {
       name: "Mobile @ 480px",
       styles: {
@@ -89,9 +84,12 @@ configureViewport({
         width: "2880px",
       },
     },
-    ...INITIAL_VIEWPORTS,
+    ...Object.keys(INITIAL_VIEWPORTS)
+      .filter(key => key !== "responsive")
+      .map(key => ({ [key]: INITIAL_VIEWPORTS[key] }))
+      .reduce((acc, cv) => ({ ...acc, ...cv }), {}),
+    // tslint:enable:object-literal-sort-keys
   },
-  // tslint:enable:object-literal-sort-keys
 });
 
 function loadStories() {

README.md

@@ -13,7 +13,7 @@
 
 ### To Install
 
-`npm install rbx` or `yarn add rbx`
+`npm install rbx [email protected]` or `yarn add rbx [email protected]`
 
 ### To Use