fix: Support react 16.0 and upgrade development dependencies. close #14

jessy1092 · Oct 5, 2017 · 53f72dd · 53f72dd
1 parent 5eb27b1
commit 53f72dd
Show file tree

Hide file tree

Showing 9 changed files with 2,710 additions and 1,417 deletions.
diff --git a/package.json b/package.json
@@ -37,31 +37,34 @@
   },
   "main": "component/index.js",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.35.3",
+    "@storybook/react": "^3.2.12",
     "babel": "^6.5.2",
     "babel-core": "^6.24.1",
+    "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "babelify": "^7.2.0",
     "browserify": "^14.3.0",
     "browserify-global-shim": "^1.0.3",
-    "enzyme": "^2.8.0",
-    "enzyme-to-json": "^1.5.0",
-    "expect": "^1.20.2",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme-to-json": "^3.1.1",
     "gulp": "git://github.com/gulpjs/gulp.git#4.0",
     "gulp-babel": "^6.1.2",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^2.1.2",
     "gulp-util": "^3.0.6",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^19.0.2",
-    "react-addons-test-utils": "^15.5.1",
+    "jest": "^21.2.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-hot-loader": "3.0.0-beta.6",
-    "storybook-addon-specifications": "^1.0.16",
+    "react-test-renderer": "^16.0.0",
+    "storybook-addon-specifications": "^2.1.1",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   },

diff --git a/storybook/__conf__/mockConfig.js b/storybook/__conf__/mockConfig.js
@@ -1 +1,5 @@
 jest.mock('../facade');
+
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0);
+};
diff --git a/storybook/__mocks__/facade.js b/storybook/__mocks__/facade.js
@@ -1,14 +1,16 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
-import { shallow } from 'enzyme';
+Enzyme.configure({ adapter: new Adapter() });
 
-export const expect = require('jest-matchers'); // eslint-disable-line global-require
+const { shallow } = Enzyme;
 
 export const action = () => () => {};
 
 export const linkTo = () => {};
 
 export const specs = spec => {
-	spec();
+  spec();
 };
 
 export const describe = jasmine.currentEnv_.describe;
@@ -22,27 +24,27 @@ export const after = () => {};
 export const before = () => {};
 
 export const snapshot = (name, func) => {
-	it(name, () => func());
+  it(name, () => func());
 };
 
 const createSnapshot = (name, story) => {
-	it(name, () => {
-		expect(shallow(story)).toMatchSnapshot();
-	});
+  it(name, () => {
+    expect(shallow(story)).toMatchSnapshot();
+  });
 };
 
 export const storiesOf = function storiesOf() {
-	const api = {};
-	let story;
-	api.add = (name, func) => {
-		story = func();
-		createSnapshot(name, story);
-		return api;
-	};
-	api.addWithInfo = (name, func) => {
-		story = func();
-		createSnapshot(name, story);
-		return api;
-	};
-	return api;
+  const api = {};
+  let story;
+  api.add = (name, func) => {
+    story = func();
+    createSnapshot(name, story);
+    return api;
+  };
+  api.addWithInfo = (name, func) => {
+    story = func();
+    createSnapshot(name, story);
+    return api;
+  };
+  return api;
 };
diff --git a/storybook/__tests__/GithubForkRibbon.stories.js b/storybook/__tests__/GithubForkRibbon.stories.js
@@ -1,146 +1,117 @@
-
 import React from 'react';
-import { mount } from 'enzyme';
-import expect from 'expect';
 
-import {
-	storiesOf,
-	describe,
-	it,
-	specs,
-} from '../facade';
+import { storiesOf, describe, it, specs } from '../facade';
 
 import GitHubForkRibbon from '../../src';
 
 const stories = storiesOf('GitHub fork ribbon', module);
 
 stories.add('default with right position and red color', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('handle unexist position with default', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      position="WOW">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" position="WOW">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('handle unexist color with default', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      color="Hi">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" color="Hi">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('on right position', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      position="right">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" position="right">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('on left position', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      position="left">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" position="left">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('on right-bottom position', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      position="right-bottom">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" position="right-bottom">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('on left-bottom position', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      position="left-bottom">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" position="left-bottom">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('with red color', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      color="red">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" color="red">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('with orange color', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      color="orange">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" color="orange">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('with black color', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      color="black">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" color="black">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
 
 stories.add('with green color', () => {
-	const component = (
-    <GitHubForkRibbon href="//www.google.com"
-                      target="_blank"
-                      color="green">
+  const component = (
+    <GitHubForkRibbon href="//www.google.com" target="_blank" color="green">
       Fork me on GitHub
     </GitHubForkRibbon>
-	);
+  );
 
-	return component;
+  return component;
 });
diff --git a/storybook/addons.js b/storybook/addons.js
@@ -1,2 +1,3 @@
 import 'storybook-addon-specifications/register';
-import '@kadira/storybook/addons';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/storybook/config.js b/storybook/config.js
@@ -1,9 +1,8 @@
-
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 const req = require.context('./__tests__/', true, /stories\.js$/);
 
 function loadStories() {
-	req.keys().forEach(req);
+  req.keys().forEach(req);
 }
 configure(loadStories, module);
diff --git a/storybook/facade.js b/storybook/facade.js
@@ -1,21 +1,20 @@
+import { storiesOf as storiesOfReal } from '@storybook/react';
 
-import {
-	storiesOf as storiesOfReal,
-    action as actionReal,
-	linkTo as linkToReal,
-} from '@kadira/storybook';
+import { action as actionReal } from '@storybook/addon-actions';
+
+import { linkTo as linkToReal } from '@storybook/addon-links';
 
 import {
-	specs as specsReal,
-	describe as describeReal,
-	it as itReal,
-	beforeEach as beforeEachReal,
-	before as beforeReal,
-	after as afterReal,
-	afterEach as afterEachReal,
-	xit as xitReal,
-	fit as fitReal,
-	xdescribe as xdescribeReal,
+  specs as specsReal,
+  describe as describeReal,
+  it as itReal,
+  beforeEach as beforeEachReal,
+  before as beforeReal,
+  after as afterReal,
+  afterEach as afterEachReal,
+  xit as xitReal,
+  fit as fitReal,
+  xdescribe as xdescribeReal,
 } from 'storybook-addon-specifications';
 
 export const expect = require('expect'); // eslint-disable-line global-require