From a95fb765d98d8a3c21380e9a5fef36d057ebe02f Mon Sep 17 00:00:00 2001 From: Michael Tsulaya Date: Sun, 19 Jan 2025 14:50:30 +0300 Subject: [PATCH] register to mdx (#1115) * register to mdx * revert tips section --- src/components/ApiRefTable.module.css | 25 - src/components/ApiRefTable.tsx | 804 ---------------------- src/components/TypeText.tsx | 11 +- src/components/codeExamples/register.ts | 39 -- src/components/codeExamples/registerTs.ts | 24 - src/components/mdx/mdx.tsx | 3 + src/components/useForm/Register.tsx | 45 -- src/content/docs/useform/register.mdx | 296 ++++++++ src/pages/docs/useform/register.tsx | 14 - src/styles/typography.module.css | 5 + 10 files changed, 313 insertions(+), 953 deletions(-) delete mode 100644 src/components/ApiRefTable.module.css delete mode 100644 src/components/ApiRefTable.tsx delete mode 100644 src/components/codeExamples/register.ts delete mode 100644 src/components/codeExamples/registerTs.ts delete mode 100644 src/components/useForm/Register.tsx create mode 100644 src/content/docs/useform/register.mdx delete mode 100644 src/pages/docs/useform/register.tsx diff --git a/src/components/ApiRefTable.module.css b/src/components/ApiRefTable.module.css deleted file mode 100644 index 4fd5eddc7..000000000 --- a/src/components/ApiRefTable.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.fieldset { - padding: 10px 15px; - border: 1px solid var(--color-light-blue); - border-radius: 4px; -} - -.fieldset > legend { - padding: 0 10px; -} - -.fieldset > label { - padding-bottom: 15px; - display: block; - cursor: pointer; -} - -.fieldset > label:nth-child(2) { - padding-top: 10px; -} - -.fieldset > label > input { - margin-right: 10px; - top: -2px; - position: relative; -} diff --git a/src/components/ApiRefTable.tsx b/src/components/ApiRefTable.tsx deleted file mode 100644 index 4fc0897f4..000000000 --- a/src/components/ApiRefTable.tsx +++ /dev/null @@ -1,804 +0,0 @@ -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: typeof apiData }) { - const [isStandard, toggleOption] = useState(true) - - return ( - <> - {api.register.description} - -
- - - - - - - - - - - - - - - - - - - -
- Input {generic.name} - {api.register.example}
- register("firstName") - - {`{firstName: 'value'}`} -
- register("name.firstName") - - {`{name: { firstName: 'value' }}`} -
- register("name.firstName.0") - - {`{name: { firstName: [ 'value' ] }}`} -
-
- -

Return

- -
-

- Tip:: What's happened to the - input after invoke register API: -

-
- - -// same as above - -`} - /> - -

- Options -

- -

{api.register.selectHelp}

- -
- {api.register.options.title} - - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {generic.name} - - {generic.description} - - {generic.codeExample} -
- ref -
- React.Ref - 		React element ref - `} - /> -
- required -
- - {isStandard - ? "boolean" - : `string | -{ - value: boolean, - message: string -}`} - - 		{api.register.validation.required} - error message

TS only support string` - } - })} -/>`} - /> -
- maxLength -
- - - {isStandard - ? "number" - : `{ - value: number, - message: string -}`} - - - 		{api.register.validation.maxLength} - error message

TS only support string - }` - } - })} -/>`} - /> -
- minLength -
- - - {isStandard - ? "number" - : `{ - value: number, - message: string -}`} - - - 		{api.register.validation.minLength} - error message

TS only support string - }` - } - })} -/>`} - /> -
- max -
- - - {isStandard - ? "number" - : `{ - value: number, - message: string -}`} - - - 		{api.register.validation.max} - error message

TS only support string - }` - } - })} -/>`} - /> -
- min -
- - - {isStandard - ? "number" - : `{ - value: number, - message: string -}`} - - - 		{api.register.validation.min} - error message

TS only support string - }` - } - })} -/>`} - /> -
- pattern -
- - - {isStandard - ? "RegExp" - : `{ - value: RegExp, - message: string -}`} - - - 		{api.register.validation.pattern} - error message

TS only support string - }` - } - })} -/>`} - /> -
- validate -
- - Function | Object - - 		{api.register.validation.validate} - value === '1'` - : `value => value === '1' || 'error message' // JS only:

error message

TS only support string` - } - })} -/> -// object of callback functions - parseInt(v) > 0, - lessThanTen: v => parseInt(v) < 10, - validateNumber: (_, values) => - !!(values.number1 + values.number2), - checkUrl: async () => await fetch(), - }` - : `{ - positive: v => parseInt(v) > 0 || 'should be greater than 0', - lessThanTen: v => parseInt(v) < 10 || 'should be lower than 10', - validateNumber: (_: number, formValues: FormValues) => { - return formValues.number1 + formValues.number2 === 3 || 'Check sum number'; - }, - // you can do asynchronous validation as well - checkUrl: async () => await fetch() || 'error message', // JS only:

