From 44c6759d3eea8a35885e6c1c7c083cfa01b35e3a Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 16:54:40 +0100 Subject: [PATCH 01/11] =?UTF-8?q?Add=20ESLint=20with=20plugins=20and=20con?= =?UTF-8?q?fig=20=20=F0=9F=90=BF=20v2.10.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 33 +++++++++++++++++++++++++++++++++ package.json | 6 ++++++ 2 files changed, 39 insertions(+) create mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..a15091c47 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,33 @@ +{ + "env": { + "node": true, + "browser": true, + "commonjs": true, + "es6": true + }, + "extends": [ + "eslint:recommended", + "plugin:jest/recommended", + "plugin:react/recommended" + ], + "settings": { + "react": { + "pragma": "h" + } + }, + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 2018, + "sourceType": "module" + }, + "rules": { + "react/prefer-stateless-function": [ + "error", + "always" + ], + "react/prop-types": [ "off" ], + "react/display-name": [ "off" ] + } +} diff --git a/package.json b/package.json index 2fa8a38de..abc606546 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "pretest": "npm run build", "jest": "jest -c jest.config.js", "test": "npm run jest", + "lint": "eslint -c .eslintrc.json **/*.{js,jsx}", "start": "athloi", "precommit": "secret-squirrel", "commitmsg": "secret-squirrel-commitmsg", @@ -20,6 +21,10 @@ "athloi": "^1.4.0", "chalk": "^2.4.1", "dotgitignore": "^1.0.3", + "eslint": "^5.1.0", + "eslint-plugin-jest": "^21.17.0", + "eslint-plugin-prettier": "^2.6.2", + "eslint-plugin-react": "^7.10.0", "fs-extra": "^6.0.0", "glob": "^7.1.2", "husky": "^0.14.3", @@ -29,6 +34,7 @@ "merge-deep": "^3.0.1", "opn": "^5.3.0", "pascal-case": "^2.0.1", + "prettier": "^1.13.7", "react": "^16.3.1", "react-test-renderer": "^16.3.1", "tcp-port-used": "^0.1.2" From a234c5a39d8a8fd6efc2b663bc981128f36f8496 Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 17:05:54 +0100 Subject: [PATCH 02/11] =?UTF-8?q?Appease=20the=20liner=20=20=F0=9F=90=BF?= =?UTF-8?q?=20v2.10.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/x-interaction/src/InteractionClass.jsx | 2 ++ components/x-teaser/src/Container.jsx | 4 ---- components/x-teaser/src/Image.jsx | 6 ++++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/x-interaction/src/InteractionClass.jsx b/components/x-interaction/src/InteractionClass.jsx index 713be77c9..180fedb97 100644 --- a/components/x-interaction/src/InteractionClass.jsx +++ b/components/x-interaction/src/InteractionClass.jsx @@ -16,6 +16,7 @@ export class InteractionClass extends Component { // additional render will be scheduled. Promise.resolve().then(() => { this.setState({ [loading]: true }, () => { + /* eslint no-console:off */ console.log('didsetloading', this.state[loading]); }); }); @@ -23,6 +24,7 @@ export class InteractionClass extends Component { Promise.resolve(func(...args)).then((next) => { this.setState(next); this.setState({ [loading]: false }, () => { + /* eslint no-console:off */ console.log('didsetunloading', this.state); }); }); diff --git a/components/x-teaser/src/Container.jsx b/components/x-teaser/src/Container.jsx index 4349fe3e8..a5c0c82ae 100644 --- a/components/x-teaser/src/Container.jsx +++ b/components/x-teaser/src/Container.jsx @@ -1,10 +1,6 @@ import { h } from '@financial-times/x-engine'; import { media, theme } from './concerns/rules'; -const YES = ''; - -const NO = 'not-'; - const PREFIX = { yes: '', no: 'not-', diff --git a/components/x-teaser/src/Image.jsx b/components/x-teaser/src/Image.jsx index 32347113d..1903c4d25 100644 --- a/components/x-teaser/src/Image.jsx +++ b/components/x-teaser/src/Image.jsx @@ -17,9 +17,11 @@ const aspectRatio = ({ width, height }) => { return null; }; -export default ({ relativeUrl, url, image, imageSize, imageLazyload, ...props }) => { +export default ({ relativeUrl, url, image, imageSize, ...props }) => { const displayUrl = relativeUrl || url; + // TODO: image lazy loading via n-image! + return image ? (
@@ -27,7 +29,7 @@ export default ({ relativeUrl, url, image, imageSize, imageLazyload, ...props }) 'data-trackable': 'image-link', 'tab-index': '-1', 'aria-hidden': 'true', - }}> + }}>
From 8761dd80de80e44aabc464cb57ad0b8e6ff986cd Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 17:08:49 +0100 Subject: [PATCH 03/11] =?UTF-8?q?Add=20linting=20to=20npm=20test=20=20?= =?UTF-8?q?=F0=9F=90=BF=20v2.10.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index abc606546..f25d034f7 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "athloi build", "pretest": "npm run build", "jest": "jest -c jest.config.js", - "test": "npm run jest", + "test": "npm run lint && npm run jest", "lint": "eslint -c .eslintrc.json **/*.{js,jsx}", "start": "athloi", "precommit": "secret-squirrel", From 1d582139e7577e37c533e0add1a5b72f5455f604 Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 17:27:51 +0100 Subject: [PATCH 04/11] =?UTF-8?q?Add=20eslint=20ignore=20rules=20=20?= =?UTF-8?q?=F0=9F=90=BF=20v2.10.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 3 +++ .eslintrc.json | 4 ++-- package.json | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..bb1df59aa --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +**/coverage/** +**/node_modules/** +**/dist/** diff --git a/.eslintrc.json b/.eslintrc.json index a15091c47..e78e646c7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -27,7 +27,7 @@ "error", "always" ], - "react/prop-types": [ "off" ], - "react/display-name": [ "off" ] + "react/prop-types": "off", + "react/display-name": "off" } } diff --git a/package.json b/package.json index f25d034f7..74a59c78d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "pretest": "npm run build", "jest": "jest -c jest.config.js", "test": "npm run lint && npm run jest", - "lint": "eslint -c .eslintrc.json **/*.{js,jsx}", + "lint": "eslint . --ext=js,jsx", "start": "athloi", "precommit": "secret-squirrel", "commitmsg": "secret-squirrel-commitmsg", @@ -22,8 +22,8 @@ "chalk": "^2.4.1", "dotgitignore": "^1.0.3", "eslint": "^5.1.0", + "eslint-config-prettier": "^2.9.0", "eslint-plugin-jest": "^21.17.0", - "eslint-plugin-prettier": "^2.6.2", "eslint-plugin-react": "^7.10.0", "fs-extra": "^6.0.0", "glob": "^7.1.2", From bec26cbf4c10e4c3e7feb2a4b63eda50c75ee69d Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 18:04:56 +0100 Subject: [PATCH 05/11] =?UTF-8?q?Target=20specific=20ESLint/React=20rules?= =?UTF-8?q?=20to=20components=20=20=F0=9F=90=BF=20v2.10.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 2 ++ .eslintrc.js | 41 +++++++++++++++++++++++++++++++++++++++++ .eslintrc.json | 33 --------------------------------- 3 files changed, 43 insertions(+), 33 deletions(-) create mode 100644 .eslintrc.js delete mode 100644 .eslintrc.json diff --git a/.eslintignore b/.eslintignore index bb1df59aa..b72ac2d33 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,5 @@ **/coverage/** **/node_modules/** +**/bower_components/** **/dist/** +**/vendor/** \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..3a54986f7 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,41 @@ +const config = require('./lerna.json'); + +module.exports = { + env: { + node: true, + browser: true, + commonjs: true, + es6: true + }, + extends: [ + 'eslint:recommended', + 'plugin:jest/recommended', + 'plugin:react/recommended' + ], + parserOptions: { + ecmaFeatures: { + jsx: true + }, + ecmaVersion: 2018, + sourceType: 'module' + }, + rules: { + 'react/prop-types': 'off', + 'react/display-name': 'off' + }, + overrides: [ + { + // components interact with x-engine rather than React runtime + files: [ 'components/**/*.jsx' ], + settings: { + react: { + pragma: 'h' + } + }, + rules: { + 'react/react-in-jsx-scope': 'off', + 'react/prefer-stateless-function': 'error' + } + } + ] +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index e78e646c7..000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "env": { - "node": true, - "browser": true, - "commonjs": true, - "es6": true - }, - "extends": [ - "eslint:recommended", - "plugin:jest/recommended", - "plugin:react/recommended" - ], - "settings": { - "react": { - "pragma": "h" - } - }, - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "sourceType": "module" - }, - "rules": { - "react/prefer-stateless-function": [ - "error", - "always" - ], - "react/prop-types": "off", - "react/display-name": "off" - } -} From bb0f20bb5a59d1efb4ea082ec2ddecc6a2911019 Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Thu, 12 Jul 2018 18:22:31 +0100 Subject: [PATCH 06/11] Appease the linter as much as possible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐿 v2.10.0 --- .eslintrc.js | 12 +++++-- athloi.js | 1 - .../src/concerns/register-component.js | 4 +-- components/x-teaser/stories/knobs.js | 4 +-- packages/x-engine/src/client.js | 1 + packages/x-engine/src/concerns/deep-get.js | 2 -- packages/x-engine/src/concerns/resolve-pkg.js | 2 +- packages/x-engine/src/server.js | 1 - packages/x-logo/index.js | 36 ++++++------------- .../gatsby-plugin-doc-pages/gatsby-node.js | 2 -- .../gatsby-plugin-packages/gatsby-node.js | 5 +-- .../plugins/gatsby-remark-file-links/index.js | 2 +- tools/x-docs/src/components/content/index.js | 2 +- tools/x-docs/src/components/footer/index.js | 2 +- tools/x-docs/src/components/search/index.js | 21 ++++++----- tools/x-docs/src/components/sidebar/index.js | 2 +- tools/x-docs/src/layouts/index.js | 2 +- tools/x-docs/src/pages/index.js | 2 -- tools/x-docs/src/templates/blog.js | 2 +- tools/x-docs/src/templates/story.js | 5 ++- 20 files changed, 48 insertions(+), 62 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3a54986f7..ea5829bbd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,11 +21,12 @@ module.exports = { }, rules: { 'react/prop-types': 'off', - 'react/display-name': 'off' + 'react/display-name': 'off', + 'react/no-unescaped-entities': 'off' }, overrides: [ { - // components interact with x-engine rather than React runtime + // Components in x-dash interact with x-engine rather than React files: [ 'components/**/*.jsx' ], settings: { react: { @@ -36,6 +37,13 @@ module.exports = { 'react/react-in-jsx-scope': 'off', 'react/prefer-stateless-function': 'error' } + }, + { + // Gatsby + files: [ 'tools/x-docs/src/**/*.js' ], + globals: { + graphql: false + } } ] }; diff --git a/athloi.js b/athloi.js index ec1a990ef..d67e96731 100644 --- a/athloi.js +++ b/athloi.js @@ -134,7 +134,6 @@ module.exports = ({tasks, prompt, addPrompt}) => ({ async run(options) { const port = parseInt(url.parse(openUrls.storybook).port, 10); if(await tcpPortUsed.check(port)) { - console.log(); console.log(chalk.red.bold.underline('Storybook running')); console.log(`it looks like Storybook is running. creating a new package at this point will crash Storybook and there's nothing i can do about that.`); diff --git a/components/x-interaction/src/concerns/register-component.js b/components/x-interaction/src/concerns/register-component.js index d014c71b8..7b85f5d3e 100644 --- a/components/x-interaction/src/concerns/register-component.js +++ b/components/x-interaction/src/concerns/register-component.js @@ -2,8 +2,8 @@ const registeredComponents = {}; export function registerComponent(component) { registeredComponents[component.wrappedDisplayName] = component; -}; +} export function getComponent(name) { return registeredComponents[name]; -}; +} diff --git a/components/x-teaser/stories/knobs.js b/components/x-teaser/stories/knobs.js index b5e57e274..9147075a4 100644 --- a/components/x-teaser/stories/knobs.js +++ b/components/x-teaser/stories/knobs.js @@ -176,10 +176,10 @@ module.exports = (data, { object, text, number, boolean, date, selectV2 }) => { return boolean('Headline testing', false, Groups.Context); }, parentId() { - return string('Parent ID', data.context.parentId, Groups.Context); + return text('Parent ID', data.context.parentId, Groups.Context); }, parentLabel() { - return string('Parent Label', data.context.parentLabel, Groups.Context); + return text('Parent Label', data.context.parentLabel, Groups.Context); } }; diff --git a/packages/x-engine/src/client.js b/packages/x-engine/src/client.js index 2dfd19b4f..c4f15722a 100644 --- a/packages/x-engine/src/client.js +++ b/packages/x-engine/src/client.js @@ -1,3 +1,4 @@ +/* eslint no-undef: "off", no-unused-vars: "off" */ // This module is just a placeholder to be re-written at build time. const runtime = require(X_ENGINE_RUNTIME_MODULE); const render = require(X_ENGINE_RENDER_MODULE); diff --git a/packages/x-engine/src/concerns/deep-get.js b/packages/x-engine/src/concerns/deep-get.js index 5fadfc004..b83da6a21 100644 --- a/packages/x-engine/src/concerns/deep-get.js +++ b/packages/x-engine/src/concerns/deep-get.js @@ -1,5 +1,3 @@ -const INDEX = /^\d+$/; - /** * Deep Get * @param {{ [key: string]: any }} tree diff --git a/packages/x-engine/src/concerns/resolve-pkg.js b/packages/x-engine/src/concerns/resolve-pkg.js index 3663c0e4b..437386cae 100644 --- a/packages/x-engine/src/concerns/resolve-pkg.js +++ b/packages/x-engine/src/concerns/resolve-pkg.js @@ -1,3 +1,3 @@ const path = require('path'); -module.exports = (moduleId) => path.join(process.cwd(), 'package.json'); +module.exports = () => path.join(process.cwd(), 'package.json'); diff --git a/packages/x-engine/src/server.js b/packages/x-engine/src/server.js index 91236c00c..0860c0206 100644 --- a/packages/x-engine/src/server.js +++ b/packages/x-engine/src/server.js @@ -1,4 +1,3 @@ -const resolve = require('resolve-cwd'); const deepGet = require('./concerns/deep-get'); const resolvePkg = require('./concerns/resolve-pkg'); const resolvePeer = require('./concerns/resolve-peer'); diff --git a/packages/x-logo/index.js b/packages/x-logo/index.js index 717661112..b6f8dd05e 100644 --- a/packages/x-logo/index.js +++ b/packages/x-logo/index.js @@ -72,25 +72,20 @@ const xPoints = ({x, y, width, height, thickness}) => { } export default class XLogo extends Component { - static defaultProps = { - seed: Math.random().toString(), - hueShift: 45, - thickness: 17, - density: 20, - }; - - state = { - update: 0 - }; - - configure(props) { + constructor (props) { + super(props); + + this.state = { + update: 0 + }; + this.thickerX = xPoints({ x: -25, y: -25, width: 150, height: 150, thickness: this.props.thickness * 1.25 }); - this.random = seedrandom(props.seed); + this.random = seedrandom(this.props.seed); this.poisson = new Poisson([150, 150], 100 / this.props.density, 100, 30, this.random); this.points = this.poisson.fill() .map(([x, y]) => [x - 25, y - 25]) @@ -111,15 +106,6 @@ export default class XLogo extends Component { ); } - constructor(props) { - super(props); - this.configure(props); - } - - componentWillReceiveProps(props) { - this.configure(props); - } - getColor([x, y]) { const [tl, tr, bl, br] = this.hues; const th = tl + (tr - tl) * (x / 100); @@ -163,7 +149,7 @@ export default class XLogo extends Component { } render={({clipPath}) => - + {range(this.triangles.length / 3).map( i => { const points = [ @@ -186,8 +172,8 @@ export default class XLogo extends Component { ].join()} fill={this.triangleColours[i]} stroke={this.triangleColours[i]} - stroke-width='0.1%' - stroke-linejoin='round' + strokeWidth='0.1%' + strokeLinejoin='round' points={polygonPoints(points)} style={{ animation: `${shimmer} ${(this.random() * 10 + 5).toFixed(2)}s linear infinite`, diff --git a/tools/x-docs/plugins/gatsby-plugin-doc-pages/gatsby-node.js b/tools/x-docs/plugins/gatsby-plugin-doc-pages/gatsby-node.js index 32a688ede..8bd491622 100644 --- a/tools/x-docs/plugins/gatsby-plugin-doc-pages/gatsby-node.js +++ b/tools/x-docs/plugins/gatsby-plugin-doc-pages/gatsby-node.js @@ -129,14 +129,12 @@ exports.createPages = ({ boundActionCreators, graphql }) => { ({fileAbsolutePath}) => ' ◆ ' + chalk.cyan(path.relative(repoBase, fileAbsolutePath)) ).join('\n'); - console.warn(); console.warn(`${chalk.black.keyword('black').bold.bgYellow(' WARNING ')} there are multiple files that would have the url ${chalk.blue.underline(url)}: ${filePaths} this will cause unexpected output. please rename or move the files to resolve the conflict `); - console.warn(); } } diff --git a/tools/x-docs/plugins/gatsby-plugin-packages/gatsby-node.js b/tools/x-docs/plugins/gatsby-plugin-packages/gatsby-node.js index e63c86437..16b2b2dc1 100644 --- a/tools/x-docs/plugins/gatsby-plugin-packages/gatsby-node.js +++ b/tools/x-docs/plugins/gatsby-plugin-packages/gatsby-node.js @@ -33,9 +33,7 @@ exports.modifyWebpackConfig = function({config, stage}) { return config; }; -exports.setFieldsOnGraphQLNodeType = ( - { type, store, pathPrefix, getNode, cache, reporter }, -) => { +exports.setFieldsOnGraphQLNodeType = ({ type }) => { if (type.name !== 'Package') { return {} } @@ -52,7 +50,6 @@ exports.setFieldsOnGraphQLNodeType = ( exports.createPages = async ({boundActionCreators, graphql}) => { const {createPage} = boundActionCreators; - const packageTemplate = path.resolve(`src/templates/package.js`); const storyTemplate = path.resolve(`src/templates/story.js`); const result = await graphql(` diff --git a/tools/x-docs/plugins/gatsby-remark-file-links/index.js b/tools/x-docs/plugins/gatsby-remark-file-links/index.js index 3c6df228e..985a0726b 100644 --- a/tools/x-docs/plugins/gatsby-remark-file-links/index.js +++ b/tools/x-docs/plugins/gatsby-remark-file-links/index.js @@ -16,7 +16,7 @@ const repoPathToDocsPath = repoPath => { }; module.exports = (opts) => { - const { markdownAST, pathPrefix, files } = opts; + const { markdownAST, files } = opts; visit(markdownAST, 'link', node => { const isInternalAbsoluteHref = node.url.startsWith('/'); diff --git a/tools/x-docs/src/components/content/index.js b/tools/x-docs/src/components/content/index.js index ad05a24be..39322c085 100644 --- a/tools/x-docs/src/components/content/index.js +++ b/tools/x-docs/src/components/content/index.js @@ -1,4 +1,4 @@ -import React, {Fragment} from 'react'; +import React from 'react'; import styles from './content.module.scss'; import c from 'classnames'; diff --git a/tools/x-docs/src/components/footer/index.js b/tools/x-docs/src/components/footer/index.js index 722386cd9..8724d21d8 100644 --- a/tools/x-docs/src/components/footer/index.js +++ b/tools/x-docs/src/components/footer/index.js @@ -11,7 +11,7 @@ export default ({splash}) =>
Party Parrot

