From a49e844c7084dd351d3680ba8dd281852bd9d415 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20LUDWIG?= Date: Mon, 23 Oct 2023 23:26:27 +0200 Subject: [PATCH] chore: better Prettier config for easier reviews --- .github/ISSUE_TEMPLATE/BUG.md | 8 +- .github/ISSUE_TEMPLATE/DOCUMENTATION.md | 8 +- .github/ISSUE_TEMPLATE/FEATURE_REQUEST.md | 8 +- .github/ISSUE_TEMPLATE/IMPROVEMENT.md | 8 +- .github/ISSUE_TEMPLATE/QUESTION.md | 8 +- .github/workflows/build.yml | 26 +- .github/workflows/lint.yml | 26 +- .github/workflows/release.yml | 38 +- .github/workflows/test.yml | 50 +- .prettierrc.json | 5 +- README.md | 32 +- example/components/About.tsx | 26 +- example/components/FormExample.tsx | 48 +- example/components/Header/Header.tsx | 6 +- example/components/Header/Language/Arrow.tsx | 14 +- .../Header/Language/LanguageFlag.tsx | 4 +- example/components/Header/Language/index.tsx | 32 +- example/components/Header/SwitchTheme.tsx | 58 +- example/components/Header/index.ts | 2 +- example/components/design/Button.tsx | 8 +- example/components/design/FormState.tsx | 28 +- example/components/design/Input.tsx | 22 +- example/components/design/Link.tsx | 8 +- example/components/design/Loader/Loader.tsx | 22 +- example/components/design/Loader/index.ts | 2 +- example/components/design/TextSpecial.tsx | 6 +- example/cypress.config.ts | 8 +- example/cypress/e2e/Form.cy.ts | 88 +- example/cypress/e2e/Header.cy.ts | 68 +- example/hooks/useFormTranslation.ts | 30 +- example/models/User.ts | 6 +- example/next.config.js | 4 +- example/package-lock.json | 1611 +++-- example/package.json | 22 +- example/pages/_app.tsx | 8 +- example/pages/_document.tsx | 4 +- example/pages/index.tsx | 16 +- example/postcss.config.js | 4 +- example/tailwind.config.js | 18 +- package-lock.json | 5898 ++++++++++------- package.json | 46 +- src/__test__/index.test.tsx | 28 +- src/components/Form.tsx | 8 +- src/hooks/useFetchState.ts | 8 +- src/hooks/useForm.ts | 50 +- src/index.ts | 8 +- src/utils/ajv.ts | 36 +- src/utils/handleCheckboxBoolean.ts | 10 +- src/utils/handleOptionalEmptyStringToNull.ts | 8 +- tsup.config.js | 14 +- 50 files changed, 4642 insertions(+), 3862 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/BUG.md b/.github/ISSUE_TEMPLATE/BUG.md index e1fc7e7..d47b126 100644 --- a/.github/ISSUE_TEMPLATE/BUG.md +++ b/.github/ISSUE_TEMPLATE/BUG.md @@ -1,8 +1,8 @@ --- -name: '🐛 Bug Report' -about: 'Report an unexpected problem or unintended behavior.' -title: '[Bug]' -labels: 'bug' +name: "🐛 Bug Report" +about: "Report an unexpected problem or unintended behavior." +title: "[Bug]" +labels: "bug" --- diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md index 3307418..dc9a49c 100644 --- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md +++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md @@ -1,8 +1,8 @@ --- -name: '✨ Feature Request' -about: 'Suggest a new feature idea.' -title: '[Feature]' -labels: 'feature request' +name: "✨ Feature Request" +about: "Suggest a new feature idea." +title: "[Feature]" +labels: "feature request" --- diff --git a/.github/ISSUE_TEMPLATE/IMPROVEMENT.md b/.github/ISSUE_TEMPLATE/IMPROVEMENT.md index b5bdbb7..e50e289 100644 --- a/.github/ISSUE_TEMPLATE/IMPROVEMENT.md +++ b/.github/ISSUE_TEMPLATE/IMPROVEMENT.md @@ -1,8 +1,8 @@ --- -name: '🔧 Improvement' -about: 'Improve structure/format/performance/refactor/tests of the code.' -title: '[Improvement]' -labels: 'improvement' +name: "🔧 Improvement" +about: "Improve structure/format/performance/refactor/tests of the code." +title: "[Improvement]" +labels: "improvement" --- diff --git a/.github/ISSUE_TEMPLATE/QUESTION.md b/.github/ISSUE_TEMPLATE/QUESTION.md index c18eaa3..df6acdc 100644 --- a/.github/ISSUE_TEMPLATE/QUESTION.md +++ b/.github/ISSUE_TEMPLATE/QUESTION.md @@ -1,8 +1,8 @@ --- -name: '🙋 Question' -about: 'Further information is requested.' -title: '[Question]' -labels: 'question' +name: "🙋 Question" +about: "Further information is requested." +title: "[Question]" +labels: "question" --- ### Question diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index cde0490..555214a 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -1,4 +1,4 @@ -name: 'Build' +name: "Build" on: push: @@ -8,21 +8,21 @@ on: jobs: build: - runs-on: 'ubuntu-latest' + runs-on: "ubuntu-latest" steps: - - uses: 'actions/checkout@v3.5.3' + - uses: "actions/checkout@v3.5.3" - - name: 'Setup Node.js' - uses: 'actions/setup-node@v3.6.0' + - name: "Setup Node.js" + uses: "actions/setup-node@v3.6.0" with: - node-version: 'lts/*' - cache: 'npm' + node-version: "lts/*" + cache: "npm" - - name: 'Install dependencies' - run: 'npm clean-install' + - name: "Install dependencies" + run: "npm clean-install" - - name: 'Build Package' - run: 'npm run build' + - name: "Build Package" + run: "npm run build" - - name: 'Build Example' - run: 'cd example && npm clean-install && npm run build' + - name: "Build Example" + run: "cd example && npm clean-install && npm run build" diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index a1548cb..f4316ef 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,4 +1,4 @@ -name: 'Lint' +name: "Lint" on: push: @@ -8,21 +8,21 @@ on: jobs: lint: - runs-on: 'ubuntu-latest' + runs-on: "ubuntu-latest" steps: - - uses: 'actions/checkout@v3.5.3' + - uses: "actions/checkout@v3.5.3" - - name: 'Setup Node.js' - uses: 'actions/setup-node@v3.6.0' + - name: "Setup Node.js" + uses: "actions/setup-node@v3.6.0" with: - node-version: 'lts/*' - cache: 'npm' + node-version: "lts/*" + cache: "npm" - - name: 'Install dependencies' - run: 'npm clean-install' + - name: "Install dependencies" + run: "npm clean-install" - run: 'npm run lint:commit -- --to "${{ github.sha }}"' - - run: 'npm run lint:editorconfig' - - run: 'npm run lint:markdown' - - run: 'npm run lint:eslint' - - run: 'npm run lint:prettier' + - run: "npm run lint:editorconfig" + - run: "npm run lint:markdown" + - run: "npm run lint:eslint" + - run: "npm run lint:prettier" diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index be4c440..9d415ba 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,4 +1,4 @@ -name: 'Release' +name: "Release" on: push: @@ -6,32 +6,32 @@ on: jobs: build: - runs-on: 'ubuntu-latest' + runs-on: "ubuntu-latest" permissions: - contents: 'write' - issues: 'write' - pull-requests: 'write' - id-token: 'write' + contents: "write" + issues: "write" + pull-requests: "write" + id-token: "write" steps: - - uses: 'actions/checkout@v3.5.3' + - uses: "actions/checkout@v3.5.3" - - name: 'Setup Node.js' - uses: 'actions/setup-node@v3.6.0' + - name: "Setup Node.js" + uses: "actions/setup-node@v3.6.0" with: - node-version: 'lts/*' - cache: 'npm' + node-version: "lts/*" + cache: "npm" - - name: 'Install dependencies' - run: 'npm clean-install' + - name: "Install dependencies" + run: "npm clean-install" - - name: 'Build Package' - run: 'npm run build' + - name: "Build Package" + run: "npm run build" - - name: 'Verify the integrity of provenance attestations and registry signatures for installed dependencies' - run: 'npm audit signatures' + - name: "Verify the integrity of provenance attestations and registry signatures for installed dependencies" + run: "npm audit signatures" - - name: 'Release' - run: 'npm run release' + - name: "Release" + run: "npm run release" env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1e7e426..c2c8a10 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,4 +1,4 @@ -name: 'Test' +name: "Test" on: push: @@ -8,41 +8,41 @@ on: jobs: test: - runs-on: 'ubuntu-latest' + runs-on: "ubuntu-latest" steps: - - uses: 'actions/checkout@v3.5.3' + - uses: "actions/checkout@v3.5.3" - - name: 'Setup Node.js' - uses: 'actions/setup-node@v3.6.0' + - name: "Setup Node.js" + uses: "actions/setup-node@v3.6.0" with: - node-version: 'lts/*' - cache: 'npm' + node-version: "lts/*" + cache: "npm" - - name: 'Install dependencies' - run: 'npm clean-install' + - name: "Install dependencies" + run: "npm clean-install" - - name: 'Test' - run: 'npm run test' + - name: "Test" + run: "npm run test" test-e2e: - runs-on: 'ubuntu-latest' + runs-on: "ubuntu-latest" steps: - - uses: 'actions/checkout@v3.5.3' + - uses: "actions/checkout@v3.5.3" - - name: 'Setup Node.js' - uses: 'actions/setup-node@v3.6.0' + - name: "Setup Node.js" + uses: "actions/setup-node@v3.6.0" with: - node-version: 'lts/*' - cache: 'npm' + node-version: "lts/*" + cache: "npm" - - name: 'Install dependencies' - run: 'npm clean-install' + - name: "Install dependencies" + run: "npm clean-install" - - name: 'Build Package' - run: 'npm run build' + - name: "Build Package" + run: "npm run build" - - name: 'Build Example' - run: 'cd example && npm clean-install && npm run build' + - name: "Build Example" + run: "cd example && npm clean-install && npm run build" - - name: 'End To End (e2e) Test Example' - run: 'cd example && npm run test:e2e' + - name: "End To End (e2e) Test Example" + run: "cd example && npm run test:e2e" diff --git a/.prettierrc.json b/.prettierrc.json index 83ef1ce..cce9d3c 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,6 +1,3 @@ { - "singleQuote": true, - "jsxSingleQuote": true, - "semi": false, - "trailingComma": "none" + "semi": false } diff --git a/README.md b/README.md index 6dba7a3..a07ae0f 100644 --- a/README.md +++ b/README.md @@ -37,9 +37,9 @@ npm install --save react-component-form _Note: The examples use TypeScript, but obviously you can use JavaScript. Be aware that `HandleForm` is the type definition for the `onChange` and `onSubmit` props._ ```tsx -import React from 'react' -import { Form } from 'react-component-form' -import type { HandleForm } from 'react-component-form' +import React from "react" +import { Form } from "react-component-form" +import type { HandleForm } from "react-component-form" export const Example = () => { const handleSubmit: HandleForm = (formData, formElement) => { @@ -49,8 +49,8 @@ export const Example = () => { return (
- - + +
) } @@ -70,16 +70,16 @@ This example shows how to use the `
` component with `useForm` hook to va You can see a more detailled example in the [./example](./example) folder. ```tsx -import React from 'react' -import { Form, useForm } from 'react-component-form' -import type { HandleUseFormCallback } from 'react-component-form' +import React from "react" +import { Form, useForm } from "react-component-form" +import type { HandleUseFormCallback } from "react-component-form" const schema = { inputName: { - type: 'string', + type: "string", minLength: 3, - maxLength: 20 - } + maxLength: 20, + }, } export const Example = () => { @@ -87,24 +87,24 @@ export const Example = () => { const onSubmit: HandleUseFormCallback = ( formData, - formElement + formElement, ) => { console.log(formData) // { inputName: 'value of the input validated and type-safe' } formElement.reset() // The return can be either `null` or an object with a global message of type `'error' | 'success'`. return { - type: 'success', - message: 'Success: Form submitted' + type: "success", + message: "Success: Form submitted", } } return ( - + {errors.inputName != null &&

{errors.inputName[0].message}

} - + {message != null &&

{message}

} diff --git a/example/components/About.tsx b/example/components/About.tsx index b42eee1..eaa0983 100644 --- a/example/components/About.tsx +++ b/example/components/About.tsx @@ -1,27 +1,27 @@ -import Translation from 'next-translate/Trans' +import Translation from "next-translate/Trans" -import { Link } from './design/Link' -import { TextSpecial } from './design/TextSpecial' +import { Link } from "./design/Link" +import { TextSpecial } from "./design/TextSpecial" export const About: React.FC = () => { return ( -
-

{'
'}

-

- npm install --save{' '} +
+

{""}

+

+ npm install --save{" "} react-component-form

-

+

]} + i18nKey="common:about" + components={[]} />

diff --git a/example/components/FormExample.tsx b/example/components/FormExample.tsx index c4aedd0..7676fba 100644 --- a/example/components/FormExample.tsx +++ b/example/components/FormExample.tsx @@ -1,14 +1,14 @@ -'use client' +"use client" -import { Form, useForm } from 'react-component-form' -import type { HandleUseFormCallback } from 'react-component-form' -import useTranslation from 'next-translate/useTranslation' +import { Form, useForm } from "react-component-form" +import type { HandleUseFormCallback } from "react-component-form" +import useTranslation from "next-translate/useTranslation" -import { Input } from './design/Input' -import { Button } from './design/Button' -import { useFormTranslation } from '../hooks/useFormTranslation' -import { userSchema } from '../models/User' -import { FormState } from './design/FormState' +import { Input } from "./design/Input" +import { Button } from "./design/Button" +import { useFormTranslation } from "../hooks/useFormTranslation" +import { userSchema } from "../models/User" +import { FormState } from "./design/FormState" const fakeServerRequest = async (ms: number): Promise => { return await new Promise((resolve) => { @@ -23,47 +23,47 @@ export const FormExample: React.FC = () => { const onSubmit: HandleUseFormCallback = async ( formData, - formElement + formElement, ) => { await fakeServerRequest(2_000) - console.log('onSubmit:', formData) + console.log("onSubmit:", formData) formElement.reset() return { - type: 'success', - message: 'common:success-message' + type: "success", + message: "common:success-message", } } return (
- diff --git a/example/components/Header/Header.tsx b/example/components/Header/Header.tsx index 3916430..b427542 100644 --- a/example/components/Header/Header.tsx +++ b/example/components/Header/Header.tsx @@ -1,9 +1,9 @@ -import { Language } from './Language' -import { SwitchTheme } from './SwitchTheme' +import { Language } from "./Language" +import { SwitchTheme } from "./SwitchTheme" export const Header: React.FC = () => { return ( -
+
diff --git a/example/components/Header/Language/Arrow.tsx b/example/components/Header/Language/Arrow.tsx index c0d20a7..83ab174 100644 --- a/example/components/Header/Language/Arrow.tsx +++ b/example/components/Header/Language/Arrow.tsx @@ -1,15 +1,15 @@ export const Arrow: React.FC = () => { return ( ) diff --git a/example/components/Header/Language/LanguageFlag.tsx b/example/components/Header/Language/LanguageFlag.tsx index 5e975db..e8ac35b 100644 --- a/example/components/Header/Language/LanguageFlag.tsx +++ b/example/components/Header/Language/LanguageFlag.tsx @@ -1,4 +1,4 @@ -import Image from 'next/image' +import Image from "next/image" export interface LanguageFlagProps { language: string @@ -16,7 +16,7 @@ export const LanguageFlag: React.FC = (props) => { src={`/images/languages/${language}.svg`} alt={language} /> -

+

{language.toUpperCase()}

diff --git a/example/components/Header/Language/index.tsx b/example/components/Header/Language/index.tsx index 9144d91..2d0f91f 100644 --- a/example/components/Header/Language/index.tsx +++ b/example/components/Header/Language/index.tsx @@ -1,11 +1,11 @@ -import { useCallback, useEffect, useState, useRef } from 'react' -import useTranslation from 'next-translate/useTranslation' -import setLanguage from 'next-translate/setLanguage' -import classNames from 'clsx' +import { useCallback, useEffect, useState, useRef } from "react" +import useTranslation from "next-translate/useTranslation" +import setLanguage from "next-translate/setLanguage" +import classNames from "clsx" -import i18n from '../../../i18n.json' -import { Arrow } from './Arrow' -import { LanguageFlag } from './LanguageFlag' +import i18n from "../../../i18n.json" +import { Arrow } from "./Arrow" +import { LanguageFlag } from "./LanguageFlag" export const Language: React.FC = () => { const { lang: currentLanguage } = useTranslation() @@ -28,10 +28,10 @@ export const Language: React.FC = () => { } } - window.document.addEventListener('click', handleClickEvent) + window.document.addEventListener("click", handleClickEvent) return () => { - return window.removeEventListener('click', handleClickEvent) + return window.removeEventListener("click", handleClickEvent) } }, []) @@ -40,11 +40,11 @@ export const Language: React.FC = () => { } return ( -
+
@@ -52,10 +52,10 @@ export const Language: React.FC = () => {