From 00bdec332712f95c0cabe501fee719dea79554d7 Mon Sep 17 00:00:00 2001 From: Marco Pasqualetti Date: Sat, 14 Dec 2024 10:16:46 +0100 Subject: [PATCH 1/3] refactor: fix eslint errors --- .eslintrc.js | 3 ++ package.json | 4 +- pnpm-lock.yaml | 21 +++++--- src/components/ApiFormState.tsx | 3 +- src/components/ApiRefTable.tsx | 3 +- src/components/BuilderPage.tsx | 10 ++-- src/components/CodeCompareSection.tsx | 1 - src/components/DevToolFeaturesList.tsx | 8 +-- src/components/DevTools.tsx | 9 ++-- src/components/Form.tsx | 7 +-- src/components/FormStateApi.tsx | 19 +------ src/components/FormStateTable.tsx | 3 +- src/components/SortableContainer.tsx | 3 +- src/components/UseController.tsx | 3 +- src/components/UseControllerContent.tsx | 5 +- src/components/UseControllerMethods.tsx | 8 +-- src/components/UseFieldArray.tsx | 3 +- src/components/UseFieldArrayContent.tsx | 3 +- src/components/logic/generateCode.ts | 8 +-- src/components/selectNav.tsx | 1 + src/pages/about-us.tsx | 66 ++++++++++++------------- src/pages/dev-tools.tsx | 3 +- src/types/global.d.ts | 7 ++- src/types/little-state-machine.d.ts | 25 +++++----- 24 files changed, 115 insertions(+), 111 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 94b66c9b7..12f954b96 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,6 +5,7 @@ const ERROR = 2 /* eslint-enable @typescript-eslint/no-unused-vars */ module.exports = { + reportUnusedDisableDirectives: true, parser: "@typescript-eslint/parser", parserOptions: { ecmaVersion: 2020, @@ -42,5 +43,7 @@ module.exports = { // jsx-ally "jsx-a11y/no-onchange": WARN, "import/no-anonymous-default-export": OFF, + // next + "@next/next/no-img-element": OFF, }, } diff --git a/package.json b/package.json index 925ccbd74..8e77cb6eb 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "devDependencies": { "@next/bundle-analyzer": "^13.4.5", "@types/react-helmet": "^6.1.6", + "@types/react": "^18.3.11", "@typescript-eslint/eslint-plugin": "^5.59.11", "@typescript-eslint/parser": "^5.59.11", "cross-env": "^7.0.3", @@ -60,7 +61,8 @@ "dev": "next dev", "format": "prettier . --check", "format:fix": "prettier . --write", - "lint": "next lint --fix", + "lint": "next lint", + "lint:fix": "next lint --fix", "now-build": "pnpm run build", "start": "next start", "typecheck": "tsc --noEmit", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0acb94f1..a4f1d2d16 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: dependencies: '@hookform/devtools': specifier: 4.3.1 - version: 4.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + version: 4.3.1(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@mdx-js/loader': specifier: ^2.3.0 version: 2.3.0(webpack@5.95.0(esbuild@0.24.0)) @@ -93,6 +93,9 @@ importers: '@next/bundle-analyzer': specifier: ^13.4.5 version: 13.5.7 + '@types/react': + specifier: ^18.3.11 + version: 18.3.11 '@types/react-helmet': specifier: ^6.1.6 version: 6.1.11 @@ -3479,7 +3482,7 @@ snapshots: '@emotion/memoize@0.9.0': {} - '@emotion/react@11.13.3(react@18.2.0)': + '@emotion/react@11.13.3(@types/react@18.3.11)(react@18.2.0)': dependencies: '@babel/runtime': 7.25.7 '@emotion/babel-plugin': 11.12.0 @@ -3490,6 +3493,8 @@ snapshots: '@emotion/weak-memoize': 0.4.0 hoist-non-react-statics: 3.3.2 react: 18.2.0 + optionalDependencies: + '@types/react': 18.3.11 transitivePeerDependencies: - supports-color @@ -3503,16 +3508,18 @@ snapshots: '@emotion/sheet@1.4.0': {} - '@emotion/styled@11.13.0(@emotion/react@11.13.3(react@18.2.0))(react@18.2.0)': + '@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.2.0))(@types/react@18.3.11)(react@18.2.0)': dependencies: '@babel/runtime': 7.25.7 '@emotion/babel-plugin': 11.12.0 '@emotion/is-prop-valid': 1.3.1 - '@emotion/react': 11.13.3(react@18.2.0) + '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.2.0) '@emotion/serialize': 1.3.2 '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.2.0) '@emotion/utils': 1.4.1 react: 18.2.0 + optionalDependencies: + '@types/react': 18.3.11 transitivePeerDependencies: - supports-color @@ -3645,10 +3652,10 @@ snapshots: protobufjs: 7.4.0 yargs: 17.7.2 - '@hookform/devtools@4.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + '@hookform/devtools@4.3.1(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@emotion/react': 11.13.3(react@18.2.0) - '@emotion/styled': 11.13.0(@emotion/react@11.13.3(react@18.2.0))(react@18.2.0) + '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.2.0) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.11)(react@18.2.0))(@types/react@18.3.11)(react@18.2.0) '@types/lodash': 4.17.12 little-state-machine: 4.8.0(react@18.2.0) lodash: 4.17.21 diff --git a/src/components/ApiFormState.tsx b/src/components/ApiFormState.tsx index 63eda517b..d5ac7abec 100644 --- a/src/components/ApiFormState.tsx +++ b/src/components/ApiFormState.tsx @@ -1,4 +1,5 @@ import { memo } from "react" +import API from "../data/api" import typographyStyles from "../styles/typography.module.css" import FormStateTable from "./FormStateTable" import TabGroup from "./TabGroup" @@ -6,7 +7,7 @@ import CodeArea from "./CodeArea" import formStateUseEffect from "./codeExamples/formStateUseEffect" import formStateUseEffectTs from "./codeExamples/formStateUseEffectTs" -function ApiFormState({ api }: { api: any }) { +function ApiFormState({ api }: { api: typeof API }) { return ( <> diff --git a/src/components/ApiRefTable.tsx b/src/components/ApiRefTable.tsx index 9f30a9668..076b14b0d 100644 --- a/src/components/ApiRefTable.tsx +++ b/src/components/ApiRefTable.tsx @@ -1,13 +1,14 @@ import { useState } from "react" import CodeArea from "./CodeArea" import generic from "../data/generic" +import apiData from "../data/api" import typographyStyles from "../styles/typography.module.css" import tableStyles from "../styles/table.module.css" import styles from "./ApiRefTable.module.css" import register from "./codeExamples/register" import registerTs from "./codeExamples/registerTs" -export default function ApiRefTable({ api }: { api: any }) { +export default function ApiRefTable({ api }: { api: typeof apiData }) { const [isStandard, toggleOption] = useState(true) return ( diff --git a/src/components/BuilderPage.tsx b/src/components/BuilderPage.tsx index eae76ca6d..008823291 100644 --- a/src/components/BuilderPage.tsx +++ b/src/components/BuilderPage.tsx @@ -1,3 +1,5 @@ +import { useState, useRef, useEffect, memo, RefObject } from "react" +import { useRouter } from "next/router" import { Animate } from "react-simple-animate" import { useForm } from "react-hook-form" import SortableContainer from "./SortableContainer" @@ -16,10 +18,8 @@ import containerStyles from "../styles/container.module.css" import typographyStyles from "../styles/typography.module.css" import CodeArea from "./CodeArea" import ClipBoard from "./ClipBoard" -import { useState, useRef, useEffect, memo, RefObject } from "react" import styles from "./BuilderPage.module.css" import { BeekaiBuilderPage } from "./BeekaiBuilderPage" -import { useRouter } from "next/router" const errorStyle = { border: `1px solid ${colors.secondary}`, @@ -110,15 +110,15 @@ function BuilderPage({ useEffect(() => { setValue("toggle", shouldToggleOn) - }, [shouldToggleOn]) + }, [setValue, shouldToggleOn]) useEffect(() => { if (editFormData.type) setValue("type", editFormData.type) - }, [editFormData.type]) + }, [editFormData.type, setValue]) useEffect(() => { setValue("required", editFormData.required) - }, [editIndex]) + }, [editFormData.required, editIndex, setValue]) const child = (
diff --git a/src/components/CodeCompareSection.tsx b/src/components/CodeCompareSection.tsx index e08262614..e2a10c8d2 100644 --- a/src/components/CodeCompareSection.tsx +++ b/src/components/CodeCompareSection.tsx @@ -2,7 +2,6 @@ import { memo } from "react" import reactHookFormCode from "./codeExamples/reactHookFormCode" import CodeArea from "./CodeArea" import { AnimateGroup, Animate } from "react-simple-animate" -import colors from "../styles/colors" import home from "../data/home" import typographyStyles from "../styles/typography.module.css" import containerStyles from "../styles/container.module.css" diff --git a/src/components/DevToolFeaturesList.tsx b/src/components/DevToolFeaturesList.tsx index 58d864613..524f133de 100644 --- a/src/components/DevToolFeaturesList.tsx +++ b/src/components/DevToolFeaturesList.tsx @@ -2,6 +2,7 @@ import { memo } from "react" import { AnimateGroup, AnimateKeyframes } from "react-simple-animate" import home from "../data/home" import generic from "../data/generic" +import type devToolsContent from "../data/devtools" import typographyStyles from "../styles/typography.module.css" import styles from "./DevToolFeaturesList.module.css" import { AnimateKeyframesProps } from "react-simple-animate/dist/types" @@ -18,16 +19,15 @@ const animationKeyFramesProps: AnimateKeyframesProps = { } interface Props { - isPlayFeature: boolean - content: any + content: typeof devToolsContent } -function FeaturesList({ isPlayFeature, content }: Props) { +const FeaturesList = ({ content }: Props) => { return (

{generic.features}

- +
diff --git a/src/components/DevTools.tsx b/src/components/DevTools.tsx index 2cda3967a..8fc49ff9a 100644 --- a/src/components/DevTools.tsx +++ b/src/components/DevTools.tsx @@ -8,6 +8,7 @@ import CodeArea from "./CodeArea" import code from "./codeExamples/devTool" import copyClipBoard from "./utils/copyClipBoard" import generic from "../data/generic" +import content from "../data/devtools" import typographyStyles from "../styles/typography.module.css" import containerStyles from "../styles/container.module.css" import buttonStyles from "../styles/button.module.css" @@ -27,11 +28,7 @@ const DevTool = dynamic( } ) -interface Props { - content: any -} - -export default function DevTools({ content }: Props) { +export default function DevTools() { const methods = useForm({ mode: "onChange", }) @@ -68,7 +65,7 @@ export default function DevTools({ content }: Props) { )} /> - +

diff --git a/src/components/Form.tsx b/src/components/Form.tsx index 4ec7da30b..0226712ca 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -29,11 +29,11 @@ function Form({ methods, devTool, }: { - onSubmit: (data: any) => void - submitData: any + onSubmit: (data: Record) => void + submitData: Record toggleBuilder: (state: boolean) => void formUpdated: boolean - methods: UseFormReturn + methods: UseFormReturn, undefined> devTool?: boolean }) { const { register, handleSubmit, watch, formState, reset } = methods @@ -138,6 +138,7 @@ function Form({ JSON.stringify( Object.entries(errors).reduce( // @ts-expect-error needed for previous + // eslint-disable-next-line @typescript-eslint/no-unused-vars (previous, [key, { ref, ...rest }]) => { previous[key] = rest return previous diff --git a/src/components/FormStateApi.tsx b/src/components/FormStateApi.tsx index b0b7090b2..a796ff59f 100644 --- a/src/components/FormStateApi.tsx +++ b/src/components/FormStateApi.tsx @@ -1,29 +1,12 @@ import typographyStyles from "../styles/typography.module.css" import API from "../data/api" import Link from "next/link" -import { ReactNode } from "react" export const FormStateApi = ({ api, columnIndent, }: { - api?: { - formState: { - isDirty: ReactNode | string - dirtyFields: ReactNode | string - defaultValues: ReactNode | string - touched: ReactNode | string - isSubmitted: ReactNode | string - isSubmitSuccessful: ReactNode | string - isSubmitting: ReactNode | string - submitCount: ReactNode | string - isValid: ReactNode | string - isValidating: ReactNode | string - isLoading: ReactNode | string - validatingFields: ReactNode | string - disabled: ReactNode | string - } - } + api?: Pick columnIndent?: boolean }) => ( <> diff --git a/src/components/FormStateTable.tsx b/src/components/FormStateTable.tsx index 6fdd61caa..07e665f3a 100644 --- a/src/components/FormStateTable.tsx +++ b/src/components/FormStateTable.tsx @@ -1,9 +1,10 @@ import generic from "../data/generic" +import API from "../data/api" import typographyStyles from "../styles/typography.module.css" import tableStyles from "../styles/table.module.css" import { FormStateApi } from "./FormStateApi" -export default function FormStateTable({ api }) { +export default function FormStateTable({ api }: { api: typeof API }) { return ( <>

diff --git a/src/components/SortableContainer.tsx b/src/components/SortableContainer.tsx index c412d0d81..a7532871a 100644 --- a/src/components/SortableContainer.tsx +++ b/src/components/SortableContainer.tsx @@ -1,5 +1,6 @@ import Sortable from "react-sortablejs" import { Animate } from "react-simple-animate" +import type { GlobalState } from "little-state-machine" import colors from "../styles/colors" import generic from "../data/generic" import originalFormData from "../state/formData" @@ -14,7 +15,7 @@ export default function SortableContainer({ reset, }: { updateFormData: (data: object) => void - formData: any + formData: GlobalState["formData"] editIndex: number setEditIndex: (payload: number) => void setFormData: (payload: object) => void diff --git a/src/components/UseController.tsx b/src/components/UseController.tsx index 498333232..2b7b8d162 100644 --- a/src/components/UseController.tsx +++ b/src/components/UseController.tsx @@ -1,4 +1,3 @@ -import api from "../data/api" import typographyStyles from "../styles/typography.module.css" import Footer from "./Footer" import containerStyles from "../styles/container.module.css" @@ -21,7 +20,7 @@ export default function UseController() {
- +
diff --git a/src/components/UseControllerContent.tsx b/src/components/UseControllerContent.tsx index 904806f03..251275046 100644 --- a/src/components/UseControllerContent.tsx +++ b/src/components/UseControllerContent.tsx @@ -1,5 +1,6 @@ -import CodeArea from "./CodeArea" +import api from "../data/api" import generic from "../data/generic" +import CodeArea from "./CodeArea" import useController from "./codeExamples/useController" import useControllerTs from "./codeExamples/useControllerTs" import tableStyles from "../styles/table.module.css" @@ -9,7 +10,7 @@ import TabGroup from "./TabGroup" import useControllerCheckboxes from "./codeExamples/useControllerCheckboxes" import { SelectNav } from "./selectNav" -export default function UseControllerContent({ api }: { api: any }) { +export default function UseControllerContent() { return ( <> name - + string - +

Input's name being registered.

@@ -137,9 +137,9 @@ const UseControllerMethods = ({ ref - + React.Ref - +

A ref used to connect hook form to the input. Assign{" "} diff --git a/src/components/UseFieldArray.tsx b/src/components/UseFieldArray.tsx index 92822e07c..23bc17140 100644 --- a/src/components/UseFieldArray.tsx +++ b/src/components/UseFieldArray.tsx @@ -1,4 +1,3 @@ -import api from "../data/api" import typographyStyles from "../styles/typography.module.css" import Footer from "./Footer" import containerStyles from "../styles/container.module.css" @@ -19,7 +18,7 @@ export default function UseFieldArray() {

- +
diff --git a/src/components/UseFieldArrayContent.tsx b/src/components/UseFieldArrayContent.tsx index 71d4d9d82..3271b3a5c 100644 --- a/src/components/UseFieldArrayContent.tsx +++ b/src/components/UseFieldArrayContent.tsx @@ -1,4 +1,5 @@ import generic from "../data/generic" +import api from "../data/api" import CodeArea from "./CodeArea" import useFieldArray from "./codeExamples/useFieldArray" import typographyStyles from "../styles/typography.module.css" @@ -10,7 +11,7 @@ import useFieldArrayFocus from "./codeExamples/useFieldArrayFocus" import Link from "next/link" import useFieldArrayPreview from "./codeExamples/useFieldArrayPreview" -export default function UseFieldArrayContent({ api }: { api: any }) { +export default function UseFieldArrayContent() { return ( <> diff --git a/src/components/logic/generateCode.ts b/src/components/logic/generateCode.ts index 355f245ba..068603b78 100644 --- a/src/components/logic/generateCode.ts +++ b/src/components/logic/generateCode.ts @@ -1,4 +1,6 @@ -export default (formData: any) => { +import { GlobalState } from "little-state-machine" + +export default (formData: GlobalState["formData"]) => { return `import React from 'react'; import { useForm } from 'react-hook-form'; @@ -46,7 +48,7 @@ ${ required ? `("${name}", { required: true })` : `("${name}")` }}` if (type === "select") { - const select = ` \n${(options || "") .split(";") .filter(Boolean) .reduce((temp, option) => { @@ -60,7 +62,7 @@ ${ } if (type === "radio") { - const select = `\n${options + const select = `\n${(options || "") .split(";") .filter(Boolean) .reduce((temp, option) => { diff --git a/src/components/selectNav.tsx b/src/components/selectNav.tsx index 7ec84457e..a6831938d 100644 --- a/src/components/selectNav.tsx +++ b/src/components/selectNav.tsx @@ -12,6 +12,7 @@ export function SelectNav({ options }: Props) { const router = useRouter() return ( + // eslint-disable-next-line jsx-a11y/no-onchange