feat: support emotion 10 & remove hacks (#93)

BREAKING CHANGE:

`OriginalComponent.withComponent(NewComponent)` is replaced by `uiAs(OriginalComponent, NewComponent)`

`as={NewComponent}` is replaced by `uiAs={NewComponent}`

`globalStyle()` is now replaced by `Normalize` component

Author: gregberge

.eslintrc.js

@@ -18,9 +18,11 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': 'off',
 
+    'no-plusplus': 'off',
     'no-return-assign': 'off',
     'no-param-reassign': 'off',
     'no-shadow': 'off',
     'default-case': 'off',
+    'no-underscore-dangle': ['off', { allow: ['__smoothUI', '__scTheme'] }],
   },
 }

.github/ISSUE_TEMPLATE/bug.md

@@ -22,7 +22,7 @@ Please provide a minimal repository on GitHub.
 
 Issues without a reproduction link are likely to stall.
 
-## Run `npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,emotion,react-emotion --markdown --clipboard`
+## Run `npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard`
 
 Paste the results here:
 

.github/ISSUE_TEMPLATE/regression.md

@@ -27,7 +27,7 @@ Please provide a minimal repository on GitHub.
 
 Issues without a reproduction link are likely to stall.
 
-## Run `npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,emotion,react-emotion --markdown --clipboard`
+## Run `npx envinfo --system --binaries --npmPackages @smooth-ui/core-sc,@smooth-ui/core-em,styled-components,@emotion/core,@emotion/styled,emotion-theming --markdown --clipboard`
 
 Paste the results here:
 

.prettierignore

@@ -1,5 +1,5 @@
 node_modules/
 dist/
 package.json
-CHANGELOG.json
+CHANGELOG.md
 .docz/

README.md

