Skip to content

Commit 6093892

Browse files
danilowozdanilowoz
authored
Refactor and React 16 compatibility (#34)
* Refactor tests, update react * Refactor * Refactor * Change script * Update npmignore * Remove unecessary code
1 parent d5bca96 commit 6093892

22 files changed

+1711
-1489
lines changed

‎.babelrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-2", "react", "flow"]
2+
"presets": ["es2015", "stage-2", "react", "flow"]
33
}

‎.eslintrc‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
"node": true,
66
"es6": true
77
},
8-
"ecmaFeatures": {
9-
"modules": true
10-
},
118
"extends": [
129
"prettier"
1310
],

‎.npmignore‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,13 @@
66
.idea
77
.babelrc
88
.eslintrc
9+
.prettierrc
10+
.storybook
11+
.flowconfig
12+
_config.yml
13+
CODE_OF_CONDUCT.md
914
npm-debug.log
10-
lib
15+
stories
16+
tests
17+
scripts
18+
yarn.lock

‎package.json‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,53 +21,54 @@
2121
"scripts": {
2222
"watch":
2323
"babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
24-
"prepublish":
25-
"babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
24+
"build": "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
2625
"lint": "eslint 'src/**/*.js'",
2726
"prettier": "prettier --write 'src/**/*.{js,jsx,json,css}'",
2827
"testonly": "mocha $npm_package_options_mocha",
29-
"test": "npm run lint && npm run testonly",
28+
"test": "npm run lint && npm run testonly && npm run flow",
3029
"test-watch": "npm run testonly -- --watch --watch-extensions js",
3130
"storybook": "start-storybook -p 6006",
32-
"build-storybook": "build-storybook",
33-
"flow": "flow"
31+
"flow": "flow",
32+
"precommit": "npm run test",
33+
"prepush": "npm run test"
3434
},
3535
"devDependencies": {
3636
"@storybook/react": "^3.1.9",
3737
"babel-cli": "^6.6.4",
3838
"babel-core": "^6.7.4",
39-
"babel-eslint": "^6.0.2",
39+
"babel-eslint": "^8.0.2",
4040
"babel-plugin-transform-es2015-modules-umd": "^6.6.5",
4141
"babel-polyfill": "^6.7.4",
4242
"babel-preset-es2015": "^6.6.0",
4343
"babel-preset-flow": "^6.23.0",
4444
"babel-preset-react": "^6.5.0",
4545
"babel-preset-stage-2": "^6.5.0",
46-
"chai": "^3.5.0",
47-
"chai-enzyme": "^0.6.1",
48-
"enzyme": "^2.2.0",
49-
"eslint": "^2.7.0",
46+
"chai": "^4.1.2",
47+
"chai-enzyme": "^1.0.0-beta.0",
48+
"enzyme": "^3.2.0",
49+
"eslint": "^4.12.0",
5050
"eslint-config-prettier": "^2.4.0",
51-
"eslint-plugin-babel": "^3.1.0",
51+
"eslint-plugin-babel": "^4.1.2",
5252
"eslint-plugin-prettier": "^2.2.0",
53-
"eslint-plugin-react": "^4.2.3",
54-
"flow-bin": "^0.57.3",
55-
"jsdom": "^8.1.0",
56-
"mocha": "^2.4.5",
53+
"eslint-plugin-react": "^7.5.1",
54+
"flow-bin": "^0.59.0",
55+
"husky": "^0.14.3",
56+
"jsdom": "^11.1.0",
57+
"mocha": "^4.0.1",
5758
"nodemon": "^1.9.1",
5859
"prettier": "^1.6.1",
59-
"prop-types": "^15.5.10",
60-
"react": "^15.0.0",
60+
"react": "^16.1.1",
6161
"react-addons-test-utils": "^15.0.0",
62-
"react-dom": "^15.0.0",
63-
"sinon": "^1.17.3",
62+
"react-dom": "^16.1.1",
63+
"sinon": "^4.1.2",
6464
"uuid": "^3.0.1"
6565
},
6666
"peerDependencies": {
6767
"react": "~0.14.8 || ^15.0.0",
6868
"react-dom": "~0.14.8 || ^15.0.0"
6969
},
7070
"dependencies": {
71-
"babel-runtime": "^6.6.1"
71+
"babel-runtime": "^6.6.1",
72+
"enzyme-adapter-react-16": "^1.1.0"
7273
}
7374
}

‎scripts/mocha_runner.js‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
var jsdom = require('jsdom').jsdom;
1+
var jsdom = require('jsdom')
2+
var exposedProperties = ['window', 'navigator', 'document']
23

3-
var exposedProperties = ['window', 'navigator', 'document'];
4+
var { JSDOM } = jsdom
5+
var { document } = new JSDOM('').window
46

