Skip to content
This repository was archived by the owner on Jun 20, 2022. It is now read-only.

Commit c0e16bc

Browse files
gregbergegregberge
authored
Merge pull request #22 from smooth-code/factorize-code
Factorize code
2 parents 65c617a + 73d4f27 commit c0e16bc

29 files changed

+2790
-2571
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
'react/prop-types': 'off',
1313
'react/require-default-props': 'off',
1414
'react/sort-comp': 'off',
15+
'react/destructuring-assignment': 'off',
1516

1617
'import/prefer-default-export': 'off',
1718

‎package.json‎

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,60 +22,67 @@
2222
"build:lib": "cross-env BABEL_ENV=lib babel --out-dir build src",
2323
"build:rollup": "cross-env BABEL_ENV=rollup rollup -c",
2424
"build:watch": "yarn build:lib --watch",
25-
"ci": "yarn lint && yarn test",
25+
"ci": "yarn lint && yarn test && yarn build && bundlesize",
2626
"deploy:docs": "firebase deploy",
2727
"dev": "styleguidist server",
2828
"lint": "eslint .",
2929
"prebuild": "shx rm -rf build",
3030
"release": "standard-version && conventional-github-releaser --preset angular && yarn build && yarn deploy:docs",
3131
"test": "jest"
3232
},
33+
"bundlesize": [
34+
{
35+
"path": "./build/dist/smooth-ui.min.js",
36+
"maxSize": "18 kB"
37+
}
38+
],
3339
"devDependencies": {
34-
"@babel/cli": "^7.0.0-beta.51",
35-
"@babel/core": "^7.0.0-beta.51",
36-
"@babel/plugin-external-helpers": "^7.0.0-beta.51",
37-
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.51",
38-
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.51",
39-
"@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.51",
40-
"@babel/preset-env": "^7.0.0-beta.51",
41-
"@babel/preset-react": "^7.0.0-beta.51",
40+
"@babel/cli": "^7.0.0-rc.1",
41+
"@babel/core": "^7.0.0-rc.1",
42+
"@babel/plugin-external-helpers": "^7.0.0-rc.1",
43+
"@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
44+
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-rc.1",
45+
"@babel/plugin-transform-modules-commonjs": "^7.0.0-rc.1",
46+
"@babel/preset-env": "^7.0.0-rc.1",
47+
"@babel/preset-react": "^7.0.0-rc.1",
4248
"babel-core": "^7.0.0-0",
43-
"babel-eslint": "^8.2.3",
44-
"babel-jest": "^23.0.1",
45-
"babel-loader": "^7.1.4",
49+
"babel-eslint": "^8.2.6",
50+
"babel-jest": "^23.4.2",
51+
"babel-loader": "^7.1.5",
52+
"bundlesize": "^0.17.0",
4653
"conventional-github-releaser": "^3.1.2",
4754
"cross-env": "^5.2.0",
48-
"enzyme": "^3.3.0",
49-
"enzyme-adapter-react-16": "^1.1.1",
50-
"eslint": "^4.19.1",
51-
"eslint-config-airbnb": "^16.1.0",
52-
"eslint-config-prettier": "^2.9.0",
53-
"eslint-plugin-import": "^2.12.0",
54-
"eslint-plugin-jsx-a11y": "^6.0.3",
55-
"eslint-plugin-react": "^7.9.1",
56-
"jest": "^23.1.0",
57-
"jest-styled-components": "^5.0.1",
58-
"react": "^16.4.1",
59-
"react-dom": "^16.4.1",
60-
"react-styleguidist": "^7.0.17",
61-
"react-test-renderer": "^16.4.1",
62-
"rollup": "^0.60.7",
55+
"enzyme": "^3.4.2",
56+
"enzyme-adapter-react-16": "^1.2.0",
57+
"eslint": "^5.3.0",
58+
"eslint-config-airbnb": "^17.1.0",
59+
"eslint-config-prettier": "^3.0.1",
60+
"eslint-plugin-import": "^2.14.0",
61+
"eslint-plugin-jsx-a11y": "^6.1.1",
62+
"eslint-plugin-react": "^7.11.1",
63+
"jest": "^23.5.0",
64+
"jest-styled-components": "^6.0.1",
65+
"react": "^16.4.2",
66+
"react-dom": "^16.4.2",
67+
"react-styleguidist": "^7.2.3",
68+
"react-test-renderer": "^16.4.2",
69+
"rollup": "^0.64.1",
6370
"rollup-plugin-babel": "^4.0.0-beta.4",
64-
"rollup-plugin-commonjs": "^9.1.3",
71+
"rollup-plugin-commonjs": "^9.1.5",
6572
"rollup-plugin-node-resolve": "^3.3.0",
6673
"rollup-plugin-replace": "^2.0.0",
6774
"rollup-plugin-uglify": "^4.0.0",
68-
"shx": "^0.3.0",
75+
"shx": "^0.3.2",
6976
"standard-version": "^4.4.0",
70-
"styled-components": "^3.3.2",
71-
"uglifyjs-webpack-plugin": "^1.2.5",
72-
"webpack": "^4.12.0"
77+
"styled-components": "^3.4.2",
78+
"uglifyjs-webpack-plugin": "^1.3.0",
79+
"webpack": "^4.16.5"
7380
},
7481
"dependencies": {
7582
"classnames": "^2.2.6",
76-
"polished": "^1.9.2",
77-
"prop-types": "^15.6.1",
78-
"react-transition-group": "^2.3.1",
83+
"polished": "^1.9.3",
84+
"prop-types": "^15.6.2",
85+
"react-transition-group": "^2.4.0",
7986
"recompact": "^3.3.0"
8087
},
8188
"peerDependencies": {

‎rollup.config.js‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,25 @@ const cjsConfig = Object.assign({}, baseConfig, {
4545
],
4646
})
4747

