@paragrav/rhf-utils 0.0.146 → 0.1.0

package/README.md

@@ -59,7 +59,7 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
       devTool: import.meta.env.DEV && { placement: 'top-right' },
     },
 
-    // default form props
+    // global default native form props
     form: {
       noValidate: true,
       className: 'my-form-class',
@@ -88,7 +88,7 @@ export const rhfUtilsClientConfig: RhfUtilsClientConfig = {
     // form-level control of your own hooks/behaviors via custom option props
     // (see "Extend RhfUtilsFormOptions" section for more info)
     useMyOptionalFormHook({
-      enabled: !!options?.enableMyOptionalFormHook,
+      enabled: !!options.enableMyOptionalFormHook,
     });
 
     return (
@@ -161,7 +161,7 @@ Currently, only `zod` is supported.
     event, //   SubmitEvent
   ) => {
     await loginService(data);
-    props.onSuccess();
+    handleSuccess();
   }}
   // handle error declaratively (i.e., no throw/catch)
   onSubmitError={({
@@ -169,7 +169,7 @@ Currently, only `zod` is supported.
     context, // UseRhfUtilsFormOnSubmitErrorContext (id, ref, rhf context, utils options, `FormSubmitFieldErrors` from `onSubmitErrorUnknown`)
     event, //   SubmitEvent
   }) => {
-    props.onError(error);
+    handleError(error);
   }}
   // fields
   Children={({
@@ -193,6 +193,9 @@ Currently, only `zod` is supported.
         )}
       />
 
+      <button type="button" onClick={handleCancel}>
+        Cancel
+      </button>
       <button type="submit">Login</button>
     </>
   )}
@@ -217,12 +220,25 @@ Currently, only `zod` is supported.
 
 `Children` prop takes a component which is rendered as a child of the form (and, if supplied, of `RhfUtilsClientConfig.FormChildrenWrapper`). It receives `UseRhfUtilsFormChildrenProps` as props, including a type-safe `Controller` component.
 
-If you prefer to define your `Children` component as standalone:
+If you prefer to define your `Children` component as standalone, you will need to specify any dependencies as `props` (e.g., `onCancel` callback):
 
 ```tsx
-const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = ({...}) => { };
+const Children: RhfUtilsUseFormChildrenZodFC<typeof schema, { onCancel: () => void }> = ({...}) => {};
 
-function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema>) { }
+function Children({...}: RhfUtilsUseFormChildrenZodProps<typeof schema, { onCancel: () => void }>) {}
+```
+
+And pass dependencies manually:
+
+```tsx
+<RhfUtilsZodForm
+  Children={(rhfUtilsZodFormChildrenProps) => (
+    <Children
+      {...rhfUtilsZodFormChildrenProps}
+      props={{ onCancel: handleCancel }}
+    />
+  )}
+/>
 ```
 
 ## Form Component Hierarchy

package/dist/esm/index.mjs

@@ -1,28 +1,28 @@
-import { jsx as i, Fragment as B, jsxs as Z } from "react/jsx-runtime";
+import { jsx as i, Fragment as Z, jsxs as L } from "react/jsx-runtime";
 import a from "react";
 import { c as C } from "./createContext.mjs";
