feat: support styled-components v4

BREAKING CHANGE:

- styled-components v4 is required
- `.extend` has been removed, please use `styled()` instead
- `component` prop has been removed, please use `as` instead

Author: gregberge

docs/GettingStarted.mdx

@@ -34,10 +34,8 @@ export default App
 Even if it is not required, is recommended to apply a global normalize before using Smooth UI.
 
 ```js
-import { injectGlobal } from 'styled-components'
-import { globalStyle } from '@smooth-ui/core-sc'
-
-injectGlobal`${globalStyle()}`
+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; }`.

docs/advanced/ExtendStyles.mdx

@@ -4,7 +4,7 @@ menu: Advanced
 ---
 
 import { Playground } from 'docz'
-import { Button, Switch } from '@smooth-ui/core-sc'
+import { Button, Switch, styled } from '@smooth-ui/core-sc'
 
 # Extend Styles
 
@@ -46,15 +46,17 @@ An example of inline style to change the `padding` of a button.
 </Button>
 ```
 
-## Local extend using .extend
+## Local extend using styled
 
-Every Smooth UI components expose a method `.extend`. You can use it to override any CSS property of the original component. It creates a new component and doesn't affect other components.
+You can override any CSS property of the original component using `styled`. It creates a new component and doesn't affect other components.
 
 An example of a `BorderedButton` extended from a `Button`:
 
 <Playground>
   {() => {
-    const BorderedButton = Button.extend`
+    // import { styled } from '@smooth-ui/core-sc'
+
+    const BorderedButton = styled(Button)`
       border: 2px solid black;
 
       &:hover {
@@ -80,7 +82,9 @@ An example of a custom `Switch` with a black ball 🎱.
 
 <Playground>
   {() => {
-    const BlackBallSwitch = Switch.extend`
+    // import { styled } from '@smooth-ui/core-sc'
+    
+    const BlackBallSwitch = styled(Switch)`
       .sui-switch-ball {
         background-color: black !important;
       }

docs/advanced/Refs.mdx

@@ -8,7 +8,9 @@ import { Input, styled } from '@smooth-ui/core-sc'
 
 # Refs
 
-Passing a `innerRef` prop to a Smooth UI component will give you the ref of the DOM node.
+Passing a `ref` prop to a Smooth UI component will give you the ref of the DOM node.
+
+> Be careful, if you use emotion or styled-components v4, you have to use "innerRef" instead of "ref".
 
 <Playground>
   {() => {
@@ -21,7 +23,7 @@ Passing a `innerRef` prop to a Smooth UI component will give you the ref of the
       render() {
         return (
           <Input
-            innerRef={this.inputRef}
+            ref={this.inputRef}
             placeholder="Hover to focus!"
             onMouseEnter={() => {
               this.inputRef.current.focus()

docs/components/Modal.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import { ModalDialog } from '@smooth-ui/core-sc'
+import { styled, ModalDialog } from '@smooth-ui/core-sc'
 
-export const ModalDialogExample = ModalDialog.extend`
+export const ModalDialogExample = styled(ModalDialog)`
   left: auto;
   margin-right: auto;
   margin-left: auto;

docs/config/Wrapper.js

@@ -2,32 +2,35 @@
 import React from 'react'
 import { transparentize } from 'polished'
 import { ThemeProvider } from 'emotion-theming'
-import { theme, th, injectGlobal, globalStyle } from '@smooth-ui/core-sc'
+import { theme, th, createGlobalStyle, globalStyle } from '@smooth-ui/core-sc'
 
-const fromTheme = value => th(value)({ theme })
-
-injectGlobal`
+const GlobalStyle = createGlobalStyle`
   ${globalStyle()}
 
   .sui-row + .sui-row {
     margin-top: 1rem;
   }
 
   .sui-col {
-    border: 1px solid ${fromTheme('primary')};
-    background-color: ${transparentize(0.6, fromTheme('primary'))};
+    border: 1px solid ${th('primary')};
+    background-color: ${th('primary', color => transparentize(0.6, color))};
     padding-top: .75rem;
     padding-bottom: .75rem;
   }
 
   .example-row-flex-cols .sui-row {
     min-height: 10rem;
-    background-color: ${transparentize(0.7, fromTheme('primary'))};
+    background-color: ${th('primary', color => transparentize(0.7, color))};
   }
 `
 
 const Wrapper = ({ children }) => (
-  <ThemeProvider theme={{ ...theme }}>{children}</ThemeProvider>
+  <ThemeProvider theme={{ ...theme }}>
+    <>
+      <GlobalStyle theme={{ ...theme }} />
+      {children}
+    </>
+  </ThemeProvider>
 )
 
 export default Wrapper

examples/emotion/.babelrc

@@ -0,0 +1 @@
+{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

examples/emotion/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Page Title</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+
+  <script src="/main.js"></script>
+</body>
+
+</html>

examples/emotion/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "emotion",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^10.0.0-beta.0",
+    "babel-loader": "^8.0.4",
+    "emotion": "^10.0.0-beta.0",
+    "emotion-theming": "^10.0.0-beta.0",
+    "react-emotion": "^10.0.0-beta.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
+  }
+}

examples/emotion/src/index.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+import React from 'react'
+import { render } from 'react-dom'
+import { Button, styled } from '@smooth-ui/core-em'
+
+const LinkButton = styled(Button.withComponent('a').withComponent('div'))`
+  color: blue !important;
+`
+
+const App = () => <LinkButton>Hello</LinkButton>
+
+const root = document.createElement('div')
+document.body.appendChild(root)
+
+render(<App />, root)

examples/emotion/webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+      },
+    ],
+  },
+}