Add build task for publishing

.babelrc

@@ -1,31 +1,57 @@
 {
-  "plugins": [
-    "lodash",
-    "transform-es2015-modules-commonjs",
-    "transform-object-rest-spread",
-    "transform-class-properties",
-    [
-      "emotion",
-      {
-        "autoLabel": true,
-        "hoist": true,
-        "sourceMap": true
-      }
-    ]
-  ],
-  "presets": [
-    [
-      "env",
-      {
-        "targets": {
-          "node": "current"
-        }
-      }
-    ],
-    "react",
-    "stage-3"
-  ],
   "env": {
+    "cjs": {
+      "plugins": [
+        "transform-class-properties",
+        "lodash",
+        "transform-object-rest-spread",
+        [
+          "emotion",
+          {
+            "autoLabel": true,
+            "hoist": true,
+            "sourceMap": true
+          }
+        ]
+      ],
+      "presets": [["env", { "loose": true }], "react", "stage-3"]
+    },
+    "es": {
+      "plugins": [
+        "transform-class-properties",
+        "lodash",
+        "transform-object-rest-spread",
+        [
+          "emotion",
+          {
+            "autoLabel": true,
+            "hoist": true,
+            "sourceMap": true
+          }
+        ]
+      ],
+      "presets": [
+        ["env", { "loose": true, "modules": false }],
+        "react",
+        "stage-3"
+      ]
+    },
+    "test": {
+      "plugins": [
+        "transform-class-properties",
+        "lodash",
+        "transform-object-rest-spread",
+        [
+          "emotion",
+          {
+            "autoLabel": true,
+            "hoist": true,
+            "sourceMap": true
+          }
+        ]
+      ],
+      "presets": ["env", "react", "stage-3"]
+    },
     "static": {
       "plugins": [
         [

PUBLISHING.md

@@ -0,0 +1,7 @@
+## Publishing
+
+The publish scripts for this projects rely on `gcp` unix utility that can be found on most linux distributions, but on mac should installed separately.
+
+You can do that using `homebrew`:
+
+`brew install coreutils`

README.md

@@ -29,10 +29,17 @@ Here are a few helpful links for getting started with Circuit UI:
 
 ## Installation
 
+```
+yarn add @sumup/circuit-ui
+```
+
+## Development
+
 ```
 yarn && yarn start
 ```
 
+
 ## Deployment
 
 ```
@@ -76,9 +83,9 @@ describe('Button', () => {
 Besides the component library, we also export some utilities which you
 might need in order to use the components. Two main ones:
 
-* `numbers` - a module for dealing with number localization.
-* `currency` - a module for formatting currency amounts.
-* `style-helpers` - a module containing helpers for writing styles.
+* `numbersUtils` - a module for dealing with number localization.
+* `currencyUtils` - a module for formatting currency amounts.
+* `styleHelpers` - a module containing helpers for writing styles.
 
 ## Creating components
 

package.json

@@ -1,9 +1,14 @@
 {
-  "name": "circuit-ui",
-  "version": "0.0.1",
+  "name": "@sumup/circuit-ui",
+  "sideEffects": false,
+  "version": "0.0.13-canary",
   "description": "SumUp's React UI component library",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "lib/index.js",
+  "module": "lib/es/index.js",
+  "files": [
+    "lib",
+    "README.md"
+  ],
   "scripts": {
     "coverage:upload": "codecov",
     "fix:eslint": "eslint --fix --quiet src/**/**/*.js",
@@ -24,10 +29,17 @@
     "build:stylesheet": "mkdir -p dist && BABEL_ENV=static node build/stylesheet > dist/circuit-ui.css",
     "build:global-styles": "mkdir -p dist && ./build/global-styles > dist/circuit-ui-global.css",
     "build:copy-global-styles": "cp -f dist/circuit-ui-global.css .storybook",
+    "build:js": "yarn clean:js && yarn build:js:cjs && yarn build:js:es && yarn build:svg:cjs &&  yarn build:svg:es",
+    "build:js:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore *.spec.js,*.story.js",
+    "build:js:es": "cross-env BABEL_ENV=es babel src --out-dir lib/es --ignore *.spec.js,*.story.js",
+    "build:svg:cjs": "cd src && find . -name *.svg -print | xargs -I@ gcp --parents @ ../lib && cd ..",
+    "build:svg:es": "cd src && find . -name *.svg -print | xargs -I@ gcp --parents @ ../lib/es && cd ..",
+    "clean:js": "rimraf lib",
     "deploy": "rm -rf ./dist && mkdir dist && yarn run docz:build && yarn build && cp ./src/CNAME ./dist/CNAME && gh-pages -d dist",
-    "precommit": "lint-staged",
     "docz:dev": "docz dev",
-    "docz:build": "docz build"
+    "docz:build": "docz build",
+    "precommit": "lint-staged",
+    "prepublishOnly": "yarn build:js"
   },
   "repository": {
     "type": "git",
@@ -51,16 +63,21 @@
     "@storybook/addons": "^3.4.0",
     "@storybook/react": "^3.4.0",
     "@sumup/foundry": "^0.0.8",
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^8.1.2",
     "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.5",
     "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-emotion": "^9.2.6",
+    "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-react-docgen": "^2.0.0-rc.1",
+    "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
     "codecov": "^3.1.0",
     "component-playground": "^3.2.0",
     "create-emotion-styled": "^9.2.6",
+    "cross-env": "^5.2.0",
     "docz": "^0.9.2",
     "docz-plugin-babel6": "^0.9.2",
     "docz-theme-default": "^0.9.2",

src/index.js

@@ -17,6 +17,15 @@ import {
 
 import { normalizeAmount, isValidAmount } from './components/CurrencyInput';
 
+import { circuit } from './themes';
+
+export {
+  id as uniqueId,
+  numbers as numbersUtils,
+  currency as currencyUtils,
+  sharedPropTypes
+} from './util';
+
 const cardNumberUtils = {
   isValidCardNumber,
   isAcceptedCardScheme,
@@ -139,10 +148,26 @@ export { default as CardSchemes } from './components/CardSchemes';
 export {
   default as PaymentMethodIcon
 } from './components/CardSchemes/components/PaymentMethodIcon';
+
 export { default as SideNav } from './components/SideNav';
 export { Menu } from './components/SideNav/components';
 export { Drawer } from './components/SideNav/components';
 
 // Helpers
 export { default as State } from './components/State';
 export { default as InlineElements } from './components/InlineElements';
+
+// Theme
+const standard = { ...circuit }; // otherwise this get exported as a `Module`
+const theme = {
+  standard,
+  circuit: standard
+};
+
+export { theme };
+
+export {
+  globalStyles as injectGlobalStyles,
+  styleHelpers,
+  constants as styleConstants
+} from './styles';