add storybook and linting

.cz-config.js

+const { commitizen } = require('@coko/lint')
+
+/**
+ * You can edit the config before you export it to suit your needs.
+ *
+ * eg.
+ * commitizen.scopes = [
+ *    'dashboard',
+ *    'team manager',
+ *    'api',
+ *    'models',
+ *    '*'
+ * ]
+ */
+
+module.exports = commitizen

.eslintignore

+!.eslintrc.js
+!.prettierrc.js
+!.cz-config.js
+!.storybook

.eslintrc.js

+/* eslint-disable import/no-extraneous-dependencies */
+const { eslint } = require('@coko/lint')
+
+/**
+ * You can edit the eslint config file here.
+ *
+ * eg.
+ * eslint.rules['no-console'] = ['warn', { allow: ['error', 'warn'] }],
+ *
+ */
+
+eslint.rules = {
+  'sort-keys': 'off',
+  'import/no-extraneous-dependencies': [
+    'error',
+    {
+      devDependencies: ['.storybook/**', 'stories/**'],
+    },
+  ],
+  'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+  'react/prop-types': [
+    2,
+    { ignore: ['children', 'className', 'onClick', 'theme'] },
+  ],
+}
+
+module.exports = eslint

.gitignore

 # dependencies
-/node_modules
+node_modules
 
 # testing
 /coverage

.prettierrc.js

+const { prettier } = require("@coko/lint");
+
+/**
+ * You can edit the config here:
+ *
+ * eg.
+ * prettier.semi = true
+ *
+ */
+
+module.exports = prettier;

.storybook/main.js

+const { main } = require('@coko/storybook')
+
+const webpackOverride = config => {
+  config.module.rules[0].use[0].options.plugins.splice(
+    3,
+    0,
+    'babel-plugin-parameter-decorator',
+  )
+
+  // console.dir(config.module.rules[0], { depth: null })
+  const babelLoaderPlugins = config.module.rules[0].use[0].options.plugins
+  console.dir(babelLoaderPlugins)
+
+  return config
+}
+
+main.webpackFinal = webpackOverride
+
+module.exports = main

commitlint.config.js

+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

package.json

@@ -3,8 +3,7 @@
   "version": "0.0.1",
   "main": "index.js",
   "author": "Collaborative Knowledge Foundation",
-  "description":
-    "Monorepo for wax-prosemirror, its components and its integrations",
+  "description": "Monorepo for wax-prosemirror, its components and its integrations",
   "repository": {
     "type": "git",
     "url": "git@gitlab.coko.foundation:wax/wax-prosemirror.git"
@@ -13,14 +12,14 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap --no-ci --hoist",
-    "clean":
-      "yarn run clean:artifacts && yarn run clean:packages && yarn run clean:root",
+    "clean": "yarn run clean:artifacts && yarn run clean:packages && yarn run clean:root",
     "clean:artifacts": "lerna run clean --parallel",
     "clean:packages": "lerna clean --yes",
     "clean:root": "rm -rf node_modules",
     "reset": "yarn clean && yarn",
     "build": "lerna run build",
-    "editoria": "cd editors/editoria && yarn start"
+    "editoria": "cd editors/editoria && yarn start",
+    "storybook": "coko-storybook"
   },
   "dependencies": {},
   "devDependencies": {
@@ -28,18 +27,21 @@
     "@babel/plugin-proposal-decorators": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@coko/lint": "^0.0.2",
+    "@coko/storybook": "^0.1.1",
+    "@rollup/plugin-commonjs": "^11.0.2",
     "babel-plugin-parameter-decorator": "1.0.12",
     "css-loader": "^0.28.11",
     "lerna": "^2.6.0",
+    "react": "^16.13.1",
     "react-app-rewired": "^2.1.2",
-    "style-loader": "^0.23.1",
-    "stylelint": "^8.2.0",
-    "svg-inline-loader": "^0.8.0",
     "rollup": "^2.2.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-terser": "^5.3.0",
-    "@rollup/plugin-commonjs": "^11.0.2"
+    "style-loader": "^0.23.1",
+    "stylelint": "^8.2.0",
+    "svg-inline-loader": "^0.8.0"
   },
   "resolutions": {
     "styled-components": "4.2.0",

stories/Button.stories.js

+import React from 'react'
+
+const Button = ({ onClick }) => (
+  <button onClick={onClick} type="button">
+    Click me
+  </button>
+)
+
+export const Base = () => <Button onClick={() => console.log('clicked!')} />
+
+export default {
+  component: Button,
+  title: 'Test/Button',
+}

stories/CommentBox.stories.js

+import React from 'react'
+// import { lorem } from 'faker'
+
+import CommentBox from '../wax-prosemirror-components/src/components/comments/CommentBox'
+
+export const Base = () => <CommentBox comment="fkljslfj" />
+
+export default {
+  component: CommentBox,
+  title: 'Test/Comment Box',
+}