chore(deps): ⬆️ update dev dependencies (major) (major) (#251)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Navin Moorthy <navin007.a@gmail.com>

.eslintrc.json

@@ -1,11 +1,11 @@
 {
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "env": { "es6": true },
-  "parser": "@typescript-eslint/parser",
-  "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"],
-  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "extends": [
+    "react-app",
+    "react-app/jest",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": ["simple-import-sort"],
   "rules": {
     "no-console": "off",
     "simple-import-sort/imports": [
@@ -29,6 +29,7 @@
     "import/newline-after-import": "error",
     "import/no-duplicates": "error",
     "testing-library/prefer-explicit-assert": ["error"],
+    "testing-library/no-node-access": "off",
     "testing-library/consistent-data-testid": [
       2,
       {

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "14.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

package.json

@@ -143,32 +143,22 @@
     "@types/react-dom": "17.0.11",
     "@types/react-transition-group": "4.4.4",
     "@types/testing-library__jest-dom": "5.14.2",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
     "all-contributors-cli": "6.20.0",
     "ast-to-markdown": "1.0.0",
     "autoprefixer": "10.4.0",
-    "babel-eslint": "10.1.0",
     "babel-jest": "27.4.5",
     "babel-loader": "8.2.3",
     "babel-plugin-jsx-remove-data-test-id": "3.0.0",
-    "babel-preset-react-app": "10.0.1",
-    "chalk": "4.1.2",
+    "chalk": "4.1.0",
     "codesandbox": "2.2.3",
     "concurrently": "6.5.1",
     "cross-env": "7.0.3",
-    "eslint": "7.32.0",
+    "eslint": "8.5.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "6.1.1",
-    "eslint-plugin-import": "2.25.3",
-    "eslint-plugin-jest": "24.7.0",
-    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-config-react-app": "7.0.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.27.1",
-    "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-testing-library": "4.12.4",
+    "eslint-plugin-storybook": "0.5.5",
     "gacp": "2.10.2",
     "glob": "7.2.0",
     "glob-fs": "0.1.7",
@@ -206,9 +196,9 @@
     "storybook-addon-preview": "2.2.0",
     "storybook-addon-react-docgen": "1.2.42",
     "strip-comments": "2.0.1",
-    "tailwindcss": "2.2.19",
+    "tailwindcss": "3.0.7",
     "ts-jest": "27.1.2",
-    "ts-morph": "12.2.0",
+    "ts-morph": "13.0.2",
     "ts-node": "10.4.0",
     "typescript": "4.5.4",
     "webpack": "5.65.0",

renovate.json

@@ -1,7 +1,7 @@
 {
   "extends": ["config:base"],
   "commitMessageAction": "⬆️ update",
-  "ignoreDeps": ["node-fetch"],
+  "ignoreDeps": ["node-fetch", "chalk"],
   "packageRules": [
     {
       "matchDepTypes": ["devDependencies"],

src/accordion/__tests__/AccordionState.test.ts

@@ -16,8 +16,8 @@ function render({
 
 describe("useAccordionState", () => {
   test("initial state", () => {
-    const result = render();
+    const { current } = render();
 
-    expect(result.current).toMatchSnapshot();
+    expect(current).toMatchSnapshot();
   });
 });

src/dialog/helpers/useNestedDialogs.tsx

@@ -24,6 +24,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
       context.addDialog?.(ref);
       setDialogs(prevDialogs => [...prevDialogs, ref]);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [context.addDialog],
   );
 
@@ -32,6 +33,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
       context.removeDialog?.(ref);
       setDialogs(prevDialogs => removeItemFromArray(prevDialogs, ref));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [context.removeDialog],
   );
 
@@ -40,6 +42,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
       context.showDialog?.(ref);
       setVisibleModals(prevDialogs => [...prevDialogs, ref]);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [context.showDialog],
   );
 
@@ -48,6 +51,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
       context.hideDialog?.(ref);
       setVisibleModals(prevDialogs => removeItemFromArray(prevDialogs, ref));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [context.hideDialog],
   );
 
@@ -58,6 +62,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
     return () => {
       context.removeDialog?.(dialogRef);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     options.unstable_orphan,
     context.addDialog,
@@ -73,6 +78,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
     return () => {
       context.hideDialog?.(dialogRef);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     options.unstable_orphan,
     options.modal,
@@ -91,6 +97,7 @@ export function useNestedDialogs(dialogRef: DialogRef, options: DialogOptions) {
     ) {
       options.hide?.();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [context.visible, options.visible, options.hide, options.unstable_orphan]);
 
   // Provider

src/meter/__tests__/Meter.test.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { render } from "reakit-test-utils";
 import { renderHook } from "reakit-test-utils/hooks";
 import { jestSerializerStripFunctions } from "reakit-test-utils/jestSerializerStripFunctions";
+import { screen } from "@testing-library/react";
 import cases from "jest-in-case";
 
 import { MeterInitialState, useMeterState } from "../../index";
@@ -48,15 +49,17 @@ describe("Meter", () => {
   });
 
   it("checks role", function () {
-    const { getByRole } = render(<MeterComp />);
-    const meter = getByRole("meter");
-    const alsoProgressBar = getByRole("progressbar", { queryFallbacks: true });
+    render(<MeterComp />);
+    const meter = screen.getByRole("meter");
+    const alsoProgressBar = screen.getByRole("progressbar", {
+      queryFallbacks: true,
+    });
     expect(meter).toBe(alsoProgressBar);
   });
 
   it("no value", function () {
-    const { getByRole } = render(<MeterComp />);
-    const meter = getByRole("meter");
+    render(<MeterComp />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-valuemin", "0");
     expect(meter).toHaveAttribute("aria-valuemax", "1");
@@ -65,8 +68,8 @@ describe("Meter", () => {
   });
 
   it("value between min and max", function () {
-    const { getByRole } = render(<MeterComp value={0.5} />);
-    const meter = getByRole("meter");
+    render(<MeterComp value={0.5} />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-valuemin", "0");
     expect(meter).toHaveAttribute("aria-valuemax", "1");
@@ -75,8 +78,8 @@ describe("Meter", () => {
   });
 
   it("value below min", function () {
-    const { getByRole } = render(<MeterComp value={-0.5} />);
-    const meter = getByRole("meter");
+    render(<MeterComp value={-0.5} />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-valuemin", "0");
     expect(meter).toHaveAttribute("aria-valuemax", "1");
@@ -85,8 +88,8 @@ describe("Meter", () => {
   });
 
   it("value above max", function () {
-    const { getByRole } = render(<MeterComp value={1.5} />);
-    const meter = getByRole("meter");
+    render(<MeterComp value={1.5} />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-valuemin", "0");
     expect(meter).toHaveAttribute("aria-valuemax", "1");
@@ -95,8 +98,8 @@ describe("Meter", () => {
   });
 
   it("custom min and max", function () {
-    const { getByRole } = render(<MeterComp min={0} value={5} max={10} />);
-    const meter = getByRole("meter");
+    render(<MeterComp min={0} value={5} max={10} />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-valuemin", "0");
     expect(meter).toHaveAttribute("aria-valuemax", "10");
@@ -105,24 +108,24 @@ describe("Meter", () => {
   });
 
   it("supports aria-label", function () {
-    const { getByRole } = render(<MeterComp aria-label="Meter" />);
-    const meter = getByRole("meter");
+    render(<MeterComp aria-label="Meter" />);
+    const meter = screen.getByRole("meter");
 
     expect(meter).toHaveAttribute("aria-label", "Meter");
   });
 
   it("supports custom DOM props", function () {
-    const { getByTestId } = render(<MeterComp data-testid="testid-test" />);
-    const meter = getByTestId("testid-test");
+    render(<MeterComp data-testid="testid-test" />);
+    const meter = screen.getByTestId("testid-test");
 
     expect(meter).toBeInTheDocument();
   });
 
   cases(
     "meter state hook tests",
     (opts: any) => {
-      const result = renderMeterStateHook(opts.in);
-      expect(result.current).toMatchObject(opts.out);
+      const { current } = renderMeterStateHook(opts.in);
+      expect(current).toMatchObject(opts.out);
     },
     data,
   );

src/number-input/__tests__/NumberInput.test.tsx

@@ -156,17 +156,21 @@ describe("NumberInput", () => {
     expect(numberInput).toHaveFocus();
     expect(numberInput).toHaveValue("0");
 
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       fireEvent.wheel(numberInput, { deltaY: -100 });
     });
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       fireEvent.wheel(numberInput, { deltaY: -100 });
     });
     expect(numberInput).toHaveValue("2");
 
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       fireEvent.wheel(numberInput, { deltaY: 100 });
     });
+    // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       fireEvent.wheel(numberInput, { deltaY: 100 });
     });

src/segment/__tests__/SegmentState.test.ts

@@ -8,6 +8,7 @@ function render({ ...initialState }: SegmentInitialState = {}) {
 
 describe("SegmentState", () => {
   it("should have proper segments", () => {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = render({
       defaultValue: new Date(2050, 0, 0),
     });
@@ -18,6 +19,7 @@ describe("SegmentState", () => {
   it.each(["increment", "decrement"])(
     "should be able to %s a segment",
     type => {
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const result = render();
 
       expect(result.current.segments[0].value).toBe(1);
@@ -43,6 +45,7 @@ describe("SegmentState", () => {
     // eslint-disable-next-line jest/no-identical-title
     "should be able to %s a segment",
     type => {
+      // eslint-disable-next-line testing-library/render-result-naming-convention
       const result = render();
 
       expect(result.current.segments[0].value).toBe(1);
@@ -64,6 +67,7 @@ describe("SegmentState", () => {
   );
 
   it("should be able to setSegment", () => {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = render();
 
     expect(result.current.segments[0].value).toBe(1);
@@ -85,6 +89,7 @@ describe("SegmentState", () => {
   });
 
   it("should be able to setFieldValue", () => {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = render({ defaultValue: new Date(2050, 0, 0) });
 
     expect(result.current.fieldValue).toStrictEqual(new Date(2050, 0, 0));
@@ -96,6 +101,7 @@ describe("SegmentState", () => {
   });
 
   it("should support different formatOptions", () => {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
     const result = render({
       defaultValue: new Date(2050, 0, 0),
       formatOptions: {