diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index 93cda006d..000000000 --- a/.browserslistrc +++ /dev/null @@ -1,3 +0,0 @@ -> 0.25% -ie 11 -not op_mini all diff --git a/.eslintrc.js b/.eslintrc.js index 9c85a039d..94b66c9b7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -41,5 +41,6 @@ module.exports = { "react/jsx-curly-brace-presence": "warn", // jsx-ally "jsx-a11y/no-onchange": WARN, + "import/no-anonymous-default-export": OFF, }, } diff --git a/.lighthouserc.js b/.lighthouserc.js deleted file mode 100644 index 66dbfb720..000000000 --- a/.lighthouserc.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - collect: { - autodiscoverUrlBlocklist: ["_gatsby/slices/_gatsby-scripts-1.html"], - }, - ci: { - upload: { - target: "temporary-public-storage", - }, - assert: { - assertions: { - "first-contentful-paint": ["error", { maxNumericValue: 3000 }], - }, - }, - }, -} diff --git a/package.json b/package.json index 2e64791dd..7e1a2d310 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@mdx-js/react": "^2.3.0", "@next/mdx": "^13.4.4", "@types/node": "^20.2.5", + "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", "little-state-machine": "^4.8.0", "next": "^13.4.4", @@ -18,12 +19,10 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-github-btn": "1.4.0", - "react-helmet": "6.1.0", "react-hook-form": "6.0.0", "react-simple-animate": "^3.5.2", "react-simple-img": "3.0.0", "react-sortablejs": "1.5.1", - "react-syntax-highlighter": "^15.5.0", "rehype-mdx-code-props": "^1.0.0", "remark-custom-heading-id": "^1.0.1", "remark-emoji": "^3.1.1", diff --git a/src/components/Admonition.module.css b/src/components/Admonition.module.css new file mode 100644 index 000000000..023ca9909 --- /dev/null +++ b/src/components/Admonition.module.css @@ -0,0 +1,58 @@ +.admonition { + margin-bottom: 1em; + padding: 15px 30px 15px 15px; + border-radius: 0.4rem; +} + +.admonitionIcon { + display: inline-block; + vertical-align: middle; + margin-right: 0.2em; +} + +.admonitionIcon svg { + display: inline-block; + width: 22px; + height: 22px; + stroke-width: 0; +} + +.admonitionIcon svg { + stroke: rgb(253, 253, 254); + fill: rgb(253, 253, 254); +} + +.admonitionContent > :last-child { + margin-bottom: 0; +} + +/** Customization */ +.admonitionWarning { + background-color: rgba(230, 126, 34, 0.1); + border-left: 8px solid #e67e22; +} + +.admonitionTip { + background-color: rgba(46, 204, 113, 0.1); + border-left: 8px solid #2ecc71; +} + +.admonitionCaution { + background-color: rgba(231, 76, 60, 0.1); + border-left: 8px solid #e74c3c; +} + +.admonitionImportant { + background-color: rgb(25, 60, 71, 0.1); + border-left: 8px solid rgb(76, 179, 212, 0.1); +} + +.admonitionNote { + background-color: rgb(71, 71, 72, 0.1); + border-left: 8px solid rgb(212, 213, 216); +} + +.admonitionQuestion { + background-color: rgba(8, 61, 119, 0.1); + border-left: 8px solid #083d77; +} diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx new file mode 100644 index 000000000..edb3fd063 --- /dev/null +++ b/src/components/Admonition.tsx @@ -0,0 +1,113 @@ +import styles from "./Admonition.module.css" +import { cva } from "class-variance-authority" + +/** + * Octicons Icons by GitHub released under MIT License + * https://github.com/primer/octicons/ + */ + +const svgMap = { + warning: ( + + + + ), + important: ( + + + + ), + caution: ( + + + + ), + tip: ( + + + + ), + note: ( + + + + ), + question: ( + + + + ), +} + +const admonition = cva(styles.admonition, { + variants: { + type: { + warning: styles.admonitionWarning, + important: styles.admonitionImportant, + caution: styles.admonitionCaution, + tip: styles.admonitionTip, + note: styles.admonitionNote, + question: styles.admonitionQuestion, + }, + }, +}) + +export const Admonition = ({ type, title, children }) => { + return ( +
+
+ {svgMap[type]}{" "} + {title?.toUpperCase() || type.toUpperCase()} +
+
{children}
+
+ ) +} diff --git a/src/components/AdvancedPage.tsx b/src/components/AdvancedPage.tsx index 8d56dfa8f..b129d0ec2 100644 --- a/src/components/AdvancedPage.tsx +++ b/src/components/AdvancedPage.tsx @@ -3,54 +3,7 @@ import StarRepo from "./StarRepo" import typographyStyles from "../styles/typography.module.css" import containerStyles from "../styles/container.module.css" import AdvancedContent, { meta } from "../content/advanced.mdx" -import NewSideMenu from "./NewSideMenu" - -const links = [ - { - title: "Accessibility (A11y)", - href: "#AccessibilityA11y", - }, - { - title: "Wizard Form / Funnel", - href: "#WizardFormFunnel", - }, - { - title: "Smart Form Component", - href: "#SmartFormComponent", - }, - { - title: "Error Messages", - href: "#ErrorMessages", - }, - { - title: "Connect Form", - href: "#ConnectForm", - }, - { - title: "FormProvider Performance", - href: "#FormProviderPerformance", - }, - { - title: "Controlled mixed with Uncontrolled Components", - href: "#ControlledmixedwithUncontrolledComponents", - }, - { - title: "Custom Hook with Resolver", - href: "#CustomHookwithResolver", - }, - { - title: "Working with virtualized lists", - href: "#Workingwithvirtualizedlists", - }, - { - title: "Testing Form", - href: "#TestingForm", - }, - { - title: "Transform and Parse", - href: "#TransformandParse", - }, -] +import { Menu, advancedLinks } from "./Menu" function Advanced() { return ( @@ -61,7 +14,7 @@ function Advanced() {

{meta.description}

- +
diff --git a/src/components/ApiErrors.tsx b/src/components/ApiErrors.tsx deleted file mode 100644 index 4f45159a2..000000000 --- a/src/components/ApiErrors.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { memo } from "react" -import CodeArea from "./CodeArea" -import errorCode from "./codeExamples/errorCode" -import errorCodeTs from "./codeExamples/errorCodeTs" -import errorCodeTypes from "./codeExamples/ErrorCodeTypes" -import generic from "../data/generic" -import multipleErrorCode from "./codeExamples/multipleErrorCode" -import multipleErrorCodeTs from "./codeExamples/multipleErrorCodeTs" -import TabGroup from "./TabGroup" -import typographyStyles from "../styles/typography.module.css" -import tableStyles from "../styles/table.module.css" - -function ApiErrors({ - api, - goToSection, -}: { - api: any - goToSection: (name: string, animate?: boolean) => void -}) { - return ( - <> - -

- errors:{" "} - {`Record`} -

- - - {api.errors.description} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{generic.name} - {generic.type} - {generic.description}
- type - - string - Error {generic.type}. eg: required, min, max, minLength
- types - - {`Record<{ string, string | boolean }>`} - {api.errors.types}
- message - - - string | React.ReactElement - - {api.errors.message}
- ref - - React.Ref - {api.errors.ref}
- {api.errors.note(goToSection)} -
- - - - - - -
- - ) -} - -export default memo(ApiErrors) diff --git a/src/components/ApiGallery.module.css b/src/components/ApiGallery.module.css index d7f929e00..85140aa7d 100644 --- a/src/components/ApiGallery.module.css +++ b/src/components/ApiGallery.module.css @@ -37,12 +37,9 @@ border: 1px solid var(--color-light-blue); position: relative; padding-bottom: 30px; - transition: 0.2s all; } .gallery li:hover { - transform: translate(-2px, -2px); - box-shadow: 2px 2px 0 4px black; border: 1px solid var(--color-secondary); } diff --git a/src/components/ApiWatch.tsx b/src/components/ApiWatch.tsx deleted file mode 100644 index fde39656d..000000000 --- a/src/components/ApiWatch.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import CodeArea from "./CodeArea" -import watchCode from "./codeExamples/watchCode" -import watchCodeTs from "./codeExamples/watchCodeTs" -import generic from "../data/generic" -import typographyStyles from "../styles/typography.module.css" -import tableStyles from "../styles/table.module.css" -import TabGroup from "./TabGroup" -import watchFieldArrayCode from "./codeExamples/watchFieldArrayCode" -import StarRepo from "./StarRepo" -import Link from "next/link" - -export default function ApiWatch({ api }: { api: any }) { - return ( - <> - -

- watch:{" "} - {`(names?: string | string[] | (data, options) => void) => unknown`} -

- - - {api.watch.description} - -

Props

- -
- - - - - - - - - - - - - - - - - - - - - - - -
- {generic.type} - - {generic.description} -
- string - {api.watch.tableTitle.single}
- string[] - {api.watch.tableTitle.multiple}
- undefined - {api.watch.tableTitle.all}
- {`(data: unknown, { name: string, type: string }) => void`} - {api.watch.tableTitle.callback}
-
- -

Return

- -
- - - - - - - - - - - - - - - - - - - - - - - -
- {generic.example} - - {generic.return} -
- watch('inputName') - - unknown -
- watch(['inputName1']) - - unknown[] -
- watch() - - {`{[key:string]: unknown}`} -
- {`watch((data, { name, type }) => console.log(data, name, type))`} - - {`{ unsubscribe: () => void }`} -
-
- -

- Rules -

- -
    -
  • -

    - When defaultValue is not defined, the first render of{" "} - watch will return undefined because it is - called before register. It's recommend to - provide defaultValues at useForm to avoid - this behaviour, but you can set the inline defaultValue{" "} - as the second argument. -

    -
    • -
  • -

    - When both defaultValue and defaultValues{" "} - are supplied, defaultValue will be returned. -

    -
    • -
  • -

    - This API will trigger re-render at the root of your app or form, - consider using a callback or the{" "} - useWatch api if you are - experiencing performance issues. -

    -
    • -
  • -

    - watch result is optimised for render phase instead of{" "} - useEffect's deps, to detect value update you may want - to use an external custom hook for value comparison. -

    -
    • -
- -

- Examples -

- - - - - - -

Video

- -

- The following video tutorial demonstrates watch API. -

- -