init lerna

.babelrc

@@ -1,10 +1,2 @@
 {
-  "presets": ["env", "react", "flow", "stage-0"],
-  "plugins": [
-    "transform-decorators-legacy",
-    ["import", {
-      "libraryName": "antd",
-      "style": true
-    }]
-  ]
 }

.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
   plugins: ["react", "flowtype", "prettier"],
   env: {
     browser: true,
-    node: true
+    node: true,
+    jest: true
   },
   rules: {
     "new-cap": 0,

.vscode/settings.json

@@ -0,0 +1,6 @@
+
+{
+  "eslint.enable": true,
+  "flow.useNPMPackagedFlow": true,
+  "javascript.validate.enable": false
+}

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.9.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -19,13 +19,16 @@
   ],
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.14.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.1",
     "babel-loader": "^7.1.3",
+    "babel-plugin-import": "^1.1.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
-    "babel-plugin-import": "^1.1.0",
+    "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.11.6",
     "chai": "^3.5.0",
     "cross-env": "^2.0.1",
@@ -43,35 +46,31 @@
     "karma-mocha": "^1.1.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
+    "lerna": "^2.9.0",
     "mocha": "^2.4.5",
     "precommit-hook-eslint": "^3.0.0",
     "prettier": "^1.9.2",
     "react": "^16.2.0",
-    "react-addons-test-utils": "^15.3.1",
+    "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.2.0",
-    "rimraf": "^2.5.4",
     "read-metadata": "^1.0.0",
+    "regenerator-runtime": "^0.11.1",
+    "rimraf": "^2.5.4",
     "styled-components": "^3.2.1",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.10",
     "webpack-dev-server": "^3.1.0"
   },
   "scripts": {
-    "lint": "eslint src test docs",
-    "clean": "rimraf lib dist",
-    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
-    "build": "npm run build:commonjs && gulp",
-    "prepublish": "npm run clean && npm run check:src && npm run build",
-    "check:src": "npm run lint",
-    "test": "cross-env BABEL_ENV=test karma start --single-run",
-    "test:watch": "cross-env BABEL_ENV=test karma start",
-    "start": "node devServer.js",
-    "build:docs": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.prod.js",
-    "postpublish": "npm run build:docs",
-    "validate": "npm ls"
+    "build": "lerna exec --parallel -- babel src -d lib --copy-files",
+    "build:watch": "lerna exec --parallel -- babel src -d lib --copy-files -w",
+    "test": "lerna exec --parallel -- npm test",
+    "lint:src": "prettier --write ./packages/*/src/**/*.js && eslint ./packages/*/src/**/*.js",
+    "lint:test": "prettier --write ./packages/*/test/**/*.js && eslint ./packages/*/test/**/*.js",
+    "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --mode development",
+    "build:docs": "./node_modules/.bin/webpack --config webpack.config.prod.js --mode production"
   },
-  "pre-commit": [
-  ],
+  "pre-commit": [],
   "repository": "Canner/slate-editor-icons",
   "peerDependencies": {
     "immutable": "^4.0.0-rc.9",

packages/slate-icon-shared-wrapper/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["env", "react", "flow"],
+  "plugins": [
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    ["import", {
+      "libraryName": "antd",
+      "style": true
+    }]
+  ]
+}

packages/slate-icon-shared-wrapper/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@canner/slate-icon-shared-wrapper",
+  "version": "1.0.0",
+  "description": "Shared wrapper for slate icons",
+  "main": "lib/index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^22.4.2",
+    "react-test-renderer": "^16.2.0",
+    "slate": "^0.33.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0 || 16.x",
+    "react-dom": "^0.14.0 || ^15.0.0 || 16.x"
+  },
+  "dependencies": {
+    "quill-icons": "^0.4.0"
+  }
+}

packages/slate-icon-shared-wrapper/src/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`create a AlignJustify icon 1`] = `
+<span
+  data-active={false}
+  onClick={undefined}
+  onMouseDown={[Function]}
+>
+  <svg
+    className={undefined}
+    colorLabelClassName={undefined}
+    colorStyle={undefined}
+    evenClassName={undefined}
+    fillClassName={undefined}
+    height="18px"
+    strokeMitterClassName={undefined}
+    thinClassName={undefined}
+    transparentClassName={undefined}
+    viewBox="0 0 18 18"
+    width="18px"
+  >
+    <line
+      className="ql-stroke"
+      x1="15"
+      x2="3"
+      y1="9"
+      y2="9"
+    />
+    <line
+      className="ql-stroke"
+      x1="15"
+      x2="3"
+      y1="14"
+      y2="14"
+    />
+    <line
+      className="ql-stroke"
+      x1="15"
+      x2="3"
+      y1="4"
+      y2="4"
+    />
+  </svg>
+</span>
+`;

