@dynamic-field-kit/react 1.1.1 → 1.3.0

package/README.md

@@ -12,6 +12,10 @@ Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
 npm install @dynamic-field-kit/core @dynamic-field-kit/react react
 ```
 
+Note: Core is shared runtime. Install core separately and ensure a single version is used across adapters to avoid duplicate registries.
+
+- Install with core: `npm install @dynamic-field-kit/core @dynamic-field-kit/react`
+
 ## Exports
 
 - `DynamicInput`
@@ -25,6 +29,8 @@ npm install @dynamic-field-kit/core @dynamic-field-kit/react react
 - `FieldTypeKey`
 - `FieldRendererProps`
 
+`FieldGroupInput` (repeatable field groups) is used internally by `FieldInput` and doesn't need to be imported directly - see "Repeatable field groups" below.
+
 Default layouts are registered automatically when you import the package root.
 
 Built-in layouts:
@@ -39,44 +45,44 @@ Built-in layouts:
 Register React components or function components through the React adapter:
 
 ```tsx
-import { fieldRegistry } from "@dynamic-field-kit/react"
+import { fieldRegistry } from '@dynamic-field-kit/react';
 
-fieldRegistry.register("text", ({ value, onValueChange, label }) => (
-  <label style={{ display: "grid", gap: 4 }}>
+fieldRegistry.register('text', ({ value, onValueChange, label }) => (
+  <label style={{ display: 'grid', gap: 4 }}>
     <span>{label}</span>
     <input
-      value={value ?? ""}
+      value={value ?? ''}
       onChange={(e) => onValueChange?.(e.target.value)}
     />
   </label>
-))
+));
 
-fieldRegistry.register("number", ({ value, onValueChange, label }) => (
-  <label style={{ display: "grid", gap: 4 }}>
+fieldRegistry.register('number', ({ value, onValueChange, label }) => (
+  <label style={{ display: 'grid', gap: 4 }}>
     <span>{label}</span>
     <input
       type="number"
-      value={value ?? ""}
+      value={value ?? ''}
       onChange={(e) => onValueChange?.(Number(e.target.value))}
     />
   </label>
-))
+));
 ```
 
 ## Basic usage
 
 ```tsx
-import { useState } from "react"
-import { MultiFieldInput } from "@dynamic-field-kit/react"
-import type { FieldDescription } from "@dynamic-field-kit/core"
+import { useState } from 'react';
+import { MultiFieldInput } from '@dynamic-field-kit/react';
+import type { FieldDescription } from '@dynamic-field-kit/core';
 
 const fields: FieldDescription[] = [
-  { name: "name", type: "text", label: "Name" },
-  { name: "age", type: "number", label: "Age" },
-]
+  { name: 'name', type: 'text', label: 'Name' },
+  { name: 'age', type: 'number', label: 'Age' },
+];
 
 export function Example() {
-  const [data, setData] = useState({})
+  const [data, setData] = useState({});
 
   return (
     <MultiFieldInput
@@ -84,7 +90,7 @@ export function Example() {
       properties={data}
       onChange={setData}
     />
-  )
+  );
 }
 ```
 
@@ -101,7 +107,7 @@ Use a layout config object:
 ```tsx
 <MultiFieldInput
   fieldDescriptions={fields}
-  layout={{ type: "grid", columns: 3, gap: 16 }}
+  layout={{ type: 'grid', columns: 3, gap: 16 }}
 />
 ```
 
@@ -111,9 +117,9 @@ Use the built-in responsive layout:
 <MultiFieldInput
   fieldDescriptions={fields}
   layout={{
-    type: "responsive",
-    mobile: "column",
-    desktop: { type: "grid", columns: 2, gap: 12 },
+    type: 'responsive',
+    mobile: 'column',
+    desktop: { type: 'grid', columns: 2, gap: 12 },
   }}
 />
 ```
@@ -121,11 +127,51 @@ Use the built-in responsive layout:
 Register a custom layout:
 
 ```tsx
-import { layoutRegistry } from "@dynamic-field-kit/react"
+import { layoutRegistry } from '@dynamic-field-kit/react';
+
+layoutRegistry.register('stack-tight', ({ children }) => (
+  <div style={{ display: 'grid', gap: 8 }}>{children}</div>
+));
+```
+
+## Derived fields with `computeValue`
 
-layoutRegistry.register("stack-tight", ({ children }) => (
-  <div style={{ display: "grid", gap: 8 }}>{children}</div>
-))
+Give a field a `computeValue` to derive its value from the rest of the form data whenever any field changes:
+
+```tsx
+const fields: FieldDescription[] = [
+  { name: 'firstName', type: 'text' },
+  { name: 'lastName', type: 'text' },
+  {
+    name: 'fullName',
+    type: 'text',
+    computeValue: (data) =>
+      `${data.firstName ?? ''} ${data.lastName ?? ''}`.trim(),
+  },
+];
+```
+
+## Repeatable field groups
+
+A field with `fields` renders as a repeatable group: `data[name]` becomes an array of items, each shaped by the nested `fields`, with "Add"/"Remove" controls rendered automatically.
+
+```tsx
+const fields: FieldDescription[] = [
+  {
+    name: 'contacts',
+    type: 'group',
+    label: 'Contacts',
+    fields: [
+      { name: 'email', type: 'text', label: 'Email' },
+      { name: 'phone', type: 'text', label: 'Phone' },
+    ],
+    defaultItem: { email: '', phone: '' },
+    minItems: 1,
+    maxItems: 5,
+  },
+];
+
+<MultiFieldInput fieldDescriptions={fields} />;
 ```
 
 ## Type augmentation