@@ -17,7 +17,7 @@ npm install @smooth-ui/core-sc styled-components
 or
 
 ```sh
-npm install @smooth-ui/core-em react-emotion emotion-theming
+npm install @smooth-ui/core-em @emotion/core @emotion/styled emotion-theming
 ```
 
 Smooth UI is a style system / UI library for [React](https://reactjs.org/). It works with [Styled Components 💅](https://www.styled-components.com) or [Emotion 👩‍🎤](https://emotion.sh/).

.babelrc.js renamed to babel.config.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-console, import/no-unresolved */
+const Benchmark = require('benchmark')
+const sui = require('@smooth-ui/system')
+const mui = require('@material-ui/system')
+const sys = require('styled-system')
+
+const suiSystem = sui.compose(
+  sui.typography,
+  sui.space,
+)
+const muiSystem = mui.compose(
+  mui.typography,
+  mui.spacing,
+)
+const sysSystem = sys.compose(
+  sys.fontSize,
+  sys.space,
+)
+
+const suite = new Benchmark.Suite()
+
+function runSui() {
+  return suiSystem.props({
+    p: { xs: 10, md: 20 },
+    mt: 10,
+    m: '20px',
+    fontSize: 10,
+  })
+}
+
+function runMui() {
+  return muiSystem({
+    theme: {},
+    p: { xs: 10, md: 20 },
+    mt: 10,
+    m: '20px',
+    fontSize: 10,
+  })
+}
+
+function runSys() {
+  return sysSystem({ p: [10, 20], mt: 10, m: '20px', fontSize: 10 })
+}
+
+console.log('sui', runSui())
+console.log('mui', runMui())
+console.log('sys', runSys())
+
+suite
+  .add('@smooth-ui/system', runSui)
+  .add('@material-ui/system', runMui)
+  .add('styled-system', runSys)
+  .on('cycle', event => {
+    console.log(String(event.target))
+  })
+  .on('complete', function onComplete() {
+    console.log(`Fastest is ${this.filter('fastest').map('name')}`)
+  })
+  .run({ async: true })

benchmarks/system.js

@@ -6,25 +6,30 @@ import commonjs from 'rollup-plugin-commonjs'
 import copy from 'rollup-plugin-cpy'
 import { uglify } from 'rollup-plugin-uglify'
 
-// eslint-disable-next-line
-const babelConfig = require('../../.babelrc')
-
-export const getRollupConfig = ({ pkg, pwd, buildName }) => {
+export const getRollupConfig = ({
+  pkg,
+  pwd,
+  buildName,
+  name,
+  copyTypeScriptDefs,
+}) => {
   const SOURCE_DIR = path.resolve(pwd, 'src')
   const DIST_DIR = path.resolve(pwd, 'dist')
-  const CORE_DIR = path.resolve(pwd, '../shared/core');
+  const CORE_DIR = path.resolve(pwd, '../shared/core')
 
   const baseConfig = {
     input: `${SOURCE_DIR}/index.js`,
     plugins: [
       babel({
-        "exclude": "**/node_modules/**",
-        ...babelConfig
+        exclude: 'node_modules/**',
+        configFile: path.join(pwd, '../../babel.config.js'),
       }),
-      copy({
-        "files": `${CORE_DIR}/*.d.ts`,
-        "dest": DIST_DIR
-      })
+      copyTypeScriptDefs
+        ? copy({
+            files: `${CORE_DIR}/*.d.ts`,
+            dest: DIST_DIR,
+          })
+        : null,
     ],
   }
 
@@ -34,8 +39,8 @@ export const getRollupConfig = ({ pkg, pwd, buildName }) => {
       format: 'es',
     },
     external: [
-      ...Object.keys(pkg.peerDependencies),
-      ...Object.keys(pkg.dependencies),
+      ...Object.keys(pkg.peerDependencies || {}),
+      ...Object.keys(pkg.dependencies || {}),
       'react-transition-group/Transition',
     ],
   })
@@ -52,16 +57,16 @@ export const getRollupConfig = ({ pkg, pwd, buildName }) => {
     polished: 'polished',
     'prop-types': 'PropTypes',
     'emotion-theming': 'emotionTheming',
-    emotion: 'emotion',
+    '@emotion/core': 'emotion',
+    '@emotion/styled': 'styled',
     react: 'React',
     'react-dom': 'ReactDom',
-    'react-emotion': 'reactEmotion',
     'styled-components': 'styled',
   }
 
   const umdConfig = Object.assign({}, baseConfig, {
     output: {
-      name: 'smoothUI',
+      name,
       file: `${DIST_DIR}/${buildName}.js`,
       format: 'umd',
       globals,
@@ -92,7 +97,7 @@ export const getRollupConfig = ({ pkg, pwd, buildName }) => {
   })
 
   if (process.env.WATCH_MODE) {
-    return [esConfig]
+    return [esConfig, cjsConfig]
   }
 
   return [esConfig, cjsConfig, umdConfig, minConfig]

config/rollup.js

@@ -4,7 +4,7 @@ name: Compatibility
 
 # Compatibility
 
-## Browser Support 
+## Browser Support
 
 Smooth-UI relies on [browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported) or browsers supported by emotion (probably the same).
 

docs/Compatibility.mdx

@@ -7,7 +7,7 @@ import { Button } from '@smooth-ui/core-sc'
 
 # Getting Started
 
-## Installation 
+## Installation
 
 Install `@smooth-ui/core-sc` and `styled-components` from npm:
 
@@ -22,20 +22,9 @@ You can use components in your React app:
 ```js
 import { Button } from '@smooth-ui/core-sc'
 
-const App = () => (
-  <Button variant="primary">Hello world!</Button>
-)
+const App = () => <Button variant="primary">Hello world!</Button>
 
 export default App
 ```
 
-## Global normalize (recommended)
-
-Even if it is not required, is recommended to apply a global normalize before using Smooth UI.
-
-```js
-import { globalStyle, createGlobalStyle } from '@smooth-ui/core-sc'
-const GlobalStyle = createGlobalStyle`${globalStyle()}`
-```
-
-If you don't want to use a global normalize, at least add `* { box-sizing: border-box; }`.
+> Including `Normalize` is strongly recommended, see [guide](/docs-basics-normalize)].