chore: update repo to use fast-eslint-rules (#2913)

* chore: update repo to use eslint instead of tslint

* merge and fix fast element eslint issues

.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+};

.github/CODEOWNERS

@@ -58,8 +58,8 @@
 # fast-tooling-react
 /packages/fast-tooling-react/ @janechu @nicholasrice @chrisdholt
 
-# fast-tslint-rules
-/packages/fast-tslint-rules/ @nicholasrice @janechu @chrisdholt
+# fast-eslint-rules
+/packages/fast-eslint-rules/ @nicholasrice @janechu @chrisdholt
 
 # fast-web-utilities
 /packages/fast-web-utilities/ @janechu @chrisdholt @nicholasrice

build/convert-readme.js

@@ -1,7 +1,7 @@
 /**
-* Utility for converting README files to .tsx files.
-* Usage: node build/convert-readme.js %path%
-*/
+ * Utility for converting README files to .tsx files.
+ * Usage: node build/convert-readme.js %path%
+ */
 const path = require("path");
 const glob = require("glob");
 const fs = require("fs");
@@ -14,7 +14,6 @@ const srcDir = argv.src || "./src/**/README.md";
  * Start and end file strings
  */
 const startFile = `// Generated file from ../../build
-/* tslint:disable */
 import React from "react";
 export default class Documentation extends React.Component<{}, {}> {
     public render(): JSX.Element {
@@ -32,12 +31,12 @@ const md = new MarkdownIt({
     html: true,
     linkify: true,
     typographer: true,
-    xhtmlOut: true
+    xhtmlOut: true,
 });
 
 /**
-* All paths passed to the convert script
-*/
+ * All paths passed to the convert script
+ */
 const paths = argv._;
 
 /**
@@ -46,8 +45,8 @@ const paths = argv._;
 function exportReadme(readmePath) {
     const readmePaths = path.resolve(process.cwd(), srcDir);
 
-    glob(readmePaths, void(0), function(error, files) {
-        files.forEach((filePath) => {
+    glob(readmePaths, void 0, function (error, files) {
+        files.forEach(filePath => {
             let documentation = startFile;
             const markdown = fs.readFileSync(filePath, "utf8");
             const exportPath = filePath.replace(/README\.md/, readmePath);
@@ -59,12 +58,15 @@ function exportReadme(readmePath) {
             }
 
             documentation += endFile;
-            
-            if (!fs.existsSync(exportPath)){
+
+            if (!fs.existsSync(exportPath)) {
                 fs.mkdirSync(exportPath);
             }
 
-            fs.writeFileSync(path.resolve(exportPath, "documentation.tsx"), documentation);
+            fs.writeFileSync(
+                path.resolve(exportPath, "documentation.tsx"),
+                documentation
+            );
         });
     });
 }

build/documentation/generate-typedocs.js

@@ -33,7 +33,7 @@ const excludedPackages = [
     "fast-browser-extensions",
     "fast-color-explorer",
     "fast-permutator",
-    "fast-tslint-rules",
+    "fast-eslint-rules",
 ];
 
 /**
@@ -55,15 +55,15 @@ var proc = dryRun
     ? exec(`node ${copyReadmeScriptPath} --dry-run`)
     : exec(`node ${copyReadmeScriptPath}`);
 
-proc.stdout.on("data", function(data) {
+proc.stdout.on("data", function (data) {
     process.stdout.write(data);
 });
 
 proc.on("error", err => {
     console.log(chalk.red(err));
 });
 
-proc.on("close", function(code) {
+proc.on("close", function (code) {
     console.log(chalk.green(`${copyReadmeScript} ran successfully.`));
     execute();
 });
@@ -80,7 +80,7 @@ function execute() {
 
     const packages = path.resolve(rootDir, srcDir);
 
-    glob(packages, { realpath: true }, function(error, srcFiles) {
+    glob(packages, { realpath: true }, function (error, srcFiles) {
         srcFiles.forEach(srcPath => {
             var valid = true;
 
@@ -190,7 +190,7 @@ function addAPILinkToReadme(packageName) {
 
     var usageText = "\n" + `[API Reference](${apiLink})`;
 
-    fs.appendFile(readmePath, usageText, function(err) {
+    fs.appendFile(readmePath, usageText, function (err) {
         if (err) {
             console.log(chalk.red(err));
         }

docs/en/contributing/install.md

@@ -32,7 +32,7 @@ Builds all the packages:
 lerna run prepare
 ```
 
-- `yarn tslint` or `yarn tslint:fix` executes tslint on TypeScript in a given package.
+- `yarn eslint` or `yarn eslint:fix` executes eslint in a given package.
 - `yarn unit-tests` executes unit testing for packages.
 - `yarn test` executes processes in a package required to pass before check-in and generally includes building, linting, and unit testing.
 

docs/en/contributing/packages.md

@@ -54,12 +54,12 @@ The following scripts are required:
 * `npm run prettier` ensures code is formatted correctly (runs on a global repository githook).
 * `npm run prettier:diff` provides a hook to ensure code formatting matches expectations on the build server.
 * `npm run test` runs all tests.
-* `npm run tslint` runs tslint.
+* `npm run eslint` runs eslint.
 
 Additional scripts and common use cases include:
 
 * `npm start` starts the webpack-dev-server.
-* `npm run tslint:fix` runs tslint with the fix option.
+* `npm run eslint:fix` runs eslint with the fix option.
 * `npm run watch` watches the files and builds the exported package when making changes to the source files.
 
 ## .npmignore