@@ -133,12 +179,12 @@ layoutRegistry.register("stack-tight", ({ children }) => (
 Add your app's field types through module augmentation:
 
 ```ts
-import "@dynamic-field-kit/core"
+import '@dynamic-field-kit/core';
 
-declare module "@dynamic-field-kit/core" {
+declare module '@dynamic-field-kit/core' {
   interface FieldTypeMap {
-    text: string
-    number: number
+    text: string;
+    number: number;
   }
 }
 ```
@@ -147,8 +193,9 @@ declare module "@dynamic-field-kit/core" {
 
 - `@dynamic-field-kit/core` stays framework-agnostic and does not export React-specific JSX types.
 - `@dynamic-field-kit/react` narrows the shared registry to React component types so `fieldRegistry.get(type)` can be rendered safely in TSX.
-- `MultiFieldInput` filters fields using `appearCondition`.
+- `MultiFieldInput` filters fields using `appearCondition` and derives fields using `computeValue`.
 - `DynamicInput` renders `Unknown field type: ...` when a renderer is missing.
+- Fields with `fields` render as repeatable groups instead of going through `fieldRegistry`.
 
 ## License
 

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldTypeKey, Properties, FieldDescription, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
 export { FieldDescription, FieldRendererProps, FieldTypeKey } from '@dynamic-field-kit/core';
 
-type LayoutRenderer<C = any> = (props: {
+type LayoutRenderer<C = unknown> = (props: {
     children: React.ReactNode;
     config?: C;
 }) => React.ReactElement;
@@ -14,34 +14,35 @@ declare class LayoutRegistry {
 }
 declare const layoutRegistry: LayoutRegistry;
 
-type BaseLayout = "column" | "row" | {
-    type: "grid";
+type BaseLayout = 'column' | 'row' | {
+    type: 'grid';
     columns?: number;
     gap?: number;
 };
 type LayoutConfig = BaseLayout | {
-    type: "responsive";
+    type: 'responsive';
     mobile: BaseLayout;
     desktop: BaseLayout;
 };
 
 interface Props$2<T extends FieldTypeKey> {
     type: T;
-    value?: any;
-    onChange?: (value: any) => void;
+    value?: unknown;
+    onChange?: (value: unknown) => void;
     label?: string;
     options?: Properties[];
     className?: string;
     description?: ReactNode;
 }
-declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInput: typeof DynamicInputInner;
 
 interface Props$1 {
     fieldDescription: FieldDescription;
     renderInfos: Properties;
-    onValueChangeField: (value: any, key: string) => void;
+    onValueChangeField: (value: unknown, key: string) => void;
 }
-declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element>;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
@@ -49,9 +50,9 @@ interface Props {
     onChange?: (data: Properties) => void;
     layout?: LayoutConfig;
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, }: Props) => react_jsx_runtime.JSX.Element;
 
-type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;
+type ReactFieldRenderer<T = unknown> = ComponentType<FieldRendererProps<T>>;
 interface ReactFieldRegistry {
     register<K extends keyof FieldTypeMap>(type: K, renderer: ReactFieldRenderer<FieldTypeMap[K]>): void;
     get<K extends keyof FieldTypeMap>(type: K): ReactFieldRenderer<FieldTypeMap[K]> | undefined;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldTypeKey, Properties, FieldDescription, FieldTypeMap, FieldRendererProps } from '@dynamic-field-kit/core';
 export { FieldDescription, FieldRendererProps, FieldTypeKey } from '@dynamic-field-kit/core';
 
-type LayoutRenderer<C = any> = (props: {
+type LayoutRenderer<C = unknown> = (props: {
     children: React.ReactNode;
     config?: C;
 }) => React.ReactElement;
@@ -14,34 +14,35 @@ declare class LayoutRegistry {
 }
 declare const layoutRegistry: LayoutRegistry;
 
-type BaseLayout = "column" | "row" | {
-    type: "grid";
+type BaseLayout = 'column' | 'row' | {
+    type: 'grid';
     columns?: number;
     gap?: number;
 };
 type LayoutConfig = BaseLayout | {
-    type: "responsive";
+    type: 'responsive';
     mobile: BaseLayout;
     desktop: BaseLayout;
 };
 
 interface Props$2<T extends FieldTypeKey> {
     type: T;
-    value?: any;
-    onChange?: (value: any) => void;
+    value?: unknown;
+    onChange?: (value: unknown) => void;
     label?: string;
     options?: Properties[];
     className?: string;
     description?: ReactNode;
 }
-declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInputInner: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description, }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicInput: typeof DynamicInputInner;
 
 interface Props$1 {
     fieldDescription: FieldDescription;
     renderInfos: Properties;
-    onValueChangeField: (value: any, key: string) => void;
+    onValueChangeField: (value: unknown, key: string) => void;
 }
-declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const FieldInput: React.MemoExoticComponent<({ fieldDescription, renderInfos, onValueChangeField, }: Props$1) => react_jsx_runtime.JSX.Element>;
 
 interface Props {
     fieldDescriptions: FieldDescription[];
@@ -49,9 +50,9 @@ interface Props {
     onChange?: (data: Properties) => void;
     layout?: LayoutConfig;
 }
-declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout, }: Props) => react_jsx_runtime.JSX.Element;
 
-type ReactFieldRenderer<T = any> = ComponentType<FieldRendererProps<T>>;
+type ReactFieldRenderer<T = unknown> = ComponentType<FieldRendererProps<T>>;
 interface ReactFieldRegistry {
     register<K extends keyof FieldTypeMap>(type: K, renderer: ReactFieldRenderer<FieldTypeMap[K]>): void;
     get<K extends keyof FieldTypeMap>(type: K): ReactFieldRenderer<FieldTypeMap[K]> | undefined;