@companix/formkit 0.0.5 → 0.0.6

package/README.md

@@ -1,27 +1,37 @@
 ## Create form primitives
 
 ```tsx
-const SelectForm = (name: string, x: any) => {}
-const InputForm = (name: string, x: any) => {}
+const SelectForm = (name: string) => {
+  // select form code
+}
+const InputForm = (name: string) => {
+  // input form code
+}
 ```
 
 ## Create layouts
 
 ```tsx
-const Label = ({ name }) => {
-  return ({ children }) => <div></div>
-}
+export const Label = createLayout((label: React.ReactNode) => {
+  return ({ children }) => {
+    return <FormGroup label={label}>{children}</FormGroup>
+  }
+})
 
-const Double = () => {
-  return () => {
-    return <>{children}</>
+export const Double = createLayout(() => {
+  return ({ children }) => {
+    return <div className="form-double-primitive">{children}</div>
   }
-}
+})
 
-const Splitter = () => {}
+export const Splitter = createLayout(() => {
+  return () => {
+    return <div className="form-splitter" />
+  }
+})
 ```
 
-## Define a scheme
+## Create a scheme
 
 ```ts
 const scheme = [

package/dist/bundle.es.js

@@ -31,12 +31,12 @@ const j = N({}), M = (s) => {
   D(() => () => {
     e();
   }, []);
-  const { value: g, error: b } = t.getForm(r);
+  const { value: y, error: b } = t.getForm(r);
   return /* @__PURE__ */ h(
     s,
     {
       field: {
-        value: g,
+        value: y,
         onChange: (d) => {
           t.onChange(r, d);
         },
@@ -55,17 +55,17 @@ const j = N({}), M = (s) => {
     return t.forEach(({ name: f, getForm: F }) => {
       i[f] = F(f, () => x(f));
     }), i;
-  }, []), g = S(() => {
+  }, []), y = S(() => {
     const i = [];
     return t.forEach(({ name: f }) => {
       e.getForm([...r, f].join(".")).value !== void 0 && i.push(f);
     }), i;
-  }, []), b = A(() => g(), []), [d, v] = q(b);
+  }, []), b = A(() => y(), []), [d, v] = q(b);
   D(() => {
     const { unregistry: i } = e.registryExtraForm(
       t.map(({ name: f }) => [...r, f].join(".")),
       () => {
-        v(g());
+        v(y());
       }
     );
     return () => {
@@ -83,12 +83,12 @@ const j = N({}), M = (s) => {
   return /* @__PURE__ */ T(B, { children: [
     d.map((i) => {
       const f = l[i];
-      return /* @__PURE__ */ h(E, { path: r, scheme: [f] }, `param-form--${i}`);
+      return /* @__PURE__ */ h(V, { path: r, scheme: [f] }, `param-form--${i}`);
     }),
     o(C, d)
   ] });
-}, E = ({ scheme: s, path: r, className: o }) => /* @__PURE__ */ h("div", { className: o, children: s.map((t, e) => t.type === "layout" ? /* @__PURE__ */ h(t.Layout, { children: /* @__PURE__ */ h(E, { path: r, scheme: t.childs }) }, `layout-form--${e}-${r.length}`) : t.type === "context" ? /* @__PURE__ */ h(
-  E,
+}, V = ({ scheme: s, path: r, className: o }) => /* @__PURE__ */ h("div", { className: o, children: s.map((t, e) => t.type === "layout" ? /* @__PURE__ */ h(t.Layout, { children: /* @__PURE__ */ h(V, { path: r, scheme: t.childs }) }, `layout-form--${e}-${r.length}`) : t.type === "context" ? /* @__PURE__ */ h(
+  V,
   {
     path: [...r, t.context],
     scheme: t.childs
@@ -99,7 +99,7 @@ const j = N({}), M = (s) => {
   {
     name: t.depended,
     canActivate: t.canActivate,
-    children: /* @__PURE__ */ h(E, { path: r, scheme: t.childs })
+    children: /* @__PURE__ */ h(V, { path: r, scheme: t.childs })
   },
   `condition--${e}-${t.depended}-${r.length}`
 ) : t.type === "extra" ? /* @__PURE__ */ h(G, { path: r, item: t }, `partial-item--${e}-${r.length}`) : /* @__PURE__ */ h(
@@ -109,29 +109,29 @@ const j = N({}), M = (s) => {
     item: t
   },
   `form-item--${e}-${t.name}-${r.length}`
-)) }), V = (s, r, o, t) => {
+)) }), m = (s, r, o, t) => {
   s.forEach((e) => {
     if (e.type === "form" && t(e, [...r, e.name].join("."), o[e.name]), e.type === "context") {
-      V(e.childs, [...r, e.context], o[e.context] ?? {}, t);
+      m(e.childs, [...r, e.context], o[e.context] ?? {}, t);
       return;
     }
     if (e.type === "layout" || e.type === "condition") {
-      V(e.childs, r, o, t);
+      m(e.childs, r, o, t);
       return;
     }
-    e.type === "extra" && e.items.forEach(({ getForm: l, name: g }) => {
-      V([l(g, () => {
+    e.type === "extra" && e.items.forEach(({ getForm: l, name: y }) => {
+      m([l(y, () => {
       })], r, o, t);
     });
   });
-}, p = ({ scheme: s, values: r, path: o, forms: t }) => {
+}, E = ({ scheme: s, values: r, path: o, forms: t }) => {
   s.forEach((e) => {
     if (e.type === "form") {
       const l = [...o, e.name].join(".");
       t[l].value !== void 0 && (r[e.name] = t[l].value);
     }
     if (e.type === "context") {
-      r[e.context] = {}, p({
+      r[e.context] = {}, E({
         scheme: e.childs,
         path: [...o, e.context],
         values: r[e.context],
@@ -140,32 +140,32 @@ const j = N({}), M = (s) => {
       return;
     }
     if (e.type === "layout") {
-      p({ scheme: e.childs, path: o, values: r, forms: t });
+      E({ scheme: e.childs, path: o, values: r, forms: t });
       return;
     }
     if (e.type === "condition") {
       const l = t[e.depended]?.value;
       if (e.canActivate(l)) {
-        p({ scheme: e.childs, path: o, values: r, forms: t });
+        E({ scheme: e.childs, path: o, values: r, forms: t });
         return;
       }
     }
-    e.type === "extra" && e.items.forEach(({ getForm: l, name: g }) => {
-      p({ scheme: [l(g, () => {
+    e.type === "extra" && e.items.forEach(({ getForm: l, name: y }) => {
+      E({ scheme: [l(y, () => {
       })], path: o, values: r, forms: t });
     });
   });
 }, w = (s, r) => {
   const o = {};
-  return p({ scheme: s, path: [], values: o, forms: r }), o;
+  return E({ scheme: s, path: [], values: o, forms: r }), o;
 }, H = (s, r) => {
-  const { onSubmit: o, onEqual: t, disabled: e, onDirty: l, onFormDirty: g, onChangeEvent: b, defaultValues: d } = r;
+  const { onSubmit: o, onEqual: t, disabled: e, onDirty: l, onFormDirty: y, onChangeEvent: b, defaultValues: d } = r;
   let v = !1, C = !1, x = 0;
   const i = {}, f = {
     subscribers: [],
     names: {}
   };
-  V(s, [], d ?? {}, (n, c, u) => {
+  m(s, [], d ?? {}, (n, c, u) => {
     i[c] = {
       error: null,
       isDirty: !1,
@@ -179,9 +179,10 @@ const j = N({}), M = (s) => {
     };
   });
   const F = (n, c) => {
-    l?.({ name: n, isDirty: c }), c && x === 0 && g?.(!0), !c && x === 1 && g?.(!1), x += c ? 1 : -1;
+    l?.({ name: n, isDirty: c }), c && x === 0 && y?.(!0), !c && x === 1 && y?.(!1), x += c ? 1 : -1;
   };
   return {
+    scheme: s,
     disabled: e,
     activate() {
       v = !0;
@@ -215,8 +216,8 @@ const j = N({}), M = (s) => {
       for (const u in i) {
         const a = i[u];
         if (a.value !== void 0) {
-          const y = a.validate(a.value);
-          y && (c = !0, a.error = y, a.rerender(), !n && a.focus && (a.focus(), n = !0));
+          const g = a.validate(a.value);
+          g && (c = !0, a.error = g, a.rerender(), !n && a.focus && (a.focus(), n = !0));
         }
       }
       if (!c) {
@@ -226,27 +227,27 @@ const j = N({}), M = (s) => {
         }
         const u = w(s, i);
         await o(u, {
-          setError: (a, y) => {
-            const m = this.getForm(a);
-            m.error = {
+          setError: (a, g) => {
+            const p = this.getForm(a);
+            p.error = {
               error: !0,
-              messages: [y.message]
-            }, m.rerender();
+              messages: [g.message]
+            }, p.rerender();
           }
         });
       }
     },
     reset(n) {
       const c = [];
-      V(s, [], n, (u, a, y) => {
-        if (y === void 0 && i[a].value === void 0)
+      m(s, [], n, (u, a, g) => {
+        if (g === void 0 && i[a].value === void 0)
           return;
-        if (f.names[a] && y === void 0) {
-          c.push(a), i[a].value = y;
+        if (f.names[a] && g === void 0) {
+          c.push(a), i[a].value = g;
           return;
         }
-        const m = y ?? u.defaultValue;
-        i[a].value !== m && (c.push(a), this.onChange(a, m));
+        const p = g ?? u.defaultValue;
+        i[a].value !== p && (c.push(a), this.onChange(a, p));
       }), c.some((u) => f.names[u]) && f.subscribers.forEach(({ callback: u }) => {
         u();
       });
@@ -270,7 +271,7 @@ const j = N({}), M = (s) => {
       const u = { callback: c }, a = this.getForm(n);
       return a.subscribers.push(u), {
         unsubscribe: () => {
-          a.subscribers = a.subscribers.filter((y) => y !== u);
+          a.subscribers = a.subscribers.filter((g) => g !== u);
         }
       };
     },
@@ -286,8 +287,8 @@ const j = N({}), M = (s) => {
     },
     onChange(n, c) {
       const u = this.getForm(n), a = !R(c, u.initValue);
-      u.isDirty !== a && F(n, a), u.isDirty = a, b?.({ name: n, value: c }), (u.error || C) && (u.error = u.validate(c) || null), u.value = c, u.rerender(), u.subscribers.forEach(({ callback: y }) => {
-        y();
+      u.isDirty !== a && F(n, a), u.isDirty = a, b?.({ name: n, value: c }), (u.error || C) && (u.error = u.validate(c) || null), u.value = c, u.rerender(), u.subscribers.forEach(({ callback: g }) => {
+        g();
       });
     }
   };
@@ -313,13 +314,13 @@ const j = N({}), M = (s) => {
     handleSubmit: async () => {
       await t.handleSubmit();
     },
-    control: { manager: t, scheme: s }
+    manager: t
   };
-}, U = ({ control: s, className: r }) => (A(() => {
-  s.manager.activate();
+}, U = ({ manager: s, className: r }) => (A(() => {
+  s.activate();
 }, []), D(() => () => {
-  s.manager.disactivate();
-}, []), /* @__PURE__ */ h(j.Provider, { value: s.manager, children: /* @__PURE__ */ h(E, { className: r, scheme: s.scheme, path: [] }) })), $ = (s) => {
+  s.disactivate();
+}, []), /* @__PURE__ */ h(j.Provider, { value: s, children: /* @__PURE__ */ h(V, { className: r, scheme: s.scheme, path: [] }) })), $ = (s) => {
   try {
     s();
   } catch (r) {
@@ -340,20 +341,20 @@ const j = N({}), M = (s) => {
     name: r,
     defaultValue: s.defaultValue,
     Form: s.getForm(o),
-    validate: (g) => {
+    validate: (y) => {
       if (l) {
-        const b = $(() => t(g));
+        const b = $(() => t(y));
         if (b)
           return b;
         if (e) {
-          const d = $(() => e(g));
+          const d = $(() => e(y));
           if (d)
             return d;
         }
         return;
       }
-      if (e && !$(() => t(g))) {
-        const d = $(() => e(g));
+      if (e && !$(() => t(y))) {
+        const d = $(() => e(y));
         if (d)
           return d;
       }

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { createLayout } from './core/builders/create-layout';
 export { createExtraForm } from './core/builders/create-extra-form';
 export { Condition, Context } from './core/builders/syntax';
 export type { FieldError } from './core/types';
+export type { FormManager } from './manager/manager';

package/dist/manager/manager.d.ts

@@ -18,6 +18,7 @@ export interface Forms {
     [name: string]: FormItem;
 }
 export interface FormManager<FlattenValues, ClonedValues> {
+    scheme: SchemeItems.All[];
     disabled?: boolean;
     activate: () => void;
     disactivate: () => void;

package/dist/useForm.d.ts

@@ -45,10 +45,7 @@ declare const useDynamicForm: (scheme: SchemeItems.All[], opts: MainOptions<Fiel
         [x: string]: any;
     };
     handleSubmit: () => Promise<void>;
-    control: {
-        manager: FormManager<FieldValues, FieldValues>;
-        scheme: [];
-    };
+    manager: FormManager<FieldValues, FieldValues>;
 };
 declare const useForm: <Items extends SchemeItems.All[], Values extends ExtractValues<Items[number]>, FlattenValues extends ExtractFlatValues<Items[number]>, Cloned extends Copy<Values>>(scheme: Items, opts: MainOptions<Values, FlattenValues, Cloned>) => {
     useValue: <K extends keyof FlattenValues>(name: K) => FlattenValues[K];
@@ -60,17 +57,11 @@ declare const useForm: <Items extends SchemeItems.All[], Values extends ExtractV
     setValue: <K extends keyof FlattenValues>(name: K, value: FlattenValues[K]) => void;
     getValues: () => DeepPartial<Cloned>;
     handleSubmit: () => Promise<void>;
-    control: {
-        manager: FormManager<FlattenValues, Cloned>;
-        scheme: Items;
-    };
+    manager: FormManager<FlattenValues, Cloned>;
 };
 interface Props {
     className?: string;
-    control: {
-        manager: FormManager<any, any>;
-        scheme: SchemeItems.All[];
-    };
+    manager: FormManager<any, any>;
 }
-export declare const FormLayout: ({ control, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FormLayout: ({ manager, className }: Props) => import("react/jsx-runtime").JSX.Element;
 export { useForm, useDynamicForm };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@companix/formkit",
-  "version": "0.0.05",
+  "version": "0.0.06",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",
-  "author": "Pavel Victorov.",
+  "author": "Pavel Victorov",
   "files": [
     "dist"
   ],