error message

TS only support string - messages: v => !v && ['test', 'test2'] - }` - } - })} -/> -`} - /> -
- valueAsNumber: -
- boolean - 		-

- Returns a Number normally. If something goes wrong{" "} - NaN will be returned. -

-
    -
  • -

    - valueAs process is happening{" "} - before validation. -

    -
    • -
  • -

    - Only applicable and support to {``} - , but we still cast to number type without trim or any - other data manipulation. -

    -
    • -
  • - Does not transform defaultValue or{" "} - defaultValues. -
    • -
- 		- `} - /> -
- valueAsDate: -
- boolean - 		-

- Returns a Date object normally. If something goes - wrong Invalid Date will be returned. -

-
    -
  • -

    - valueAs process is happening{" "} - before validation. -

    -
    • -
  • -

    Only applies to {``}.

    -
    • -
  • - Does not transform defaultValue or{" "} - defaultValues. -
    • -
- 		- `} - /> -
- setValueAs: -
- {`(value: any) => T`} - 		-

Return input value by running through the function.

-
    -
  • -

    - valueAs process is happening{" "} - before validation. Also,{" "} - setValueAs is ignored if either{" "} - valueAsNumber or valueAsDate are{" "} - true. -

    -
    • -
  • -

    Only applies to text input.

    -
    • -
  • - Does not transform defaultValue or{" "} - defaultValues. -
    • -
- 		- parseInt(v), - })} -/>`} - /> -
- disabled -
- - boolean = false - - 		-

- Set disabled to true will lead input - value to be undefined and input control to be - disabled. -

-
    -

    - Disabled prop will also omit{" "} - built-in validation rules. -

    -

    - For schema validation, you can leverage the{" "} - undefined value returned from input or context - object. -

    -
- 		- `} - /> -
- onChange -
- {`(e: SyntheticEvent) => void`} - 		-

- onChange function event to be invoked in the - change event. -

- 		- console.log(e) -})`} - /> -
- onBlur -
- {`(e: SyntheticEvent) => void`} - 		-

- onBlur function event to be invoked in the blur - event. -

- 		- console.log(e) -})`} - /> -
- value -
- unknown - 		-

- Set up value for the registered input. This prop should be - utilised inside useEffect or invoke once, each - re-run will update or overwrite the input value which you have - supplied. -

- 		- -
- shouldUnregister: -
- boolean - 		-

- Input will be unregistered after unmount and defaultValues - will be removed as well. -

-

- Note: this prop should be avoided when using with{" "} - useFieldArray as unregister function - gets called after input unmount/remount and reorder. -

- 		- `} - /> -
- deps: -
- - string | string[] - - 		-

- Validation will be triggered for the dependent inputs,it only - limited to register api not trigger. -

- 		- `} - /> -
- -

- Rules -

- -
    -
  • -

    - name is required and unique (except - native radio and checkbox). Input name supports both dot and - bracket syntax, which allows you to easily create nested form - fields. -

    -
    • -
  • -

    - name can neither start with a number nor use number - as key name. Please avoid special characters as well. -

    -
    • -
  • -

    - we are using dot syntax only for typescript usage consistency, so - bracket [] will not work for array form value. -

    - - -
    • -
  • -

    - disabled input will result in an{" "} - undefined form value. If you want to prevent users - from updating the input, you can use readOnly or - disable the entire {`

    `}. Here is an{" "} - - example - - . -

    -
    • -
  • -

    - To produce an array of fields, input names should be followed by a{" "} - dot and number. For example: test.0.data -

    -
    • -
  • -

    - Changing the name on each render will result in new inputs being - registered. It's recommended to keep static names for each - registered input. -

    -
    • -
  • -

    - Input value and reference will no longer gets removed based on - unmount. You can invoke unregister to remove that value and - reference. -

    -
    • -
  • -

    - Individual register option can't be removed by{" "} - undefined or {`{}`}. You can update - individual attribute instead. -

    - - -
    • -
  • -

    - There are certain keyword which need to avoid before conflicting - with type check. They are ref, _f -

    -
    • -
- -

- Examples -

- - - -

Video

-

- The following video explain register API in detail. -

- -