@bariskuran/base 0.0.0-stage → 0.0.1

package/src/libs/baseForm/tools/getField.js

@@ -0,0 +1,22 @@
+import { byPath } from "../../byPath";
+
+export const getField = ({ get, name, parents = [] }) => {
+    if (!get || !name) return undefined;
+
+    const state = get();
+    if (!state) return undefined;
+
+    let path = "fields";
+
+    if (Array.isArray(parents) && parents.length > 0) {
+        for (let i = 0; i < parents.length; i++) {
+            const p = parents[i];
+            if (!p) continue;
+            path += `.${p}.children`;
+        }
+    }
+
+    path += `.${name}`;
+
+    return byPath.get(state, path);
+};

package/src/libs/baseForm/tools/getPath.js

@@ -0,0 +1,16 @@
+export const getPath = ({ parents = [], name }) => {
+    let path = "fields";
+
+    if (Array.isArray(parents) && parents.length > 0) {
+        for (let i = 0; i < parents.length; i++) {
+            const p = parents[i];
+            if (!p) continue;
+            path += `.${p}.children`;
+        }
+    }
+
+    path += `.${name}`;
+    path = path?.startsWith("fields.") ? path : `fields.${path}`;
+
+    return path;
+};

package/src/libs/baseForm/tools/mountForm.js

@@ -0,0 +1,64 @@
+import { setField } from "./setField";
+import { getField } from "./getField";
+import { setFields } from "./setFields";
+import { unmountForm } from "./unmountForm";
+import { mountItem } from "./mountItem";
+import { unmountItem } from "./unmountItem";
+import { submitForm } from "./submitForm";
+import { resetToDefaults } from "./resetToDefaults";
+import { resetToLastSubmit } from "./resetToLastSubmit";
+import { clearForm } from "./clearForm";
+import { validateForm } from "./validateForm";
+import { generateRandom } from "../../generateRandom";
+
+export const mountForm = ({ store, formProps }) => {
+    const { get, set } = store;
+    const { formName = generateRandom.text(16) } = formProps || {};
+
+    const currState = get() || {};
+    if (currState.isFormMounted) return;
+
+    set({
+        ...formProps,
+
+
+        fields: {},
+        values: {},
+        groupFields: {},
+
+
+        setField: (args) => setField({ set, get, ...args }),
+        getField: (args) => getField({ set, get, ...args }),
+        setFields: (args) => setFields({ set, get, ...args }),
+
+
+        unmountForm: () => unmountForm({ set }),
+        mountItem: (args) => mountItem({ set, get, ...args }),
+        unmountItem: (args) => unmountItem({ set, get, ...args }),
+
+
+        submitForm: (args) => submitForm({ set, get, ...args }),
+        resetToDefaults: (args) => resetToDefaults({ set, get, ...args }),
+        resetToLastSubmit: (args) => resetToLastSubmit({ set, get, ...args }),
+        clearForm: (args) => clearForm({ set, get, ...args }),
+
+
+        validateForm: () => validateForm({ set, get }),
+
+
+        isFormMounted: true,
+        areFieldsMounted: false,
+        _mountPulse: 0,
+        _mountFlushScheduled: false,
+        isValid: false,
+        isTouched: false,
+        isDirty: false,
+        isSubmitting: false,
+
+
+        errorFields: [],
+        errorFieldLabels: [],
+    });
+
+    return true;
+};

package/src/libs/baseForm/tools/mountItem.js

