Setup eslint and update tsconfig with strict typechecking (#219)

* add in eslint * remove eslint * fix all eslint issues on loaders * fix type errors in src * fix lint issues in docs * update script * update demo site * more fixes and rebuild demo * update form typings * fix linter in tests * fix issues in examles * update jest * update demo * test * undo * fix lint * update lint script * test * update snapshot * test * test * undo * test remove prepare script * add new json
davidhu2000 · Oct 4, 2020 · f5dec6e · f5dec6e
1 parent f2cdd3e
commit f5dec6e
Show file tree

Hide file tree

Showing 81 changed files with 8,509 additions and 4,206 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -23,7 +23,7 @@ jobs: # a collection of steps
           command: npm run lint
       - run:
           name: Jest tests
-          command: npm run test:jest
+          command: npm run jest
       - run:
           name: Report coverage
           command: npm run coveralls
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  settings: {
+    react: {
+      version: "detect"
+    }
+  }
+};
diff --git a/__tests__/BarLoader-tests.tsx b/__tests__/BarLoader-tests.tsx
@@ -10,10 +10,10 @@ import { heightWidthDefaults } from "../src/helpers";
 describe("BarLoader", () => {
   let loader: ReactWrapper<LoaderHeightWidthProps, null, BarLoader>;
   let props: LoaderHeightWidthProps;
-  let defaultColor: string = "#000000";
-  let defaultHeight: number = 4;
-  let defaultWidth: number = 100;
-  let defaultUnit: string = "px";
+  const defaultColor = "#000000";
+  const defaultHeight = 4;
+  const defaultWidth = 100;
+  const defaultUnit = "px";
 
   it("should match snapshot", () => {
     loader = mount(<BarLoader />);
@@ -39,7 +39,7 @@ describe("BarLoader", () => {
   });
 
   it("should render the correct color based on passed in prop", () => {
-    let color: string = "#e2e2e2";
+    const color = "#e2e2e2";
     loader = mount(<BarLoader color={color} />);
     expect(loader).not.toHaveStyleRule("background-color", "rgba(0,0,0,0.2)");
     expect(loader).toHaveStyleRule("background-color", "rgba(226,226,226,0.2)");
@@ -48,7 +48,7 @@ describe("BarLoader", () => {
 
   describe("height prop", () => {
     it("should render the height with px unit when size is a number", () => {
-      let height: number = 10;
+      const height = 10;
       loader = mount(<BarLoader height={height} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
       expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`);
@@ -60,7 +60,7 @@ describe("BarLoader", () => {
     });
 
     it("should render the height as is when height is a string with valid css unit", () => {
-      let height: string = "18%";
+      const height = "18%";
       loader = mount(<BarLoader height={height} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
       expect(loader).toHaveStyleRule("height", `${height}`);
@@ -72,9 +72,9 @@ describe("BarLoader", () => {
     });
 
     it("should render the height with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let height: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const height = `${length}${unit}`;
       loader = mount(<BarLoader height={height} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
       expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
@@ -88,23 +88,23 @@ describe("BarLoader", () => {
 
   describe("width prop", () => {
     it("should render the width with px unit when size is a number", () => {
-      let width: number = 10;
+      const width = 10;
       loader = mount(<BarLoader width={10} />);
       expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
       expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`);
     });
 
     it("should render the height as is when height is a string with valid css unit", () => {
-      let width: string = "18%";
+      const width = "18%";
       loader = mount(<BarLoader width={width} />);
       expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
       expect(loader).toHaveStyleRule("width", `${width}`);
     });
 
     it("should render the width with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let width: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const width = `${length}${unit}`;
       loader = mount(<BarLoader width={width} />);
       expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
       expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);

diff --git a/__tests__/BeatLoader-tests.tsx b/__tests__/BeatLoader-tests.tsx
@@ -10,10 +10,10 @@ import { sizeMarginDefaults } from "../src/helpers";
 describe("BeatLoader", () => {
   let loader: ReactWrapper<LoaderSizeMarginProps, null, BeatLoader>;
   let props: LoaderSizeMarginProps;
-  let defaultColor: string = "#000000";
-  let defaultSize: number = 15;
-  let defaultMargin: number = 2;
-  let defaultUnit: string = "px";
+  const defaultColor = "#000000";
+  const defaultSize = 15;
+  const defaultMargin = 2;
+  const defaultUnit = "px";
 
   it("should match snapshot", () => {
     loader = mount(<BeatLoader />);
@@ -46,7 +46,7 @@ describe("BeatLoader", () => {
 
   describe("size prop", () => {
     it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
+      const size = 18;
       loader = mount(<BeatLoader size={18} />);
       expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -55,7 +55,7 @@ describe("BeatLoader", () => {
     });
 
     it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
+      const size = "18px";
       loader = mount(<BeatLoader size={size} />);
       expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -64,9 +64,9 @@ describe("BeatLoader", () => {
     });
 
     it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const size = `${length}${unit}`;
       loader = mount(<BeatLoader size={size} />);
       expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -77,7 +77,7 @@ describe("BeatLoader", () => {
 
   describe("margin prop", () => {
     it("should render the margin with px unit when margin is a number", () => {
-      let margin: number = 18;
+      const margin = 18;
       loader = mount(<BeatLoader margin={18} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "margin",
@@ -87,7 +87,7 @@ describe("BeatLoader", () => {
     });
 
     it("should render the margin as is when margin is a string with valid css unit", () => {
-      let margin: string = "18px";
+      const margin = "18px";
       loader = mount(<BeatLoader margin={margin} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "margin",
@@ -97,9 +97,9 @@ describe("BeatLoader", () => {
     });
 
     it("should render the margin with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let margin: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const margin = `${length}${unit}`;
       loader = mount(<BeatLoader margin={margin} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "margin",

diff --git a/__tests__/BounceLoader-tests.tsx b/__tests__/BounceLoader-tests.tsx
@@ -10,9 +10,9 @@ import { sizeDefaults } from "../src/helpers";
 describe("BounceLoader", () => {
   let loader: ReactWrapper<LoaderSizeProps, null, BounceLoader>;
   let props: LoaderSizeProps;
-  let defaultColor: string = "#000000";
-  let defaultSize: number = 60;
-  let defaultUnit: string = "px";
+  const defaultColor = "#000000";
+  const defaultSize = 60;
+  const defaultUnit = "px";
 
   it("should match snapshot", () => {
     loader = mount(<BounceLoader />);
@@ -38,15 +38,15 @@ describe("BounceLoader", () => {
   });
 
   it("should render the correct color based on prop", () => {
-    let color: string = "#e2e2e2";
+    const color = "#e2e2e2";
     loader = mount(<BounceLoader color={color} />);
     expect(loader.find("div div")).not.toHaveStyleRule("background-color", defaultColor);
     expect(loader.find("div div")).toHaveStyleRule("background-color", color);
   });
 
   describe("size prop", () => {
     it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
+      const size = 18;
       loader = mount(<BounceLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -60,7 +60,7 @@ describe("BounceLoader", () => {
     });
 
     it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
+      const size = "18px";
       loader = mount(<BounceLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -74,9 +74,9 @@ describe("BounceLoader", () => {
     });
 
     it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const size = `${length}${unit}`;
       loader = mount(<BounceLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);

diff --git a/__tests__/CircleLoader-tests.tsx b/__tests__/CircleLoader-tests.tsx
@@ -10,9 +10,9 @@ import { sizeDefaults } from "../src/helpers";
 describe("CircleLoader", () => {
   let loader: ReactWrapper<LoaderSizeProps, null, CircleLoader>;
   let props: LoaderSizeProps;
-  let defaultColor: string = "#000000";
-  let defaultSize: number = 50;
-  let defaultUnit: string = "px";
+  const defaultColor = "#000000";
+  const defaultSize = 50;
+  const defaultUnit = "px";
 
   it("should match snapshot", () => {
     loader = mount(<CircleLoader />);
@@ -38,15 +38,15 @@ describe("CircleLoader", () => {
   });
 
   it("should render the correct color based on prop", () => {
-    let color: string = "#e2e2e2";
+    const color = "#e2e2e2";
     loader = mount(<CircleLoader color={color} />);
     expect(loader.find("div div")).not.toHaveStyleRule("border", `1px solid ${defaultColor}`);
     expect(loader.find("div div")).toHaveStyleRule("border", `1px solid ${color}`);
   });
 
   describe("size prop", () => {
     it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
+      const size = 18;
       loader = mount(<CircleLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -60,7 +60,7 @@ describe("CircleLoader", () => {
     });
 
     it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
+      const size = "18px";
       loader = mount(<CircleLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
@@ -74,9 +74,9 @@ describe("CircleLoader", () => {
     });
 
     it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const size = `${length}${unit}`;
       loader = mount(<CircleLoader size={size} />);
       expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
       expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);

diff --git a/__tests__/ClimbingBoxLoader-tests.tsx b/__tests__/ClimbingBoxLoader-tests.tsx
@@ -10,9 +10,9 @@ import { sizeDefaults } from "../src/helpers";
 describe("ClimbingBoxLoader", () => {
   let loader: ReactWrapper<LoaderSizeProps, null, ClimbingBoxLoader>;
   let props: LoaderSizeProps;
-  let defaultColor: string = "#000000";
-  let defaultSize: number = 15;
-  let defaultUnit: string = "px";
+  const defaultColor = "#000000";
+  const defaultSize = 15;
+  const defaultUnit = "px";
 
   it("should match snapshot", () => {
     loader = mount(<ClimbingBoxLoader />);
@@ -45,7 +45,7 @@ describe("ClimbingBoxLoader", () => {
   });
 
   it("should render the correct color based on prop", () => {
-    let color: string = "#e2e2e2";
+    const color = "#e2e2e2";
     loader = mount(<ClimbingBoxLoader color={color} />);
 
     expect(loader.find("div div div").at(0)).not.toHaveStyleRule(
@@ -66,7 +66,7 @@ describe("ClimbingBoxLoader", () => {
 
   describe("size props", () => {
     it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
+      const size = 18;
       loader = mount(<ClimbingBoxLoader size={size} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "font-size",
@@ -76,7 +76,7 @@ describe("ClimbingBoxLoader", () => {
     });
 
     it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
+      const size = "18px";
       loader = mount(<ClimbingBoxLoader size={size} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "font-size",
@@ -86,9 +86,9 @@ describe("ClimbingBoxLoader", () => {
     });
 
     it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
+      const length = 18;
+      const unit = "ad";
+      const size = `${length}${unit}`;
       loader = mount(<ClimbingBoxLoader size={size} />);
       expect(loader.find("div div")).not.toHaveStyleRule(
         "font-size",