@companix/formkit 0.0.4 → 0.0.6

package/README.md

@@ -1,26 +1,39 @@
-// generics
+## Create form primitives
 
-// implements form
-
-const SelectForm = (name: string, x: any) => {}
-const InputForm = (name: string, x: any) => {}
+```tsx
+const SelectForm = (name: string) => {
+  // select form code
+}
+const InputForm = (name: string) => {
+  // input form code
+}
+```
 
-// implements layout
+## Create layouts
 
-const Label = (v: any) => {
-  return (x: any) => {}
-}
+```tsx
+export const Label = createLayout((label: React.ReactNode) => {
+  return ({ children }) => {
+    return <FormGroup label={label}>{children}</FormGroup>
+  }
+})
 
-const Double = () => {
-  return (...x: void[]) => {
-    // x.
+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" />
+  }
+})
+```
 
-// scheme
+## Create a scheme
 
+```ts
 const scheme = [
   Label('Имя')(
     SelectForm('name', {
@@ -42,3 +55,4 @@ const scheme = [
     )
   )
 ]
+```

package/dist/SchemeBuilder.d.ts

@@ -2,6 +2,6 @@ import { SchemeItems } from './core/types';
 export interface SchemeBuilderProps {
     scheme: SchemeItems.All[];
     path: string[];
+    className?: string;
 }
