vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fix some errors and change opinionated eslint

old
Javi Velasco 2015-10-23 18:30:37 +02:00
parent 55c654df83
commit e89d6df997
33 changed files with 286 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.csscomb.json
View File

@ -24,6 +24,7 @@
"$variable",
"$extend",
"$include",
"composes",
"position",
"top",
"right",

2
.eslintignore
View File

@ -0,0 +1,2 @@
**/node_modules/
**/build/

267
.eslintrc
View File

@ -1,63 +1,212 @@
---
{
"env": {
"browser": true,
"node": true,
"mocha": true,
"es6": true
},
env:
es6: true
"ecmaFeatures": {
"jsx": true,
"templateStrings": true,
"superInFunctions": false,
"classes": true,
"modules": true
},
ecmaFeatures:
modules: true
jsx: true
"parser": "babel-eslint",
parser: babel-eslint
"plugins": [
"react"
],
plugins: [react]
rules:
# Best Practices
semi: [2, always]
# semi: [2, never]
curly: [2, multi-line]
# comma-dangle: [2, always-multiline]
no-use-before-define: [2, nofunc]
no-loop-func: 1 # should allow arrow function
# Strict Mode
strict: [2, global]
global-strict: 0
# Consistence
quotes: [2, single, avoid-escape]
new-cap: [2, capIsNew: false]
no-underscore-dangle: 0
new-parens: 0
# ES6+
no-var: 2
prefer-const: 2
object-shorthand: 1 # buggy
constructor-super: 2
no-this-before-super: 2
generator-star-spacing: 2
# Extra
no-labels: 1
no-proto: 1
no-constant-condition: 1
# React
"rules": {
"block-scoped-var": [0],
"brace-style": [2, "1tbs", {
"allowSingleLine": true
}],
"camelcase": [0],
"comma-dangle": [2, "never"],
"comma-spacing": [2],
"comma-style": [2, "last"],
"complexity": [0, 11],
"constructor-super": [2],
"consistent-return": [2],
"consistent-this": [0, "that"],
"curly": [2, "multi-line"],
"default-case": [2],
"dot-notation": [2, {
"allowKeywords": true
}],
"eol-last": [2],
"eqeqeq": [2],
"func-names": [0],
"func-style": [0, "declaration"],
"generator-star-spacing": [2, "after"],
"strict": [2, "always"],
"guard-for-in": [0],
"handle-callback-err": [0],
"key-spacing": [2, {
"beforeColon": false,
"afterColon": true
}],
"quotes": [2, "single", "avoid-escape"],
"max-depth": [0, 4],
"max-len": [0, 80, 4],
"max-nested-callbacks": [0, 2],
"max-params": [0, 3],
"max-statements": [0, 10],
"new-parens": [2],
"new-cap": [2, {
"capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
}],
"newline-after-var": [0],
"no-alert": [2],
"no-array-constructor": [2],
"no-bitwise": [0],
"no-caller": [2],
"no-catch-shadow": [2],
"no-cond-assign": [2],
"no-console": [0],
"no-constant-condition": [1],
"no-continue": [2],
"no-control-regex": [2],
"no-debugger": [2],
"no-delete-var": [2],
"no-div-regex": [0],
"no-dupe-args": [2],
"no-dupe-keys": [2],
"no-duplicate-case": [2],
"no-else-return": [0],
"no-empty": [2],
"no-empty-character-class": [2],
"no-empty-label": [2],
"no-eq-null": [0],
"no-eval": [2],
"no-ex-assign": [2],
"no-extend-native": [1],
"no-extra-bind": [2],
"no-extra-boolean-cast": [2],
"no-extra-parens": [0],
"no-extra-semi": [1],
"no-fallthrough": [2],
"no-floating-decimal": [2],
"no-func-assign": [2],
"no-implied-eval": [2],
"no-inline-comments": [0],
"no-inner-declarations": [2, "functions"],
"no-invalid-regexp": [2],
"no-irregular-whitespace": [2],
"no-iterator": [2],
"no-label-var": [2],
"no-labels": [2],
"no-lone-blocks": [2],
"no-lonely-if": [2],
"no-loop-func": [2],
"no-mixed-requires": [0, false],
"no-mixed-spaces-and-tabs": [2, false],
"no-multi-spaces": [2],
"no-multi-str": [2],
"no-multiple-empty-lines": [2, {
"max": 2
}],
"no-native-reassign": [1],
"no-negated-in-lhs": [2],
"no-nested-ternary": [0],
"no-new": [2],
"no-new-func": [2],
"no-new-object": [2],
"no-new-require": [0],
"no-new-wrappers": [2],
"no-obj-calls": [2],
"no-octal": [2],
"no-octal-escape": [2],
"no-path-concat": [0],
"no-param-reassign": [2],
"no-plusplus": [0],
"no-process-env": [0],
"no-process-exit": [2],
"no-proto": [2],
"no-redeclare": [2],
"no-regex-spaces": [2],
"no-reserved-keys": [0],
"no-restricted-modules": [0],
"no-return-assign": [2],
"no-script-url": [2],
"no-self-compare": [0],
"no-sequences": [2],
"no-shadow": [2],
"no-shadow-restricted-names": [2],
"semi-spacing": [2],
"no-spaced-func": [2],
"no-sparse-arrays": [2],
"no-sync": [0],
"no-ternary": [0],
"no-this-before-super": [2],
"no-throw-literal": [2],
"no-trailing-spaces": [2],
"no-undef": [2],
"no-undef-init": [2],
"no-undefined": [0],
"no-underscore-dangle": [0],
"no-unreachable": [2],
"no-unused-expressions": [2],
"no-unused-vars": [1, {
"vars": "all",
"args": "after-used"
}],
"no-use-before-define": [2, "nofunc"],
"no-var": [2],
"no-void": [0],
"no-warning-comments": [0, {
"terms": ["todo", "fixme", "xxx"],
"location": "start"
}],
"no-with": [2],
"one-var": [0],
"operator-assignment": [0, "always"],
"operator-linebreak": [2, "after"],
"padded-blocks": [0],
"prefer-const": [2],
"quote-props": [0],
"radix": [0],
"semi": [2],
"semi-spacing": [2, {
"before": false,
"after": true
}],
"sort-vars": [0],
"space-after-keywords": [2, "always"],
"space-before-function-paren": [2, {
"anonymous": "always",
"named": "always"
}],
"space-before-blocks": [0, "always"],
"space-in-brackets": [0, "never", {
"singleValue": true,
"arraysInArrays": false,
"arraysInObjects": false,
"objectsInArrays": true,
"objectsInObjects": true,
"propertyName": false
}],
"space-in-parens": [2, "never"],
"space-infix-ops": [2],
"space-return-throw-case": [2],
"space-unary-ops": [2, {
"words": true,
"nonwords": false
}],
"spaced-line-comment": [0, "always"],
"strict": [1],
"use-isnan": [2],
"valid-jsdoc": [0],
"valid-typeof": [2],
"vars-on-top": [0],
"wrap-iife": [2],
"wrap-regex": [2],
"yoda": [2, "never", {
"exceptRange": true
}]
}
}

