From a2f3962cc7d054f7e35d500c2604a7744cd3efa1 Mon Sep 17 00:00:00 2001 From: Isaac Way Date: Mon, 6 Mar 2023 20:21:26 -0600 Subject: [PATCH] prettier --- .prettierrc | 4 + package.json | 4 +- src/__tests__/createSchemaForm.test.tsx | 38 +++---- src/__tests__/utils/testForm.tsx | 14 ++- src/createSchemaForm.tsx | 145 +++++++++++++----------- tsconfig.json | 27 ++--- 6 files changed, 127 insertions(+), 105 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..8d7b4cd --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 80, + "tabWidth": 2 +} diff --git a/package.json b/package.json index be434dc..1066b25 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "test:cov": "jest --coverage", "test": "jest", "build": "npx rollup -c rollup.config.js", - "build-test:dryrun": "act -j build-test -P ubuntu-latest=ghcr.io/catthehacker/ubuntu:js-latest" + "build-test:dryrun": "act -j build-test -P ubuntu-latest=ghcr.io/catthehacker/ubuntu:js-latest", + "pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\"" }, "repository": { "type": "git", @@ -35,6 +36,7 @@ "expect-type": "^0.15.0", "jest": "^29.3.1", "jest-environment-jsdom": "^29.3.1", + "prettier": "^2.8.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.41.3", diff --git a/src/__tests__/createSchemaForm.test.tsx b/src/__tests__/createSchemaForm.test.tsx index a030936..832bf35 100644 --- a/src/__tests__/createSchemaForm.test.tsx +++ b/src/__tests__/createSchemaForm.test.tsx @@ -83,9 +83,9 @@ describe("createSchemaForm", () => { }); const extraTestIds = { - extra1 : 'extra-form-fun', - extra2 : 'extra-form-fun2' - } + extra1: "extra-form-fun", + extra2: "extra-form-fun2", + }; render( {}} @@ -102,25 +102,23 @@ describe("createSchemaForm", () => { }, }} > - {({renderedFields : {textField, booleanField, ...restFields}}) => { - return <> -
- {textField} -
-
- {booleanField} -
- {Object.values(restFields)} - + {({ renderedFields: { textField, booleanField, ...restFields } }) => { + return ( + <> +
{textField}
+
{booleanField}
+ {Object.values(restFields)} + + ); }}
); - + expect(screen.queryByTestId(testIds.textField)).toBeTruthy(); expect(screen.queryByTestId(testIds.textFieldTwo)).toBeTruthy(); expect(screen.queryByTestId(testIds.booleanField)).toBeTruthy(); expect(screen.queryByTestId(extraTestIds.extra1)).toBeTruthy(); - expect(screen.queryByTestId(extraTestIds.extra2 )).toBeTruthy(); + expect(screen.queryByTestId(extraTestIds.extra2)).toBeTruthy(); }); it("should render a text field and a boolean field based on the mapping and schema, unwrapping refine calls", () => { const testSchema = z.object({ @@ -595,11 +593,11 @@ describe("createSchemaForm", () => { it("should track submitting properly", async () => { const testId = "id"; const val = "true"; - let submitPromiseResolve : () => void = () => {}; + let submitPromiseResolve: () => void = () => {}; const submitPromise = new Promise((resolve) => { submitPromiseResolve = resolve; - }) - let submitting =false; + }); + let submitting = false; function Component() { const form = useForm({ defaultValues: { @@ -613,7 +611,9 @@ describe("createSchemaForm", () => { schema={z.object({ v: z.string(), })} - onSubmit={() => {return submitPromise}} + onSubmit={() => { + return submitPromise; + }} props={{ v: { testId: testId, diff --git a/src/__tests__/utils/testForm.tsx b/src/__tests__/utils/testForm.tsx index b3d987d..c06e88c 100644 --- a/src/__tests__/utils/testForm.tsx +++ b/src/__tests__/utils/testForm.tsx @@ -97,8 +97,18 @@ export const TestForm = createTsForm(mapping, { propsMap: propsMap, }); -const FormWithSubmit = ({children,...props} : {children : JSX.Element[], onSubmit: () => void;}) =>
{children}
; +const FormWithSubmit = ({ + children, + ...props +}: { + children: JSX.Element[]; + onSubmit: () => void; +}) => ( +
+ {children} +
+); export const TestFormWithSubmit = createTsForm(mapping, { propsMap: propsMap, - FormComponent: FormWithSubmit + FormComponent: FormWithSubmit, }); diff --git a/src/createSchemaForm.tsx b/src/createSchemaForm.tsx index 4dba4cf..0f589d6 100644 --- a/src/createSchemaForm.tsx +++ b/src/createSchemaForm.tsx @@ -238,7 +238,7 @@ export function createTsForm< renderAfter, renderBefore, form, - children : CustomChildrenComponent, + children: CustomChildrenComponent, }: { /** * A Zod Schema - An input field will be rendered for each property in the schema, based on the mapping passed to `createTsForm` @@ -288,9 +288,11 @@ export function createTsForm< * ``` */ form?: UseFormReturn>; - children? : FunctionComponent<{renderedFields : { - [key in keyof z.infer>] : ReactNode - }}> + children?: FunctionComponent<{ + renderedFields: { + [key in keyof z.infer>]: ReactNode; + }; + }>; } & RequireKeysWithRequiredChildren<{ /** * Props to pass to the individual form components. The keys of `props` will be the names of your form properties in the form schema, and they will @@ -382,79 +384,90 @@ export function createTsForm< } function _submit(data: z.infer) { - return resolver(removeUndefined(data), {} as any, {} as any).then(async (e) => { - const errorKeys = Object.keys(e.errors); - if (!errorKeys.length) { - await onSubmit(data); - return; - } - for (const key of errorKeys) { - setError( - key as any, - (e.errors as any)[key] as unknown as ErrorOption - ); + return resolver(removeUndefined(data), {} as any, {} as any).then( + async (e) => { + const errorKeys = Object.keys(e.errors); + if (!errorKeys.length) { + await onSubmit(data); + return; + } + for (const key of errorKeys) { + setError( + key as any, + (e.errors as any)[key] as unknown as ErrorOption + ); + } } - }); + ); } const submitFn = handleSubmit(_submit); type SchemaKey = keyof z.infer>; - const renderedFields = Object.keys(shape).reduce((accum, key : SchemaKey) => { - // we know this is a string but TS thinks it can be number and symbol so just in case stringify - const stringKey = key.toString(); - const type = shape[key] as RTFSupportedZodTypes; - const Component = getComponentForZodType(type, componentMap); - if (!Component) { - throw new Error( - noMatchingSchemaErrorMessage(stringKey, type._def.typeName) - ); - } - const meta = getMetaInformationForZodType(type); + const renderedFields = Object.keys(shape).reduce( + (accum, key: SchemaKey) => { + // we know this is a string but TS thinks it can be number and symbol so just in case stringify + const stringKey = key.toString(); + const type = shape[key] as RTFSupportedZodTypes; + const Component = getComponentForZodType(type, componentMap); + if (!Component) { + throw new Error( + noMatchingSchemaErrorMessage(stringKey, type._def.typeName) + ); + } + const meta = getMetaInformationForZodType(type); - const fieldProps = props && props[key] ? (props[key] as any) : {}; + const fieldProps = props && props[key] ? (props[key] as any) : {}; - const { beforeElement, afterElement } = fieldProps; + const { beforeElement, afterElement } = fieldProps; - const mergedProps = { - ...(propsMap.name && { [propsMap.name]: key }), - ...(propsMap.control && { [propsMap.control]: control }), - ...(propsMap.enumValues && { - [propsMap.enumValues]: meta.enumValues, - }), - ...(propsMap.descriptionLabel && { - [propsMap.descriptionLabel]: meta.description?.label, - }), - ...(propsMap.descriptionPlaceholder && { - [propsMap.descriptionPlaceholder]: meta.description?.placeholder, - }), - ...fieldProps, - }; - const ctxLabel = meta.description?.label; - const ctxPlaceholder = meta.description?.placeholder; - accum[key] = ( - - {beforeElement} - - - - {afterElement} - - ); - return accum; - }, {} as Record); + const mergedProps = { + ...(propsMap.name && { [propsMap.name]: key }), + ...(propsMap.control && { [propsMap.control]: control }), + ...(propsMap.enumValues && { + [propsMap.enumValues]: meta.enumValues, + }), + ...(propsMap.descriptionLabel && { + [propsMap.descriptionLabel]: meta.description?.label, + }), + ...(propsMap.descriptionPlaceholder && { + [propsMap.descriptionPlaceholder]: meta.description?.placeholder, + }), + ...fieldProps, + }; + const ctxLabel = meta.description?.label; + const ctxPlaceholder = meta.description?.placeholder; + accum[key] = ( + + {beforeElement} + + + + {afterElement} + + ); + return accum; + }, + {} as Record + ); const renderedFieldNodes = Object.values(renderedFields); return ( - + {renderBefore && renderBefore({ submit: submitFn })} - {CustomChildrenComponent ? : renderedFieldNodes} + {CustomChildrenComponent ? ( + + ) : ( + renderedFieldNodes + )} {renderAfter && renderAfter({ submit: submitFn })} diff --git a/tsconfig.json b/tsconfig.json index 5324339..421720f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,35 +1,28 @@ { "compilerOptions": { - "lib": [ - "ESNext", - "dom", - "ES2022" - ], - "outDir": "lib", - "removeComments": true, - "target": "ES6", + "lib": ["ESNext", "dom", "ES2022"], + "outDir": "lib", + "removeComments": true, + "target": "ES6", "declaration": true, "module": "ES2022", "rootDir": "./", - "esModuleInterop": true, - "moduleResolution": "node", + "esModuleInterop": true, + "moduleResolution": "node", "sourceMap": true, "sourceRoot": "/", "alwaysStrict": true, "allowUnreachableCode": false, - "noImplicitAny": true, + "noImplicitAny": true, "strict": true, "noImplicitReturns": true, "noUncheckedIndexedAccess": true, "noUnusedLocals": true, - "noUnusedParameters": true, + "noUnusedParameters": true, "resolveJsonModule": true, - "jsx": "react", + "jsx": "react" }, "include": ["./src/**/*"], - "exclude": [ - "node_modules/**/*", - "lib/**/*", - ], + "exclude": ["node_modules/**/*", "lib/**/*"] }