Version 0.3.0

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "example/app/assets/bower_components"
+  "directory": "bower_components"
 }

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/*
+bower_components/*
+dist/*
+example/dist/*
+lib/*

.eslintrc

@@ -43,7 +43,7 @@
     "no-unused-expressions": 2,
     "space-after-keywords": 2,
     "space-before-blocks": 2,
-    "jsx-quotes": [1, "prefer-single"],
+    "jsx-quotes": [1, "prefer-double"],
     "react/display-name": 0,
     "react/jsx-boolean-value": [2, "always"],
     "react/jsx-no-undef": 2,
@@ -53,7 +53,7 @@
     "react/jsx-uses-vars": 2,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
-    "react/no-multi-comp": 2,
+    "react/no-multi-comp": [2, {"ignoreStateless": true}],
     "react/no-unknown-property": 2,
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 2,

.gitignore

@@ -1,4 +1,4 @@
-.idea
-node_modules
-bower_components
-example/dist
+.idea/*
+node_modules/*
+bower_components/*
+example/dist/*

.stylelintignore

@@ -0,0 +1,5 @@
+node_modules/*
+bower_components/*
+dist/*
+example/dist/*
+lib/*

.stylelintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-empty-line-before": [
+      "always", {
+        "except": ["blockless-group", "all-nested"],
+        "ignore": ["after-comment"]
+      }
+    ]
+  }
+}

bower.json

@@ -1,8 +1,8 @@
 {
   "name": "react-tooltip-component",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React component.",
-  "main": ["dist/react-tooltip-component.js", "dist/tooltip"],
+  "main": ["dist/react-tooltip-component.js", "dist/react-tooltip-component.css"],
   "keywords": [
     "react-component",
     "react",
@@ -18,7 +18,5 @@
     "tests"
   ],
   "dependencies": {},
-  "devDependencies": {
-    "bootstrap-customize": "~3.3.4"
-  }
+  "devDependencies": {}
 }

example/app/app.js

@@ -2,30 +2,29 @@ import 'babel-core/polyfill';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {createHistory, useBasename} from 'history';
-import Router from 'react-router';
+import {createHistory} from 'history';
+import {Router, useRouterHistory} from 'react-router';
 import App from 'components/App.js';
-import pkg from '../../package.json';
+import {name} from '../../package.json';
 
-import 'assets/bower_components/bootstrap-customize/css/bootstrap.css';
-import 'react-tooltip-component/src/tooltip.scss';
+import 'bootstrap/dist/css/bootstrap.css';
 import 'assets/styles/app.scss';
 
 const routes = {
   path: '/',
   component: App,
   indexRoute: {
-    component: require('./components/pages/PageHome')
+    component: require('components/pages/Home')
   },
   childRoutes: [
-    require('./routes/Example1Route'),
-    require('./routes/Example2Route')
+    require('routes/Example1'),
+    require('routes/Example2')
   ]
 };
 
 const DEV = process && process.env && process.env.NODE_ENV === 'development';
-const history = useBasename(createHistory)({
-  basename: '/' + (DEV ? '' : pkg.name)
+const history = useRouterHistory(createHistory)({
+  basename: '/' + (DEV ? '' : name)
 });
 
 const run = () => {

example/app/assets/styles/_common.scss

@@ -0,0 +1,33 @@
+/* Pre Render
+   ========================================================================== */
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.pre-render {
+  background: rgba(255, 255, 255, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  .spinner {
+    width: 48px;
+    height: 48px;
+    border: 1px solid lighten($primary, 40%);
+    border-left-color: darken($primary, 10%);
+    border-radius: 50%;
+    animation: spinner 700ms infinite linear;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -24px;
+    margin-top: -24px;
+  }
+}

example/app/assets/styles/_mixins.scss → example/app/assets/styles/_mixin.scss

@@ -1,10 +1,10 @@
 @mixin clearfix() {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: " ";
     display: table;
   }
-  &:after {
+  &::after {
     clear: both;
   }
 }

example/app/assets/styles/_region.scss

@@ -0,0 +1,41 @@
+/* Header
+   ========================================================================== */
+.navbar {
+  border-radius: 0;
+}
+
+/* Footer
+   ========================================================================== */
+html,
+body,
+#app {
+  height: 100%;
+}
+
+.layout-page {
+  position: relative;
+  min-height: 100%;
+  padding-bottom: 60px;
+}
+
+.layout-main {
+  margin-bottom: 30px;
+}
+
+.layout-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  background-color: #f8f8f8;
+  padding: 20px 0;
+}
+
+/* Tooltip example
+   ========================================================================== */
+.tooltips-example {
+  text-align: center;
+  .btn {
+    margin: 15px;
+  }
+}