@@ -0,0 +1,180 @@
+import { getPath } from "./getPath";
+import { byPath } from "../../byPath";
+import { validateField } from "./validateField";
+
+const isGroupByProps = ({ Component, children } = {}) => !Component && children != null;
+
+const ensureBaseShape = (node, name, label) => {
+    node.name ??= name;
+    node.label ??= label || null;
+    node.count ??= 1;
+    node.errors ??= [];
+    node.isTouched ??= false;
+    node.isDirty ??= false;
+    node.isValid ??= true;
+    node.isReady ??= true;
+    node.isMainItem ??= false;
+};
+
+const normalizeGroup = (node) => {
+    node.isGroup = true;
+    node.children ??= {};
+
+
+
+
+
+
+
+
+
+
+
+};
+
+const normalizeLeaf = (node, { defaultValue, deriveValue }) => {
+    node.isGroup = false;
+    if ("children" in node) delete node.children;
+
+    const v1 = defaultValue ?? null;
+    const v = deriveValue
+        ? deriveValue({
+              value: v1,
+          })
+        : v1;
+
+    node.defaultValue ??= v;
+    node.value ??= v;
+    node.previousValue ??= node.value;
+    node.lastSubmittedValue ??= node.value;
+    if ("lastSubmitValue" in node) {
+        node.lastSubmittedValue ??= node.lastSubmitValue;
+        delete node.lastSubmitValue;
+    }
+};
+
+let mountFlushQueued = false;
+
+export const scheduleMountFlush = ({ get, set }) => {
+    if (mountFlushQueued) return;
+    mountFlushQueued = true;
+
+    queueMicrotask(() => {
+        mountFlushQueued = false;
+
+        const snap1 = get();
+        const pulse1 = snap1._mountPulse || 0;
+
+        queueMicrotask(() => {
+            const snap2 = get();
+            const pulse2 = snap2._mountPulse || 0;
+
+            if (pulse2 === pulse1) {
+                set((s) => {
+                    s.areFieldsMounted = true;
+                    s._mountFlushScheduled = false;
+                });
+            } else {
+                scheduleMountFlush({ get, set });
+            }
+        });
+    });
+};
+
+const toPlain = (v) => {
+    try {
+        return structuredClone(v);
+    } catch {
+        return JSON.parse(JSON.stringify(v));
+    }
+};
+
+export const mountItem = ({ set, get, itemProps, parents = [], validateForm }) => {
+    const { name, defaultValue, children, Component, label, deriveValue } = itemProps || {};
+    if (!set || !get || !name) return;
+
+    const isGroup = isGroupByProps({ Component, children });
+    const isHighestLevel = parents.length === 0;
+
+    const path = getPath({ parents, name });
+    const currentItem = byPath.get(get(), path) || {};
+
+    if (currentItem?.isReady) {
+        set((s) => {
+            const node = byPath.get(s, path);
+            if (!node) return;
+
+            node.count = (node.count || 1) + 1;
+
+
+
+
+
+        });
+
+        return;
+    }
+
+    set((s) => {
+        const existing = byPath.get(s, path);
+        const existingChildren = existing?.children;
+
+        const node = {};
+        ensureBaseShape(node, name, label);
+
+        if (isGroup) {
+            normalizeGroup(node);
+            if (existingChildren && typeof existingChildren === "object") {
+                node.children = toPlain(existingChildren);
+            }
+        } else {
+            normalizeLeaf(node, { defaultValue, deriveValue });
+        }
+
+        if (node.isGroup && deriveValue) {
+            const childrenValues = {};
+            Object.entries(node.children).forEach(([childKey, childValue]) => {
+                childrenValues[childKey] = childValue.value;
+            });
+            const v = deriveValue({
+                name,
+                childrenValues,
+            });
+
+            node.value = v;
+            node.previousValue = v;
+            node.lastSubmittedValue = v;
+        }
+
+        const [errors, isDirty, isValidGlobal] = validateField({
+            value: node.value,
+            validationRules: itemProps.validationRules,
+            field: node,
+        });
+
+        node.errors = errors;
+        node.isDirty = isDirty;
+        node.isValid = isValidGlobal;
+
+        byPath.set(s, path, node, true);
+
+        if (isHighestLevel) {
+            s.values ??= {};
+            const v = node.value ?? defaultValue ?? null;
+
+            if (!(name in s.values)) {
+                s.values[name] = v;
+            }
+            const nodeRef = byPath.get(s, path);
+            if (nodeRef) nodeRef.isMainItem = true;
+        }
+
+        s.areFieldsMounted = false;
+        s._mountPulse = (s._mountPulse || 0) + 1;
+        if (!s._mountFlushScheduled) s._mountFlushScheduled = true;
+    });
+
+    scheduleMountFlush({ get, set });
+
+    validateForm();
+};

package/src/libs/baseForm/tools/resetToDefaults.js

@@ -0,0 +1 @@
+export const resetToDefaults = ({ set, name, value, isGroupField }) => {};

package/src/libs/baseForm/tools/resetToLastSubmit.js

@@ -0,0 +1 @@
+export const resetToLastSubmit = ({ set, name, value, isGroupField }) => {};

package/src/libs/baseForm/tools/setField.js

@@ -0,0 +1,39 @@
+import { byPath } from "../../byPath";
+import { validateField } from "./validateField";
+
+export const setField = ({ set, path, changes, isMainItem, name, validationRules, field }) => {
+    if (!set || !path || !changes || typeof changes !== "object") return;
+
+    const hasValue = Object.prototype.hasOwnProperty.call(changes, "value");
+
+    const result = set((s) => {
+        if (hasValue) {
+            const [errors, isDirty, isValid, isTouched] = validateField({
+                value: changes.value,
+                validationRules,
+                field,
+            });
+
+            const previousValue = byPath.get(s, `${path}.value`);
+            if (previousValue === changes.value) return;
+
+            byPath.set(s, `${path}.previousValue`, previousValue, true);
+            byPath.set(s, `${path}.isTouched`, isTouched, true);
+            byPath.set(s, `${path}.errors`, errors, true);
+            byPath.set(s, `${path}.isDirty`, isDirty, true);
+            byPath.set(s, `${path}.isValid`, isValid, true);
+
+            if (isMainItem) {
+                s.values ??= {};
+                s.values[name] = changes.value;
+            }
+        }
+
+        for (const key in changes) {
+            if (!Object.prototype.hasOwnProperty.call(changes, key)) continue;
+            byPath.set(s, `${path}.${key}`, changes[key], true);
+        }
+    });
+
+    return result;
+};