48+
const globals = {
49+
react: 'React',
50+
'react-dom': 'ReactDom',
51+
'prop-types': 'PropTypes',
52+
'styled-components': 'styled',
53+
'react-transition-group/Transition': 'Transition',
54+
polished: 'polished',
55+
}
56+
4857
const umdConfig = Object.assign({}, baseConfig, {
4958
output: {
5059
name: 'smooth-ui',
5160
file: `${OUT_DIR}/dist/smooth-ui.js`,
52-
globals: {
53-
react: 'React',
54-
'styled-components': 'styled',
55-
},
5661
format: 'umd',
62+
globals,
63+
exports: 'named',
64+
sourcemap: true,
5765
},
66+
external: Object.keys(globals),
5867
plugins: [
5968
...baseConfig.plugins,
6069
resolve({ browser: true }),
@@ -63,21 +72,13 @@ const umdConfig = Object.assign({}, baseConfig, {
6372
],
6473
})
6574

66-
const minConfig = Object.assign({}, baseConfig, {
75+
const minConfig = Object.assign({}, baseConfig, umdConfig, {
6776
output: {
68-
name: 'smooth-ui',
77+
...umdConfig.output,
6978
file: `${OUT_DIR}/dist/smooth-ui.min.js`,
70-
globals: {
71-
react: 'React',
72-
'styled-components': 'styled',
73-
},
74-
format: 'umd',
7579
},
7680
plugins: [
77-
...baseConfig.plugins,
78-
resolve({ browser: true }),
79-
commonjs(),
80-
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
81+
...umdConfig.plugins,
8182
uglify({
8283
compress: {
8384
pure_getters: true,

‎src/Alert.js‎

Lines changed: 30 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import classNames from 'classnames'
4-
import styled, { css } from 'styled-components'
5-
import handleRef from './internal/handleRef'
6-
import setWithComponent from './internal/setWithComponent'
7-
import * as defaultTheme from './theme/defaultTheme'
8-
import { th, mixin } from './utils'
3+
import createComponent from './internal/createComponent'
94

105
const variants = [
116
'primary',
@@ -18,54 +13,35 @@ const variants = [
1813
'dark',
1914
]
2015

21-
const AlertComponent = ({
22-
className,
23-
component: Component = 'div',
24-
theme,
25-
variant,
26-
...props
27-
}) => (
28-
<Component
29-
{...props}
30-
className={classNames(
31-
'sui-alert',
32-
{
16+
const Alert = createComponent(({ th, mixin, css, classNames }) => ({
17+
name: 'alert',
18+
render: ({ Component, className, variant, ...props }) => (
19+
<Component
20+
{...props}
21+
className={classNames(className, {
3322
[`sui-alert-${variant}`]: variant,
34-
},
35-
className,
36-
)}
37-
/>
38-
)
23+
})}
24+
/>
25+
),
26+
style: css`
27+
position: relative;
28+
padding: ${th('alertPaddingY')} ${th('alertPaddingX')};
29+
margin-bottom: ${th('alertMarginBottom')};
30+
border: 1px solid transparent;
31+
border-radius: ${th('borderRadius')};
32+
33+
${variants.map(
34+
variant => css`
35+
&.sui-alert-${variant} {
36+
${mixin('alertVariant', variant)};
37+
}
38+
`,
39+
)};
40+
`,
41+
propTypes: {
42+
children: PropTypes.node,
43+
variant: PropTypes.oneOf(variants).isRequired,
44+
},
45+
}))
3946

40-
const AlertRefComponent = handleRef(AlertComponent)
41-
42-
const Alert = styled(AlertRefComponent)`
43-
${mixin('base')};
44-
position: relative;
45-
padding: ${th('alertPaddingY')} ${th('alertPaddingX')};
46-
margin-bottom: ${th('alertMarginBottom')};
47-
border: 1px solid transparent;
48-
border-radius: ${th('borderRadius')};
49-
50-
${variants.map(
51-
variant => css`
52-
&.sui-alert-${variant} {
53-
${mixin('alertVariant', variant)};
54-
}
55-
`,
56-
)};
57-
`
58-
59-
Alert.propTypes = {
60-
children: PropTypes.node,
61-
variant: PropTypes.oneOf(variants).isRequired,
62-
}
63-
64-
Alert.defaultProps = {
65-
theme: defaultTheme,
66-
}
67-
68-
setWithComponent(Alert, AlertRefComponent)
69-
70-
/** @component */
7147
export default Alert

‎src/Box.js‎

Lines changed: 47 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React from 'react'
2-
import classNames from 'classnames'
32
import PropTypes from 'prop-types'
4-
import styled, { css } from 'styled-components'
5-
import * as defaultTheme from './theme/defaultTheme'
6-
import handleRef from './internal/handleRef'
7-
import setWithComponent from './internal/setWithComponent'
8-
import { mixin } from './utils'
3+
import { css } from 'styled-components'
4+
import createComponent from './internal/createComponent'
95

106
const addProp = (propName, attribute, transform = x => x) => props =>
117
typeof props[propName] !== 'undefined'
@@ -14,60 +10,50 @@ const addProp = (propName, attribute, transform = x => x) => props =>
1410
`
1511
: null
1612

17-
const BoxComponent = ({
18-
className,
19-
component: Component = 'div',
20-
flex,
21-
theme,
22-
direction,
23-
wrap,
24-
alignItems,
25-
alignContent,
26-
alignSelf,
27-
justifyContent,
28-
padding,
29-
margin,
30-
...props
31-
}) => <Component className={classNames('sui-box', className)} {...props} />
13+
const Box = createComponent(() => ({
14+
name: 'box',
15+
render: ({
16+
Component,
17+
flex,
18+
direction,
19+
wrap,
20+
alignItems,
21+
alignContent,
22+
alignSelf,
23+
justifyContent,
24+
padding,
25+
margin,
26+
...props
27+
}) => <Component {...props} />,
28+
style: css`
29+
display: flex;
30+
31+
${addProp('flex', 'flex', flex => (flex === true ? 1 : flex))};
32+
${addProp('direction', 'flex-direction')};
33+
${addProp('wrap', 'flex-wrap')};
34+
${addProp('alignItems', 'align-items')};
35+
${addProp('alignContent', 'align-content')};
36+
${addProp('alignSelf', 'align-self')};
37+
${addProp('justifyContent', 'justify-content')};
38+
${addProp('padding')};
39+
${addProp('margin')};
40+
`,
41+
propTypes: {
42+
alignContent: PropTypes.string,
43+
alignItems: PropTypes.string,
44+
alignSelf: PropTypes.string,
45+
children: PropTypes.node,
46+
direction: PropTypes.string,
47+
flex: PropTypes.oneOfType([
48+
PropTypes.string,
49+
PropTypes.number,
50+
PropTypes.bool,
51+
]),
52+
justifyContent: PropTypes.string,
53+
margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
54+
padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
55+
wrap: PropTypes.string,
56+
},
57+
}))
3258

33-
const BoxRefComponent = handleRef(BoxComponent)
34-
35-
const Box = styled(BoxRefComponent)`
36-
${mixin('base')} display: flex;
37-
38-
${addProp('flex', 'flex', flex => (flex === true ? 1 : flex))};
39-
${addProp('direction', 'flex-direction')};
40-
${addProp('wrap', 'flex-wrap')};
41-
${addProp('alignItems', 'align-items')};
42-
${addProp('alignContent', 'align-content')};
43-
${addProp('alignSelf', 'align-self')};
44-
${addProp('justifyContent', 'justify-content')};
45-
${addProp('padding')};
46-
${addProp('margin')};
47-
`
48-
49-
Box.propTypes = {
50-
alignContent: PropTypes.string,
51-
alignItems: PropTypes.string,
52-
alignSelf: PropTypes.string,
53-
children: PropTypes.node,
54-
direction: PropTypes.string,
55-
flex: PropTypes.oneOfType([
56-
PropTypes.string,
57-
PropTypes.number,
58-
PropTypes.bool,
59-
]),
60-
justifyContent: PropTypes.string,
61-
margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
62-
padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
63-
wrap: PropTypes.string,
64-
}
65-
66-
Box.defaultProps = {
67-
theme: defaultTheme,
68-
}
69-
70-
setWithComponent(Box, BoxRefComponent)
71-
72-
/** @component */
7359
export default Box

0 commit comments

Comments
 (0)