🚧 Added storybook for React components

config/scripts.yaml

@@ -18,6 +18,7 @@ css-theme:
 components:
   test: "echo \"{{name}}: No tests configured. Perhaps you'd like to do this?\" && exit 0"
   build: "./scripts/build.sh"
+  storybook: "start-storybook -p 6663"
 core:
   test: "BABEL_ENV=production nyc mocha tests/*.test.js"
   report: "BABEL_ENV=production nyc report --reporter=html mocha --compilers js:babel-core/register tests/*.test.js"

package.json

@@ -51,8 +51,15 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "7.0.0",
     "@babel/register": "^7.0.0",
+    "@material-ui/core": "3.9.3",
+    "@material-ui/icons": "3.0.2",
+    "@storybook/addon-backgrounds": "5.0.10",
+    "@storybook/addon-knobs": "5.0.10",
+    "@storybook/addon-notes": "5.0.10",
+    "@storybook/react": "5.0.10",
     "@svgr/rollup": "^2.4.1",
     "ava": "^1.2.1",
+    "babel-loader": "8.0.5",
     "chai": "^4.1.2",
     "chai-string": "1.4.0",
     "chalk": "2.4.2",
@@ -83,6 +90,7 @@
     "prop-types": "15.7.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-intl": "2.8.0",
     "react-scripts": "^1.1.4",
     "rimraf": "2.6.3",
     "rmfr": "^2.0.0",
@@ -100,6 +108,7 @@
     "rollup-plugin-url": "2.2.1",
     "rollup-plugin-yaml": "1.1.0",
     "standard": "^12.0.1",
+    "storybook-addon-material-ui": "0.9.0-alpha.18",
     "uglifycss": "0.0.29",
     "verdaccio": "3.11.6"
   },

packages/components/.storybook/addons.js

@@ -0,0 +1,4 @@
+import "storybook-addon-material-ui";
+import "@storybook/addon-backgrounds/register";
+import "@storybook/addon-knobs/register";
+//import '@storybook/addon-notes/register';

packages/components/.storybook/backgrounds.js

@@ -0,0 +1,11 @@
+export const dark = [
+  {
+    name: "dark",
+    value: "#212529",
+    default: true
+  }
+];
+
+export default {
+  dark
+};

packages/components/.storybook/config.js

