Refactor component styling to use Radium inline styles instead of sas…

…s modules

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": ["react", "es2015", "stage-0"],
+  "plugins": ["transform-decorators-legacy"],
   "env": {
     "development": {
       "presets": ["react-hmre"]

.storybook/config.js

@@ -1,6 +1,3 @@
-/**
- * Created by vincentriemer on 4/22/16.
- */
 import { configure } from '@kadira/storybook';
 import './index.css';
 

.storybook/webpack.config.js

@@ -1,6 +1,3 @@
-/**
- * Created by vincentriemer on 4/23/16.
- */
 var path = require('path');
 var NpmInstallPlugin = require('npm-install-webpack-plugin');
 
@@ -14,22 +11,12 @@ module.exports = {
           'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
         ],
         include: path.resolve(__dirname, '../')
-      },
-      {
-        test: /\.scss$/,
-        loaders: [
-          'style?sourceMap',
-          'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
-          'resolve-url',
-          'sass?sourceMap'
-        ],
-        include: path.resolve(__dirname, '../')
       }
     ]
   },
   plugins: [
     new NpmInstallPlugin({
-      dev: true
+      install: true
     })
   ]
 };

package.json

@@ -24,6 +24,7 @@
     "babel-core": "^6.6.5",
     "babel-eslint": "^5.0.0-beta4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.1.1",
@@ -33,14 +34,10 @@
     "eslint": "^1.10.3",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-react": "^3.11.3",
-    "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "npm-install-webpack-plugin": "^3.1.0",
-    "raw-loader": "^0.5.1",
     "resolve-url-loader": "^1.4.3",
     "rimraf": "^2.4.3",
-    "sass-loader": "^3.2.0",
-    "sass-variable-loader": "0.0.3",
     "style-loader": "^0.13.1",
     "svg-inline-loader": "^0.4.1",
     "webpack": "^1.12.9",
@@ -51,9 +48,9 @@
     "paths-js": "^0.4.4",
     "react": "^0.14.7",
     "react-art": "^0.14.0",
-    "react-css-modules": "^3.7.6",
     "react-dom": "^0.14.7",
     "react-redux": "^4.4.4",
+    "radium": "^0.17.1",
     "redux": "^3.4.0",
     "waaclock": "^0.5.3"
   }

src/components/autoFillInKnob/autoFillInKnob.js

@@ -1,55 +1,89 @@
 import React from 'react';
-import CSSModules from 'react-css-modules';
-import styles from './autoFillInKnob.scss';
+import Radium from 'radium';
 
 import Knob from '../knob/knob';
 import Guides from '../guides/guides';
 import SelectorKnobInner from '../selectorKnobInner/selectorKnobInner';
 
-import themeVariables from '../../theme/variables';
+import { grey } from '../../theme/variables';
+import { labelGreySmall, labelGreyNormal, labelGreyLarge, ring } from '../../theme/mixins';
 
-const guideLabelBaseStyle = {
-  fontFamily: themeVariables.fontFamily,
-  fontSize: themeVariables.smallSize,
-  fontWeight: themeVariables.normalWeight,
-  letterSpacing: themeVariables.normalLetterspacing,
-  color: themeVariables.grey
-};
+const guideLabelBaseStyle = labelGreyNormal;
+const labelHeight = 30;
 
 const guideValues = [
-  <div style={{transform: 'translateX(-20px)'}}>MANUAL</div>,
+  <div style={{transform: 'translateX(-25px)'}}>MANUAL</div>,
   16,12,8,4,2
 ];
 guideValues.push();
 