packages/slate-icon-shared-wrapper/src/__tests__/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import SharedWrapper from '../';
+import renderer from 'react-test-renderer';
+
+test('create a AlignJustify icon', () => {
+  const component = renderer.create(
+    <SharedWrapper
+      type="align-justify"
+      icon="AlignJustify"/>
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+})

src/items/toolbarIcon.js → packages/slate-icon-shared-wrapper/src/index.js

@@ -1,35 +1,34 @@
-import React, {Component, PropTypes} from 'react';
-import {utils} from 'slate-plugins';
+// @flow
+import * as React from 'react';
+import {type Change} from 'slate';
 import QuillIcons from 'quill-icons';
-import {assign} from 'lodash';
-const {preventDefault} = utils.defaultFunc;
 
-export default class ToolbarIcon extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    strokeClassName: PropTypes.string,
-    fillClassName: PropTypes.string,
-    evenClassName: PropTypes.string,
-    transparentClassName: PropTypes.string,
-    strokeMitterClassName: PropTypes.string,
-    colorLabelClassName: PropTypes.string,
-    thinClassName: PropTypes.string,
-    activeClassName: PropTypes.string,
-    activeStrokeClassName: PropTypes.string,
-    activeFillClassName: PropTypes.string,
-    activeEvenClassName: PropTypes.string,
-    activeTransparentClassName: PropTypes.string,
-    activeStrokeMitterClassName: PropTypes.string,
-    activeColorLabelClassName: PropTypes.string,
-    activeThinClassName: PropTypes.string,
-    colorStyle: PropTypes.object,
-    type: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-    isActive: PropTypes.bool,
-    state: PropTypes.object
-  };
+type Props = {
+  className?: string,
+  strokeClassName?: string,
+  fillClassName?: string,
+  evenClassName?: string,
+  transparentClassName?: string,
+  strokeMitterClassName?: string,
+  colorLabelClassName?: string,
+  thinClassName?: string,
+  activeClassName?: string,
+  activeStrokeClassName?: string,
+  activeFillClassName?: string,
+  activeEvenClassName?: string,
+  activeTransparentClassName?: string,
+  activeStrokeMitterClassName?: string,
+  activeColorLabelClassName?: string,
+  activeThinClassName?: string,
+  colorStyle?: {[string]: string},
+  type: string,
+  icon: string,
+  onClick?: (e: Event) => void,
+  isActive?: bool,
+  change: Change
+}
 
+export default class ToolbarIcon extends React.Component<Props> {
   render() {
     const {
       type,
@@ -53,11 +52,10 @@ export default class ToolbarIcon extends Component {
       thinClassName,
       className,
       colorStyle,
-      state, // eslint-disable-line no-unused-vars
+      change, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
-    /* eslint-disable max-len */
     const iconClassName = isActive ? activeClassName : className;
     const iconStrokeClassName = isActive ? activeStrokeClassName : strokeClassName;
     const iconStrokeMitterClassName = isActive ? activeStrokeMitterClassName : strokeMitterClassName;
@@ -66,11 +64,10 @@ export default class ToolbarIcon extends Component {
     const iconColorLabelClassName = isActive ? activeColorLabelClassName : colorLabelClassName;
     const iconTransparentClassName = isActive ? activeTransparentClassName : transparentClassName;
     const iconThinClassName = isActive ? activeThinClassName : thinClassName;
-    /* exlint-enable */
 
     const fontElement = React.createElement(
       QuillIcons[icon],
-      assign(...rest, {
+      Object.assign(...rest, {
         colorStyle: colorStyle,
         className: iconClassName,
         strokeClassName: iconStrokeClassName,
@@ -87,7 +84,7 @@ export default class ToolbarIcon extends Component {
       <span
         key={type}
         onClick={onClick}
-        onMouseDown={preventDefault}
+        onMouseDown={arg => arg}
         data-active={isActive || false}>
         {fontElement}
       </span>