Merge pull request #39 from JiwoonKim/storybook

Change Style guide to Storybook

.gitignore

@@ -60,8 +60,8 @@ typings/
 # build directory
 build
 
-# styleguide build directory
-styleguide
+# storybook build directory
+storybook
 
 # Intellij IDE specific settings
 .idea/

.neutrinorc.js

@@ -6,23 +6,24 @@ module.exports = {
   use: [
     reactLint({
       rules: {
+        /**
+         * Ignores reference to functions used before the function declaration. 
+         * Since function declarations are hoisted, this is considered safe.
+         */
         'no-use-before-define': ['error', { 
-          /**
-           * Ignores reference to functions used before the function declaration. 
-           * Since function declarations are hoisted, this is considered safe.
-           */
           functions: false,
         }],
         'import/prefer-default-export': ['off'],
+        /**
+         * Allow both '.jsx' and '.js' file extensions to contain JSX
+         * ('.js' files are necessary for stories)
+         */
+        'react/jsx-filename-extension': ['error', { 
+          'extensions': ['.js', '.jsx'] 
+        }],
       },
     }),
     reactComponents(),
     jest(),
-    (neutrino) => {
-      neutrino.register('styleguide', () => ({
-        webpackConfig: neutrino.config.toConfig(),
-        skipComponentsWithoutExample: true,
-      }));
-    },
   ]
 };

.storybook/config.js

@@ -0,0 +1,3 @@
+import { configure } from '@storybook/react';
+
+configure(require.context('../src', true, /\.stories\.js$/), module);

package.json

@@ -14,22 +14,23 @@
     "lint": "eslint --cache --format codeframe --ext mjs,jsx,js src",
     "test": "jest",
     "test:watch": "jest --watch",
-    "styleguide": "styleguidist server",
-    "deploy": "styleguidist build && gh-pages --remote upstream -d styleguide"
+    "storybook": "start-storybook",
+    "deploy": "build-storybook -c .storybook -o storybook && gh-pages --remote upstream -d storybook"
   },
   "devDependencies": {
     "@material-ui/core": "^4.7.1",
     "@material-ui/icons": "^4.5.1",
     "@mozilla-frontend-infra/react-lint": "^2.0.1",
     "@neutrinojs/jest": "9.0.0-rc.5",
     "@neutrinojs/react-components": "9.0.0-rc.5",
+    "@storybook/react": "^5.2.8",
+    "babel-loader": "^8.0.6",
     "eslint": "^6.7.2",
     "gh-pages": "^2.1.1",
     "jest": "^24.9.0",
     "neutrino": "9.0.0-rc.5",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-styleguidist": "^10.2.1",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"

schemas/basicDataTypes/array/tupleValidation.json

@@ -4,9 +4,6 @@
     {
       "type": "number"
     },
-    {
-      "type": "string"
-    },
     {
       "type": "string",
       "enum": ["Street", "Avenue", "Boulevard"]

src/components/SchemaTable/index.stories.js

@@ -0,0 +1,77 @@
+import React, { Fragment } from 'react';
+import SchemaTable from './index';
+
+export default {
+  title: 'Schema Table',
+  component: SchemaTable,
+};
+
+/**
+ * Schema examples to use for displaying stories
+ */
+const defaultSchemas = {};
+
+defaultSchemas.boolean = require('../../../schemas/basicDataTypes/boolean/boolean.json');
+defaultSchemas.null = require('../../../schemas/basicDataTypes/null/null.json');
+defaultSchemas.integer = require('../../../schemas/basicDataTypes/numeric/integer.json');
+defaultSchemas.numberMultiples = require('../../../schemas/basicDataTypes/numeric/numberMultiples.json');
+defaultSchemas.numberRange = require('../../../schemas/basicDataTypes/numeric/numberRange.json');
+defaultSchemas.stringPattern = require('../../../schemas/basicDataTypes/string/stringPattern.json');
+defaultSchemas.stringFormat = require('../../../schemas/basicDataTypes/string/stringFormat.json');
+
+const arraySchemas = {};
+
+arraySchemas.emptyArray = require('../../../schemas/basicDataTypes/array/emptyArray.json');
+arraySchemas.listValidation = require('../../../schemas/basicDataTypes/array/listValidation.json');
+arraySchemas.tupleValidation = require('../../../schemas/basicDataTypes/array/tupleValidation.json');
+arraySchemas.containsValidations = require('../../../schemas/basicDataTypes/array/containsValidation.json');
+arraySchemas.additionalItems = require('../../../schemas/basicDataTypes/array/additionalItems.json');
+
+const objectSchemas = {};
+
+objectSchemas.emptyObject = require('../../../schemas/basicDataTypes/object/emptyObject.json');
+objectSchemas.simpleObject = require('../../../schemas/basicDataTypes/object/simpleObject.json');
+objectSchemas.propertySpecification = require('../../../schemas/basicDataTypes/object/propertySpecifications.json');
+objectSchemas.propertyDependency = require('../../../schemas/basicDataTypes/object/propertyDependencies.json');
+objectSchemas.requiredProperties = require('../../../schemas/basicDataTypes/object/requiredProperties.json');
+
+export const defaultType = () => (
+  <Fragment>
+    <h3>Boolean</h3>
+    <SchemaTable schema={defaultSchemas.boolean} />
+    <h3>Null</h3>
+    <SchemaTable schema={defaultSchemas.null} />
+    <h3>Integer</h3>
+    <SchemaTable schema={defaultSchemas.integer} />
+    <h3>Number</h3>
+    <SchemaTable schema={defaultSchemas.numberRange} />
+    <h3>String</h3>
+    <SchemaTable schema={defaultSchemas.stringPattern} />
+  </Fragment>
+);
+export const arrayType = () => (
+  <Fragment>
+    <h3>List Validation</h3>
+    <SchemaTable schema={arraySchemas.listValidation} />
+    <h3>Tuple Validation</h3>
+    <SchemaTable schema={arraySchemas.tupleValidation} />
+    <h3>Contains Validation</h3>
+    <SchemaTable schema={arraySchemas.containsValidations} />
+    <h3>Additional Items Specification</h3>
+    <SchemaTable schema={arraySchemas.additionalItems} />
+    <h3>Empty Array</h3>
+    <SchemaTable schema={arraySchemas.emptyArray} />
+  </Fragment>
+);
+export const objectType = () => (
+  <Fragment>
+    <h3>Simple Object</h3>
+    <SchemaTable schema={objectSchemas.simpleObject} />
+    <h3>Property Specification</h3>
+    <SchemaTable schema={objectSchemas.propertySpecification} />
+    <h3>Required Properties Specification</h3>
+    <SchemaTable schema={objectSchemas.requiredProperties} />
+    <h3>Empty Object</h3>
+    <SchemaTable schema={objectSchemas.emptyObject} />
+  </Fragment>
+);