styled-components and build

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["emotion"]
+}

package.json

@@ -2,45 +2,72 @@
   "name": "darkside",
   "version": "0.0.1",
   "description": "React lib to create dark user interfaces",
-  "main": "index.js",
   "repository": "https://github.com/matheusps/darkside.git",
   "author": "matheusps <matheus.ps@icloud.com>",
   "license": "MIT",
   "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "jsnext:main": "dist/index.es.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
+  },
   "scripts": {
     "check-types": "tsc",
     "test": "jest",
     "test:coverage": "yarn test --collectCoverage",
     "codecov": "yarn test:coverage && codecov -f coverage/*.json",
     "dev": "docz dev",
-    "build": "docz build"
+    "build": "rollup -c ",
+    "docz:build": "docz build",
+    "start": "rollup -c -w"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-brands-svg-icons": "^5.9.0",
+    "@fortawesome/free-regular-svg-icons": "^5.9.0",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@svgr/rollup": "^4.3.0",
     "@types/emojione": "^2.2.5",
     "@types/jest": "^24.0.11",
     "@types/node": "^11.13.0",
     "@types/react": "^16.8.12",
     "@types/react-dom": "^16.8.3",
+    "@types/styled-components": "^4.1.16",
+    "babel-core": "^6.26.3",
+    "babel-plugin-emotion": "^10.0.13",
+    "babel-runtime": "^6.26.0",
     "codecov": "^3.3.0",
+    "cross-env": "^5.2.0",
     "docz": "^1.2.0",
     "docz-theme-default": "^1.2.0",
+    "emojione": "^4.5.0",
     "jest": "^24.7.1",
+    "path": "^0.12.7",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-testing-library": "^6.1.1",
+    "rollup": "^1.15.6",
+    "rollup-plugin-alias": "^1.5.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-typescript2": "^0.21.2",
+    "rollup-plugin-url": "^2.2.2",
+    "styled-components": "^4.3.1",
     "ts-jest": "^24.0.1",
     "typescript": "^3.4.1"
   },
-  "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@fortawesome/fontawesome-svg-core": "^1.2.19",
-    "@fortawesome/free-brands-svg-icons": "^5.9.0",
-    "@fortawesome/free-regular-svg-icons": "^5.9.0",
-    "@fortawesome/free-solid-svg-icons": "^5.9.0",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "emojione": "^4.5.0",
-    "emotion-theming": "^10.0.10",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+  "peerDependencies": {
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "styled-components": "^4.3.1"
   },
+  "dependencies": {},
   "jest": {
     "transform": {
       ".(ts|tsx)": "ts-jest"

rollup.config.js

@@ -0,0 +1,53 @@
+import typescript from 'rollup-plugin-typescript2'
+import commonjs from 'rollup-plugin-commonjs'
+import external from 'rollup-plugin-peer-deps-external'
+// import postcss from 'rollup-plugin-postcss-modules'
+import postcss from 'rollup-plugin-postcss'
+import resolve from 'rollup-plugin-node-resolve'
+import url from 'rollup-plugin-url'
+import svgr from '@svgr/rollup'
+import babel from 'rollup-plugin-babel'
+
+import pkg from './package.json'
+
+const globals = {
+  'emotion-theming': 'emotionTheming',
+  '@emotion/core': 'emotion',
+  react: 'React',
+  'react-dom': 'ReactDom',
+}
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      exports: 'named',
+      sourcemap: true,
+      globals: globals,
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      exports: 'named',
+      sourcemap: true,
+      globals: globals,
+    },
+  ],
+  plugins: [
+    external(),
+    postcss({
+      modules: true,
+    }),
+    babel(),
+    url(),
+    svgr(),
+    resolve(),
+    typescript({
+      rollupCommonJSResolveHack: true,
+      clean: true,
+    }),
+    commonjs(),
+  ],
+}

src/components/Button.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react'
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import styled from 'styled-components'
 
 import { getMeasure } from '../helpers'
 import { Loader, Clickable } from '../index'
