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

.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/).

benchmarks/system.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 })

config/rollup.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]

docs/Compatibility.mdx

@@ -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/GettingStarted.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)].

docs/Home.mdx

@@ -7,9 +7,13 @@ order: -1
 import { Box } from '@smooth-ui/core-sc'
 
 <Box mx="auto" mt={{ sm: 3, md: 5 }} width={500} maxWidth="calc(100vw - 50px)">
-  <img alt="Smooth UI" src="https://raw.githubusercontent.com/smooth-code/smooth-ui/master/resources/smooth-ui-logo.png" width="100%" />
+  <img
+    alt="Smooth UI"
+    src="https://raw.githubusercontent.com/smooth-code/smooth-ui/master/resources/smooth-ui-logo.png"
+    width="100%"
+  />
 </Box>
 
 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/).
 
-It is focused on developer experience, productivity. You can focus on what you want to build instead of on how to build it.
+It is focused on developer experience, productivity. You can focus on what you want to build instead of on how to build it.

docs/advanced/AddVariant.mdx

@@ -4,7 +4,11 @@ menu: Advanced
 ---
 
 import { Playground } from 'docz'
-import { theme as defaultTheme, ThemeProvider, Button } from '@smooth-ui/core-sc'
+import {
+  theme as defaultTheme,
+  ThemeProvider,
+  Button,
+} from '@smooth-ui/core-sc'
 
 # Add variants
 
@@ -26,4 +30,4 @@ In documentation, you can see only main variants `Button` but it is possible to
       </ThemeProvider>
     )
   }}
-</Playground>
+</Playground>

docs/advanced/CustomComponent.mdx

@@ -4,40 +4,37 @@ menu: Advanced
 ---
 
 import { Playground } from 'docz'
-import { Button, Alert } from '@smooth-ui/core-sc'
+import { Button, Alert, uiAs } from '@smooth-ui/core-sc'
 
 # Custom component
 
 Sometimes you may want to use a component but the resulting HTML tag is not the good one. Or you want to use a `Button` with another component like [the `Link` from React Router](https://reacttraining.com/react-router/web/api/Link).
 
 You can do it using two approaches.
 
-## Use "as" property
+## Use "uiAs" property
 
-Every components accepts a `as` property, it defines the base component used in each component.
+Every components accepts a `uiAs` property, it defines the base component used in each component.
 
 An example of an `Alert` that uses `span` as a component.
 
 <Playground>
-  <Alert as="span" variant="primary">
+  <Alert uiAs="span" variant="primary">
     A span alert
   </Alert>
 </Playground>
 
-## Use "withComponent"
+## Use "uiAs" helper
 
-Styled Components has a magic method called [`.withComponent`](https://www.styled-components.com/docs/api#withcomponent), it gives you the opportunity to keep style and swap the component. All Smooth UI components exposes the same method, this way you can easily create a new component from another without losing the style.
+`uiAs` creates a new component with a predefined base component.
 
 An example of `Button` that will use `a` instead of `button`.
 
 <Playground>
   {() => {
-    const LinkButton = Button.withComponent('a')
-    return (
-      <LinkButton href="#">
-        A button as a link
-      </LinkButton>
-    )
+    // import { uiAs } from '@smooth-ui/core-sc'
+    const LinkButton = uiAs(Button, 'a')
+    return <LinkButton href="#">A button as a link</LinkButton>
   }}
 </Playground>
 

docs/advanced/ExtendStyles.mdx

@@ -4,7 +4,7 @@ menu: Advanced
 ---
 
 import { Playground } from 'docz'
-import { Button, Switch, styled } from '@smooth-ui/core-sc'
+import { css, Button, Switch, styled } from '@smooth-ui/core-sc'
 
 # Extend Styles
 
@@ -34,6 +34,20 @@ Smooth UI exposes a lot of utilities on all components. You can customize nearly
   </Button>
 </Playground>
 
+## Local override using `css` prop
+
+[Styled Components](https://www.styled-components.com/docs/api#css-prop) and [Emotion](https://emotion.sh/docs/css-prop) both support the `css` property. This is a simple method to extend component style.
+
+```js
+<Button
+  css={css`
+    font-size: 20px;
+  `}
+>
+  A customized button
+</Button>
+```
+
 ## Local override using style
 
 Inline styles are still a good approach for a lot of use-cases. It can be used for very specific changes that don't need media queries or auto-prefixer. All components supports inline style using `style` property.
@@ -56,20 +70,21 @@ An example of a `BorderedButton` extended from a `Button`:
   {() => {
     // import { styled } from '@smooth-ui/core-sc'
 
-    const BorderedButton = styled(Button)`
-      border: 2px solid black;
-
-      &:hover {
-        border-color: blue;
+    const BorderedButton = styled(Button)({
+      border: '2px solid black',
+      '&:hover': {
+        borderColor: 'blue'
       }
-    `
+    })
 
     return (
       <BorderedButton variant="primary">
         A button with border !
       </BorderedButton>
     )
-  }}
+
+}}
+
 </Playground>
 
 👉 **[Checkout the interactive example on CodeSandbox](https://codesandbox.io/s/7k8o4x7lj6)**
@@ -84,12 +99,14 @@ An example of a custom `Switch` with a black ball 🎱.
   {() => {
     // import { styled } from '@smooth-ui/core-sc'
 
-    const BlackBallSwitch = styled(Switch)`
-      .sui-switch-ball {
-        background-color: black !important;
+    const BlackBallSwitch = styled(Switch)({
+      '.sui-switch-ball': {
+        backgroundColor: 'black !important',
       }
-    `
+    })
 
     return <BlackBallSwitch />
-  }}
-</Playground>
+
+}}
+
+</Playground>