@@ -0,0 +1,17 @@
+import { configure } from "@storybook/react";
+import { addParameters } from "@storybook/react";
+
+function loadStories() {
+  // Load all 'stories.js' files under src
+  const req = require.context("../src", true, /stories\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+//addParameters({
+//  backgrounds: [
+//    { name: 'Light', value: '#f8f9fa', default: true },
+//    { name: 'Dark', value: '#212529' },
+//  ],
+//});
+
+configure(loadStories, module);

packages/components/package.json

@@ -21,7 +21,8 @@
     "modulebuild": "BABEL_ENV=production rollup -c -o ../../dist/components/index.mjs -f es",
     "build": "./scripts/build.sh",
     "test": "echo \"components: No tests configured. Perhaps you'd like to do this?\" && exit 0",
-    "pubtest": "npm publish --registry http://localhost:6662"
+    "pubtest": "npm publish --registry http://localhost:6662",
+    "storybook": "start-storybook -p 6663"
   },
   "peerDependencies": {
     "react": "^16.4.1",

packages/components/src/Emblem/stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { storiesOf, addDecorator } from "@storybook/react";
+import Emblem from ".";
+import "../../../../dist/css-theme/theme.css";
+
+storiesOf("Graphics/Emblem", module).add(
+  "FreeSewing",
+  () => <Emblem t1="Free" t2="Sewing" />,
+  { notes: { markdown: ` test **here**` } }
+);

packages/components/src/Logo/stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { storiesOf, addDecorator } from "@storybook/react";
+//import {muiTheme} from 'storybook-addon-material-ui';
+import Logo from ".";
+
+storiesOf("Graphics/Logo", module)
+  // .addDecorator(muiTheme())
+  .add("Default", () => <Logo />)
+  .add("Custom size", () => <Logo size={100} />)
+  .add("Custom color", () => (
+    <div style={{ color: "green" }}>
+      <Logo />
+    </div>
+  ))
+  .add("Embedded", () => <Logo embed={true} />);

packages/components/src/Ogol/stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Ogol from ".";
+import "../../../../dist/css-theme/theme.css";
+import { dark as backgrounds } from "../../.storybook/backgrounds";
+
+storiesOf("Graphics/Ogol", module)
+  .add("Default", () => <Ogol />, { backgrounds })
+  .add("Custom color", () => <Ogol color="green" />, { backgrounds })
+  .add("Custom size", () => <Ogol size={200} />, { backgrounds });

packages/components/src/draft/options/Bool/index.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+
+const Bool = props => {
+  const [value, setValue] = useState(props.dflt);
+  const toggle = () => {
+    props.updateOption(props.name, !value);
+    setValue(!value);
+  };
+  return (
+    <RadioGroup onChange={toggle} value={JSON.stringify(value)}>
+      <FormControlLabel
+        control={<Radio color="primary" />}
+        value="false"
+        checked={value === "false" ? true : false}
+        label={props.labels[0]}
+      />
+      <FormControlLabel
+        control={<Radio color="primary" />}
+        value="true"
+        checked={value === "true" ? true : false}
+        label={props.labels[1]}
+      />
+    </RadioGroup>
+  );
+};
+
+Bool.propTypes = {
+  dflt: PropTypes.bool,
+  labels: PropTypes.arrayOf(PropTypes.string),
+  updateOption: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired
+};
+
+Bool.defaultProps = {
+  dflt: false,
+  labels: ["false", "true"]
+};
+
+export default Bool;

packages/components/src/draft/options/Bool/stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import Bool from ".";
+
+const props = {
+  updateOption: (name, value) =>
+    console.log(`Updated option ${name}, value is now: ${value}`),
+  name: "exampleBoolOption"
+};
+const noyes = ["No", "Yes"];
+
+storiesOf("Draft/Options/Bool", module)
+  .add("Default", () => <Bool {...props} />)
+  .add("Default: false", () => <Bool {...props} dflt={false} />)
+  .add("Default: true", () => <Bool {...props} dflt={true} />)
+  .add("With labels, No", () => <Bool {...props} dflt={false} labels={noyes} />)
+  .add("With labels, Yes", () => (
+    <Bool {...props} dflt={true} labels={noyes} />
+  ));

packages/mui-theme/src/index.js

@@ -1,26 +1,9 @@
-import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
-
 const asTitle = {
   fontFamily: "Roboto Condensed",
   fontWeight: "bold"
 };
 
 const theme = {
-  typography: {
-    fontFamily: [
-      "-apple-system",
-      "BlinkMacSystemFont",
-      "Segoe UI",
-      "Roboto",
-      "Helvetica",
-      "Arial",
-      "sans-serif",
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol"
-    ].join(","),
-    useNextVariants: true
-  },
   props: {
     MuiButtonBase: {
       //disableRipple: true // Disabling ripple everywhere
@@ -33,30 +16,21 @@ const theme = {
   }
 };
 
-const dark = "#212529";
+const darkBg = "#212529";
-const light = "#f8f9fa";
+const lightBg = "#f8f9fa";
 
 const palettes = {
   dark: {
-    primary: { main: light },
+    primary: { main: lightBg },
-    secondary: { main: dark },
+    secondary: { main: darkBg },
     type: "dark"
   },
   light: {
-    primary: { main: dark },
+    primary: { main: darkBg },
-    secondary: { main: light },
+    secondary: { main: lightBg },
     type: "light"
   }
 };
 
-/** Allows us to switch the theme's dark mode
+export const dark = { ...theme, palette: palettes.dark, themeName: "Dark" };
- * returns a theme object configured for dark mode
+export const light = { ...theme, palette: palettes.dark, themeName: "Light" };
- * or not, depending whether you pass it 'dark' or anything else
- */
-const createTheme = name =>
-  createMuiTheme({
-    ...theme,
-    palette: name === "dark" ? palettes.dark : palettes.light
-  });
-
-export default createTheme;