@@ -21,13 +20,7 @@ const Button: FC<ButtonType> = ({ size, children, loading, ...props }) => {
   const padding = getPadding(size!)
 
   return (
-    <Clickable
-      {...props}
-      css={css`
-        font-size: ${fontSize};
-        padding: ${padding};
-      `}
-    >
+    <Clickable {...props}>
       {loading ? (
         <Loader size={getFontSize(size!)} skin={props.skin} />
       ) : (

src/components/Clickable.tsx

@@ -1,13 +1,59 @@
 import * as React from 'react'
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import styled from 'styled-components'
 
 import { useTheme } from '../hooks'
 import { getColor } from '../helpers'
 
+const StyledButton = styled.button<any>`
+  ${({
+    bg,
+    bgHover,
+    bgActive,
+    color,
+    padding,
+    borderRadius,
+    full,
+    disabled,
+    margin,
+  }) =>
+    `background-color: ${bg};
+        color: ${color};
+        padding: ${padding};
+        border-radius: ${borderRadius};
+        display: ${full ? 'block' : 'relative'};
+        width: ${full ? '100%' : 'auto'};
+        cursor: ${disabled ? 'not-allowed' : 'pointer'};
+        margin: ${margin};
+        :hover {
+          background-color: ${bgHover};
+        }
+        :active {
+          background-color: ${bgActive};
+        }
+        `};
+  border: none;
+  box-sizing: border-box;
+  font-weight: 700;
+  font-stretch: normal;
+  line-height: 1.4;
+  overflow: hidden;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  user-select: none;
+  transition: background-color 0.2s ease-in-out;
+  will-change: background-color;
+  :focus {
+    outline: none;
+  }
+`
+
 const Clickable: React.FC<ClickableType> = ({
   skin,
-  children,
   full,
   disabled,
   onClick,
@@ -38,53 +84,19 @@ const Clickable: React.FC<ClickableType> = ({
   }
 
   return (
-    <button
-      {...rest}
+    <StyledButton
+      bg={bg}
+      bgHover={bgHover}
+      bgActive={bgActive}
+      borderRadius={borderRadius}
+      color={color}
+      full={full}
+      padding={padding}
+      margin={margin}
       disabled={disabled}
       onClick={handleClickEvent}
-      css={css`
-        background-color: ${bg};
-        color: ${color};
-        padding: ${padding};
-        border-radius: ${borderRadius};
-        display: ${full ? 'block' : 'relative'};
-        width: ${full ? '100%' : 'auto'};
-        cursor: ${disabled ? 'not-allowed' : 'pointer'};
-        margin: ${margin};
-
-        border: none;
-        box-sizing: border-box;
-        font-weight: 700;
-        font-stretch: normal;
-        line-height: 1.4;
-        overflow: hidden;
-        text-align: center;
-        text-decoration: none;
-        text-transform: none;
-        white-space: nowrap;
-        justify-content: center;
-        align-items: center;
-        appearance: none;
-        user-select: none;
-
-        transition: background-color 0.2s ease-in-out;
-        will-change: background-color;
-
-        :hover {
-          background-color: ${bgHover};
-        }
-
-        :active {
-          background-color: ${bgActive};
-        }
-
-        :focus {
-          outline: none;
-        }
-      `}
-    >
-      {children}
-    </button>
+      {...rest}
+    />
   )
 }
 

src/components/DarksideTheme.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from 'styled-components'
 
 import { GlobalStyles } from './GobalStyles'
 import { theme } from '../config'

src/components/Flexible.tsx

@@ -1,49 +1,23 @@
-import React, { FC } from 'react'
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import React from 'react'
+import styled from 'styled-components'
 
 interface Props extends NativeDivType, FlexibleType {}
 
-const Flexible: FC<Props> = ({
-  width,
-  height,
-  order,
-  shrink,
-  grow,
-  basis,
-  self,
-  inline,
-  direction,
-  wrap,
-  justify,
-  content,
-  items,
-  children,
-  ...rest
-}) => {
-  return (
-    <div
-      css={css`
-        width: ${width};
-        height: ${height};
-        order: ${order};
-        flex-shrink: ${shrink};
-        flex-grow: ${grow};
-        flex-basis: ${basis};
-        align-self: ${self};
-        display: ${inline ? 'inline-flex' : 'flex'};
-        flex-direction: ${direction};
-        flex-wrap: ${wrap};
-        justify-content: ${justify};
-        align-items: ${items};
-        align-content: ${content};
-      `}
-      {...rest}
-    >
-      {children}
-    </div>
-  )
-}
+const Flexible = styled.div<Props>(props => ({
+  width: props.width,
+  height: props.height,
+  order: props.order,
+  flexShrink: props.shrink,
+  flexGrow: props.grow,
+  flexBasis: props.basis,
+  alignSelf: props.self,
+  display: props.inline ? 'inline-flex' : 'flex',
+  flexDirection: props.direction,
+  flexWrap: props.wrap,
+  justifyContent: props.justify,
+  alignItems: props.items,
+  alignContent: props.content,
+}))
 
 Flexible.defaultProps = {
   width: 'auto',

src/components/FormGroup.tsx

@@ -1,18 +1,14 @@
 import React from 'react'
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core'
+import styled from 'styled-components'
 
 import { Flexible } from './Flexible'
 
+const StyledFlexible = styled(Flexible)`
+  padding: 0.5rem;
+`
+
 const FormGroup: React.FC<FlexibleType> = props => {
-  return (
-    <Flexible
-      css={css`
-        padding: 0.5rem;
-      `}
-      {...props}
-    />
-  )
+  return <StyledFlexible {...props} />
 }
 
 FormGroup.defaultProps = {