Merge pull request #12 from LeoAJ/remove-jss

[Minor] remove jss
LeoAJ · Dec 15, 2016 · 398e614 · 398e614
2 parents 663ebb5 + 1db060a
commit 398e614
Show file tree

Hide file tree

Showing 28 changed files with 5,529 additions and 333 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -15,6 +15,9 @@ extends:
   - airbnb
 
 rules:
+  import/prefer-default-export: 0
+  import/no-extraneous-dependencies: 0
+  react/jsx-filename-extension: 0
   react/sort-comp: 0
   no-underscore-dangle: 0
   one-var-declaration-per-line: 0

diff --git a/README.md b/README.md
@@ -21,6 +21,12 @@ To know more detail, please read my [post](http://leoj.js.org/personal/React-iTu
 2. `cd react-facebook-friends`
 3. `npm install`
 
+or use [yarn](https://yarnpkg.com)
+
+```
+yarn
+```
+
 ## Dev
 
 Register a Facebook App first [here](https://developers.facebook.com/docs/apps/register), and replace your app ID [here](https://github.com/LeoAJ/react-facebook-friends/blob/master/config/index.js#L2).

diff --git a/karma.conf.js b/karma.conf.js
@@ -20,6 +20,10 @@ module.exports = function (config) {
           test: /\.js$/,
           loader: 'babel',
           exclude: path.resolve(__dirname, 'node_modules')
+        }, {
+          test: /\.css$/,
+          loader: 'style!css',
+          exclude: path.resolve(__dirname, 'node_modules')
         }, {
           test: /\.json$/,
           loader: 'json',

diff --git a/package.json b/package.json
@@ -33,9 +33,10 @@
     "Facebook API"
   ],
   "devDependencies": {
+    "autoprefixer": "^6.5.4",
     "babel-cli": "^6.3.17",
     "babel-core": "^6.3.26",
-    "babel-eslint": "^6.0.0",
+    "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.0",
     "babel-plugin-react-transform": "^2.0.0-beta1",
     "babel-plugin-transform-regenerator": "^6.5.2",
@@ -44,21 +45,21 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.5.0",
-    "css-loader": "^0.23.0",
+    "css-loader": "^0.26.1",
     "enzyme": "^2.4.1",
-    "eslint": "^2.12.0",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.8.1",
-    "eslint-plugin-jsx-a11y": "^1.5.3",
-    "eslint-plugin-react": "^5.2.0",
+    "eslint": "^3.12.2",
+    "eslint-config-airbnb": "^13.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.8.0",
     "express": "^4.13.3",
     "file-loader": "^0.9.0",
-    "imports-loader": "^0.6.5",
+    "imports-loader": "^0.7.0",
     "json-loader": "^0.5.4",
     "karma": "^1.1.1",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^1.0.1",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-mocha": "^1.1.1",
     "karma-phantomjs-launcher": "^1.0.1",
     "karma-sinon": "^1.0.5",
@@ -68,6 +69,7 @@
     "lolex": "^1.4.0",
     "mocha": "^3.0.1",
     "phantomjs-prebuilt": "^2.1.3",
+    "postcss-loader": "^1.2.1",
     "react-addons-test-utils": "^15.0.2",
     "react-transform-catch-errors": "^1.0.1",
     "react-transform-hmr": "^1.0.1",
@@ -76,15 +78,15 @@
     "sinon": "^1.17.4",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.9",
+    "webpack": "^1.14.0",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
-    "yargs": "^4.1.0"
+    "yargs": "^6.5.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "jss": "^5.2.0",
-    "jss-camel-case": "^2.0.0",
+    "jss": "^6.0.1",
+    "jss-camel-case": "^3.0.0",
     "lodash.isequal": "^4.0.0",
     "react": "^15.0.2",
     "react-addons-shallow-compare": "^15.0.2",

diff --git a/server.js b/server.js
@@ -4,9 +4,9 @@
 import path from 'path';
 import express from 'express';
 import webpack from 'webpack';
-import config from './webpack/webpack.config.dev';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
+import config from './webpack/webpack.config.dev';
 
 const app = express(),
       compiler = webpack(config),

diff --git a/src/components/App.js b/src/components/App.js
@@ -10,18 +10,7 @@ import Spinner from './Spinner';
 import Login from './Login';
 import emitter from '../utils/emitter';
 import { getData } from '../utils/util';
-import jss from 'jss';
-
-const { classes } = jss.createStyleSheet({
-  wrapper: {
-    display: 'flex'
-  },
-  '@media (max-width: 1050px)': {
-    wrapper: {
-      'flex-wrap': 'wrap'
-    }
-  }
-}).attach();
+import '../style/App.css';
 
 class App extends Component {
 
@@ -85,7 +74,7 @@ class App extends Component {
       return <Login fBLogin={this._click} />;
     } else if (status === 'connected') {
       return (
-        <div className={classes.wrapper}>
+        <div className="app-wrapper">
           <Profile {...profile} />
           <FriendList myFriends={myFriends} query={query} />
         </div>

diff --git a/src/components/ErrMsg.js b/src/components/ErrMsg.js
@@ -1,37 +1,12 @@
 import React from 'react';
 import jss from 'jss';
-import camelCase from 'jss-camel-case';
-
-jss.use(camelCase());
-
-const { classes } = jss.createStyleSheet({
-  wrapper: {
-    minHeight: '50vh',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  box: {
-    borderRadius: '3px',
-    backgroundColor: '#FFF6F6',
-    padding: '15px'
-  },
-  title: {
-    fontSize: '20px',
-    textAlign: 'center',
-    color: '#912D2B',
-    fontWeight: 'bold'
-  },
-  msg: {
-    color: 'rgb(159, 58, 56)'
-  }
-}).attach();
+import '../style/ErrMsg.css';
 
 const ErrMsg = () => (
-  <div className={classes.wrapper}>
-    <div className={classes.box}>
-      <div className={classes.title}>Error</div>
-      <p className={classes.msg}>We are sorry but something went wrong, please try again later.</p>
+  <div className="wrapper">
+    <div className="box">
+      <div className="title">Error</div>
+      <p className="msg">We are sorry but something went wrong, please try again later.</p>
     </div>
   </div>
 );

diff --git a/src/components/FriendItem.js b/src/components/FriendItem.js
@@ -1,10 +1,8 @@
 import React, { PropTypes } from 'react';
 import Label from './Label';
-import { facebookBlue, POST as pType, LIKE as lType, COMMENT as cType } from '../utils/constants';
-import jss from 'jss';
-import camelCase from 'jss-camel-case';
+import { POST as pType, LIKE as lType, COMMENT as cType } from '../utils/constants';
+import '../style/FriendItem.css';
 
-jss.use(camelCase());
 
 const colors = {
   0: '#DB2828',
@@ -22,63 +20,6 @@ const colors = {
   12: '#1B1C1D'
 };
 
-const { classes } = jss.createStyleSheet({
-  anchor: {
-    minWidth: '300px',
-    borderRadius: '3px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    backgroundColor: 'white',
-    maxWidth: '680px',
-    padding: '1px 15px',
-    textDecoration: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: '150px',
-    justifyContent: 'space-around',
-    color: 'black',
-    ':hover': {
-      backgroundColor: '#f7f7f7'
-    }
-  },
-  rank: {
-    textAlign: 'center',
-    fontWeight: '400',
-    fontSize: '4em',
-    width: '80px',
-    display: 'inline-block',
-    color: 'white',
-    borderRadius: '50%'
-  },
-  imgWrapper: {
-    padding: '10px'
-  },
-  img: {
-    border: '1px solid rgb(59, 89, 152)',
-    borderRadius: '3px'
-  },
-  name: {
-    textAlign: 'center',
-    color: facebookBlue,
-    fontWeight: 'bold',
-    fontSize: '0.8em'
-  },
-  label: {
-    textAlign: 'center'
-  },
-  value: {
-    fontSize: '6em'
-  },
-  labelWrapper: {
-    display: 'flex',
-    '@media (max-width: 590px)': {
-      flexWrap: 'wrap',
-      minHeight: 'inherit',
-      alignItems: 'center'
-    }
-  }
-}).attach();
-
 const labelMap = {
   c: {
     text: 'Comments',
@@ -98,18 +39,18 @@ const labelMap = {
 };
 
 const FriendItem = ({ name, rank, link, url, LIKE, COMMENT, POST }) => (
-  <a target="_blank" href={link} className={classes.anchor}>
+  <a target="_blank" href={link} className="anchor" rel="noopener noreferrer">
     <div
       style={{ backgroundColor: colors[(rank - 1) % 10] }}
-      className={classes.rank}
+      className="rank"
     >
       {rank}
     </div>
-    <div className={classes.imgWrapper}>
-      <img src={url} alt={name} className={classes.img} />
-      <div className={classes.name}>{name}</div>
+    <div className="imgWrapper">
+      <img src={url} alt={name} className="img" />
+      <div className="name">{name}</div>
     </div>
-    <div className={classes.labelWrapper}>
+    <div className="labelWrapper">
       <Label {...labelMap.l} value={LIKE} />
       <Label {...labelMap.c} value={COMMENT} />
       <Label {...labelMap.p} value={POST} />

diff --git a/src/components/FriendList.js b/src/components/FriendList.js
@@ -1,40 +1,12 @@
+/* eslint react/forbid-prop-types: 0 */
 import React, { PropTypes } from 'react';
 import FriendItem from './FriendItem';
 import { MAX_OUTPUT } from '../utils/constants';
-import jss from 'jss';
-import camelCase from 'jss-camel-case';
-
-jss.use(camelCase());
-
-const { classes } = jss.createStyleSheet({
-  nodata: {
-    fontSize: '1.5em',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-    color: 'white',
-    minHeight: '100vh',
-  },
-  wrapper: {
-    flex: '3',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center'
-  },
-  '@media (max-width: 1050px)': {
-    wrapper: {
-      flex: '1 1 100%'
-    },
-    nodata: {
-      minHeight: 'auto'
-    }
-  }
-}).attach();
+import '../style/FriendList.css';
 
 const emptyResult = (hasFriends, query) => {
   return (
-    <div className={classes.nodata}>
+    <div className="nodata">
       {hasFriends ? `No results for: "${query}"` : 'No friends to show'}
     </div>
   );
@@ -51,8 +23,8 @@ const renderFriends = ({ myFriends, query }) => {
   return result.length > 0 ? result : emptyResult(!!myFriends.length, query);
 };
 
-const FriendList = (props) => (
-  <div className={classes.wrapper}>
+const FriendList = props => (
+  <div className="wrapper">
     {renderFriends(props)}
   </div>
 );

diff --git a/src/components/Label.js b/src/components/Label.js
@@ -1,47 +1,14 @@
 import React, { PropTypes } from 'react';
 import { facebookBlue } from '../utils/constants';
-import jss from 'jss';
-import camelCase from 'jss-camel-case';
-
-jss.use(camelCase());
-
-const { classes } = jss.createStyleSheet({
-  wrapper: {
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    display: 'flex',
-    padding: '0'
-  },
-  label: {
-    fontSize: '1.5em'
-  },
-  valueGroup: {
-    fontSize: '4em'
-  },
-  '@media (max-width: 590px)': {
-    wrapper: {
-      flex: '1 1 100%'
-    },
-    label: {
-      display: 'none'
-    },
-    valueGroup: {
-      fontSize: '1em',
-      color: 'white',
-      backgroundColor: facebookBlue,
-      padding: '3px',
-      borderRadius: '3px'
-    }
-  }
-}).attach();
+import '../style/Label.css';
 
 const Label = ({ text, icon, top, value }) => (
-  <div className={classes.wrapper}>
-    <div className={classes.valueGroup}>
-      <i className={icon}></i>
+  <div className="label-wrapper">
+    <div className="label-valueGroup">
+      <i className={icon} />
       <span>{value}</span>
     </div>
-    <div className={classes.label}>{text}</div>
+    <div className="label-text">{text}</div>
   </div>
 );