From 40f6917664717bc17c1da77bcfbb40886ffd9494 Mon Sep 17 00:00:00 2001
From: Yannis Barlas <yannisbarlas@gmail.com>
Date: Tue, 7 Jul 2020 18:51:50 +0300
Subject: [PATCH] add storybook and linting
---
.cz-config.js | 16 ++++++++++++++++
.eslintignore | 4 ++++
.eslintrc.js | 27 +++++++++++++++++++++++++++
.gitignore | 2 +-
.prettierrc.js | 11 +++++++++++
.storybook/main.js | 19 +++++++++++++++++++
commitlint.config.js | 3 +++
package.json | 20 +++++++++++---------
stories/Button.stories.js | 14 ++++++++++++++
stories/CommentBox.stories.js | 11 +++++++++++
10 files changed, 117 insertions(+), 10 deletions(-)
create mode 100644 .cz-config.js
create mode 100644 .eslintignore
create mode 100644 .eslintrc.js
create mode 100644 .prettierrc.js
create mode 100644 .storybook/main.js
create mode 100644 commitlint.config.js
create mode 100644 stories/Button.stories.js
create mode 100644 stories/CommentBox.stories.js
diff --git a/.cz-config.js b/.cz-config.js
new file mode 100644
index 000000000..c3f32ef99
--- /dev/null
+++ b/.cz-config.js
@@ -0,0 +1,16 @@
+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
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..112b8a0d8
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+!.eslintrc.js
+!.prettierrc.js
+!.cz-config.js
+!.storybook
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..95f1ddc87
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,27 @@
+/* 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
diff --git a/.gitignore b/.gitignore
index 20790018a..44ab194f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
# dependencies
-/node_modules
+node_modules
# testing
/coverage
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 000000000..fd67d2bd7
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,11 @@
+const { prettier } = require("@coko/lint");
+
+/**
+ * You can edit the config here:
+ *
+ * eg.
+ * prettier.semi = true
+ *
+ */
+
+module.exports = prettier;
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 000000000..4ee3e1a9b
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,19 @@
+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
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 000000000..98ee7dfc2
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: ['@commitlint/config-conventional'],
+}
diff --git a/package.json b/package.json
index 08a39a251..29d92b9f3 100644
--- a/package.json
+++ b/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",
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
new file mode 100644
index 000000000..7e32f1bdd
--- /dev/null
+++ b/stories/Button.stories.js
@@ -0,0 +1,14 @@
+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',
+}
diff --git a/stories/CommentBox.stories.js b/stories/CommentBox.stories.js
new file mode 100644
index 000000000..812280873
--- /dev/null
+++ b/stories/CommentBox.stories.js
@@ -0,0 +1,11 @@
+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',
+}
--
GitLab