example/app/assets/styles/app.scss

@@ -1,79 +1,8 @@
 /* ==========================================================================
-   Imports
+   React component starter
    ========================================================================== */
-@import "variables";
-@import "mixins";
-@import "animations";
-
-/* ==========================================================================
-   Components
-   ========================================================================== */
-/* Pre Render
-   ========================================================================== */
-.pre-render {
-  background: rgba(255, 255, 255, .7);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
-  .spinner {
-    width: 48px;
-    height: 48px;
-    border: 1px solid lighten($primary, 40%);
-    border-left-color: darken($primary, 10%);
-    border-radius: 50%;
-    animation: spinner 700ms infinite linear;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-left: -24px;
-    margin-top: -24px;
-  }
-}
-
-/* ==========================================================================
-   Sections
-   ========================================================================== */
-/* Header
-   ========================================================================== */
-.navbar {
-  border-radius: 0;
-}
-
-/* Footer
-   ========================================================================== */
-html,
-body,
-#app {
-  height: 100%;
-}
-
-.layout-page {
-  position: relative;
-  min-height: 100%;
-  padding-bottom: 60px;
-}
-
-.layout-main {
-  margin-bottom: 30px;
-}
-
-.layout-footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 60px;
-  background-color: #F8F8F8;
-  padding: 20px 0;
-}
-
-/* Tooltip example
-   ========================================================================== */
-.tooltips-example {
-  text-align: center;
-  .btn {
-    margin: 15px;
-  }
-}
+@import "variable";
+@import "mixin";
+@import "common";
+@import "region";
+@import "page";

example/app/components/App.js

@@ -9,10 +9,10 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className='layout-page'>
+      <div className="layout-page">
         <Header/>
-        <main className='layout-main'>
-          <div className='container'>
+        <main className="layout-main">
+          <div className="container">
             {this.props.children}
           </div>
         </main>

example/app/components/Footer.js

@@ -3,9 +3,9 @@ import React from 'react';
 class Footer extends React.Component {
   render() {
     return (
-      <footer className='layout-footer'>
-        <div className='container'>
-          <div className='text-center'>&copy; 2015 Lorem ipsum.</div>
+      <footer className="layout-footer">
+        <div className="container">
+          <div className="text-center">&copy; 2015 Minh Tran.</div>
         </div>
       </footer>
     );

example/app/components/Header.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import {Link} from 'react-router';
 
-const logo = require('../assets/images/logo.svg');
+import logo from 'assets/images/logo.svg';
 
 class Header extends React.Component {
   render() {
     return (
-      <header className='layout-header'>
-        <nav className='navbar navbar-inverse'>
-          <div className='container'>
-            <div className='navbar-header'>
-              <button type='button' className='navbar-toggle collapsed'>
-                <span className='sr-only'>Toggle navigation</span>
-                <span className='icon-bar'/>
-                <span className='icon-bar'/>
-                <span className='icon-bar'/>
+      <header className="layout-header">
+        <nav className="navbar navbar-inverse">
+          <div className="container">
+            <div className="navbar-header">
+              <button type="button" className="navbar-toggle collapsed">
+                <span className="sr-only">Toggle navigation</span>
+                <span className="icon-bar"/>
+                <span className="icon-bar"/>
+                <span className="icon-bar"/>
               </button>
-              <Link className='navbar-brand' to='/'>
-                <img width='20' src={logo}/>
+              <Link className="navbar-brand" to="/">
+                <img width="20" src={logo}/>
               </Link>
             </div>
           </div>

example/app/components/pages/PageExample1.js → example/app/components/pages/Example1/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import Document from 'components/common/Document';
 
-class PageExample1 extends React.Component {
+class Example1Page extends React.Component {
   render() {
     return (
-      <Document title='Example1 | React component example'
-        className='page-ex-1'>
+      <Document title="Example1 | React component example"
+        className="page-ex-1">
         <h1>Example 1</h1>
       </Document>
     );
   }
 }
 
-export default PageExample1;
+export default Example1Page;