css-modules infrastructure, ui components rewritten to use css-modules

gridsane · Mar 27, 2017 · bfb5aab · bfb5aab
1 parent d134f44
commit bfb5aab
Show file tree

Hide file tree

Showing 40 changed files with 600 additions and 525 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,6 +7,6 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,html,less}]
+[*.{js,json,html,scss}]
 indent_style = space
 indent_size = 2
diff --git a/index.html b/index.html
@@ -5,15 +5,6 @@
   <title>Channel Hunter</title>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">
-  <style>
-    body {
-      padding: 0;
-      margin: 0;
-      font-family: 'Roboto';
-      background-color: rgba(0,0,0,.05);
-      -webkit-font-smoothing: antialiased;
-    }
-  </style>
 </head>
 <body>
   <div id="root"></div>

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "npm": "2.14.17"
   },
   "dependencies": {
+    "autoprefixer": "^6.3.6",
     "babel": "^6.3.26",
     "babel-cli": "^6.4.0",
     "babel-core": "^6.4.0",
@@ -38,9 +39,14 @@
     "babel-preset-stage-0": "^6.3.13",
     "body-parser": "^1.14.1",
     "brfs": "^1.4.3",
+    "classnames": "^2.2.5",
     "color": "^0.11.1",
+    "css-loader": "^0.23.1",
     "express": "^4.13.3",
+    "extract-text-webpack-plugin": "^1.0.1",
     "mongodb": "^2.0.49",
+    "node-sass": "^3.7.0",
+    "postcss-loader": "^0.9.1",
     "radium": "^0.17.1",
     "react": "^0.14.0",
     "react-addons-shallow-compare": "^0.14.7",
@@ -52,13 +58,16 @@
     "redux": "^3.0.4",
     "redux-persist": "^2.0.1",
     "redux-thunk": "^2.0.1",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
     "superagent": "^1.4.0",
     "superagent-jsonp": "0.0.6",
     "transform-loader": "^0.2.3",
     "webpack": "^1.12.2"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.0-beta.6",
+    "css-modules-require-hook": "^4.0.0",
     "eslint": "2.2.x",
     "eslint-plugin-react": "^4.2.2",
     "expect": "^1.13.0",

diff --git a/src/components/application/_theme.scss b/src/components/application/_theme.scss
@@ -0,0 +1,9 @@
+$darkPrimaryColor: #303f9f;
+$primaryColor: #3f51b5;
+$lightPrimaryColor: #c5cae9;
+$textColor: #fff;
+$accentColor: #ff4081;
+$primaryTextColor: #212121;
+$secondaryTextColor: #727272;
+$dividerColor: #b6b6b6;
+$errorColor: #f44336;
diff --git a/src/components/application/application-container.js b/src/components/application/application-container.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import HeaderContainer from '../header/header-container';
+require('./application.scss');
 
 export default class ApplicationContainer extends Component {
   render() {

diff --git a/src/components/application/application.scss b/src/components/application/application.scss
@@ -0,0 +1,9 @@
+:global {
+  body {
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto';
+    background-color: rgba(0,0,0,.05);
+    -webkit-font-smoothing: antialiased;
+  }
+}
diff --git a/src/components/feed/feed-channels.js b/src/components/feed/feed-channels.js
@@ -1,51 +1,40 @@
 import React, {Component, PropTypes} from 'react';
 import {curried} from '../../utils/common';
-import {colors} from '../../utils/styles';
 import {List, ListItem, ListLabel, Avatar, Icon, Loader} from '../ui';
+import cn from 'classnames';
+import styles from './feed.scss';
 
 export default class FeedChannels extends Component {
   static propTypes = {
     list: PropTypes.array.isRequired,
     onToggle: PropTypes.func.isRequired,
-  };
+  }
 
   render() {
-    const styles = this.getStyles();
-
     const channels = this.props.list.map((channel) => {
       return <ListItem
         key={channel.id}
-        style={styles.channel}
+        className={styles.channelsItem}
         primaryText={channel.name}
-        leftElement={<Avatar size={32} url={channel.image} />}
+        leftElement={<Avatar url={channel.image} className={styles.channelsItemImage} />}
         leftElementHeight={32}
         rightElement={this._renderRightElement(channel)}
         rightElementHeight={24}
         height={48}
         onClick={curried(this.props.onToggle, channel)} />;
     });
 
-    return <div style={this.props.style}>
+    return <div className={cn(styles.channels, this.props.className)}>
       <ListLabel text="Your channels" />
       <List>{channels}</List>
     </div>;
   }
 
   _renderRightElement(channel) {
     if (channel.isLoading) {
-      return <Loader size={24} color={colors.primaryText} />;
+      return <Loader size={24} />;
     }
 
-    return channel.isEnabled ? <Icon size={24}>check</Icon> : null;
-  }
-
-  getStyles() {
-    return {
-
-      channel: {
-        fontSize: 14,
-      },
-
-    };
+    return channel.isEnabled ? <Icon size={24} glyph="check" /> : null;
   }
 }
diff --git a/src/components/feed/feed-playlist.js b/src/components/feed/feed-playlist.js
@@ -11,13 +11,13 @@ export default class FeedPlaylist extends Component {
     onToggleShuffle: PropTypes.func.isRequired,
     tracks: PropTypes.array.isRequired,
     currentTrackId: PropTypes.string,
-  };
+  }
 
   static defaultProps = {
     compact: false,
     currentTrackId: null,
     isShuffle: false,
-  };
+  }
 
   render() {
     const {tracks} = this.props;

diff --git a/src/components/feed/feed.scss b/src/components/feed/feed.scss
@@ -0,0 +1,13 @@
+
+.channels {
+  &Item {
+    font-size: 14px;
+
+    &Image {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+
+
diff --git a/src/components/ui/avatar.js b/src/components/ui/avatar.js
diff --git a/src/components/ui/avatar/avatar.js b/src/components/ui/avatar/avatar.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import cn from 'classnames';
+import styles from './avatar.scss';
+
+export default class Avatar extends Component {
+  static propTypes = {
+    url: React.PropTypes.string.isRequired,
+  }
+
+  render() {
+    return <span
+      className={cn(styles.avatar, this.props.className)}
+      style={{...this.props.style, backgroundImage: `url(${this.props.url})`}} />;
+  }
+}
diff --git a/src/components/ui/avatar/avatar.scss b/src/components/ui/avatar/avatar.scss
@@ -0,0 +1,8 @@
+.avatar {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 50%;
+}
diff --git a/src/components/ui/button/button.scss b/src/components/ui/button/button.scss
@@ -0,0 +1,31 @@
+.flat {
+  height: 36px;
+  padding: 0 24px;
+  line-height: 16px;
+  font-size: 16px;
+  text-transform: uppercase;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0,0,0,.1);
+  }
+}
+
+.icon {
+  display: inline-block;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:hover {
+    background: rgba(0,0,0,.1);
+  }
+
+}
diff --git a/src/components/ui/button/flat-button.js b/src/components/ui/button/flat-button.js
@@ -0,0 +1,15 @@
+import React, {Component, PropTypes} from 'react';
+import cn from 'classnames';
+import styles from './button.scss';
+
+export default class FlatButton extends Component {
+  static propTypes = {
+    label: PropTypes.node.isRequired,
+  }
+
+  render() {
+    return <button className={cn(styles.flat, this.props.className)}>
+      {this.props.label}
+    </button>;
+  }
+}
diff --git a/src/components/ui/button/icon-button.js b/src/components/ui/button/icon-button.js
@@ -0,0 +1,23 @@
+import React, {Component, PropTypes} from 'react';
+import cn from 'classnames';
+import Icon from '../icon/icon';
+import styles from './button.scss';
+
+export default class IconButton extends Component {
+  static propTypes = {
+    glyph: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    size: PropTypes.number,
+    boxSize: PropTypes.number,
+  }
+
+  render() {
+    const {size, boxSize, glyph, onClick, className} = this.props;
+    return <button
+      className={cn(styles.icon, className)}
+      onClick={onClick}
+      style={this.props.style}>
+      <Icon size={size} boxSize={boxSize} glyph={glyph} />
+    </button>;
+  }
+}
diff --git a/src/components/ui/flat-button.js b/src/components/ui/flat-button.js
diff --git a/src/components/ui/icon-button.js b/src/components/ui/icon-button.js