Update packages

.babelrc

@@ -1,12 +1,9 @@
 {
-  "presets": ["es2016", "es2015", "react"],
-  "plugins": ["transform-flow-strip-types", "transform-class-properties", "transform-object-rest-spread"],
+  "presets": ["@babel/preset-es2016", "@babel/preset-es2015", "@babel/preset-react", "@babel/preset-stage-2"],
+  "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "development": {
       "plugins": ["react-hot-loader/babel"]
-    },
-    "test": {
-      "plugins": ["rewire"]
     }
   }
 }

.flowconfig

@@ -1,5 +1,6 @@
 [ignore]
 .*/node_modules/promise/
+.*/node_modules/draft-js/lib/DraftEditor.react.js.flow
 
 [include]
 

config/configure-enzyme.js

@@ -0,0 +1,4 @@
+import enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+enzyme.configure({ adapter: new Adapter() })

package.json

@@ -39,56 +39,63 @@
   "author": "Shingo Sato <shinsugar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "decorate-component-with-props": "^1.0.2",
-    "draft-js": "~0.10.1",
-    "draft-js-checkable-list-item": "^2.0.5",
+    "decorate-component-with-props": "^1.1.0",
+    "draft-js-checkable-list-item": "^3.0.0",
     "immutable": "~3.7.4",
     "union-class-names": "^1.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-rewire": "^1.1.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "coveralls": "^2.13.1",
-    "css-loader": "^0.28.4",
-    "draft-js-plugins-editor": "2.0.0-rc2",
-    "enzyme": "^2.8.2",
-    "eslint": "^4.0.0",
-    "eslint-plugin-babel": "^4.1.1",
-    "eslint-plugin-flowtype": "^2.34.0",
-    "eslint-plugin-react": "^7.1.0",
-    "flow-bin": "^0.42.0",
-    "gh-pages": "^1.0.0",
+    "@babel/cli": "^7.0.0-beta.36",
+    "@babel/core": "^7.0.0-beta.36",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0-beta.36",
+    "@babel/polyfill": "^7.0.0-beta.36",
+    "@babel/preset-es2015": "^7.0.0-beta.36",
+    "@babel/preset-es2016": "^7.0.0-beta.36",
+    "@babel/preset-react": "^7.0.0-beta.36",
+    "@babel/preset-stage-2": "^7.0.0-beta.36",
+    "babel-core": "^7.0.0-0",
+    "babel-eslint": "^8.1.2",
+    "babel-jest": "^22.0.4",
+    "babel-loader": "^8.0.0-beta.0",
+    "coveralls": "^3.0.0",
+    "css-loader": "^0.28.7",
+    "draft-js": "~0.10.4",
+    "draft-js-plugins-editor": "^2.0.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.14.0",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint-plugin-react": "^7.5.1",
+    "flow-bin": "^0.62.0",
+    "gh-pages": "^1.1.0",
     "highlight.js": "^9.12.0",
-    "html-webpack-plugin": "^2.28.0",
-    "jest": "^20.0.4",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-ghfork": "^0.3.5",
-    "react-hot-loader": "3.0.0-beta.7",
-    "react-test-renderer": "^15.6.1",
-    "style-loader": "^0.18.2",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "raf": "^3.4.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-ghfork": "^0.5.1",
+    "react-hot-loader": "^3.1.3",
+    "react-test-renderer": "^16.2.0",
+    "regenerator-runtime": "^0.11.1",
+    "style-loader": "^0.19.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
   },
   "peerDependencies": {
-    "draft-js-plugins-editor": "~2.0.0-rc.1 || 2.0.0-rc2 || 2.0.0-rc1 || 2.0.0-beta12 || 2.0.0-beta11 || 2.0.0-beta10 || 2.0.0-beta9",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "draft-js": "~0.10.1",
+    "draft-js-plugins-editor": "^2.0.0",
+    "react": "^16.0.0 || ^15.0.0",
+    "react-dom": "^16.0.0 || ^15.0.0"
   },
   "jest": {
-    "testRegex": "test/.+-test\\.js$"
+    "testRegex": "test/.+-test\\.js$",
+    "setupFiles": [
+      "raf/polyfill",
+      "<rootDir>/config/configure-enzyme.js"
+    ]
   }
 }

src/Button/index.js

@@ -19,10 +19,8 @@ export type Props = {
   children: ?*,
 }
 