package/src/libs/baseForm/tools/setFields.js

@@ -0,0 +1 @@
+export const setFields = ({ set, name, value, isGroupField }) => {};

package/src/libs/baseForm/tools/submitForm.js

@@ -0,0 +1 @@
+export const submitForm = ({ set, name, value, isGroupField }) => {};

package/src/libs/baseForm/tools/unmountForm.js

@@ -0,0 +1,3 @@
+export const unmountForm = ({ set }) => {
+    set({});
+};

package/src/libs/baseForm/tools/unmountItem.js

@@ -0,0 +1 @@
+export const unmountItem = ({ set, name, value, validateForm }) => {};

package/src/libs/baseForm/tools/useDefineStore.js

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { baseStore } from "../../baseStore";
+
+export const useDefineStore = (props) => {
+    const { store } = props || {};
+    const isExternal = !!store;
+
+
+    const { set: setFromLocal, localStore: storeLocal, ...stateLocal } = baseStore.useLocal();
+
+
+    const safeExternalStore = store || storeLocal;
+    const { set: setFromUse, ...stateUse } = baseStore.use(safeExternalStore);
+
+
+    return useMemo(() => {
+        const state = isExternal ? stateUse : stateLocal;
+        const set = isExternal ? setFromUse : setFromLocal;
+        const activeStore = isExternal ? store : storeLocal;
+
+        return {
+            ...(state || {}),
+            set,
+            store: activeStore,
+        };
+    }, [isExternal, stateUse, stateLocal, setFromUse, setFromLocal, store, storeLocal]);
+};

package/src/libs/baseForm/tools/useHelper.js

@@ -0,0 +1,80 @@
+import { useMemo } from "react";
+import { baseStore } from "../../baseStore";
+import { DefaultHelper } from "../DefaultHelper";
+import { cleanFalsyValues } from "../../cleanFalsyValues";
+
+const Passthrough = ({ children }) => children ?? null;
+
+export const useHelper = ({
+    storeFile,
+    field = {},
+    itemProps: {
+        helperMode: helperModeFromItem,
+        HelperComponent: HelperComponentFromItem,
+        label,
+        componentName,
+        onKeyEnter,
+        onKeyDown,
+        onKeyUp,
+        onMouseEnter,
+        onMouseLeave,
+        prefix,
+        suffix,
+        disabled,
+        hidden,
+        description,
+        tooltip,
+        variant,
+        flexColumn,
+
+        children,
+
+        ...rest
+    } = {},
+}) => {
+    const [baseFormSettings] = baseStore.useGlobal((s) => [s._baseFormSettings]);
+    const { helperMode: helperModeGlobal = "auto", HelperComponent: HelperComponentGlobal } =
+        baseFormSettings || {};
+
+    const helperProps = useMemo(() => {
+        const helperMode = helperModeFromItem ?? helperModeGlobal ?? "auto";
+
+        const shouldUseHelper =
+            helperMode === "enabled"
+                ? true
+                : helperMode === "disabled"
+                  ? false
+                  : !!field?.isMainItem;
+
+        return cleanFalsyValues(
+            {
+                helperMode,
+                shouldUseHelper,
+                storeFile,
+                name: field.name,
+                field,
+                label,
+                componentName,
+                prefix,
+                suffix,
+                disabled,
+                hidden,
+                description,
+                tooltip,
+                flexColumn,
+                rest,
+            },
+            { only: ["undefined"] },
+        );
+    }, [label, prefix, suffix, disabled, hidden, description, tooltip, variant, field]);
+
+
+
+
+    const HelperComponent = HelperComponentFromItem || HelperComponentGlobal || DefaultHelper;
+
+    return {
+        HelperComponent,
+        helperProps,
+    };
+};

package/src/libs/baseForm/tools/validateField.js