@@ -78,7 +78,7 @@ Applications using `webpack-dev-server` can also serve as a means for testing us
 
 ## Typescript
 
-Use TypeScript for packages that include JavaScript and make sure to add `tsconfig.json` and `tslint.json` files.
+Use TypeScript for packages that include JavaScript and make sure to add `tsconfig.json` and `.eslintrc.js` files.
 
 Published packages must be in ES6 module format to support tree-shaking.
 

package.json

@@ -10,7 +10,7 @@
   "private": true,
   "workspaces": {
     "packages": ["packages/*"],
-    "nohoist": ["**/react-syntax-highlighter"]
+    "nohoist": ["**/react-syntax-highlighter", "**/@microsoft/fast-tslint-rules"]
   },
   "repository": {
     "type": "git",
@@ -29,9 +29,7 @@
     "integration-tests:beta": "node build/testing/sauce-labs/test-browsers.js beta",
     "integration-tests:release": "node build/testing/sauce-labs/test-browsers.js release",
     "prepare": "lerna run prepare",
-    "test": "yarn tslint && yarn unit-tests",
-    "tslint": "tslint -c ./tslint.json 'build/**/*.ts'",
-    "tslint:fix": "tslint -c ./tslint.json --fix 'build/**/*.ts'",
+    "test": "yarn eslint && yarn unit-tests",
     "unit-tests": "jest --maxWorkers=4",
     "unit-tests:watch": "jest --watch",
     "watch": "tsc -p ./tsconfig.json -w --preserveWatchOutput"
@@ -76,15 +74,13 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
   "resolutions": {
     "@types/react": "*"
   },
   "devDependencies": {
-    "@microsoft/fast-tslint-rules": "^3.0.0",
     "@types/jest": "^25.2.1",
     "@types/lodash-es": "^4.17.0",
     "@types/node": "^9.4.7",
@@ -101,11 +97,10 @@
     "lerna": "^3.20.2",
     "lint-staged": "^10.1.2",
     "markdown-it": "^8.4.1",
-    "prettier": "1.14.3",
+    "prettier": "2.0.2",
     "rimraf": "^2.6.2",
     "ts-jest": "^25.3.1",
     "ts-node": "^8.8.2",
-    "tslint": "^5.11.0",
     "typedoc": "^0.14.2",
     "typedoc-plugin-markdown": "^2.2.17",
     "typescript": "3.3.3",

packages/fast-animation/.eslintignore

@@ -0,0 +1,8 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint coverage output
+coverage
+# don't lint www
+www

packages/fast-animation/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+};

packages/fast-animation/.npmignore

@@ -11,4 +11,4 @@ www/
 babel.config.js
 tsconfig.json
 postcss.config.js
-tslint.json
+.eslintrc.js

packages/fast-animation/__tests__/index.ts

@@ -1,4 +1,3 @@
-/* tslint:disable:no-string-literal */
 import Animate, { AnimateConfig } from "../lib/animate";
 class AnimateMock extends Animate {}
 

packages/fast-animation/client/examples/app/components/TestPage.tsx

@@ -1,8 +1,4 @@
-/* tslint:disable:no-var-requires */
 import React from "react";
-const doSvg1: string = require("../assets/images/do-check.svg");
-const easingCurve: string = require("../assets/images/easing-curve.svg");
-const sass: string = require("../assets/styles/test-page.css");
 import ScrollTrigger from "../../../../lib/triggers/ScrollTrigger";
 import ViewEnterTrigger from "../../../../lib/triggers/ViewEnterTrigger";
 import ViewExitTrigger from "../../../../lib/triggers/ViewExitTrigger";
@@ -13,6 +9,12 @@ import { cubicBezier } from "../../../../lib/curves";
 import AnimateGroup from "../../../../lib/animateGroup";
 import AnimateSequence from "../../../../lib/animateSequence";
 
+/* eslint-disable */
+const sass: string = require("../assets/styles/test-page.css");
+const easingCurve: string = require("../assets/images/easing-curve.svg");
+const doSvg1: string = require("../assets/images/do-check.svg");
+/* eslint-enable */
+
 class TestPage extends React.Component {
     private scrollElement: HTMLElement;
 
@@ -50,6 +52,7 @@ class TestPage extends React.Component {
             Object.assign({}, effects, { delay: 750 })
         ).play();
 
+        /* eslint-disable */
         scrollTrigger.subscribe(this.scrollElement, (distance: number) => {
             // Save for debugging
             // console.log(distance);
@@ -63,6 +66,7 @@ class TestPage extends React.Component {
             // Save for debugging
             // console.log('exited');
         });
+        /* eslint-enable */
     }
 
     public render(): JSX.Element {
@@ -330,15 +334,10 @@ class TestPage extends React.Component {
         const row3: HTMLElement = e.currentTarget.querySelector(".row3");
 
         const fadeInOptions: AnimateConfig = { opacity: 1 };
-        const fadeOutOptions: AnimateConfig = { opacity: 0 };
         const fadeInEffect: EffectTiming = {
             duration: 350,
             easing: cubicBezier("fastInOut"),
         };
-        const fadeOutEffect: EffectTiming = {
-            delay: 4000,
-            easing: cubicBezier("easeOut"),
-        };
 
         const sequence: AnimateSequence = new AnimateSequence([
             new AnimateTo(row1, fadeInOptions, fadeInEffect),