1
.nvmrc Normal file
View File

@ -0,0 +1 @@
4.2.1

1
.scss-lint.yml
View File

@ -99,6 +99,7 @@ linters:
"$variable",
"$extend",
"$include",
"composes",
"position",
"top",
"right",

21
components/commons.scss
View File

@ -1,8 +1,17 @@
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import "normalize.css";
@import "~normalize.css";
@import "./base";
//-- App
.app {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: scroll;
}
html {
font-size: 62.5%;
}
@ -62,16 +71,6 @@ input:not([type="checkbox"]):not([type="radio"]), button {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
//-- App wrapper to allow overlays to block scroll
[data-react-toolbox-app] {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: scroll;
}
// -- Material design font sizes
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
@include typo-display-3($color-contrast: true);

3
components/date_picker/calendar/month.jsx
View File

@ -38,8 +38,7 @@ class Month extends React.Component {
return (
<div className={style.month}>
<span className={style.title}>
{ utils.time.getFullMonth(this.props.viewDate)}
{ this.props.viewDate.getFullYear() }
{ utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
</span>
<div className={style.week}>{ this.renderWeeks() }</div>
<div className={style.days}>{ this.renderDays() }</div>

6
components/ripple/index.jsx
View File

@ -29,7 +29,7 @@ class Ripple extends React.Component {
document.addEventListener('mouseup', this.handleEnd);
const {top, left, width} = this._getDescriptor(pageX, pageY);
this.setState({active: false, restarting: true, width: 0}, () => {
this.refs.ripple.offsetWidth;
this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
this.setState({active: true, restarting: false, top, left, width});
});
};
@ -49,8 +49,8 @@ class Ripple extends React.Component {
}
render () {
const { left, top, width, height} = this.state;
const rippleStyle = {left, top, width, height};
const { left, top, width } = this.state;
const rippleStyle = {left, top, width, height: width};
let className = style[this.props.loading ? 'loading' : 'normal'];
if (this.state.active) className += ` ${style.active}`;
if (this.state.restarting) className += ` ${style.restarting}`;

16
components/tabs/tabs.jsx
View File

@ -19,25 +19,25 @@ class Tabs extends React.Component {
};
componentDidMount () {
this.setState({
pointer: this._pointerPosition(this.state.index, this.refs.navigation)
});
setTimeout(() => {
this.setState({pointer: this._pointerPosition(this.state.index)});
}, 20);
}
componentWillReceiveProps (next_props) {
const index = next_props.index || this.state.index;
this.setState({
index,
pointer: this._pointerPosition(index, this.refs.navigation)
pointer: this._pointerPosition(index)
});
}
_pointerPosition (index = 0, navigation) {
_pointerPosition (index = 0) {
const startPoint = this.refs.tabs.getBoundingClientRect().left;
const label = navigation.children[index].getBoundingClientRect();
const label = this.refs.navigation.children[index].getBoundingClientRect();
return {
top: `${navigation.getBoundingClientRect().height}px`,
top: `${this.refs.navigation.getBoundingClientRect().height}px`,
left: `${label.left - startPoint}px`,
width: `${label.width}px`
};
@ -46,7 +46,7 @@ class Tabs extends React.Component {
handleClick = (index) => {
this.setState({
index,
pointer: this._pointerPosition(index, this.refs.navigation)
pointer: this._pointerPosition(index)
});
if (this.props.onChange) this.props.onChange(this);
};

2
components/utils/events.js
View File

@ -40,6 +40,6 @@ module.exports = {
node = node.parentNode;
}
return false;
},
}
};

5
example/.gitignore vendored
View File

@ -1,5 +0,0 @@
build
dist/**/*.css
dist/**/*.js
node_modules
npm-debug.log

23
example/index.html
View File

@ -1,23 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reack-Toolbox Example</title>
<meta name="description" content="A set of complementary tools to ReactJS.">
<meta name="author" content="@soyjavi">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-title" content="Material Console">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<link href="./build/react-toolbox-example.commons.css" rel='stylesheet' type='text/css'>
<link href="./build/react-toolbox-example.test.css" rel='stylesheet' type='text/css'>
</head>
<body>
<script src="./node_modules/react/dist/react-with-addons.js"></script>
<script src="./build/react-toolbox-example.test.js"></script>
</body>
</html>

33
example/package.json
View File

@ -1,33 +0,0 @@
{
"name": "react-toolbox-example",
"version": "0.6.28",
"description": "Sample project that uses react-toolbox",
"repository": {
"type": "git",
"url": "https://github.com/soyjavi/react-toolbox.git"
},
"scripts": {
"start": "npm run build & npm run server",
"server": "webpack-dev-server --hot",
"build": "webpack",
"watch": "webpack --watch",
"deploy": "NODE_ENV=production webpack -p"
},
"dependencies": {
"coffee-script": "*",
"react-toolbox": "^0.6.28",
"react": ">=0.13"
},
"devDependencies": {
"babel-core": "^5.8.23",
"babel-loader": "^5.3.2",
"babel-runtime": "^5.8.20",
"coffee-jsx-loader": "^0.1.2",
"css-loader": "^0.15.1",
"extract-text-webpack-plugin": "^0.8.2",
"node-libs-browser": "^0.5.2",
"style-loader": "^0.12.3",
"stylus-loader": "^1.2.1",
"webpack": "^1.9.11"
}
}

31
example/src/app.jsx
View File

@ -1,31 +0,0 @@
import React from 'react';
// React-Toolbox full dependency way:
// import {Button, Form} from 'react-toolbox'
// Standalone dependencies way:
import Button from 'react-toolbox/components/button';
import Form from 'react-toolbox/components/form';
class App extends React.Component {
state = {
fields: [
{ ref: 'username', label: 'Your username', required: true},
{ ref: 'password', type: 'password', label: 'Your password', required: true},
{ type: 'submit', label: 'Login', disabled: true}
]
};
render () {
return (
<app data-toolbox={true}>
<h1>Hello React-Toolbox</h1>
<Form attributes={this.state.fields} />
<Button label='Hello world!' type='square' style='primary'/>
<Button icon='adb' type='circle' style='accent' />
</app>
);
}
}
React.render(<App />, document.body);

36
example/webpack.config.js
View File

@ -1,36 +0,0 @@
const pkg = require('./package.json');
const node_modules = __dirname + '/node_modules';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const environment = process.env.NODE_ENV;
module.exports = {
cache: true,
resolve: {
extensions: ['', '.jsx', '.cjsx', '.coffee', '.js', '.json', '.styl']
},
context: __dirname,
entry: {
commons: ['./node_modules/react-toolbox/components/commons.styl'],
test: ['webpack/hot/dev-server', './src/app.jsx']
},
output: {
path: environment === 'production' ? './dist' : './build',
filename: pkg.name + '.[name].js',
publicPath: '/build/'
},
devServer: {
host: '0.0.0.0',
port: 8080,
inline: true
},
module: {
noParse: [node_modules + '/react/dist/*.js'],
loaders: [
{ test: /(\.js|\.jsx)$/, exclude: /(node_modules)/, loader: 'babel?optional=runtime&stage=0&loose=all'},
{ test: /\.cjsx$/, loader: 'coffee-jsx-loader'},
{ test: /\.coffee$/, loader: 'coffee-jsx-loader'},
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!stylus-loader!')}
]
},
plugins: [new ExtractTextPlugin(pkg.name + '.[name].css', {allChunks: false})]
};

2
karma.conf.js
View File

@ -1,5 +1,3 @@
'use strict';
const webpackConfig = require('./webpack.config.test');
module.exports = function (config) {

20
package.json
View File

@ -17,16 +17,16 @@
],
"main": "./lib",
"scripts": {
"test": "karma start",
"test:watch": "karma start --no-single-run",
"start": "node ./server",
"babel": "babel ./components --out-dir ./lib",
"sass": "node-sass ./components -o ./lib",
"clean": "rimraf ./lib",
"prebuild": "npm run clean",
"lint": "eslint ./components ./spec ./example --ext .js,.jsx",
"build": "npm run lint && npm run babel && npm run sass",
"clean": "rimraf ./lib",
"lint": "eslint ./components ./spec ./example --ext .js,.jsx",
"prebuild": "npm run clean",
"prepublish": "npm run build",
"start": "node ./server"
"sass": "node-sass ./components -o ./lib",
"test": "karma start",
"test:watch": "karma start --no-single-run"
},
"bugs": {
"url": "https://github.com/react-toolbox/react-toolbox/issues",
@ -52,7 +52,7 @@
"babel-core": "^5.8.23",
"babel-eslint": "^4.1.3",
"babel-loader": "^5.3.2",
"css-loader": "^0.16.0",
"css-loader": "^0.21.0",
"eslint": "^1.7.3",
"eslint-plugin-react": "^3.3.1",
"expect": "^1.8.0",
@ -74,9 +74,9 @@
"react-dom": "^0.14.0",
"react-hot-loader": "^1.3.0",
"rimraf": "^2.4.3",
"sass-loader": "^2.0.1",
"sass-loader": "^3.0.0",
"sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
"style-loader": "^0.12.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.1"
},

14
server.js
View File

@ -1,9 +1,6 @@
'use strict';
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config.development');
const devServer = {
host: '0.0.0.0',
port: 8080,
@ -12,15 +9,12 @@ const devServer = {
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: false,
stats: {
colors: true
}
}).listen(devServer.port, devServer.host, function(err) {
if (err) {
console.error(err)
}
console.log(`Listening at ${devServer.host}:${devServer.port}`)
console.log(`open http://${devServer.host}:${devServer.port}/spec/`)
}).listen(devServer.port, devServer.host, (err) => {
if (err) console.error(err);
console.log(`Listening at ${devServer.host}:${devServer.port}`);
console.log(`open http://${devServer.host}:${devServer.port}/spec/`);
});

8
spec/app.jsx
View File

@ -1,5 +1,6 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import '../components/commons';
import commons from '../components/commons';
import Autocomplete from './components/autocomplete';
import Button from './components/button';
import Card from './components/card';
@ -18,10 +19,11 @@ import Snackbar from './components/snackbar';
import Slider from './components/slider';
import Switch from './components/switch';
import Tabs from './components/tabs';
import style from './style';
const App = () => {
return(
<app data-react-toolbox-app>
return (
<app className={`${commons.app} ${style.app}`}>
<h1>React Toolbox</h1>
<h3>Component Spec v0.10.20</h3>

1
spec/components/button.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import Button from '../../components/button';

1
spec/components/font_icon.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import FontIcon from '../../components/font_icon';

1
spec/components/input.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import Input from '../../components/input';

1
spec/components/link.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import Link from '../../components/link';

1
spec/components/list.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider } from '../../components/list';

1
spec/components/pickers.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import DatePicker from '../../components/date_picker';
import TimePicker from '../../components/time_picker';

1
spec/components/slider.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import Slider from '../../components/slider';

1
spec/components/tabs.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import { Tabs, Tab } from '../../components/tabs';

14
spec/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>React-Toolbox</title>
<title>React Toolbox - Spec</title>
<meta name="description" content="A set of complementary tools to ReactJS.">
<meta name="author" content="@soyjavi">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
@ -13,19 +13,9 @@
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<style>
app { padding: 1.6rem; }
app > h1, app > h3 { line-height: 100%; }
app h5 { margin-top: 3.2rem; }
app p { margin-bottom: 1rem; opacity: 0.5;}
app [data-react-toolbox='card'] {
margin: 1.6rem 1.6rem 0 0;
display: inline-block;
}
</style>
</head>
<body>
<div id="toolbox-test"></div>
<script src="/build/index.js"></script>
<script src="/build/spec.js"></script>
</body>
</html>

1
spec/index.jsx
View File

@ -1,3 +1,4 @@
/*eslint-disable no-unused-vars*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

16
spec/style.scss Normal file
View File

@ -0,0 +1,16 @@
.app {
padding: 1.6rem;
> h1, > h3 {
line-height: 100%;
}
h5 {
margin-top: 3.2rem;
}
p {
margin-bottom: 1rem;
}
[data-react-toolbox='card'] {
display: inline-block;
margin: 1.6rem 1.6rem 0 0;
}
}

2
tests.webpack.js
View File

@ -1,4 +1,2 @@
'use strict';
const context = require.context('./components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
context.keys().forEach(context);

9
webpack.config.development.js
View File

@ -1,9 +1,6 @@
'use strict';
const path = require('path')
const webpack = require('webpack')
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const devServer = 'http://0.0.0.0:8080';
module.exports = {
@ -16,7 +13,7 @@ module.exports = {
],
output: {
path: path.join(__dirname, 'build'),
filename: 'index.js',
filename: 'spec.js',
publicPath: '/build/'
},
resolve: {

4
webpack.config.test.js
View File

@ -1,6 +1,4 @@
'use strict';
const webpack = require('webpack')
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
module.exports = {