-import { zodResolver as I } from "@hookform/resolvers/zod";
-import { useFormContext as b, Controller as L, get as z, useFormState as x, FormProvider as A, useForm as $ } from "react-hook-form";
-import { i as O, _ as H, u as g } from "./useFlatFieldErrorsContext.mjs";
-import { flatten as Q } from "flat";
+import { zodResolver as z } from "@hookform/resolvers/zod";
+import { useFormContext as b, Controller as I, get as A, useFormState as x, FormProvider as $, useForm as H } from "react-hook-form";
+import { i as y, _ as Q, u as g } from "./useFlatFieldErrorsContext.mjs";
+import { flatten as G } from "flat";
 const {
-  Provider: G,
+  Provider: J,
   useMaybe: _
-} = C(), J = a.lazy(
+} = C(), K = a.lazy(
   () => import("@hookform/devtools").then((r) => ({
     default: r.DevTool
   }))
-), K = ({ enabled: r, props: t }) => {
+), X = ({ enabled: r, props: t }) => {
   if (!r) return null;
   const { control: e } = b();
-  return /* @__PURE__ */ i(a.Suspense, { fallback: null, children: /* @__PURE__ */ i(J, { control: e, ...t }) });
+  return /* @__PURE__ */ i(a.Suspense, { fallback: null, children: /* @__PURE__ */ i(K, { control: e, ...t }) });
 };
 class F extends Error {
   constructor(t, e) {
     super(e), this.errors = t;
   }
 }