-

© THE FINANCIAL TIMES LTD. FT and 'Financial Times' are trademarks of The Financial Times Ltd.

+

© THE FINANCIAL TIMES LTD. FT and 'Financial Times' are trademarks of The Financial Times Ltd.

; diff --git a/tools/x-docs/src/components/search/index.js b/tools/x-docs/src/components/search/index.js index a194e54b3..ced71695b 100644 --- a/tools/x-docs/src/components/search/index.js +++ b/tools/x-docs/src/components/search/index.js @@ -1,7 +1,6 @@ import React, {Component} from 'react'; import styles from './search.module.scss'; -import Link from 'gatsby-link'; -import Sidebar, {buildSidebarTree, NestedSidebar, ItemList, Item} from '../sidebar'; +import { ItemList, Item} from '../sidebar'; import {Index} from 'elasticlunr'; const Highlight = ({query, text}) => { @@ -21,7 +20,7 @@ const Highlight = ({query, text}) => { const Results = ({results, query, onClickResult}) => {results.length ? results.map( - (result, i) => ; export default class Search extends Component { - state = { - query: '', - results: [], - }; + constructor (props) { + super(props); + + this.state = { + query: '', + results: [], + }; + } render() { return
@@ -62,9 +65,9 @@ export default class Search extends Component {
; } - search = ev => { + search (ev) { const query = ev.target.value; - this.index = this.index || Index.load(this.props.index) + this.index = this.index || Index.load(this.props.index); this.setState({ query, results: this.index.search(query, { diff --git a/tools/x-docs/src/components/sidebar/index.js b/tools/x-docs/src/components/sidebar/index.js index fa61bc866..0629c611a 100644 --- a/tools/x-docs/src/components/sidebar/index.js +++ b/tools/x-docs/src/components/sidebar/index.js @@ -57,7 +57,7 @@ export const NestedSidebar = ({children}) => )} ; -const Sidebar = ({tree, className, children}) =>