From e89d6df9974add71ed2e53e48d00239a21960d68 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Fri, 23 Oct 2015 18:30:37 +0200 Subject: [PATCH] Fix some errors and change opinionated eslint --- .csscomb.json | 1 + .eslintignore | 2 + .eslintrc | 267 +++++++++++++++++----- .nvmrc | 1 + .scss-lint.yml | 1 + components/commons.scss | 21 +- components/date_picker/calendar/month.jsx | 3 +- components/ripple/index.jsx | 6 +- components/tabs/tabs.jsx | 16 +- components/utils/events.js | 2 +- example/.gitignore | 5 - example/index.html | 23 -- example/package.json | 33 --- example/src/app.jsx | 31 --- example/webpack.config.js | 36 --- karma.conf.js | 2 - package.json | 20 +- server.js | 14 +- spec/app.jsx | 8 +- spec/components/button.jsx | 1 + spec/components/font_icon.jsx | 1 + spec/components/input.jsx | 1 + spec/components/link.jsx | 1 + spec/components/list.jsx | 1 + spec/components/pickers.jsx | 1 + spec/components/slider.jsx | 1 + spec/components/tabs.jsx | 1 + spec/index.html | 14 +- spec/index.jsx | 1 + spec/style.scss | 16 ++ tests.webpack.js | 2 - webpack.config.development.js | 9 +- webpack.config.test.js | 4 +- 33 files changed, 286 insertions(+), 260 deletions(-) create mode 100644 .nvmrc delete mode 100644 example/.gitignore delete mode 100644 example/index.html delete mode 100644 example/package.json delete mode 100644 example/src/app.jsx delete mode 100644 example/webpack.config.js create mode 100644 spec/style.scss diff --git a/.csscomb.json b/.csscomb.json index fc4a0d95..1d06a674 100644 --- a/.csscomb.json +++ b/.csscomb.json @@ -24,6 +24,7 @@ "$variable", "$extend", "$include", + "composes", "position", "top", "right", diff --git a/.eslintignore b/.eslintignore index e69de29b..02c4323f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -0,0 +1,2 @@ +**/node_modules/ +**/build/ diff --git a/.eslintrc b/.eslintrc index 3aa02351..e25aff71 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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 + }] + } +} diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..fae6e3d0 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +4.2.1 diff --git a/.scss-lint.yml b/.scss-lint.yml index ce479c61..fea72a16 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -99,6 +99,7 @@ linters: "$variable", "$extend", "$include", + "composes", "position", "top", "right", diff --git a/components/commons.scss b/components/commons.scss index 00cee398..9e6d3ba0 100644 --- a/components/commons.scss +++ b/components/commons.scss @@ -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); diff --git a/components/date_picker/calendar/month.jsx b/components/date_picker/calendar/month.jsx index 2afbc71a..82bcd42d 100644 --- a/components/date_picker/calendar/month.jsx +++ b/components/date_picker/calendar/month.jsx @@ -38,8 +38,7 @@ class Month extends React.Component { return (
- { utils.time.getFullMonth(this.props.viewDate)} - { this.props.viewDate.getFullYear() } + { utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
{ this.renderWeeks() }
{ this.renderDays() }
diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx index fd78ed2e..06d19c17 100644 --- a/components/ripple/index.jsx +++ b/components/ripple/index.jsx @@ -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}`; diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx index 51096c0d..46d4d2d3 100644 --- a/components/tabs/tabs.jsx +++ b/components/tabs/tabs.jsx @@ -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); }; diff --git a/components/utils/events.js b/components/utils/events.js index 496e5a3c..cc2ef9cb 100644 --- a/components/utils/events.js +++ b/components/utils/events.js @@ -40,6 +40,6 @@ module.exports = { node = node.parentNode; } return false; - }, + } }; diff --git a/example/.gitignore b/example/.gitignore deleted file mode 100644 index 4fe38714..00000000 --- a/example/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -build -dist/**/*.css -dist/**/*.js -node_modules -npm-debug.log diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 4474fce4..00000000 --- a/example/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Reack-Toolbox Example - - - - - - - - - - - - - - - - - - diff --git a/example/package.json b/example/package.json deleted file mode 100644 index df07e33b..00000000 --- a/example/package.json +++ /dev/null @@ -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" - } -} diff --git a/example/src/app.jsx b/example/src/app.jsx deleted file mode 100644 index a2190e82..00000000 --- a/example/src/app.jsx +++ /dev/null @@ -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 ( - -

Hello React-Toolbox

-
-