@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/baseForm/BaseFormItem.jsx

@@ -0,0 +1,284 @@
+import { useContext, useMemo, createContext, useEffect } from "react";
+import { useHelper } from "./tools/useHelper.js";
+import { baseStore } from "../baseStore";
+import { byPath } from "../byPath";
+import { getPath } from "./tools/getPath";
+import { debouncedFunction } from "../debouncedFunction";
+import { validateField } from "./tools/validateField";
+import { inputComponents } from "./inputComponents";
+
+export const GroupContext = createContext(false);
+
+export const BaseFormItem = (itemProps = {}) => {
+    const {
+        parent,
+        parents = [],
+        parentHandleNewValue,
+        parentOnFocus,
+        parentOnBlur,
+        parentOnKeyDown,
+        parentOnKeyUp,
+        parentOnPaste,
+        parentOnMouseEnter,
+        parentOnMouseLeave,
+        parentOnDropdownStatusChange,
+    } = useContext(GroupContext);
+    const {
+        storeFile,
+        name,
+        deactivate,
+        children,
+        onChange,
+        deriveValue,
+        validationRules,
+        onFocus,
+        onBlur,
+        onKeyEnter,
+        onKeyDown,
+        onKeyUp,
+        onPaste,
+        inputComponentProps,
+        onClear,
+        onMouseEnter,
+        onMouseLeave,
+        onDropdownStatusChange,
+        prefix,
+        suffix,
+    } = itemProps || {};
+    const path = useMemo(() => getPath({ parents, name }), [parents, name]);
+    const [fields, field, setField, mountItem, unmountItem, validateForm] = baseStore.use(
+        storeFile,
+        (s) => [
+            s.fields,
+            byPath.get(s, path),
+            s.setField,
+            s.mountItem,
+            s.unmountItem,
+            s.validateForm,
+        ],
+    );
+    const { HelperComponent, helperProps } = useHelper({ storeFile, field, itemProps });
+    const { value, isMainItem } = field || {};
+
+
+    const { isFocused, isBlured, set } = baseStore.useLocal({});
+
+    useEffect(() => {
+        if (!deactivate) mountItem({ itemProps, parents, validateForm });
+        else unmountItem({ itemProps, parents, validateForm });
+        return () => unmountItem({ itemProps, parents, validateForm });
+    }, [deactivate]);
+
+
+
+    const generateHandlerPack = (p = {}) => {
+        const { newState, incomingValue } = p;
+        const newField = newState ? byPath.get(newState, path) : field;
+
+        const childrenValues = newField?.children
+            ? Object.entries(newField?.children).reduce((acc, [childKey, childObj]) => {
+                  acc[childKey] = childObj?.value;
+                  return acc;
+              }, {})
+            : {};
+
+        const childrenPreviousValues = newField?.children
+            ? Object.entries(newField?.children).reduce((acc, [childKey, childObj]) => {
+                  acc[childKey] = childObj?.previousValue;
+                  return acc;
+              }, {})
+            : {};
+
+        const obj = {
+            name,
+            field: newField,
+            fields,
+            setField,
+            path,
+            previousValue: value,
+            value: incomingValue ?? value,
+            isMainItem,
+            parent,
+            childrenValues,
+            childrenPreviousValues,
+            validationRules,
+        };
+        return obj;
+    };
+
+    const handleNewValue = (incomingValue, newState) => {
+        const cleanValue = inputComponents[inputComponentProps?.name]?.defaultValue;
+        if (incomingValue === cleanValue && onClear) {
+            onClear?.({ ...generateHandlerPack() });
+        }
+        const pack = generateHandlerPack({ newState, incomingValue });
+        if (deriveValue) {
+            pack.value = deriveValue?.(pack);
+            pack.previousValue =
+                deriveValue?.({ ...pack, value, childrenValues: pack.childrenPreviousValues }) ||
+                value;
+        }
+
+        pack.childrenValues = { ...pack.childrenValues, [name]: pack.value };
+
+
+
+        const newState2 = storeFile.set((s) => {
+            if (value === incomingValue) return;
+
+            byPath.set(s, `${path}.value`, pack.value, true);
+            byPath.set(s, `${path}.previousValue`, pack.previousValue, true);
+
+            if (field.isMainItem) {
+                s.values[name] = pack.value;
+            }
+        });
+
+        if (parent?.name && parentHandleNewValue) {
+            if (field?.value === undefined) {
+                throw new Error(
+                    `deriveValue for group "${name}" returned undefined. Did you forget return?`,
+                );
+            }
+            parentHandleNewValue(undefined, newState2);
+        }
+
+        if (onChange) onChange(pack);
+
+        const debunced = debouncedFunction(
+            () => {
+                console.log("validate ", name);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            },
+            { isThrottle: false, delay: 500, functionName: `debunced-${name}` },
+        );
+        debunced();
+    };
+
+
+    const handleOnFocus = (e) => {
+        onFocus?.({ ...generateHandlerPack(), event: e });
+        parentOnFocus?.(e);
+        set((s) => {
+            s.isFocused = true;
+            s.isBlured = false;
+        });
+    };
+    const handleOnBlur = (e) => {
+        onBlur?.({ ...generateHandlerPack(), event: e });
+        parentOnBlur?.(e);
+        set((s) => {
+            s.isFocused = false;
+            s.isBlured = true;
+        });
+    };
+    const handleOnKeyDown = (e) => {
+        parentOnKeyDown?.(e);
+        if (e.key === "Enter") {
+            onKeyEnter?.({ ...generateHandlerPack(), event: e });
+        } else {
+            onKeyDown?.({ ...generateHandlerPack(), event: e });
+        }
+    };
+    const handleOnKeyUp = (e) => {
+        onKeyUp?.({ ...generateHandlerPack(), event: e });
+        parentOnKeyUp?.(e);
+    };
+    const handleOnPaste = (e) => {
+        onPaste?.({ ...generateHandlerPack(), event: e });
+        parentOnPaste?.(e);
+    };
+    const handleOnMouseEnter = (e) => {
+        onMouseEnter?.({ ...generateHandlerPack(), event: e });
+        parentOnMouseEnter?.(e);
+    };
+    const handleOnMouseLeave = (e) => {
+        onMouseLeave?.({ ...generateHandlerPack(), event: e });
+        parentOnMouseLeave?.(e);
+    };
+    const handleOnDropdownStatusChange = () => {
+        onDropdownStatusChange?.({ ...generateHandlerPack() });
+        parentOnDropdownStatusChange?.();
+    };
+
+
+    const ComponentStructure = inputComponentProps?.Component && (
+        <inputComponentProps.Component
+            {...{
+                value,
+                onChange: handleNewValue,
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onKeyDown: handleOnKeyDown,
+                onKeyUp: handleOnKeyUp,
+                onPaste: handleOnPaste,
+                prefix,
+                suffix,
+
+                ...(inputComponentProps?.name === "dropdown"
+                    ? { onDropdownStatusChange: handleOnDropdownStatusChange }
+                    : {}),
+            }}
+        />
+    );
+
+
+    return (
+        <GroupContext.Provider
+            value={{
+                parent: field,
+                parents: [...parents, name],
+                parentHandleNewValue: handleNewValue,
+                parentOnFocus: handleOnFocus,
+                parentOnBlur: handleOnBlur,
+                parentOnKeyDown: handleOnKeyDown,
+                parentOnKeyUp: handleOnKeyUp,
+                parentOnPaste: handleOnPaste,
+                parentOnMouseEnter: handleOnMouseEnter,
+                parentOnMouseLeave: handleOnMouseLeave,
+                parentOnDropdownStatusChange: handleOnDropdownStatusChange,
+            }}
+        >
+            <div>
+                <HelperComponent
+                    {...{
+                        ...helperProps,
+                        isFocused,
+                        isBlured,
+                        handleOnMouseEnter,
+                        handleOnMouseLeave,
+                    }}
+                >
+                    {inputComponentProps?.Component
+                        ? ComponentStructure
+                        : children
+                          ? children
+                          : "Missing Component or children"}
+                </HelperComponent>
+            </div>
+        </GroupContext.Provider>
+    );
+};

