@arcote.tech/arc-react 0.1.9 → 0.1.10

package/dist/form/field.d.ts

@@ -9,16 +9,18 @@ export declare function useFormField(): FormFieldContext;
 type Translations<E extends ArcElement> = {
     [K in keyof Exclude<ReturnType<E["validate"]>, false>]: (data: Exclude<Exclude<ReturnType<E["validate"]>, false>[K], undefined | false>) => string;
 } | ((data: any) => string) | string;
-type FormFieldProps<E extends ArcElement> = {
+type FormFieldProps<E extends ArcElement, S = undefined> = {
     translations: Translations<E>;
-    render: (field: FormFieldData<E>) => React.ReactNode;
+    render: (field: FormFieldData<E, S>) => React.ReactNode;
 };
-export type FormFieldData<T> = {
+export type FormFieldData<T, S = undefined> = {
     onChange: (value: any) => void;
     value: any;
     defaultValue?: any;
     name: string;
+    subFields?: S;
+    setFieldValue: (field: string, value: any) => void;
 };
-export declare function FormField<E extends ArcElement>(name: string, defaultValue?: any): ({ translations, render }: FormFieldProps<E>) => import("react/jsx-dev-runtime").JSX.Element;
+export declare function FormField<E extends ArcElement, S = undefined>(name: string, defaultValue?: any, subFields?: S): ({ translations, render }: FormFieldProps<E, S>) => import("react/jsx-dev-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=field.d.ts.map

package/dist/form/form.d.ts

@@ -1,4 +1,4 @@
-import { type $type, type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey } from "@arcote.tech/arc";
+import { type $type, type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey, ArcOptional } from "@arcote.tech/arc";
 import React from "react";
 import { FormField } from "./field";
 export type FormContextValue<T extends ArcObjectAny> = {
@@ -14,16 +14,19 @@ export type FormRef<T extends ArcObjectAny> = {
     submit: () => Promise<void>;
     getValues: () => Partial<$type<T>>;
     validate: () => boolean;
+    setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+};
+export type FormFields<T extends ArcObjectAny> = {
+    [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ArcObjectValueByKey<T, K> extends ArcObjectAny ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<ArcObjectValueByKey<T, K>>>> : ArcObjectValueByKey<T, K> extends ArcOptional<infer U extends ArcObjectAny> ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<U>>> : ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
 };
 export type FormProps<T extends ArcObjectAny> = {
-    render: (props: {
-        [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
-    }, values: Partial<$type<T>>) => React.ReactNode;
+    render: (props: FormFields<T>, values: Partial<$type<T>>) => React.ReactNode;
     schema: T;
     onSubmit: (values: $type<T>) => void | Promise<void>;
     onUnvalidatedSubmit?: (values: Partial<$type<T>>, errors: any) => void;
     defaults?: Partial<$type<T>> | null;
 };
 export declare const FormContext: React.Context<FormContextValue<any> | null>;
+export declare function useForm<T extends ArcObjectAny>(): FormContextValue<T>;
 export declare const Form: <T extends ArcObjectAny>(props: FormProps<T> & React.RefAttributes<FormRef<T>>) => JSX.Element;
 //# sourceMappingURL=form.d.ts.map

package/dist/index.js

@@ -6,7 +6,7 @@ import { createContext as createContext3, useCallback as useCallback3, useContex
 import {
   deepMerge
 } from "@arcote.tech/arc";
-import {
+import React, {
   createContext,
   forwardRef,
   useCallback,
@@ -17,6 +17,32 @@ import {
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var FormContext = createContext(null);
+function useForm() {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    throw new Error("useForm must be used within a Form component");
+  }
+  return context;
+}
+function setNestedValue(obj, path, value) {
+  const keys = path.split(".");
+  const result = { ...obj };
+  let current = result;
+  for (let i = 0;i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!(key in current) || typeof current[key] !== "object" || current[key] === null) {
+      current[key] = {};
+    } else {
+      current[key] = { ...current[key] };
+    }
+    current = current[key];
+  }
+  current[keys[keys.length - 1]] = value;
+  return result;
+}
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
 var Form = forwardRef(function Form2(props, ref) {
   const { render, schema, onSubmit, defaults, onUnvalidatedSubmit } = props;
   const [values, setValues] = useState({});
@@ -38,7 +64,13 @@ var Form = forwardRef(function Form2(props, ref) {
     return Object.values(errors2).some((result) => result);
   }, [schema, values]);
   const validatePartial = useCallback((keys) => {
-    const partialValues = keys.reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const partialValues = keys.reduce((acc, key) => {
+      const value = getNestedValue(values, key);
+      if (value !== undefined) {
+        return setNestedValue(acc, key, value);
+      }
+      return acc;
+    }, {});
     const errors2 = schema.validatePartial(partialValues);
     if (errors2)
       setErrors((prev) => deepMerge(prev, errors2));
@@ -52,13 +84,19 @@ var Form = forwardRef(function Form2(props, ref) {
     return Object.values(errors2).some((result) => result);
   }, [schema, values, dirty]);
   const setFieldValue = useCallback((field, value) => {
-    setValues((prev) => ({ ...prev, [field]: value }));
+    setValues((prev) => setNestedValue(prev, field, value));
   }, []);
   const setFieldDirty = useCallback((field) => {
     setDirty((prev) => new Set([...prev, field]));
   }, []);
   useEffect(() => {
-    const partialValues = Array.from(dirty).reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const partialValues = Array.from(dirty).reduce((acc, key) => {
+      const value = getNestedValue(values, key);
+      if (value !== undefined) {
+        return setNestedValue(acc, key, value);
+      }
+      return acc;
+    }, {});
     const errors2 = schema.validatePartial(partialValues);
     setErrors(errors2);
   }, [values, dirty]);
@@ -77,14 +115,30 @@ var Form = forwardRef(function Form2(props, ref) {
   useImperativeHandle(ref, () => ({
     submit: handleSubmit,
     getValues: () => values,
-    validate
+    validate,
+    setFieldValue
   }), [handleSubmit, values, validate]);
+  const buildFieldsStructure = useCallback((element, fieldName, defaultValue) => {
+    const isOptional = element?.toJsonSchema && typeof element.toJsonSchema === "function" && element.parent !== undefined;
+    if (isOptional) {
+      return buildFieldsStructure(element.parent, fieldName, defaultValue);
+    }
+    const isObject = element?.entries && typeof element.entries === "function";
+    if (isObject) {
+      const subFields = Object.fromEntries(element.entries().map(([key, value]) => [
+        key.charAt(0).toUpperCase() + key.slice(1),
+        buildFieldsStructure(value, fieldName ? `${fieldName}.${key}` : key, defaultValue?.[key])
+      ]));
+      return FormField(fieldName, defaultValue, subFields);
+    }
+    return FormField(fieldName, defaultValue);
+  }, []);
   const Fields = useMemo(() => {
     return Object.fromEntries(schema.entries().map(([key, value]) => [
       key.charAt(0).toUpperCase() + key.slice(1),
-      FormField(key, defaults?.[key])
+      buildFieldsStructure(value, key, defaults?.[key])
     ]));
-  }, [schema, defaults]);
+  }, [schema, defaults, buildFieldsStructure]);
   const contextValue = useMemo(() => ({
     values,
     errors,
@@ -167,6 +221,9 @@ function useFormPartField(fieldName) {
 
 // form/field.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
+function getNestedValue2(obj, path) {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
 var FormFieldContext = createContext3(null);
 function useFormField() {
   const context = useContext2(FormFieldContext);
@@ -174,7 +231,7 @@ function useFormField() {
     throw new Error("useFormField must be used within a FormFieldProvider");
   return context;
 }
-function FormField(name, defaultValue) {
+function FormField(name, defaultValue, subFields) {
   return ({ translations, render }) => {
     const form = useContext2(FormContext);
     if (!form)
@@ -183,7 +240,7 @@ function FormField(name, defaultValue) {
     const { values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty } = form;
     const schemaErrors = errors?.["schema"] || {};
     const fieldErrors = schemaErrors[name] || false;
-    const value = values[name] ?? defaultValue ?? "";
+    const value = getNestedValue2(values, name) ?? defaultValue ?? "";
     const isDirty = dirty.has(name);
     const handleChange = useCallback3((value2) => {
       if (value2?.target?.value !== undefined) {
@@ -218,7 +275,9 @@ function FormField(name, defaultValue) {
         onChange: handleChange,
         name: name.toString(),
         value,
-        defaultValue
+        defaultValue,
+        subFields,
+        setFieldValue
       })
     }, undefined, false, undefined, this);
   };
@@ -456,6 +515,7 @@ export {
   useFormPartField,
   useFormPart,
   useFormField,
+  useForm,
   reactModel,
   formResolver,
   FormPartContext,
@@ -467,4 +527,4 @@ export {
   Form
 };
 
-//# debugId=64B909B4D47850D764756E2164756E21
+//# debugId=93653667973401D564756E2164756E21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-react",
   "type": "module",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "React client for the Arc framework, providing utilities for querying data and executing commands, enhancing the development of reactive and efficient user interfaces.",