@companix/formkit 0.0.1

package/README.md

@@ -0,0 +1,44 @@
+// generics
+
+// implements form
+
+const SelectForm = (name: string, x: any) => {}
+const InputForm = (name: string, x: any) => {}
+
+// implements layout
+
+const Label = (v: any) => {
+  return (x: any) => {}
+}
+
+const Double = () => {
+  return (...x: void[]) => {
+    // x.
+  }
+}
+
+const Splitter = () => {}
+
+// scheme
+
+const scheme = [
+  Label('Имя')(
+    SelectForm('name', {
+      placeholder: 'Введите имя',
+      options: []
+    })
+  ),
+  Splitter(),
+  Double()(
+    Label('Фамилия')(
+      InputForm('surname', {
+        placeholder: 'Введите фамилию'
+      })
+    ),
+    Label('Отчество')(
+      InputForm('patronymic', {
+        placeholder: 'Введите отчество'
+      })
+    )
+  )
+]

package/dist/bundle.es.js

@@ -0,0 +1,394 @@
+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);
+  return D(() => {
+    const { unsubscribe: t } = e.subscribeToForm(o, () => {
+      r([]);
+    });
+    return () => {
+      t();
+    };
+  }, []), 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([]);
+  }), []), l = S(
+    (d) => {
+      if (d && d.focus) {
+        const v = s.getForm(r);
+        v.focus = () => {
+          d.focus();
+        };
+      }
+    },
+    [r]
+  );
+  D(() => () => {
+    t();
+  }, []);
+  const { value: y, error: b } = s.getForm(r);
+  return /* @__PURE__ */ g(
+    o,
+    {
+      field: {
+        value: y,
+        onChange: (d) => {
+          s.onChange(r, d);
+        },
+        onBlur: () => {
+        },
+        ref: l
+      },
+      isDirty: !1,
+      error: b,
+      disabled: s.disabled
+    }
+  );
+}, G = ({ item: o, path: r }) => {
+  const { getController: e, items: s } = o, t = L(j), l = A(() => {
+    const i = {};
+    return s.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);
+    }), i;
+  }, []), b = A(() => y(), []), [d, v] = R(b);
+  D(() => {
+    const { unregistry: i } = t.registryExtraForm(
+      s.map(({ name: f }) => [...r, f].join(".")),
+      () => {
+        v(y());
+      }
+    );
+    return () => {
+      i();
+    };
+  }, []);
+  const C = S(
+    (i) => {
+      l[i] && !d.includes(i) && v((f) => [...f, i]);
+    },
+    [d]
+  ), x = S((i) => {
+    v((f) => f.filter((F) => F !== i));
+  }, []);
+  return /* @__PURE__ */ T(q, { children: [
+    d.map((i) => {
+      const f = l[i];
+      return /* @__PURE__ */ g(V, { path: r, scheme: [f] }, `param-form--${i}`);
+    }),
+    e(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,
+  {
+    path: [...r, e.context],
+    scheme: e.childs
+  },
+  `context-form--${s}-${e.context}-${r.length}`
+) : e.type === "condition" ? /* @__PURE__ */ g(
+  _,
+  {
+    name: e.depended,
+    canActivate: e.canActivate,
+    children: /* @__PURE__ */ g(V, { path: r, scheme: e.childs })
+  },
+  `condition--${s}-${e.depended}-${r.length}`
+) : e.type === "extra" ? /* @__PURE__ */ g(G, { path: r, item: e }, `partial-item--${s}-${r.length}`) : /* @__PURE__ */ g(
+  z,
+  {
+    name: [...r, e.name].join("."),
+    item: e
+  },
+  `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);
+      return;
+    }
+    if (t.type === "layout" || t.type === "condition") {
+      m(t.childs, r, e, s);
+      return;
+    }
+    t.type === "extra" && t.items.forEach(({ getForm: l, name: y }) => {
+      m([l(y, () => {
+      })], r, e, s);
+    });
+  });
+}, 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);
+    }
+    if (t.type === "context") {
+      r[t.context] = {}, E({
+        scheme: t.childs,
+        path: [...e, t.context],
+        values: r[t.context],
+        forms: s
+      });
+      return;
+    }
+    if (t.type === "layout") {
+      E({ scheme: t.childs, path: e, values: r, forms: s });
+      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 });
+        return;
+      }
+    }
+    t.type === "extra" && t.items.forEach(({ getForm: l, name: y }) => {
+      E({ scheme: [l(y, () => {
+      })], path: e, values: r, forms: s });
+    });
+  });
+}, 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;
+  let v = !1, C = !1, x = 0;
+  const i = {}, f = {
+    subscribers: [],
+    names: {}
+  };
+  m(o, [], d ?? {}, (n, c, u) => {
+    i[c] = {
+      error: null,
+      isDirty: !1,
+      value: u,
+      initValue: u ?? n.defaultValue,
+      defaultValue: n.defaultValue,
+      rerender: () => {
+      },
+      subscribers: [],
+      validate: n.validate
+    };
+  });
+  const F = (n, c) => {
+    l?.({ name: n, isDirty: c }), c && x === 0 && y?.(!0), !c && x === 1 && y?.(!1), x += c ? 1 : -1;
+  };
+  return {
+    disabled: t,
+    activate() {
+      v = !0;
+    },
+    disactivate() {
+      v = !1;
+    },
+    setError(n, c) {
+      const u = this.getForm(n);
+      u && (u.error = {
+        error: !0,
+        messages: [c.message]
+      }, u.rerender());
+    },
+    setFocus(n) {
+      const c = this.getForm(n);
+      c && c.focus && c.focus();
+    },
+    setValue(n, c) {
+      const u = this.getForm(n);
+      u && u.value !== c && this.onChange(n, c);
+    },
+    getValues() {
+      return B(o, i);
+    },
+    async handleSubmit() {
+      if (t)
+        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));
+        }
+      }
+      if (!c) {
+        if (x === 0) {
+          s?.();
+          return;
+        }
+        const u = B(o, i);
+        await e(u, {
+          setError: (a, h) => {
+            const p = this.getForm(a);
+            p.error = {
+              error: !0,
+              messages: [h.message]
+            }, p.rerender();
+          }
+        });
+      }
+    },
+    reset(n) {
+      const c = [];
+      m(o, [], n, (u, a, h) => {
+        if (h === void 0 && i[a].value === void 0)
+          return;
+        if (f.names[a] && h === void 0) {
+          c.push(a), i[a].value = h;
+          return;
+        }
+        const p = h ?? 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();
+      });
+    },
+    registry(n, c) {
+      return i[n].rerender = c, i[n].value === void 0 && (i[n].value = i[n].defaultValue), {
+        unregistry() {
+          if (i[n].rerender = () => {
+          }, i[n].focus = void 0, v) {
+            i[n].value = void 0;
+            const u = !w(i[n].defaultValue, i[n].initValue);
+            i[n].isDirty !== u && F(n, u), i[n].isDirty = u;
+          }
+        }
+      };
+    },
+    getForm(n) {
+      return i[n];
+    },
+    subscribeToForm(n, c) {
+      const u = { callback: c }, a = this.getForm(n);
+      return a.subscribers.push(u), {
+        unsubscribe: () => {
+          a.subscribers = a.subscribers.filter((h) => h !== u);
+        }
+      };
+    },
+    registryExtraForm(n, c) {
+      const u = { callback: c };
+      return n.forEach((a) => {
+        f.names[a] = !0;
+      }), f.subscribers.push(u), {
+        unregistry() {
+          f.subscribers = f.subscribers.filter((a) => a !== u);
+        }
+      };
+    },
+    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();
+      });
+    }
+  };
+}, U = (o, r) => {
+  const e = P(null);
+  e.current === null && (e.current = H(o, r));
+  const s = e.current;
+  return {
+    useValue: (t) => M(t),
+    reset: (t) => {
+      s.reset(t);
+    },
+    setFocus: (t) => {
+      s.setFocus(t);
+    },
+    setError: (t, l) => {
+      s.setError(t, l);
+    },
+    setValue: (t, l) => {
+      s.setValue(t, l);
+    },
+    getValues: () => s.getValues(),
+    handleSubmit: async () => {
+      await s.handleSubmit();
+    },
+    Form: /* @__PURE__ */ g(J, { manager: s, scheme: o })
+  };
+}, J = ({ manager: o, scheme: r }) => (A(() => {
+  o.activate();
+}, []), D(() => () => {
+  o.disactivate();
+}, []), /* @__PURE__ */ g(j.Provider, { value: o, children: /* @__PURE__ */ g(V, { scheme: r, path: [] }) })), $ = (o) => {
+  try {
+    o();
+  } catch (r) {
+    return r && typeof r == "string" ? {
+      error: !0,
+      messages: [r]
+    } : r instanceof Array && r.every((e) => e && typeof e == "string") ? {
+      error: !0,
+      messages: r
+    } : {
+      error: !0
+    };
+  }
+}, W = (o) => (r, e) => {
+  const s = o.getRequireCheck(e), { validate: t, required: l } = e.$rules ?? {};
+  return {
+    type: "form",
+    name: r,
+    defaultValue: o.defaultValue,
+    Form: o.getForm(e),
+    validate: (y) => {
+      if (l) {
+        const b = $(() => s(y));
+        if (b)
+          return b;
+        if (t) {
+          const d = $(() => t(y));
+          if (d)
+            return d;
+        }
+        return;
+      }
+      if (t && !$(() => s(y))) {
+        const d = $(() => t(y));
+        if (d)
+          return d;
+      }
+    }
+  };
+}, X = (o) => (r) => (...e) => ({
+  type: "layout",
+  Layout: o(r),
+  childs: e
+}), Y = ({
+  getItems: o,
+  getController: r
+}) => ({
+  type: "extra",
+  items: o((e) => (s) => ({
+    type: "registry",
+    name: e,
+    getForm: s
+  })),
+  getController: r
+}), Z = (o) => (...r) => ({
+  type: "context",
+  context: o,
+  childs: r
+}), k = (o, r) => (...e) => ({
+  type: "condition",
+  depended: o,
+  canActivate: r.canActivate,
+  childs: e
+});
+export {
+  k as Condition,
+  Z as Context,
+  Y as createExtraForm,
+  W as createForm,
+  X as createLayout,
+  U as useForm
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@companix/formkit",
+  "version": "0.0.01",
+  "module": "./dist/bundle.es.js",
+  "types": "./src/index.ts",
+  "type": "module",
+  "author": "Pavel Victorov",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "echo": "echo \"form-scheme\"",
+    "dev": "vite --config vite.config.ts",
+    "build": "vite build --config vite.build.ts"
+  },
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-eslint": "^9.0.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-webpack-plugin": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "sass": "^1.96.0",
+    "sass-embedded": "^1.96.0",
+    "vite": "^7.0.0",
+    "vite-plugin-checker": "^0.9.3"
+  }
+}