Improvements for pages

apps/sandbox/app/page.tsx

@@ -1,30 +1,35 @@
 "use client";
-import { BlockWrapper, type FieldProps, quackFields } from "@duck-form/fields";
+import {
+  BlockWrapper,
+  type FieldProps,
+  BlockType,
+  quackFields,
+} from "@duck-form/fields";
 import { DevTool } from "@hookform/devtools";
 import { Button } from "@rafty/ui";
 import { Blueprint, DuckField, DuckForm } from "duck-form";
 import { FormProvider, useForm } from "react-hook-form";
 
 const schema: Record<string, FieldProps> = {
   array: {
-    type: "array",
+    type: BlockType.ARRAY,
     label: "Array",
     of: {
-      type: "string",
+      type: BlockType.STRING,
       label: "String",
     },
   },
   calendar: {
-    type: "calendar",
+    type: BlockType.CALENDAR,
     label: "Calendar",
   },
   checkbox: {
-    type: "boolean",
+    type: BlockType.BOOLEAN,
     label: "Checkbox",
     orientation: "row-reverse",
   },
   checkbox_group: {
-    type: "checkboxgroup",
+    type: BlockType.CHECKBOX_GROUP,
     label: "Checkbox Group",
     options: [
       { value: "1", label: "1" },
@@ -36,35 +41,35 @@ const schema: Record<string, FieldProps> = {
     ],
   },
   color_picker: {
-    type: "colorPicker",
+    type: BlockType.COLOR_PICKER,
     label: "Color Picker",
   },
   currency: {
-    type: "currencyInput",
+    type: BlockType.CURRENCY_INPUT,
     label: "Currency",
   },
   date: {
-    type: "date",
+    type: BlockType.DATE,
     label: "Date",
   },
   date_range: {
-    type: "dateRange",
+    type: BlockType.DATE_RANGE,
     label: "Date Range",
   },
   editable_number: {
-    type: "editableNumber",
+    type: BlockType.EDITABLE_NUMBER,
     label: "Editable Number",
   },
   editable_text: {
-    type: "editableText",
+    type: BlockType.EDITABLE_TEXT,
     label: "Editable Text",
   },
   editable_textarea: {
-    type: "editableTextarea",
+    type: BlockType.EDITABLE_TEXTAREA,
     label: "Editable Textarea",
   },
   list_box: {
-    type: "listbox",
+    type: BlockType.LISTBOX,
     label: "List Box",
     options: [
       { value: "1", label: "1" },
@@ -76,7 +81,7 @@ const schema: Record<string, FieldProps> = {
     ],
   },
   multi_list_box: {
-    type: "multiListbox",
+    type: BlockType.MULTI_LISTBOX,
     label: "Multi Listbox",
     options: [
       { value: "1", label: "1" },
@@ -88,59 +93,59 @@ const schema: Record<string, FieldProps> = {
     ],
   },
   number: {
-    type: "number",
+    type: BlockType.NUMBER,
     label: "Number",
   },
   object: {
-    type: "object",
+    type: BlockType.OBJECT,
     fields: {
       string: {
-        type: "string",
+        type: BlockType.STRING,
         label: "String",
       },
       string1: {
-        type: "string",
+        type: BlockType.STRING,
         label: "String",
       },
       string2: {
-        type: "string",
+        type: BlockType.STRING,
         label: "String",
       },
     },
   },
   password: {
-    type: "password",
+    type: BlockType.PASSWORD,
     label: "Password",
   },
   percentage: {
-    type: "percentageInput",
+    type: BlockType.PERCENTAGE_INPUT,
     label: "Percentage",
   },
   pin: {
-    type: "pin",
+    type: BlockType.PIN,
     label: "Pin",
     length: 4,
   },
   radio_group: {
-    type: "radio",
+    type: BlockType.RADIO,
     label: "Radio",
     options: [
       { value: 1, label: "1" },
       { value: "2", label: "2" },
     ],
   },
   range_slider: {
-    type: "rangeSlider",
+    type: BlockType.RANGE_SLIDER,
     label: "Range Slider",
   },
   rating: {
-    type: "rating",
+    type: BlockType.RATING,
     label: "Rating",
     count: 5,
     allowHalf: true,
   },
   segmented_control: {
-    type: "segmentedControl",
+    type: BlockType.SEGMENTED_CONTROL,
     label: "Segmented Control",
     options: [
       { value: "1", label: "1" },
@@ -152,7 +157,7 @@ const schema: Record<string, FieldProps> = {
     ],
   },
   select: {
-    type: "select",
+    type: BlockType.SELECT,
     label: "Select",
     options: [
       { value: "1", label: "1" },
@@ -164,32 +169,32 @@ const schema: Record<string, FieldProps> = {
     ],
   },
   slider: {
-    type: "slider",
+    type: BlockType.SLIDER,
     label: "Slider",
   },
   string: {
-    type: "string",
+    type: BlockType.STRING,
     label: "String",
   },
   switch: {
-    type: "switch",
+    type: BlockType.SWTICH,
     label: "Switch",
     orientation: "row-reverse",
   },
   switch_group: {
-    type: "switchGroup",
+    type: BlockType.SWITCH_GROUP,
     label: "Switch Group",
     options: [
       { value: 1, label: "1" },
       { value: "2", label: "2" },
     ],
   },
   tag: {
-    type: "tag",
+    type: BlockType.TAG,
     label: "Tag",
   },
   textarea: {
-    type: "textarea",
+    type: BlockType.TEXTAREA,
     label: "Textarea",
   },
 };
@@ -205,15 +210,12 @@ export default function HomePage() {
 
   return (
     <div className="max-w-4xl mx-auto w-full py-6 flex flex-col gap-4">
-      <DuckForm
-        components={quackFields}
-        generateId={(_, props) => (props.id ? String(props.id) : undefined)}
-      >
+      <DuckForm components={quackFields}>
         <FormProvider {...methods}>
           <form
             onSubmit={handleSubmit(
               (value) => console.log(value),
-              console.error,
+              console.error
             )}
             className="space-y-3"
           >

package.json

@@ -18,13 +18,15 @@
     "@rollup/plugin-terser": "^0.4.4",
     "astro": "^4.15.4",
     "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.53.0",
     "sharp": "^0.33.5",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
@@ -40,6 +42,7 @@
     "@swc/cli": "~0.3.12",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
+    "@types/lodash": "^4.17.14",
     "@types/node": "18.16.9",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",

packages/core/package.json

@@ -23,6 +23,7 @@
     "url": "https://github.com/rhinobase/duck-form/issues"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "lodash": "^4.17.21"
   }
 }

packages/core/src/components/DuckField.tsx

@@ -1,22 +1,24 @@
 import { Fragment } from "react";
 import { FieldProvider, useBlueprint, useDuckForm } from "../providers";
+import _ from "lodash";
 
 export type DuckField<
-  T extends Record<string, unknown> = Record<string, unknown>,
+  T extends Record<string, unknown> = Record<string, unknown>
 > = {
   type: string;
 } & T;
 
 export function DuckField<T extends Record<string, unknown>>(props: T) {
   const { wrapper: Wrapper = Fragment, schema } = useBlueprint() ?? {};
-  const { components, resolver } = useDuckForm();
+  const { components, resolverKey } = useDuckForm();
+
+  const options = _.get(schema, String(props[resolverKey])) as DuckField;
 
-  const options = resolver(schema, props) as DuckField;
   let Component = options?.type ? components[options.type] : undefined;
   Component ??= components.default;
 
   return (
-    <FieldProvider {...options} type={options?.type ?? "default"}>
+    <FieldProvider {...options} {...props} type={options?.type ?? "default"}>
       <Wrapper>
         <Component />
       </Wrapper>

packages/core/src/providers/duckform.tsx

@@ -6,33 +6,23 @@ import {
 } from "react";
 import { ComponentNotFound } from "../components/ComponentNotFound";
 
-type DuckFormContextType<T> = {
+type DuckFormContextType = {
   readonly components: Record<string, () => ReactNode>;
-  readonly generateId?: (
-    schema: Record<string, T>,
-    props: Record<string, unknown>,
-  ) => string | undefined;
-  readonly resolver: (
-    schema: Record<string, T>,
-    props: Record<string, unknown>,
-  ) => T | undefined;
+  resolverKey: string;
 };
 
-// biome-ignore lint/suspicious/noExplicitAny: Generic context
-const DuckFormContext = createContext<DuckFormContextType<any> | null>(null);
+const DuckFormContext = createContext<DuckFormContextType | null>(null);
 
-export type DuckForm<T> = PropsWithChildren<Partial<DuckFormContextType<T>>>;
+export type DuckForm = PropsWithChildren<Partial<DuckFormContextType>>;
 
-export function DuckForm<T>({
+export function DuckForm({
   children,
   components = {},
-  resolver = defaultResolver,
-  generateId,
-}: DuckForm<T>) {
+  resolverKey = "id",
+}: DuckForm) {
   const value = {
     components: { default: ComponentNotFound, ...components },
-    resolver,
-    generateId,
+    resolverKey,
   };
 
   return (
@@ -42,20 +32,10 @@ export function DuckForm<T>({
   );
 }
 
-export function useDuckForm<T>() {
-  const context = useContext<DuckFormContextType<T> | null>(DuckFormContext);
+export function useDuckForm() {
+  const context = useContext<DuckFormContextType | null>(DuckFormContext);
 
   if (!context) throw new Error("Missing DuckFormContext.Provider in the tree");
 
   return context;
 }
-
-function defaultResolver<T>(
-  schema: Record<string, T>,
-  props: Record<string, unknown>,
-): T {
-  return {
-    ...schema[String(props.id)],
-    ...props,
-  };
-}

packages/core/src/providers/field.tsx

@@ -4,10 +4,11 @@ import type { DuckField } from "../components";
 // biome-ignore lint/suspicious/noExplicitAny: Context is generic
 const FieldContext = createContext<DuckField<any> | null>(null);
 
-export type FieldProvider<T extends Record<string, unknown>> =
-  PropsWithChildren<DuckField<T>>;
+export type FieldProvider<T extends DuckField> = PropsWithChildren<
+  DuckField<T>
+>;
 
-export function FieldProvider<T extends Record<string, unknown>>({
+export function FieldProvider<T extends DuckField>({
   children,
   ...values
 }: FieldProvider<T>) {
@@ -16,8 +17,8 @@ export function FieldProvider<T extends Record<string, unknown>>({
   );
 }
 
-export function useField<T extends Record<string, unknown>>() {
-  const context = useContext<DuckField<T> | null>(FieldContext);
+export function useField<T extends DuckField>() {
+  const context = useContext<T | null>(FieldContext);
 
   if (!context) throw new Error("Missing FieldContext.Provider in the tree");
 

packages/fields/package.json

@@ -30,6 +30,8 @@
     "duck-form": "^0.1.0",
     "react": "^18.2.0",
     "react-hook-form": "^7.53.0",
-    "@hookform/error-message": "^2.0.1"
+    "@hookform/devtools": "^4.3.3",
+    "@hookform/error-message": "^2.0.1",
+    "zod": "^3.24.1"
   }
 }