Merge pull request #91 from Financial-Times/matth/eslint

ESLint and Prettier in Harmony

.eslintignore

@@ -0,0 +1,7 @@
+**/coverage/**
+**/node_modules/**
+**/bower_components/**
+**/dist/**
+**/vendor/**
+**/public/**
+**/public-prod/**

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+	env: {
+		node: true,
+		browser: true,
+		es6: true
+	},
+	extends: [
+		'eslint:recommended',
+		// https://github.com/jest-community/eslint-plugin-jest
+		'plugin:jest/recommended',
+		// https://github.com/yannickcr/eslint-plugin-react
+		'plugin:react/recommended'
+	],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 2018,
+		// Support for ESM is not tied to an ES version
+		sourceType: 'module'
+	},
+	rules: {
+		// We don't expect consumers of x-dash to use prop types
+		'react/prop-types': 'off',
+		// We don't use display names for SFCs
+		'react/display-name': 'off',
+		// This rule is intended to catch < or > but it's too eager
+		'react/no-unescaped-entities': 'off'
+	},
+	overrides: [
+		{
+			// Components in x-dash interact with x-engine rather than React
+			files: [ 'components/**/*.jsx' ],
+			settings: {
+				react: {
+					pragma: 'h'
+				}
+			},
+			rules: {
+				'react/react-in-jsx-scope': 'off',
+				'react/prefer-stateless-function': 'error'
+			}
+		},
+		{
+			// Gatsby
+			files: [ 'tools/x-docs/src/**/*.js' ],
+			globals: {
+				graphql: false
+			}
+		}
+	]
+};

athloi.js

@@ -1,3 +1,4 @@
+/* eslint no-console:off */
 const open = require('opn');
 const tcpPortUsed = require('tcp-port-used');
 const url = require('url');
@@ -134,7 +135,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.`);
 

components/x-interaction/src/InteractionClass.jsx

@@ -16,13 +16,15 @@ 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]);
 				});
 			});
 
 			Promise.resolve(func(...args)).then((next) => {
 				this.setState(next);
 				this.setState({ [loading]: false }, () => {
+					/* eslint no-console:off */
 					console.log('didsetunloading', this.state);
 				});
 			});

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];
-};
+}

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-',

components/x-teaser/src/Image.jsx

@@ -17,17 +17,19 @@ 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 ? (
 		<div className="o-teaser__image-container js-teaser-image-container">
 			<div className="o-teaser__image-placeholder" style={{ paddingBottom: aspectRatio(image) }}>
 				<Link {...props} url={displayUrl} attrs={{
 					'data-trackable': 'image-link',
 					'tab-index': '-1',
 					'aria-hidden': 'true',
- 				}}>
+				}}>
 					<img className="o-teaser__image" src={imageService(image.url, ImageSizes[imageSize])} alt="" />
 				</Link>
 			</div>

components/x-teaser/stories/index.js

@@ -1,9 +1,5 @@
 const { Teaser } = require('../');
 
-if (typeof window !== 'undefined' && !/\.ft\.com$/.test(window.location.hostname)) {
-	console.warn('Due to CORS restrictions some demos may not work outside of the ft.com domain');
-}
-
 exports.component = Teaser;
 exports.package = require('../package.json');
 

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);
 		}
 	};
 

package.json

@@ -7,7 +7,8 @@
     "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 . --ext=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-config-prettier": "^2.9.0",
+    "eslint-plugin-jest": "^21.17.0",
+    "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"

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);

packages/x-engine/src/concerns/deep-get.js

@@ -1,5 +1,3 @@
-const INDEX = /^\d+$/;
-
 /**
  * Deep Get
  * @param {{ [key: string]: any }} tree

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');

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');

packages/x-logo/index.js

@@ -71,26 +71,21 @@ 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) {
+class XLogo extends Component {
+	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 {
 							<polygon points={polygonPoints(xClip)} />
 						}
 						render={({clipPath}) =>
-							<g clip-path={clipPath}>
+							<g clipPath={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`,
@@ -203,3 +189,12 @@ export default class XLogo extends Component {
 		/>;
 	}
 }
+
+XLogo.defaultProps = {
+	seed: Math.random().toString(),
+	hueShift: 45,
+	thickness: 17,
+	density: 20,
+};
+
+export default XLogo;

tools/x-docs/plugins/gatsby-plugin-doc-pages/gatsby-node.js

@@ -129,14 +129,13 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
 					({fileAbsolutePath}) => '  ◆ ' + chalk.cyan(path.relative(repoBase, fileAbsolutePath))
 				).join('\n');
 
-				console.warn();
+				/* eslint no-console:off */
 				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();
 			}
 		}
 

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(`

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('/');

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';
 

tools/x-docs/src/components/footer/index.js

@@ -11,7 +11,7 @@ export default ({splash}) => <footer className={c("o-techdocs-footer", styles.fo
 			</a>
 			<img src={parrot} width={64} alt='Party Parrot' className={styles.parrot} />
 		</p>
-		<p>&copy; THE FINANCIAL TIMES LTD. FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
+		<p>© THE FINANCIAL TIMES LTD. FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
 	</div>
 </footer>
 ;