package/src/libs/baseForm/BaseFormTest.jsx

@@ -0,0 +1,145 @@
+import { useEffect } from "react";
+import { useBaseForm } from "./";
+import { baseStore } from "../baseStore/";
+
+const store1 = baseStore.create();
+
+export const BaseFormTest = () => {
+    const { BaseForm, BaseFormGroup, BaseFormItem, values, fields } = useBaseForm({
+
+        store: store1,
+        getLabelsByGetText: false,
+    });
+
+    useEffect(() => {
+        console.log(values, fields);
+    }, [values, fields]);
+
+    return (
+        <>
+            <BaseForm>
+                <BaseFormGroup
+                    label="Full Name"
+                    name="fullName2"
+                    deriveValue={({ childrenValues }) => `Full Name: ${childrenValues.fullName}`}
+                >
+                    <BaseFormGroup
+                        label="Full Name"
+                        name="fullName"
+                        deriveValue={({ childrenValues }) =>
+                            childrenValues.firstName + " " + childrenValues.lastName
+                        }
+
+                    >
+                        <BaseFormGroup name="level2_a" placeholder="John">
+                            <BaseFormItem
+                                name="level3_a"
+                                componentName="input"
+                                defaultValue="333-222-444"
+                                onChange={({ values, subValues, _api }) =>
+                                    console.log("phone changed:", values, subValues, _api)
+                                }
+                                placeholder="555-555"
+                            />
+                        </BaseFormGroup>
+                        <BaseFormItem.textArea name="firstName" defaultValue="John" />
+                        <BaseFormItem.textArea
+                            name="lastName"
+                            label="label"
+                            defaultValue="Doe"
+                            deriveValue={({ value }) => (value ? value.toUpperCase() : "")}
+                            validationRules={["hasToBeFilled", "hasToBeAValidEmail"]}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            prefix={{
+                                icon: "user",
+                                onClick: (props) => console.log("click pre icon", props),
+                                href: "https://www.google.com",
+                            }}
+                            suffix={{
+                                icon: "eye",
+                                onClick: (props) => console.log("click suf icon", props),
+                            }}
+
+
+                            autoFocus={true}
+                            placeholder="test"
+                            description="description"
+                            tooltip="tooltip"
+                            variant="amedist1"
+                        />
+                    </BaseFormGroup>
+                </BaseFormGroup>
+                <BaseFormItem.textArea label="test2" name="test2" defaultValue="test2" />
+                <BaseFormItem.textArea label="test3" name="test3" defaultValue="test3" />
+                <BaseFormItem.textArea label="test4" name="test4" defaultValue="test4" />
+                <BaseFormItem
+                    name="level1_b"
+                    componentName="input"
+                    defaultValue="444-444-444"
+                    onChange={({ values, subValues, _api }) =>
+                        console.log("phone changed:", values, subValues, _api)
+                    }
+                />
+                <BaseFormItem
+                    label="anorherArea"
+                    name="level1_d"
+                    componentName="input"
+                    onChange={({ values, subValues, _api }) =>
+                        console.log("tel changed:", values, subValues, _api)
+                    }
+                    defaultValue="hebele"
+                />
+                <BaseFormItem
+                    label="anorherArea"
+                    name="level1_d"
+                    componentName="input"
+                    onChange={({ values, subValues, _api }) =>
+                        console.log("tel changed:", values, subValues, _api)
+                    }
+                    defaultValue="hebele"
+                />
+            </BaseForm>
+            <SecondForm />
+        </>
+    );
+};
+
+const SecondForm = () => {
+    const { BaseForm, BaseFormItem } = useBaseForm({
+
+        store: store1,
+        getLabelsByGetText: true,
+    });
+
+    /* Return */
+    return (
+        <BaseForm>
+            <div>
+                {}
+                <BaseFormItem
+                    label="anorherArea"
+                    name="level1_d"
+                    componentName="input"
+                    onChange={({ values, subValues, _api }) =>
+                        console.log("tel changed:", values, subValues, _api)
+                    }
+                    defaultValue="hebele"
+                />
+            </div>
+        </BaseForm>
+    );
+};