+@Radium
 class AutoFillInKnob extends React.Component {
   render() {
-    const {value, onChange} = this.props;
+    const {value, onChange, size=200} = this.props;
+
+    const styles = {
+      wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+        justifyContent: 'space-between',
+        width: size, height: size
+      },
+
+      controlWrapper: {
+        position: 'relative',
+        width: size, height: size
+      },
+
+      labelGuide: labelGreyNormal,
+
+      dotGuide: {
+        width: 5, height: 5,
+        backgroundColor: grey,
+        borderRadius: '50%'
+      },
+
+      knobWrapper: ring(size / 2),
+
+      labelWrapper: {
+        position: 'relative',
+        transform: 'translateY(-100%)',
+        width: size, height: labelHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+
+      measuresLabel: labelGreySmall,
+
+      autoLabel: {
+        position: 'relative', top: -4,
+        ...labelGreyLarge
+      }
+    };
+
     return (
-      <div styleName='wrapper'>
-        <div styleName='control-wrapper'>
-          <Guides num={6} distance={58} hideCount={6} guideStyle={{
-            width: 5, height: 5,
-            backgroundColor: themeVariables.grey,
-            borderRadius: '50%'
-          }} />
-          <Guides distance={70} hideCount={5.5} values={guideValues} rotate={false} guideStyle={guideLabelBaseStyle} />
-          <div styleName='knob-wrapper'>
+      <div style={styles.wrapper}>
+        <div style={styles.controlWrapper}>
+          <Guides num={6} distance={58} hideCount={6} guideStyle={styles.dotGuide} />
+          <Guides distance={73} hideCount={5.5} values={guideValues} rotate={false} guideStyle={styles.labelGuide} />
+          <div style={styles.knobWrapper}>
             <Knob
               value={value}
               onChange={onChange}
-              size={100}
+              size={size / 2}
               bufferSize={150}
               min={0} max={5}
-              step={1}
-            >
-              <SelectorKnobInner size={100} />
+              step={1}>
+              <SelectorKnobInner size={size / 2} />
             </Knob>
           </div>
         </div>
-        <div styleName='label-wrapper'>
-          <div styleName='measures-label'>MEASURES</div>
-          <div styleName='auto-label'>AUTO FILL IN</div>
+        <div style={styles.labelWrapper}>
+          <div style={styles.measuresLabel}>MEASURES</div>
+          <div style={styles.autoLabel}>AUTO FILL IN</div>
         </div>
       </div>
     );
@@ -61,4 +95,4 @@ AutoFillInKnob.propTypes = {
   value: React.PropTypes.number.isRequired
 };
 
-export default CSSModules(AutoFillInKnob, styles);
+export default AutoFillInKnob;

src/components/button/button.js

@@ -1,15 +1,12 @@
-/**
- * Created by vincentriemer on 5/22/16.
- */
 import React from 'react';
-import CSSModules from 'react-css-modules';
+import Radium from 'radium';
 
-import styles from './button.scss';
+import {grey} from '../../theme/variables';
 
+@Radium
 class Button extends React.Component {
   constructor(props) {
     super(props);
-
     this.handleClick = this.handleClick.bind(this);
   }
 
@@ -18,8 +15,23 @@ class Button extends React.Component {
   }
 
   render() {
+    const styles = {
+      button: {
+        backgroundColor: grey,
+        width: 80, height: 40,
+        transition: 'transform 0.1s',
+        ':hover': {
+          cursor: 'pointer',
+          transform: 'scale(1.05)'
+        },
+        ':active': {
+          transform: 'scale(1.0)'
+        }
+      }
+    };
+
     return (
-      <div styleName='button' onClick={this.handleClick}>
+      <div style={[styles.button, this.props.style]} onClick={this.handleClick}>
         {this.props.children}
       </div>
     );
@@ -31,4 +43,4 @@ Button.propTypes = {
   styles: React.PropTypes.object
 };
 
-export default CSSModules(Button, styles);
+export default Button;

src/components/button/buttonStory.js

@@ -1,11 +1,14 @@
-/**
- * Created by vincentriemer on 5/22/16.
- */
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import Button from './button';
 
-import storyStyles from './buttonStory.scss';
+const customStyle = {
+  button: {
+    width: 100, height: 50,
+    borderRadius: 4,
+    backgroundColor: '#F55D02'
+  }
+};
 
 const handleClick = () => {
   action('clicked')('boosh');
@@ -21,5 +24,5 @@ storiesOf('Button', module)
     </Button>
   ))
   .add('with a custom style', () => (
-    <Button onClick={handleClick} styles={storyStyles} />
+    <Button onClick={handleClick} style={customStyle.button} />
   ));