@arcote.tech/arc-react 0.0.28 → 0.0.30

package/dist/form/field.d.ts

@@ -0,0 +1,24 @@
+import { type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey } from "@arcote.tech/arc";
+import type { ArcAbstractAny } from "@arcote.tech/arc/elements/abstract";
+import React from "react";
+export type FormFieldContext = {
+    errors: any;
+    messages: any;
+};
+export declare const FormFieldContext: React.Context<FormFieldContext | null>;
+export declare function useFormField(): FormFieldContext;
+type Translations<E extends ArcAbstractAny> = {
+    [K in keyof ReturnType<E["validate"]>]: (data: Exclude<ReturnType<E["validate"]>[K], undefined>) => string;
+};
+type FormFieldProps<T extends ArcObjectAny, K extends ArcObjectKeys<T>> = {
+    name: K;
+    translations: Translations<ArcObjectValueByKey<T, K>>;
+    render: (field: FormFieldData<T>) => React.ReactNode;
+};
+export type FormFieldData<T> = {
+    onChange: (value: any) => void;
+    value: any;
+};
+export declare function FormField<T extends ArcObjectAny, K extends ArcObjectKeys<T>>({ name, translations, render, }: FormFieldProps<T, K>): import("react/jsx-dev-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=field.d.ts.map

package/dist/form/form.d.ts

@@ -0,0 +1,23 @@
+import { type ArcObjectAny, type ArcObjectKeys } from "@arcote.tech/arc";
+import React from "react";
+import { FormField } from "./field";
+export type FormContextValue<T extends ArcObjectAny> = {
+    values: Partial<Record<ArcObjectKeys<T>, any>>;
+    errors: Partial<Record<ArcObjectKeys<T>, Record<string, any>>>;
+    dirty: Set<ArcObjectKeys<T>>;
+    isSubmitted: boolean;
+    setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+    setFieldDirty: (field: ArcObjectKeys<T>) => void;
+};
+export declare const FormContext: React.Context<FormContextValue<any> | null>;
+export declare function Form<T extends ArcObjectAny>({ render, schema, onSubmit, }: {
+    render: (props: {
+        FormField: typeof FormField<T, ArcObjectKeys<T>>;
+    }) => React.ReactNode;
+    schema: T;
+    onSubmit: (values: Record<ArcObjectKeys<T>, any>) => void | Promise<void>;
+}): import("react/jsx-dev-runtime").JSX.Element;
+export declare namespace Form {
+    var displayName: string;
+}
+//# sourceMappingURL=form.d.ts.map

package/dist/form/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./field";
+export * from "./form";
+export * from "./legacy_form_resolver";
+export * from "./message";
+export * from "./test";
+//# sourceMappingURL=index.d.ts.map

package/dist/{form.d.ts → form/legacy_form_resolver.d.ts}

@@ -1,6 +1,6 @@
-import { type ArcObjectAny } from "@arcote.tech/arc";
+import type { ArcObjectAny } from "@arcote.tech/arc";
 export declare function formResolver(schema: ArcObjectAny): (data: any) => Promise<{
     values: any;
     errors: {};
 }>;
-//# sourceMappingURL=form.d.ts.map
+//# sourceMappingURL=legacy_form_resolver.d.ts.map

package/dist/form/message.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const FormMessage: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=message.d.ts.map

package/dist/form/test.d.ts

@@ -0,0 +1,2 @@
+export declare function Test(): import("react/jsx-dev-runtime").JSX.Element;
+//# sourceMappingURL=test.d.ts.map

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./form.ts";
+export * from "./form/";
 export * from "./idb.ts";
 export * from "./reactModel.tsx";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,122 @@
-// form.ts
+// form/field.tsx
+import { createContext as createContext2, useCallback as useCallback2, useContext, useMemo as useMemo2 } from "react";
+
+// form/form.tsx
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+"use client";
+var FormContext = createContext(null);
+function Form({
+  render,
+  schema,
+  onSubmit
+}) {
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const [dirty, setDirty] = useState(new Set);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const validate = useCallback(() => {
+    console.log("validate", values, schema);
+    const errors2 = schema.validate(values);
+    setErrors(errors2);
+    return Object.values(errors2).some((result) => result);
+  }, [schema, values]);
+  const setFieldValue = useCallback((field, value) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+  }, [schema, isSubmitted]);
+  useEffect(() => {
+    if (isSubmitted) {
+      validate();
+    }
+  }, [isSubmitted, values]);
+  const setFieldDirty = useCallback((field) => {
+    setDirty((prev) => new Set([...prev, field]));
+  }, []);
+  const hasErrors = useMemo(() => Object.values(errors).some((result) => result), [errors]);
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    setIsSubmitted(true);
+    validate();
+    if (!hasErrors) {
+      await onSubmit(values);
+    }
+  }, [schema, values, onSubmit, hasErrors]);
+  const FF = useCallback(FormField, []);
+  const contextValue = useMemo(() => ({
+    values,
+    errors,
+    dirty,
+    isSubmitted,
+    setFieldValue,
+    setFieldDirty
+  }), [values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx("form", {
+      onSubmit: handleSubmit,
+      children: render({ FormField: FF })
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+Form.displayName = "Form";
+
+// form/field.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+"use client";
+var FormFieldContext = createContext2(null);
+function useFormField() {
+  const context = useContext(FormFieldContext);
+  if (!context)
+    throw new Error("useFormField must be used within a FormFieldProvider");
+  return context;
+}
+function FormField({
+  name,
+  translations,
+  render
+}) {
+  const form = useContext(FormContext);
+  if (!form)
+    throw new Error("FormField must be used within a Form");
+  const { values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty } = form;
+  const fieldErrors = errors[name] || {};
+  const value = values[name] || "";
+  const isDirty = dirty.has(name);
+  const handleChange = useCallback2((value2) => {
+    if (typeof value2 === "string") {
+      setFieldValue(name, value2);
+    } else if (value2?.target?.value !== undefined) {
+      setFieldValue(name, value2.target.value);
+    }
+    if (!isDirty) {
+      setFieldDirty(name);
+    }
+  }, [name, isDirty, setFieldValue, setFieldDirty]);
+  const errorMessages = Object.entries(fieldErrors).map(([key, value2]) => {
+    if (!value2)
+      return;
+    const translation = translations[key];
+    return translation?.(value2);
+  }).filter(Boolean);
+  const contextValue = useMemo2(() => ({
+    errors: isSubmitted ? fieldErrors : {},
+    messages: errorMessages
+  }), [fieldErrors, isSubmitted, errorMessages]);
+  return /* @__PURE__ */ jsx2(FormFieldContext.Provider, {
+    value: contextValue,
+    children: render({
+      onChange: handleChange,
+      value
+    })
+  }, undefined, false, undefined, this);
+}
+// form/legacy_form_resolver.ts
 function formResolver(schema) {
   return async (data) => {
     return {
@@ -7,6 +125,61 @@ function formResolver(schema) {
     };
   };
 }
+// form/message.tsx
+import React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+"use client";
+var FormMessage = React3.forwardRef(({}, ref) => {
+  const { messages } = useFormField();
+  if (messages.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx3("div", {
+    className: "text-destructive",
+    ref,
+    children: messages[0]
+  }, undefined, false, undefined, this);
+});
+FormMessage.displayName = "FormMessage";
+// form/test.tsx
+import { object, string } from "@arcote.tech/arc";
+import { jsx as jsx4, Fragment } from "react/jsx-runtime";
+"use client";
+function Test() {
+  const schema = object({
+    username: string().minLength(3).maxLength(10)
+  });
+  const handleSubmit = async (values) => {
+    console.log("Form submitted:", values);
+  };
+  return /* @__PURE__ */ jsx4(Form, {
+    schema,
+    onSubmit: handleSubmit,
+    render: ({ FormField: FormField2 }) => /* @__PURE__ */ jsx4("div", {
+      children: [
+        /* @__PURE__ */ jsx4(FormField2, {
+          name: "username",
+          translations: {
+            minLength: ({ minLength }) => `Username must be at least ${minLength} characters long`,
+            maxLength: ({ maxLength }) => `Username must be at most ${maxLength} characters long`
+          },
+          render: (field) => /* @__PURE__ */ jsx4(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx4("input", {
+                className: "border border-gray-300 rounded-md p-2",
+                ...field
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx4(FormMessage, {}, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx4("button", {
+          type: "submit",
+          children: "Submit"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
 // idb.ts
 import {
   ArcCollection,
@@ -70,6 +243,8 @@ class IDBReadTransaction {
       const keyPath = idbIndex.keyPath;
       let keyRange;
       const getKey = (obj) => {
+        if (!obj)
+          return;
         const key = keyPath.map((key2) => obj[key2]);
         if (key.some((value) => value === undefined))
           return;
@@ -91,7 +266,6 @@ class IDBReadTransaction {
       } else {
         keyRange = IDBKeyRange.only(simpleKey);
       }
-      console.log(keyRange);
       const result = idbIndex.getAll(keyRange);
       result.onsuccess = (e) => {
         resolve(e.target.result);
@@ -165,21 +339,22 @@ import {
   rtcClientFactory
 } from "@arcote.tech/arc";
 import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
+  createContext as createContext3,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useMemo as useMemo3,
   useRef,
-  useState
+  useState as useState2
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
+"use client";
 var reactModel = (arcContext, databaseName) => {
-  const LiveModelContext = createContext(null);
-  const LocalModelContext = createContext(null);
+  const LiveModelContext = createContext3(null);
+  const LocalModelContext = createContext3(null);
   let modelMasterDataStorage = null;
   return [
     function LiveModelProvider(props) {
-      const dataStorage = useMemo(() => {
+      const dataStorage = useMemo3(() => {
         if (typeof window === "undefined")
           return null;
         const dbAdapterPromise = idbAdapterFactory(databaseName, arcContext.version)(arcContext);
@@ -187,9 +362,9 @@ var reactModel = (arcContext, databaseName) => {
         modelMasterDataStorage = dataStorage2;
         return dataStorage2;
       }, [arcContext, databaseName, arcContext.version]);
-      const [syncProgress, setSyncProgress] = useState([]);
-      const [syncDone, setSyncDone] = useState(false);
-      useEffect(() => {
+      const [syncProgress, setSyncProgress] = useState2([]);
+      const [syncDone, setSyncDone] = useState2(false);
+      useEffect2(() => {
         if (typeof window === "undefined" || !dataStorage)
           return;
         const sync = async () => {
@@ -201,10 +376,10 @@ var reactModel = (arcContext, databaseName) => {
         sync();
       }, [dataStorage]);
       if (!dataStorage || !syncDone)
-        return /* @__PURE__ */ jsx(props.syncView, {
+        return /* @__PURE__ */ jsx5(props.syncView, {
           progress: syncProgress
         }, undefined, false, undefined, this);
-      return /* @__PURE__ */ jsx(LiveModelContext.Provider, {
+      return /* @__PURE__ */ jsx5(LiveModelContext.Provider, {
         value: {
           dataStorage,
           client: props.client,
@@ -214,14 +389,14 @@ var reactModel = (arcContext, databaseName) => {
       }, undefined, false, undefined, this);
     },
     function LocalModelProvider({ children }) {
-      const parentContext = useContext(LiveModelContext);
+      const parentContext = useContext2(LiveModelContext);
       if (!parentContext) {
         throw new Error("LocalModelProvider must be used within a LiveModelProvider");
       }
-      const [localContext] = useState(() => ({
+      const [localContext] = useState2(() => ({
         dataStorage: parentContext.dataStorage.fork()
       }));
-      return /* @__PURE__ */ jsx(LocalModelContext.Provider, {
+      return /* @__PURE__ */ jsx5(LocalModelContext.Provider, {
         value: {
           dataStorage: localContext.dataStorage,
           client: parentContext.client,
@@ -231,14 +406,14 @@ var reactModel = (arcContext, databaseName) => {
       }, undefined, false, undefined, this);
     },
     function useQuery(queryBuilderFn, dependencies = []) {
-      const context = useContext(LocalModelContext) || useContext(LiveModelContext);
+      const context = useContext2(LocalModelContext) || useContext2(LiveModelContext);
       if (!context) {
         throw new Error("useQuery must be used within a ModelProvider");
       }
-      const [result, setResult] = useState(null);
-      const [loading, setLoading] = useState(true);
+      const [result, setResult] = useState2(null);
+      const [loading, setLoading] = useState2(true);
       const queryRef = useRef(null);
-      useEffect(() => {
+      useEffect2(() => {
         if (queryRef.current)
           queryRef.current.unsubscribe();
         const queryBuilder = arcContext.queryBuilder();
@@ -261,7 +436,7 @@ var reactModel = (arcContext, databaseName) => {
       return [result, loading];
     },
     function useCommands() {
-      const context = useContext(LocalModelContext) || useContext(LiveModelContext);
+      const context = useContext2(LocalModelContext) || useContext2(LiveModelContext);
       if (!context) {
         throw new Error("useQuery must be used within a ModelProvider");
       }
@@ -278,7 +453,7 @@ var reactModel = (arcContext, databaseName) => {
       return result;
     },
     function useLocalDataStorage() {
-      const context = useContext(LocalModelContext);
+      const context = useContext2(LocalModelContext);
       if (!context) {
         return null;
       }
@@ -287,9 +462,16 @@ var reactModel = (arcContext, databaseName) => {
   ];
 };
 export {
+  useFormField,
   reactModel,
   idbAdapterFactory,
-  formResolver
+  formResolver,
+  Test,
+  FormMessage,
+  FormFieldContext,
+  FormField,
+  FormContext,
+  Form
 };
 
-//# debugId=EB0E8168D4E98EF264756E2164756E21
+//# debugId=1DDD66A12E066C4464756E2164756E21

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "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.",