package/src/libs/baseForm/DefaultHelper/index.jsx

@@ -0,0 +1,125 @@
+import styled, { css } from "styled-components";
+import { Icon } from "../../Icon";
+import { Visibility } from "../../Visibility";
+
+const S = {
+    container: styled.div`
+        width: 100%;
+        position: relative;
+        display: flex;
+        transition: all 0.3s ease;
+        border-radius: 5rem;
+
+        ${({ theme, $isMainItem, $isFocused }) => {
+            const bg1 = $isMainItem ? theme.colorAlpha(theme.foreground, 0.05) : "transparent";
+            const bg2 = $isMainItem ? theme.colorAlpha(theme.foreground, 0.1) : "transparent";
+
+            return css`
+                background-color: ${$isFocused ? bg2 : bg1};
+
+                &:hover {
+                    background-color: ${bg2};
+                }
+            `;
+        }}
+
+        ${({ $disable }) =>
+            $disable &&
+            css`
+                opacity: 0.5;
+                pointer-events: none;
+            `}
+    `,
+    titleArea: styled.div`
+        position: relative;
+        display: flex;
+        gap: 5rem;
+        flex: 0 0 250rem;
+        padding: 20rem;
+    `,
+    contentArea: styled.div`
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: flex;
+        gap: 10rem;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        ${(p) =>
+            p.$flexColumn &&
+            css`
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-start;
+            `}
+    `,
+    actionArea: styled.div`
+        width: 100rem;
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10rem;
+    `,
+};
+
+export const DefaultHelper = ({ children, ...props }) => {
+    const {
+        flexColumn,
+        label,
+        labelIcon,
+        labelIconWidth,
+        name,
+        description,
+        shouldUseHelper,
+        field,
+        disabled,
+        hidden,
+        isFocused,
+
+        handleOnMouseEnter,
+        handleOnMouseLeave,
+    } = props || {};
+    const { isMainItem } = field || {};
+
+    /* Return */
+    return (
+        <Visibility
+            visible={!hidden}
+            content={
+                <S.container
+                    aria-label={`BaseFormItem_${name}`}
+                    $isMainItem={isMainItem}
+                    $disable={disabled}
+                    $isFocused={isFocused}
+                    onMouseEnter={handleOnMouseEnter}
+                    onMouseLeave={handleOnMouseLeave}
+                >
+                    {shouldUseHelper && (
+                        <S.titleArea aria-label="Title Area">
+                            {labelIcon && <Icon icon={labelIcon} width={labelIconWidth} />}
+                            {label}
+                            {description && (
+                                <Icon
+                                    icon="information"
+                                    width={labelIconWidth}
+                                    enablePopTip={true}
+                                    tooltipProps={{ title: description }}
+                                />
+                            )}
+                        </S.titleArea>
+                    )}
+                    <S.contentArea aria-label="Content Area" $flexColumn={flexColumn}>
+                        {children}
+                    </S.contentArea>
+                    {shouldUseHelper && (
+                        <S.actionArea aria-label="Action Area">actions</S.actionArea>
+                    )}
+                </S.container>
+            }
+        />
+    );
+};

