REFACTOR to use emotion, see: paypal/glamorous#419

Author: ndelangen

.babelrc

@@ -1,33 +1,13 @@
 {
   "presets": ["env", "stage-0", "react"],
   "env": {
-    "development": {
-      "plugins": [
-        "babel-plugin-macros",
-        "babel-plugin-glamorous-displayname",
-        ["transform-runtime", {
-          "polyfill": false,
-          "regenerator": true
-        }]
-      ]
-    },
-    "test": {
-      "plugins": [
-        "babel-plugin-macros",
-        ["transform-runtime", {
-          "polyfill": false,
-          "regenerator": true
-        }]
-      ]
-    },
-    "production": {
-      "plugins": [
-        "babel-plugin-macros",
-        ["transform-runtime", {
-          "polyfill": false,
-          "regenerator": true
-        }]
-      ]
-    }
+    "plugins": [
+      "emotion",
+      "babel-plugin-macros",
+      ["transform-runtime", {
+        "polyfill": false,
+        "regenerator": true
+      }]
+    ]
   }
 }

addons/a11y/package.json

@@ -31,8 +31,8 @@
     "@storybook/core-events": "4.0.0-alpha.4",
     "axe-core": "^3.0.2",
     "babel-runtime": "^6.26.0",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.13.0",
+    "emotion": "^9.1.3",
+    "react-emotion": "^9.1.3",
     "global": "^4.3.2",
     "prop-types": "^15.6.1"
   },

addons/a11y/src/components/Report/RerunButton.js

@@ -1,6 +1,6 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-const RerunButton = glamorous.button({
+const RerunButton = styled('button')({
   position: 'absolute',
   bottom: 0,
   right: 0,

addons/actions/package.json

@@ -25,8 +25,8 @@
     "@storybook/core-events": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "deep-equal": "^1.0.1",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.13.0",
+    "emotion": "^9.1.3",
+    "react-emotion": "^9.1.3",
     "global": "^4.3.2",
     "lodash.isequal": "^4.5.0",
     "make-error": "^1.3.4",

addons/actions/src/components/ActionLogger/style.js

@@ -1,15 +1,15 @@
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { Button as BaseButton } from '@storybook/components';
 
-export const Actions = glamorous.pre({
+export const Actions = styled('pre')({
   flex: 1,
   margin: 0,
   padding: '8px 2px 20px 0',
   overflowY: 'auto',
   color: '#666',
 });
 
-export const Action = glamorous.div({
+export const Action = styled('div')({
   display: 'flex',
   padding: '3px 3px 3px 0',
   borderLeft: '5px solid white',
@@ -18,7 +18,7 @@ export const Action = glamorous.div({
   alignItems: 'start',
 });
 
-export const Button = glamorous(BaseButton)({
+export const Button = styled(BaseButton)({
   position: 'absolute',
   bottom: 0,
   right: 0,
@@ -30,24 +30,24 @@ export const Button = glamorous(BaseButton)({
   border: '0 none',
 });
 
-export const Counter = glamorous.div({
+export const Counter = styled('div')({
   margin: '0 5px 0 5px',
   backgroundColor: '#777777',
   color: '#ffffff',
   padding: '1px 5px',
   borderRadius: '20px',
 });
 
-export const Countwrap = glamorous.div({
+export const Countwrap = styled('div')({
   paddingBottom: 2,
 });
 
-export const InspectorContainer = glamorous.div({
+export const InspectorContainer = styled('div')({
   flex: 1,
   padding: '0 0 0 5px',
 });
 
-export const Wrapper = glamorous.div({
+export const Wrapper = styled('div')({
   flex: 1,
   display: 'flex',
   position: 'relative',

addons/info/package.json

@@ -17,8 +17,8 @@
     "@storybook/components": "4.0.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "core-js": "2.5.6",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.13.0",
+    "emotion": "^9.1.3",
+    "react-emotion": "^9.1.3",
     "global": "^4.3.2",
     "marksy": "^6.0.3",
     "nested-object-assign": "^1.0.1",