@@ -0,0 +1,74 @@
+import { isDeepEqual } from "../../isDeepEqual";
+import { baseStore } from "../../baseStore";
+
+export const validateField = ({ value, validationRules = [], field }) => {
+    const { language, _validationRules } = baseStore.globalData.get();
+    const errors = [];
+
+
+
+
+    const childrenObj =
+        field?.children && typeof field.children === "object" ? field.children : null;
+    const childList = childrenObj ? Object.values(childrenObj) : [];
+
+    let isDirty = childList.some((child) => child && child.isDirty === true);
+    let isTouched = childList.some((child) => child && child.isTouched === true);
+    let isValidGlobal = !childList.some((child) => child && child.isValid === false);
+
+    if (childList.length > 0) {
+        childList.forEach((child) => {
+            if (!child) return;
+
+            const childErrors = Array.isArray(child.errors) ? child.errors : [];
+            if (childErrors.length < 1) return;
+
+            childErrors.forEach((err) => {
+                if (!err) return;
+
+                const title = child?.label || child?.name || "Field";
+                const text = String(err);
+
+                const alreadyPrefixed = text.trim().startsWith("[");
+                errors.push(alreadyPrefixed ? `[${title}].${text}` : `[${title}]: ${text}`);
+            });
+        });
+    }
+
+
+
+
+    if (!Array.isArray(validationRules) || validationRules.length < 1) {
+        return [errors, isDirty, isValidGlobal, isTouched];
+    }
+
+
+
+
+    validationRules.forEach((rule) => {
+        const ruleFunction = _validationRules?.[rule];
+
+        if (typeof ruleFunction !== "function") {
+            throw new Error(`Validation rule "${rule}" is not defined.`);
+        }
+
+        const res = ruleFunction({ value, field });
+        const [isValid, msg] = Array.isArray(res) ? res : [true, ""];
+
+        if (!isValid) {
+            const message =
+                typeof msg === "string" ? msg : msg && typeof msg === "object" ? msg[language] : "";
+            if (message) errors.push(message);
+            isValidGlobal = false;
+        }
+    });
+
+
+
+
+    const selfDirty = !isDeepEqual(value, field?.defaultValue);
+    isDirty = isDirty || selfDirty;
+    isTouched = true;
+
+    return [errors, isDirty, isValidGlobal, isTouched];
+};

package/src/libs/baseForm/tools/validateForm.js

@@ -0,0 +1,20 @@
+import { debouncedFunction } from "../../debouncedFunction";
+
+export const validateForm = debouncedFunction(
+    ({ set, get }) => {
+        const state = get();
+        const { fields, values } = state;
+
+        console.log(
+            "validateForm",
+
+        );
+    },
+    {
+        delay: 500,
+        isThrottle: false,
+        getFirst: false,
+        functionName: "validateForm",
+    },
+);
+

package/src/libs/baseForm/useBaseForm.jsx

@@ -0,0 +1,65 @@
+import { useEffect, useMemo } from "react";
+import { BaseForm as BaseFormOriginal } from "./BaseForm";
+import { BaseFormItem as BaseFormItemOriginal } from "./BaseFormItem";
+import { useDefineStore } from "./tools/useDefineStore";
+import { mountForm } from "./tools/mountForm";
+import { unmountForm } from "./tools/unmountForm";
+import { inputComponents } from "./inputComponents";
+
+export const useBaseForm = ({ store: storeFile, ...formProps }) => {
+    const { store, ...state } = useDefineStore({ store: storeFile });
+
+
+    useEffect(() => {
+        mountForm({ store, formProps });
+        return () => unmountForm({ set: store.set });
+    }, []);
+
+
+    const [BaseForm, BaseFormItem] = useMemo(() => {
+        const BoundBaseForm = (p) => <BaseFormOriginal {...p} storeFile={store} />;
+
+        const BoundBaseFormItem = Object.assign(
+            (p) => <BaseFormItemOriginal {...p} storeFile={store} />,
+            Object.fromEntries(
+                Object.entries(inputComponents).map(([key, config]) => [
+                    key,
+                    (p) => (
+                        <BaseFormItemOriginal
+                            {...p}
+                            storeFile={store}
+                            inputComponentProps={{ name: key, ...config }}
+                        />
+                    ),
+                ]),
+            ),
+        );
+
+        return [BoundBaseForm, BoundBaseFormItem];
+    }, [store]);
+
+    const EmptyBaseFormItem = useMemo(
+        () =>
+            Object.assign(
+                () => null,
+                Object.fromEntries(Object.keys(inputComponents).map((key) => [key, () => null])),
+            ),
+        [],
+    );
+
+
+    if (!state?.isFormMounted) {
+        return {
+            BaseForm: () => null,
+            BaseFormItem: EmptyBaseFormItem,
+            BaseFormGroup: EmptyBaseFormItem,
+        };
+    }
+    return {
+        ...state,
+        storeFile: store,
+        BaseForm,
+        BaseFormItem,
+        BaseFormGroup: BaseFormItem,
+    };
+};