5-
global.document = jsdom('');
6-
global.window = document.defaultView;
7-
Object.keys(document.defaultView).forEach((property) => {
8-
if (typeof global[property] === 'undefined') {
9-
exposedProperties.push(property);
10-
global[property] = document.defaultView[property];
11-
}
12-
});
7+
global.document = document
8+
global.window = document.defaultView
9+
Object.keys(document.defaultView).forEach(property => {
10+
if (typeof global[property] === 'undefined') {
11+
exposedProperties.push(property)
12+
global[property] = document.defaultView[property]
13+
}
14+
})
15+
16+
global.requestAnimationFrame = callback => {
17+
setTimeout(callback, 0)
18+
}
1319

1420
global.navigator = {
15-
userAgent: 'node.js'
16-
};
21+
userAgent: 'node.js',
22+
}
1723

18-
documentRef = document;
24+
documentRef = document
1925

20-
require('babel-core/register');
21-
require('babel-polyfill');
26+
require('babel-core/register')
27+
require('babel-polyfill')

‎src/Wrap.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
import * as React from 'react'
33
import uuid from 'uuid'
44

5-
import type { Props as ContentLoaderProps } from './index';
5+
import type { Props as ContentLoaderProps } from './index'
66

77
export type WrapProps = {
8-
children?: React.ChildrenArray<*>
8+
children?: React.ChildrenArray<*>,
99
} & ContentLoaderProps
1010

1111
const Wrap = (props: WrapProps): React.Element<*> => {
@@ -31,9 +31,9 @@ const Wrap = (props: WrapProps): React.Element<*> => {
3131
/>
3232

3333
<defs>
34-
<clipPath id={`${idClip}`}>{props.children}</clipPath>
34+
<clipPath id={idClip}>{props.children}</clipPath>
3535

36-
<linearGradient id={`${idGradient}`}>
36+
<linearGradient id={idGradient}>
3737
<stop offset="0%" stopColor={props.primaryColor}>
3838
<animate
3939
attributeName="offset"

‎src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Rect from './custom/Rect'
1313
import Circle from './custom/Circle'
1414

1515
export type Props = {
16-
style: {[key: string]: any},
16+
style: { [key: string]: any },
1717
type: string,
1818
speed: number,
1919
width: number,
@@ -23,7 +23,7 @@ export type Props = {
2323
}
2424

2525
type State = {
26-
style: {[key: string]: any},
26+
style: { [key: string]: any },
2727
type: string,
2828
speed: number,
2929
width: number,

‎src/stylized/BulletListStyle.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@ import * as React from 'react'
33
import Wrap from '../Wrap'
44
import type { WrapProps } from '../Wrap'
55

6-
const BulletListStyle = (props: WrapProps): React.Element<*> => {
7-
return (
8-
<Wrap {...props}>
9-
<circle cx="10" cy="20" r="8" />
10-
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
11-
<circle cx="10" cy="50" r="8" />
12-
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
13-
<circle cx="10" cy="80" r="8" />
14-
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
15-
<circle cx="10" cy="110" r="8" />
16-
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
17-
</Wrap>
18-
)
19-
}
6+
const BulletListStyle = (props: WrapProps): React.Element<*> => (
7+
<Wrap {...props}>
8+
<circle cx="10" cy="20" r="8" />
9+
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
10+
<circle cx="10" cy="50" r="8" />
11+
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
12+
<circle cx="10" cy="80" r="8" />
13+
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
14+
<circle cx="10" cy="110" r="8" />
15+
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
16+
</Wrap>
17+
)
2018

2119
export default BulletListStyle

‎src/stylized/CodeStyle.js‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
//@flow
22
import * as React from 'react'
33
import Wrap from '../Wrap'
4-
import type { WrapProps } from '../Wrap';
4+
import type { WrapProps } from '../Wrap'
55

6-
const CodeStyle = (props: WrapProps): React.Element<*> => {
7-
return (
8-
<Wrap {...props}>
9-
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
10-
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
11-
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
6+
const CodeStyle = (props: WrapProps): React.Element<*> => (
7+
<Wrap {...props}>
8+
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
9+
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
10+
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
1211

13-
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
14-
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
12+
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
13+
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
1514

16-
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
17-
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
18-
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
15+
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
16+
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
17+
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
1918

20-
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
21-
</Wrap>
22-
)
23-
}
19+
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
20+
</Wrap>
21+
)
2422

2523
export default CodeStyle

‎src/stylized/FacebookStyle.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
//@flow
22
import * as React from 'react'
33
import Wrap from '../Wrap'
4-
import type { WrapProps } from '../Wrap';
4+
import type { WrapProps } from '../Wrap'
55

6-
const FacebookStyle = (props: WrapProps): React.Element<*> => {
7-
return (
8-
<Wrap {...props}>
9-
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
6+
const FacebookStyle = (props: WrapProps): React.Element<*> => (
7+
<Wrap {...props}>
8+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
109

11-
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
12-
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
10+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
11+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
1312

14-
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
15-
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
16-
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
17-
</Wrap>
18-
)
19-
}
13+
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
14+
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
15+
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
16+
</Wrap>
17+
)
2018

2119
export default FacebookStyle

0 commit comments

Comments
 (0)