-const X = (r, t) => {
+const Y = (r, t) => {
   Object.entries(t).forEach(([e, o]) => {
     r.setError(e, {
       type: "FormSubmitFieldError",
@@ -30,11 +30,11 @@ const X = (r, t) => {
       ...o
     });
   });
-}, Y = ({
+}, rr = ({
   children: r
-}) => /* @__PURE__ */ i(B, { children: r });
-function rr(r) {
-  return /* @__PURE__ */ i(L, { ...r });
+}) => /* @__PURE__ */ i(Z, { children: r });
+function O(r) {
+  return /* @__PURE__ */ i(I, { ...r });
 }
 function er({
   formId: r,
@@ -66,15 +66,15 @@ function er({
     },
     f
   ), P = (h, f) => {
-    var y;
+    var R;
     const E = h instanceof F ? (
       // consumer can manually throw FormSubmitError (e.g., manual validation)
       h.errors
     ) : (
       // if error is not FormSubmitError, consumer can provide global handler
-      (y = d == null ? void 0 : d.onSubmitErrorUnknown) == null ? void 0 : y.call(d, h)
+      (R = d == null ? void 0 : d.onSubmitErrorUnknown) == null ? void 0 : R.call(d, h)
     );
-    E && X(m, E), o == null || o(
+    E && Y(m, E), o == null || o(
       h,
       {
         formId: r,
@@ -85,29 +85,36 @@ function er({
       },
       f
     );
-  }, R = {
+  }, V = {
     formId: r,
     formRef: t,
     context: m,
     utils: u,
-    Controller: rr,
+    Controller: O,
     FormSubmitError: F
-  }, V = R, N = (d == null ? void 0 : d.FormComponent) ?? "form", q = (d == null ? void 0 : d.FormChildrenWrapper) ?? Y;
+  }, N = {
+    formId: r,
+    formRef: t,
+    context: m,
+    utils: u,
+    Controller: O,
+    FormSubmitError: F
+  }, q = (d == null ? void 0 : d.FormComponent) ?? "form", B = (d == null ? void 0 : d.FormChildrenWrapper) ?? rr;
   return /* @__PURE__ */ i(
-    N,
+    q,
     {
       ...l,
       ref: t,
       onSubmit: (h) => void c(h),
-      children: /* @__PURE__ */ Z(q, { ...V, children: [
+      children: /* @__PURE__ */ L(B, { ...N, children: [
         /* @__PURE__ */ i(
-          K,
+          X,
           {
             enabled: !!(u != null && u.devTool),
             props: typeof (u == null ? void 0 : u.devTool) == "object" ? u.devTool : void 0
           }
         ),
-        /* @__PURE__ */ i(n, { ...R })
+        /* @__PURE__ */ i(n, { ...V })
       ] })
     }
   );
@@ -149,7 +156,7 @@ const v = (r) => (t) => (
   ir(t)
 )(r), ar = ([r]) => j(r), mr = v(
   ar
-), hr = (r) => Q(r), cr = (r) => {
+), hr = (r) => G(r), cr = (r) => {
   const t = hr(r), e = Object.keys(t);
   return Object.fromEntries(
     e.reduce(
@@ -159,7 +166,7 @@ const v = (r) => (t) => (
           ""
         );
         if (n === s) return o;
-        const l = z(r, n, void 0);
+        const l = A(r, n, void 0);
         return l && o.push([n, l]), o;
       },
       []
@@ -176,10 +183,10 @@ const v = (r) => (t) => (
     roots: mr(o),
     orphans: s,
     // computed
-    hasErrors: !O(e),
-    hasOrphans: !O(s)
+    hasErrors: !y(e),
+    hasOrphans: !y(s)
   };
-  return /* @__PURE__ */ i(H, { value: n, children: t });
+  return /* @__PURE__ */ i(Q, { value: n, children: t });
 }, br = (r, t, e, o = "debug") => {
   console[o](r, { values: t, errors: e });
 }, Er = (r) => {
@@ -311,7 +318,7 @@ function gr({
   utils: o,
   children: s
 }) {
-  return /* @__PURE__ */ i(A, { ...e, children: /* @__PURE__ */ i(Fr, { formRef: t, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i($, { ...e, children: /* @__PURE__ */ i(Fr, { formRef: t, children: /* @__PURE__ */ i(
     xr,
     {
       formId: r,
@@ -331,7 +338,7 @@ const w = ({
   form: l,
   utils: u
 }) => {
-  const m = a.useId(), d = $({
+  const m = a.useId(), d = H({
     ...n,
     defaultValues: r
   }), c = a.useRef(null);
@@ -436,26 +443,26 @@ const _r = (r, ...t) => (
       }
     );
   };
-}, jr = kr(I), {
+}, jr = kr(z), {
   Provider: wr,
   useRequired: D
-} = C(), Ir = ({
+} = C(), Lr = ({
   config: r,
   children: t
 }) => {
   const [e] = a.useState(r), [o] = a.useState(
     () => jr(e ?? {})
   );
-  return /* @__PURE__ */ i(G, { value: e, children: /* @__PURE__ */ i(wr, { value: o, children: t }) });
+  return /* @__PURE__ */ i(J, { value: e, children: /* @__PURE__ */ i(wr, { value: o, children: t }) });
 };
-function Lr({
+function zr({
   schema: r,
   ...t
 }) {
   const { FormWithProviders: e } = D();
   return /* @__PURE__ */ i(e, { schema: r, ...t });
 }
-const zr = (r, t) => D().useForm(r, t), Ar = () => {
+const Ir = (r, t) => D().useForm(r, t), Ar = () => {
   const r = g();
   return a.useMemo(() => !r.hasErrors || !r.hasOrphans ? !1 : Object.keys(r.orphans).length === Object.keys(r.all).length, [r]);
 }, $r = ({ path: r }) => {
@@ -474,11 +481,11 @@ const zr = (r, t) => D().useForm(r, t), Ar = () => {
 };
 export {
   F as FormSubmitError,
-  Ir as RhfUtilsClientForZodContextProvider,
+  Lr as RhfUtilsClientForZodContextProvider,
   $r as RhfUtilsNonFieldErrorMarker,
-  Lr as RhfUtilsZodForm,
+  zr as RhfUtilsZodForm,
   g as useFlatFieldErrorsContext,
   Ar as useFlatFieldErrorsContextHasOnlyOrphans,
   Zr as useRhfUtilsContext,
-  zr as useRhfUtilsZodForm
+  Ir as useRhfUtilsZodForm
 };

package/dist/types/client/config/RhfUtilsClientConfig.d.ts

@@ -67,4 +67,4 @@ export type RhfUtilsClientConfig = {
 /**
  * Non-schema-typed version of `UseRhfUtilsFormChildrenProps` for global config.
  */
-export type RhfUtilsFormChildrenWrapperProps = React.PropsWithChildren<UseRhfUtilsFormChildrenProps>;
+export type RhfUtilsFormChildrenWrapperProps = React.PropsWithChildren<Pick<UseRhfUtilsFormChildrenProps, 'formId' | 'formRef' | 'context' | 'utils' | 'Controller' | 'FormSubmitError'>>;

package/dist/types/client/index.d.ts

@@ -1,25 +1,20 @@
 import { default as React } from 'react';
 import { Resolver } from 'react-hook-form';
 import { RhfUtilsClientConfig } from './config/RhfUtilsClientConfig';
-import { FormWithProvidersProps } from '../form/FormWithProviders';
 import { SafeFieldValues } from '../form/SafeFieldValues';
 import { UseRhfUtilsFormProps } from '../form/UseRhfUtilsFormProps';
 import { UseRhfUtilsFormReturn } from '../form/UseRhfUtilsFormReturn';
 /**
  * Generic object schema type.
  */
-export type ObjectSchema<TInputKey extends string, TOutputKey extends string> = {
-    [key in TInputKey]: SafeFieldValues;
-} & {
-    [key in TOutputKey]: SafeFieldValues;
-};
+export type ObjectSchema<TInputKey extends string, TOutputKey extends string> = Record<TInputKey, SafeFieldValues> & Record<TOutputKey, SafeFieldValues>;
 export type CreateRhfUtilsClient<TObjectSchema extends ObjectSchema<TObjectSchemaInputKey, TObjectSchemaOutputKey>, TObjectSchemaInputKey extends string, TObjectSchemaOutputKey extends string> = {
     useForm: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey]>(schema: TSchema, form: UseRhfUtilsFormProps<TSchemaInput, TSchemaOutput>) => UseRhfUtilsFormReturn<TSchemaInput, TSchemaOutput> & {
         FormWithProviders: React.FC<React.PropsWithChildren>;
     };
-    FormWithProviders: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey]>(props: {
+    FormWithProviders: <TSchema extends TObjectSchema, TSchemaInput extends SafeFieldValues = TSchema[TObjectSchemaInputKey], TSchemaOutput extends SafeFieldValues = TSchema[TObjectSchemaOutputKey]>(props: React.PropsWithChildren<{
         schema: TSchema;
-    } & FormWithProvidersProps<TSchemaInput, TSchemaOutput>) => JSX.Element;
+    } & UseRhfUtilsFormProps<TSchemaInput, TSchemaOutput>>) => JSX.Element;
 };
 /**
  * ...

package/dist/types/client/zod/RhfUtilsUseFormChildrenZodFC.d.ts

@@ -9,4 +9,4 @@ import { ZodTypeFieldValues } from './ZodTypeFieldValues';
  * const Children: RhfUtilsUseFormChildrenZodFC<typeof schema> = () => {};
  * ```
  */
-export type RhfUtilsUseFormChildrenZodFC<TSchema extends ZodTypeFieldValues> = React.FC<RhfUtilsUseFormChildrenZodProps<TSchema>>;
+export type RhfUtilsUseFormChildrenZodFC<TSchema extends ZodTypeFieldValues, TChildrenProps> = React.FC<RhfUtilsUseFormChildrenZodProps<TSchema, TChildrenProps>>;

package/dist/types/client/zod/RhfUtilsUseFormChildrenZodProps.d.ts

@@ -1,4 +1,4 @@
 import { UseRhfUtilsFormChildrenProps } from '../../form/UseRhfUtilsFormChildrenProps';
 import { zodTypeInput, zodTypeOutput } from './consts';
 import { ZodTypeFieldValues } from './ZodTypeFieldValues';
-export type RhfUtilsUseFormChildrenZodProps<TSchema extends ZodTypeFieldValues> = UseRhfUtilsFormChildrenProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput]>;
+export type RhfUtilsUseFormChildrenZodProps<TSchema extends ZodTypeFieldValues, TChildrenProps = undefined> = UseRhfUtilsFormChildrenProps<TSchema[typeof zodTypeInput], TSchema[typeof zodTypeOutput], TChildrenProps>;

package/dist/types/form/FormWithProviders.d.ts

@@ -1,6 +1,6 @@
 import { SafeFieldValues } from './SafeFieldValues';
 import { UseRhfUtilsFormProps } from './UseRhfUtilsFormProps';
-export type FormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>>;
+type Props<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<UseRhfUtilsFormProps<TFieldValues, TTransformedValues>>;
 /**
  * Form providers (with utils) with immediate descendent {@link Form}.
  * (Syntactic sugar for {@link useRhfUtilsForm}. Use this for most applications.)
@@ -8,5 +8,5 @@ export type FormWithProvidersProps<TFieldValues extends SafeFieldValues, TTransf
  * Use {@link useRhfUtilsForm} if you need to specific nesting hierarchy.
  * (e.g., wrapping `<tr>` with provider and nesting `<form>` within `<td>` to appease HTML rules.)
  */
-declare function FormWithProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: FormWithProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormWithProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>(props: Props<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default FormWithProviders;

package/dist/types/form/UseRhfUtilsFormChildrenProps.d.ts

@@ -9,11 +9,15 @@ import { SafeFieldValues } from './SafeFieldValues';
  *
  * Consider keeping shape in line with `UseRhfUtilsFormOnSubmitProps` and `UseRhfUtilsFormReturn`.
  */
-export type UseRhfUtilsFormChildrenProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = SafeFieldValues> = {
+export type UseRhfUtilsFormChildrenProps<TFieldValues extends SafeFieldValues = SafeFieldValues, TTransformedValues extends SafeFieldValues = SafeFieldValues, TProps = undefined> = {
     formId: string;
     formRef: React.RefObject<HTMLFormElement>;
     context: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
     utils?: RhfUtilsFormOptions;
     Controller: typeof _Controller<TFieldValues>;
     FormSubmitError: typeof FormSubmitError<TFieldValues>;
-};
+} & (TProps extends undefined ? {
+    props?: undefined;
+} : {
+    props: TProps;
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.146",
+  "version": "0.1.0",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -37,6 +37,23 @@
       }
     }
   },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "vite build --config vite.config.dev.ts",
+    "dev": "vite --config vite.config.dev.ts --force",
+    "lint": "eslint --ignore-path ./.gitignore --ext ts,tsx --report-unused-disable-directives --max-warnings 0 .",
+    "postpack": "clean-package restore",
+    "preinstall": "npx only-allow pnpm",
+    "prepack": "clean-package",
+    "prepare": "husky",
+    "prepublishOnly": "pnpm build",
+    "preview": "vite preview --config vite.config.dev.ts",
+    "test": "vitest run",
+    "test:ct": "playwright test -c playwright-ct.config.ts",
+    "test:ct:ui": "playwright test -c playwright-ct.config.ts --ui",
+    "tsc": "tsc",
+    "validate": "cross-env CI=1 pnpm install && pnpm tsc && pnpm lint && pnpm test && pnpm test:ct"
+  },
   "peerDependencies": {
     "@hookform/devtools": "4",
     "@hookform/resolvers": "3",
@@ -48,7 +65,43 @@
     "react-hook-form": "7",
     "zod": "3"
   },
+  "devDependencies": {
+    "@playwright/experimental-ct-react": "^1.48.2",
+    "@playwright/test": "^1.48.2",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/node": "^20.17.6",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "clean-package": "^2.2.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "happy-dom": "^15.11.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "rollup": "^4.24.4",
+    "terser": "^5.36.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.0",
+    "vitest": "^2.1.4"
+  },
   "resolutions": {},
+  "engines": {
+    "node": ">=20.14",
+    "pnpm": ">=9.12.2"
+  },
+  "packageManager": "pnpm@9.12.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/paragrav/rhf-utils.git"
@@ -67,4 +120,4 @@
     "utils",
     "zod"
   ]
-}
+}