-declare const SchemeBuilder: ({ scheme, path }: SchemeBuilderProps) => import("react/jsx-runtime").JSX.Element;
-export { SchemeBuilder };
+export declare const SchemeBuilder: ({ scheme, path, className }: SchemeBuilderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es.js

@@ -1,26 +1,26 @@
-import { jsx as g, Fragment as q, jsxs as T } from "react/jsx-runtime";
-import { createContext as N, useState as R, useContext as L, useEffect as D, useMemo as A, useCallback as S, useRef as P } from "react";
-import w from "fast-deep-equal";
-const j = N({}), M = (o) => {
-  const [, r] = R([]), e = L(j), s = e.getForm(o);
+import { jsx as h, Fragment as B, jsxs as T } from "react/jsx-runtime";
+import { createContext as N, useState as q, useContext as L, useEffect as D, useMemo as A, useCallback as S, useRef as P } from "react";
+import R from "fast-deep-equal";
+const j = N({}), M = (s) => {
+  const [, r] = q([]), o = L(j), t = o.getForm(s);
   return D(() => {
-    const { unsubscribe: t } = e.subscribeToForm(o, () => {
+    const { unsubscribe: e } = o.subscribeToForm(s, () => {
       r([]);
     });
     return () => {
-      t();
+      e();
     };
-  }, []), s?.value;
-}, _ = ({ canActivate: o, name: r, children: e }) => {
-  const s = M(r);
-  return o(s) ? /* @__PURE__ */ g(q, { children: e }) : null;
-}, z = ({ item: { Form: o }, name: r }) => {
-  const [, e] = R([]), s = L(j), { unregistry: t } = A(() => s.registry(r, () => {
-    e([]);
+  }, []), t?.value;
+}, _ = ({ canActivate: s, name: r, children: o }) => {
+  const t = M(r);
+  return s(t) ? /* @__PURE__ */ h(B, { children: o }) : null;
+}, z = ({ item: { Form: s }, name: r }) => {
+  const [, o] = q([]), t = L(j), { unregistry: e } = A(() => t.registry(r, () => {
+    o([]);
   }), []), l = S(
     (d) => {
       if (d && d.focus) {
-        const v = s.getForm(r);
+        const v = t.getForm(r);
         v.focus = () => {
           d.focus();
         };
@@ -29,16 +29,16 @@ const j = N({}), M = (o) => {
     [r]
   );
   D(() => () => {
-    t();
+    e();
   }, []);
-  const { value: y, error: b } = s.getForm(r);
-  return /* @__PURE__ */ g(
-    o,
+  const { value: y, error: b } = t.getForm(r);
+  return /* @__PURE__ */ h(
+    s,
     {
       field: {
         value: y,
         onChange: (d) => {
-          s.onChange(r, d);
+          t.onChange(r, d);
         },
         onBlur: () => {
         },
@@ -46,24 +46,24 @@ const j = N({}), M = (o) => {
       },
       isDirty: !1,
       error: b,
-      disabled: s.disabled
+      disabled: t.disabled
     }
   );
-}, G = ({ item: o, path: r }) => {
-  const { getController: e, items: s } = o, t = L(j), l = A(() => {
+}, G = ({ item: s, path: r }) => {
+  const { getController: o, items: t } = s, e = L(j), l = A(() => {
     const i = {};
-    return s.forEach(({ name: f, getForm: F }) => {
+    return t.forEach(({ name: f, getForm: F }) => {
       i[f] = F(f, () => x(f));
     }), i;
   }, []), y = S(() => {
     const i = [];
-    return s.forEach(({ name: f }) => {
-      t.getForm([...r, f].join(".")).value !== void 0 && i.push(f);
+    return t.forEach(({ name: f }) => {
+      e.getForm([...r, f].join(".")).value !== void 0 && i.push(f);
     }), i;
-  }, []), b = A(() => y(), []), [d, v] = R(b);
+  }, []), b = A(() => y(), []), [d, v] = q(b);
   D(() => {
-    const { unregistry: i } = t.registryExtraForm(
-      s.map(({ name: f }) => [...r, f].join(".")),
+    const { unregistry: i } = e.registryExtraForm(
+      t.map(({ name: f }) => [...r, f].join(".")),
       () => {
         v(y());
       }
@@ -80,92 +80,92 @@ const j = N({}), M = (o) => {
   ), x = S((i) => {
     v((f) => f.filter((F) => F !== i));
   }, []);
-  return /* @__PURE__ */ T(q, { children: [
+  return /* @__PURE__ */ T(B, { children: [
     d.map((i) => {
       const f = l[i];
-      return /* @__PURE__ */ g(V, { path: r, scheme: [f] }, `param-form--${i}`);
+      return /* @__PURE__ */ h(V, { path: r, scheme: [f] }, `param-form--${i}`);
     }),
-    e(C, d)
+    o(C, d)
   ] });
-}, V = ({ scheme: o, path: r }) => /* @__PURE__ */ g(q, { children: o.map((e, s) => e.type === "layout" ? /* @__PURE__ */ g(e.Layout, { children: /* @__PURE__ */ g(V, { path: r, scheme: e.childs }) }, `layout-form--${s}-${r.length}`) : e.type === "context" ? /* @__PURE__ */ g(
+}, 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, e.context],
-    scheme: e.childs
+    path: [...r, t.context],
+    scheme: t.childs
   },
-  `context-form--${s}-${e.context}-${r.length}`
-) : e.type === "condition" ? /* @__PURE__ */ g(
+  `context-form--${e}-${t.context}-${r.length}`
+) : t.type === "condition" ? /* @__PURE__ */ h(
   _,
   {
-    name: e.depended,
-    canActivate: e.canActivate,
-    children: /* @__PURE__ */ g(V, { path: r, scheme: e.childs })
+    name: t.depended,
+    canActivate: t.canActivate,
+    children: /* @__PURE__ */ h(V, { path: r, scheme: t.childs })
   },
-  `condition--${s}-${e.depended}-${r.length}`
-) : e.type === "extra" ? /* @__PURE__ */ g(G, { path: r, item: e }, `partial-item--${s}-${r.length}`) : /* @__PURE__ */ g(
+  `condition--${e}-${t.depended}-${r.length}`
+) : t.type === "extra" ? /* @__PURE__ */ h(G, { path: r, item: t }, `partial-item--${e}-${r.length}`) : /* @__PURE__ */ h(
   z,
   {
-    name: [...r, e.name].join("."),
-    item: e
+    name: [...r, t.name].join("."),
+    item: t
   },
-  `form-item--${s}-${e.name}-${r.length}`
-)) }), m = (o, r, e, s) => {
-  o.forEach((t) => {
-    if (t.type === "form" && s(t, [...r, t.name].join("."), e[t.name]), t.type === "context") {
-      m(t.childs, [...r, t.context], e[t.context] ?? {}, s);
+  `form-item--${e}-${t.name}-${r.length}`
+)) }), m = (s, r, o, t) => {
+  s.forEach((e) => {
+    if (e.type === "form" && t(e, [...r, e.name].join("."), o[e.name]), e.type === "context") {
+      m(e.childs, [...r, e.context], o[e.context] ?? {}, t);
       return;
     }
-    if (t.type === "layout" || t.type === "condition") {
-      m(t.childs, r, e, s);
+    if (e.type === "layout" || e.type === "condition") {
+      m(e.childs, r, o, t);
       return;
     }
-    t.type === "extra" && t.items.forEach(({ getForm: l, name: y }) => {
+    e.type === "extra" && e.items.forEach(({ getForm: l, name: y }) => {
       m([l(y, () => {
-      })], r, e, s);
+      })], r, o, t);
     });
   });
-}, E = ({ scheme: o, values: r, path: e, forms: s }) => {
-  o.forEach((t) => {
-    if (t.type === "form") {
-      const l = [...e, t.name].join(".");
-      s[l].value !== void 0 && (r[t.name] = s[l].value);
+}, 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 (t.type === "context") {
-      r[t.context] = {}, E({
-        scheme: t.childs,
-        path: [...e, t.context],
-        values: r[t.context],
-        forms: s
+    if (e.type === "context") {
+      r[e.context] = {}, E({
+        scheme: e.childs,
+        path: [...o, e.context],
+        values: r[e.context],
+        forms: t
       });
       return;
     }
-    if (t.type === "layout") {
-      E({ scheme: t.childs, path: e, values: r, forms: s });
+    if (e.type === "layout") {
+      E({ scheme: e.childs, path: o, values: r, forms: t });
       return;
     }
-    if (t.type === "condition") {
-      const l = s[t.depended]?.value;
-      if (t.canActivate(l)) {
-        E({ scheme: t.childs, path: e, values: r, forms: s });
+    if (e.type === "condition") {
+      const l = t[e.depended]?.value;
+      if (e.canActivate(l)) {
+        E({ scheme: e.childs, path: o, values: r, forms: t });
         return;
       }
     }
-    t.type === "extra" && t.items.forEach(({ getForm: l, name: y }) => {
+    e.type === "extra" && e.items.forEach(({ getForm: l, name: y }) => {
       E({ scheme: [l(y, () => {
-      })], path: e, values: r, forms: s });
+      })], path: o, values: r, forms: t });
     });
   });
-}, B = (o, r) => {
-  const e = {};
-  return E({ scheme: o, path: [], values: e, forms: r }), e;
-}, H = (o, r) => {
-  const { onSubmit: e, onEqual: s, disabled: t, onDirty: l, onFormDirty: y, onChangeEvent: b, defaultValues: d } = r;
+}, w = (s, r) => {
+  const o = {};
+  return E({ scheme: s, path: [], values: o, forms: r }), o;
+}, H = (s, 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: {}
   };
-  m(o, [], d ?? {}, (n, c, u) => {
+  m(s, [], d ?? {}, (n, c, u) => {
     i[c] = {
       error: null,
       isDirty: !1,
@@ -182,7 +182,8 @@ const j = N({}), M = (o) => {
     l?.({ name: n, isDirty: c }), c && x === 0 && y?.(!0), !c && x === 1 && y?.(!1), x += c ? 1 : -1;
   };
   return {
-    disabled: t,
+    scheme: s,
+    disabled: e,
     activate() {
       v = !0;
     },
@@ -205,32 +206,32 @@ const j = N({}), M = (o) => {
       u && u.value !== c && this.onChange(n, c);
     },
     getValues() {
-      return B(o, i);
+      return w(s, i);
     },
     async handleSubmit() {
-      if (t)
+      if (e)
         return;
       C = !0;
       let n = !1, c = !1;
       for (const u in i) {
         const a = i[u];
         if (a.value !== void 0) {
-          const h = a.validate(a.value);
-          h && (c = !0, a.error = h, 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) {
         if (x === 0) {
-          s?.();
+          t?.();
           return;
         }
-        const u = B(o, i);
-        await e(u, {
-          setError: (a, h) => {
+        const u = w(s, i);
+        await o(u, {
+          setError: (a, g) => {
             const p = this.getForm(a);
             p.error = {
               error: !0,
-              messages: [h.message]
+              messages: [g.message]
             }, p.rerender();
           }
         });
@@ -238,14 +239,14 @@ const j = N({}), M = (o) => {
     },
     reset(n) {
       const c = [];
-      m(o, [], n, (u, a, h) => {
-        if (h === 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] && h === void 0) {
-          c.push(a), i[a].value = h;
+        if (f.names[a] && g === void 0) {
+          c.push(a), i[a].value = g;
           return;
         }
-        const p = h ?? u.defaultValue;
+        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();
@@ -257,7 +258,7 @@ const j = N({}), M = (o) => {
           if (i[n].rerender = () => {
           }, i[n].focus = void 0, v) {
             i[n].value = void 0;
-            const u = !w(i[n].defaultValue, i[n].initValue);
+            const u = !R(i[n].defaultValue, i[n].initValue);
             i[n].isDirty !== u && F(n, u), i[n].isDirty = u;
           }
         }
@@ -270,7 +271,7 @@ const j = N({}), M = (o) => {
       const u = { callback: c }, a = this.getForm(n);
       return a.subscribers.push(u), {
         unsubscribe: () => {
-          a.subscribers = a.subscribers.filter((h) => h !== u);
+          a.subscribers = a.subscribers.filter((g) => g !== u);
         }
       };
     },
@@ -285,110 +286,111 @@ const j = N({}), M = (o) => {
       };
     },
     onChange(n, c) {
-      const u = this.getForm(n), a = !w(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: h }) => {
-        h();
+      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: g }) => {
+        g();
       });
     }
   };
-}, U = (o, r) => {
-  const e = P(null);
-  e.current === null && (e.current = H(o, r));
-  const s = e.current;
+}, Q = (s, r) => {
+  const o = P(null);
+  o.current === null && (o.current = H(s, r));
+  const t = o.current;
   return {
-    useValue: (t) => M(t),
-    reset: (t) => {
-      s.reset(t);
+    useValue: (e) => M(e),
+    reset: (e) => {
+      t.reset(e);
     },
-    setFocus: (t) => {
-      s.setFocus(t);
+    setFocus: (e) => {
+      t.setFocus(e);
     },
-    setError: (t, l) => {
-      s.setError(t, l);
+    setError: (e, l) => {
+      t.setError(e, l);
     },
-    setValue: (t, l) => {
-      s.setValue(t, l);
+    setValue: (e, l) => {
+      t.setValue(e, l);
     },
-    getValues: () => s.getValues(),
+    getValues: () => t.getValues(),
     handleSubmit: async () => {
-      await s.handleSubmit();
+      await t.handleSubmit();
     },
-    Form: /* @__PURE__ */ g(J, { manager: s, scheme: o })
+    manager: t
   };
-}, J = ({ manager: o, scheme: r }) => (A(() => {
-  o.activate();
+}, U = ({ manager: s, className: r }) => (A(() => {
+  s.activate();
 }, []), D(() => () => {
-  o.disactivate();
-}, []), /* @__PURE__ */ g(j.Provider, { value: o, children: /* @__PURE__ */ g(V, { scheme: r, path: [] }) })), $ = (o) => {
+  s.disactivate();
+}, []), /* @__PURE__ */ h(j.Provider, { value: s, children: /* @__PURE__ */ h(V, { className: r, scheme: s.scheme, path: [] }) })), $ = (s) => {
   try {
-    o();
+    s();
   } catch (r) {
     return r && typeof r == "string" ? {
       error: !0,
       messages: [r]
-    } : r instanceof Array && r.every((e) => e && typeof e == "string") ? {
+    } : r instanceof Array && r.every((o) => o && typeof o == "string") ? {
       error: !0,
       messages: r
     } : {
       error: !0
     };
   }
-}, W = (o) => (r, e) => {
-  const s = o.getRequireCheck(e), { validate: t, required: l } = e.$rules ?? {};
+}, W = (s) => (r, o) => {
+  const t = s.getRequireCheck(o), { validate: e, required: l } = o.$rules ?? {};
   return {
     type: "form",
     name: r,
-    defaultValue: o.defaultValue,
-    Form: o.getForm(e),
+    defaultValue: s.defaultValue,
+    Form: s.getForm(o),
     validate: (y) => {
       if (l) {
-        const b = $(() => s(y));
+        const b = $(() => t(y));
         if (b)
           return b;
-        if (t) {
-          const d = $(() => t(y));
+        if (e) {
+          const d = $(() => e(y));
           if (d)
             return d;
         }
         return;
       }
-      if (t && !$(() => s(y))) {
-        const d = $(() => t(y));
+      if (e && !$(() => t(y))) {
+        const d = $(() => e(y));
         if (d)
           return d;
       }
     }
   };
-}, X = (o) => (r) => (...e) => ({
+}, X = (s) => (r) => (...o) => ({
   type: "layout",
-  Layout: o(r),
-  childs: e
+  Layout: s(r),
+  childs: o
 }), Y = ({
-  getItems: o,
+  getItems: s,
   getController: r
 }) => ({
   type: "extra",
-  items: o((e) => (s) => ({
+  items: s((o) => (t) => ({
     type: "registry",
-    name: e,
-    getForm: s
+    name: o,
+    getForm: t
   })),
   getController: r
-}), Z = (o) => (...r) => ({
+}), Z = (s) => (...r) => ({
   type: "context",
-  context: o,
+  context: s,
   childs: r
-}), k = (o, r) => (...e) => ({
+}), k = (s, r) => (...o) => ({
   type: "condition",
-  depended: o,
+  depended: s,
   canActivate: r.canActivate,
-  childs: e
+  childs: o
 });
 export {
   k as Condition,
   Z as Context,
+  U as FormLayout,
   Y as createExtraForm,
   W as createForm,
   X as createLayout,
-  U as useForm
+  Q as useForm
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export { useForm } from './useForm';
+export { useForm, FormLayout } from './useForm';
 export { createForm } from './core/builders/create-form';
 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

@@ -1,5 +1,6 @@
 import { ExtractValues, ExtractFlatValues } from './core/extract';
 import { SchemeItems } from './core/types';
+import { FormManager } from './manager/manager';
 import { DeepPartial, FieldValues } from './types';
 export type Copy<T> = {
     [K in keyof T]: T[K];
@@ -44,7 +45,7 @@ declare const useDynamicForm: (scheme: SchemeItems.All[], opts: MainOptions<Fiel
         [x: string]: any;
     };
     handleSubmit: () => Promise<void>;
-    Form: import("react/jsx-runtime").JSX.Element;
+    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];
@@ -56,6 +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>;
-    Form: import("react/jsx-runtime").JSX.Element;
+    manager: FormManager<FlattenValues, Cloned>;
 };
+interface Props {
+    className?: string;
+    manager: FormManager<any, any>;
+}
+export declare const FormLayout: ({ manager, className }: Props) => import("react/jsx-runtime").JSX.Element;
 export { useForm, useDynamicForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/formkit",
-  "version": "0.0.04",
+  "version": "0.0.06",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",