package/src/libs/baseForm/_dS.jsx

@@ -0,0 +1,127 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { useBaseForm } from ".";
+import { baseStore } from "../baseStore";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { Button } from "../Button";
+import { formatJsonForDisplay } from "../DesignSystem/formatJsonForDisplay";
+
+const formStore = baseStore.create();
+
+const FormDemo = () => {
+    const { BaseForm, BaseFormItem, values, isValid, isDirty, submitForm, resetToDefaults } =
+        useBaseForm({
+            store: formStore,
+            formName: "dsDemoForm",
+        });
+
+    return (
+        <Flex.column gap={12} full maxWidth={420}>
+            <BaseForm>
+                <BaseFormItem.textArea
+                    name="email"
+                    label="Email"
+                    defaultValue=""
+                    placeholder="you@example.com"
+                    validationRules={["hasToBeFilled", "hasToBeAValidEmail"]}
+                />
+                <BaseFormItem.textArea
+                    name="note"
+                    label="Note"
+                    defaultValue=""
+                    placeholder="Optional message"
+                />
+            </BaseForm>
+            <Flex gap={8} wrap>
+                <Button.plain label="submitForm()" onClick={() => submitForm?.()} />
+                <Button.plain label="resetToDefaults()" onClick={() => resetToDefaults?.()} />
+            </Flex>
+            <Typo.span>{`isValid: ${String(isValid)} · isDirty: ${String(isDirty)}`}</Typo.span>
+            <Typo.code codeFormat={false}>{formatJsonForDisplay(values ?? {})}</Typo.code>
+        </Flex.column>
+    );
+};
+
+const X = () => (
+    <Ds.page
+        title="baseForm"
+        releasedOn="Beta"
+        description={
+            <>
+                Mounts a form store with <Typo.code>BaseForm</Typo.code>,{" "}
+                <Typo.code>BaseFormItem</Typo.code>, nested groups, validation, and submit helpers.
+                Global defaults merge from{" "}
+                <Typo.code>baseStore.globalData._baseFormSettings</Typo.code>.
+            </>
+        }
+    >
+        <Ds.block
+            title="Basic form"
+            description="Pass a baseStore.create() instance or omit store to use an internal local store. BaseFormItem.textArea and .dropdown shortcuts come from inputComponents."
+            code={`import { useBaseForm } from "${SYS.basePath}";
+                   import { baseStore } from "${SYS.basePath}";
+
+                       const store = baseStore.create();
+                       const { BaseForm, BaseFormItem, values, submitForm } = useBaseForm({ store });
+
+                       return (
+                       <BaseForm>
+                       <BaseFormItem.textArea name="email" label="Email" validationRules={["hasToBeFilled"]} />
+                       </BaseForm>
+                       );`}
+            example={<FormDemo />}
+        />
+        <Ds.api
+            args="const { BaseForm, BaseFormItem, BaseFormGroup, values, fields, submitForm, ...state } = useBaseForm({ store, ...formProps });"
+            props={{
+                store: {
+                    description: "Optional baseStore instance from baseStore.create().",
+                    type: "store",
+                },
+                formName: {
+                    description: "Stable form identifier stored on the form state.",
+                    type: "string",
+                },
+                getLabelsByGetText: {
+                    description: "When true, resolves labels through getText.",
+                    type: "boolean",
+                    defaultValue: "false",
+                },
+            }}
+            returnProps={{
+                BaseForm: { description: "Root form container.", type: "React component" },
+                BaseFormItem: {
+                    description: "Field wrapper with .textArea and .dropdown variants.",
+                    type: "React component",
+                },
+                BaseFormGroup: { description: "Alias of BaseFormItem for nested groups.", type: "React component" },
+                values: { description: "Current flattened field values.", type: "object" },
+                fields: { description: "Mounted field metadata map.", type: "object" },
+                submitForm: { description: "Validates and submits the form.", type: "fn" },
+                resetToDefaults: { description: "Resets values to defaults.", type: "fn" },
+                isValid: { description: "True when all validation rules pass.", type: "boolean" },
+                isDirty: { description: "True after any value change.", type: "boolean" },
+            }}
+        />
+        <Ds.api
+            title="BaseFormItem.textArea"
+            disableLastBlock
+            args="<BaseFormItem.textArea name label defaultValue validationRules onChange deriveValue />"
+            props={{
+                name: { description: "Field path segment.", type: "string", required: true },
+                label: { description: "Visible label.", type: "string" },
+                validationRules: {
+                    description: 'Rule names such as "hasToBeFilled", "hasToBeAValidEmail".',
+                    type: "string[]",
+                },
+                deriveValue: {
+                    description: "Optional ({ value, childrenValues }) => nextValue transform.",
+                    type: "fn",
+                },
+            }}
+        />
+    </Ds.page>
+);
+
+export default X;

package/src/libs/baseForm/index.js

@@ -0,0 +1 @@
+export { useBaseForm } from "./useBaseForm";

package/src/libs/baseForm/inputComponents/index.js

@@ -0,0 +1,7 @@
+import { TextArea, textAreaDefault } from "../../TextArea";
+import { Dropdown, dropdownDefault } from "../../Dropdown";
+
+export const inputComponents = {
+    textArea: { Component: TextArea, defaultValue: textAreaDefault },
+    dropdown: { Component: Dropdown, defaultValue: dropdownDefault },
+};

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

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