🚧 Added storybook for React components

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} />
+  ));