-export default class Button extends Component {
-  props: Props
-
-  toggleType = (event: SyntheticEvent): void => {
+export default class Button extends Component<Props> {
+  toggleType = (event: SyntheticEvent<HTMLButtonElement>): void => {
     event.preventDefault()
     this.props.store.setEditorState(
       RichUtils.toggleBlockType(

src/createOnTab.js

@@ -5,7 +5,7 @@ import { CheckableListItemUtils } from 'draft-js-checkable-list-item'
 import type { PluginFunctions } from './types/PluginFunctions'
 
 const createOnTab = (config: Object): Function => {
-  return (event: SyntheticKeyboardEvent, { getEditorState, setEditorState }: PluginFunctions): void => {
+  return (event: SyntheticKeyboardEvent<*>, { getEditorState, setEditorState }: PluginFunctions): void => {
     const editorState = getEditorState()
 
     const newEditorState = CheckableListItemUtils.onTab(event, editorState, config.maxDepth)

test/Button/index-test.js

@@ -4,6 +4,8 @@ import { CHECKABLE_LIST_ITEM } from 'draft-js-checkable-list-item'
 import { shallow } from 'enzyme'
 import Button from '../../src/Button'
 
+jest.unmock('draft-js-checkable-list-item')
+
 describe('<Button />', () => {
   it('render with default icon', () => {
     expect(

test/__mocks__/draft-js-checkable-list-item.js

@@ -0,0 +1,8 @@
+export const CheckableListItemUtils = {
+  onTab(e, editorState) {
+    if (editorState.param === 0) {
+      return editorState
+    }
+    return {}
+  }
+}

test/blockStyleFn-test.js

@@ -2,6 +2,8 @@ import { ContentBlock } from 'draft-js'
 import { CHECKABLE_LIST_ITEM } from 'draft-js-checkable-list-item'
 import blockStyleFn from '../src/blockStyleFn'
 
+jest.unmock('draft-js-checkable-list-item')
+
 describe('blockStyleFn', () => {
   it('return value is `checkable-list-item` ', () => {
     const block = new ContentBlock({ key: 'item0', type: CHECKABLE_LIST_ITEM })

test/createBlockRenderMap-test.js

@@ -1,6 +1,8 @@
 import { CHECKABLE_LIST_ITEM, UNORDERED_LIST_ITEM } from 'draft-js-checkable-list-item'
 import createBlockRenderMap, { wrapper } from '../src/createBlockRenderMap'
 
+jest.unmock('draft-js-checkable-list-item')
+
 describe('createBlockRenderMap', () => {
   it('return default blockRenderMap', () => {
     const ret = createBlockRenderMap({ sameWrapperAsUnorderedListItem: false })

test/createBlockRendererFn-test.js

@@ -3,6 +3,8 @@ import { Map } from 'immutable'
 import { CheckableListItem, CHECKABLE_LIST_ITEM } from 'draft-js-checkable-list-item'
 import createBlockRendererFn from '../src/createBlockRendererFn'
 
+jest.unmock('draft-js-checkable-list-item')
+
 describe('createBlockRendererFn', () => {
   it('render `checkable-list-item` block', () => {
     const block = new ContentBlock({ key: 'item0', type: CHECKABLE_LIST_ITEM, data: Map({ checked: true }) })

test/createOnTab-test.js

@@ -1,23 +1,10 @@
 import createOnTab from '../src/createOnTab'
 
+jest.mock('draft-js-checkable-list-item')
+
 describe('onTab', () => {
   const config = { maxDepth: 4 }
 
-  const mockOnTab = (e, editorState) => {
-    if (editorState.param === 0) {
-      return editorState
-    }
-    return {}
-  }
-
-  beforeEach(() => {
-    createOnTab.__Rewire__('CheckableListItemUtils', { onTab: mockOnTab })
-  })
-
-  afterEach(() => {
-    createOnTab.__ResetDependency__('CheckableListItemUtils')
-  })
-
   it('return value is `function` ', () => {
     const ret = createOnTab(config)
     expect(typeof ret).toBe('function')

test/index-test.js

@@ -1,6 +1,8 @@
 import { Map } from 'immutable'
 import createPlugin from '../src'
 
+jest.unmock('draft-js-checkable-list-item')
+
 describe('createPlugin', () => {
   it('create plugin', () => {
     const ret = createPlugin({})

webpack.config.js

@@ -13,7 +13,7 @@ const htmlWebpackPluginConfig = {
 }
 
 const entry = [
-  'babel-polyfill',
+  '@babel/polyfill',
   './example/index.js',
 ]