@engagebay/engagebay-form-module 1.0.0-beta.0

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -0,0 +1,203 @@
+import React, {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import { Listbox, ListboxButton } from "@headlessui/react";
+import { RegisterOptions } from "react-hook-form";
+
+import { FormContext } from "../context/FormContext";
+import { getListOption, getListOptions } from "../FormFieldUtils";
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+} from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {
+    renderListBoxValue,
+} from "../util/RenderListOptions";
+// import _ from "lodash";
+import axios from "axios";
+import { reachoAPI } from "../../api";
+
+const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+    const formContext = useContext(FormContext);
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+    const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+        []
+    );
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        if (
+            !formContext.getValues(props.fieldConfig.name) &&
+            props.fieldConfig.defaultValue
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
+        }
+        fetchData(undefined);
+    }, []);
+
+    const fetchData = useCallback(
+        async (_query: string | undefined) => {
+            setLoading(true);
+            try {
+                if (!props.fieldConfig.fetchUrl) return;
+
+                let url = props.fieldConfig.fetchUrl;
+                if (_query) {
+                    url = url.includes("?")
+                        ? url + "&q=" + _query
+                        : url + "?q=" + _query;
+                }
+
+                let response = await (props.fieldConfig.disableHeaderInFetch
+                    ? axios.get(url)
+                    : reachoAPI.get(url));
+                if (response.data) {
+                    const data: FieldOptionsSchema[] = getListOptions(
+                        response.data,
+                        props.fieldConfig.optionsConfig
+                    );
+                    setListOptions([...data]);
+                    let values = formContext.getValues(props.fieldConfig.name) || [];
+
+                    if (
+                        values.length > 0 && // Ensure 'values' is not empty
+                        (data.length === 0 || // If 'data' is empty
+                            !values.every((v: string) => data.some(i => i.value === v)) && // Ensure none of 'values' match 'data'
+                        !values.every((v: string) => selectedValues.some(i => i.value === v)) // Ensure none of 'values' match 'selectedValues'
+                    )) {
+                        fetchValue(values); // Call 'fetchValue()' if all conditions are met
+                    }
+
+                    if (props.fieldConfig.fetchCallback) {
+                        props.fieldConfig.fetchCallback(response);
+                    }
+                } else {
+                    console.error(response.statusText);
+                }
+            } catch (err) {
+            } finally {
+                setLoading(false);
+            }
+        },
+        [props.fieldConfig.fetchUrl]
+    );
+
+    const fetchValue = async (value: string) => {
+        try {
+            if (
+                props.fieldConfig.ignoreFetchValue ||
+                !props.fieldConfig.fetchUrl
+            ) {
+                return;
+            }
+
+            let url = props.fieldConfig.fetchUrl;
+
+            url = url = url.includes("?")
+                ? url + "&values=" + value
+                : url + "?values=" + value;
+
+            let response = await (props.fieldConfig.disableHeaderInFetch
+                ? axios.get(url)
+                : reachoAPI.get(url));
+            if (response.data) {
+                const data: FieldOptionsSchema[] = getListOptions(
+                    response.data,
+                    props.fieldConfig.optionsConfig
+                );
+                setSelectedValues([...data]);
+            }
+        } catch (err) { }
+    };
+
+    const updateListOptions = (data: any) => {
+        const resData: FieldOptionsSchema = getListOption(
+            data,
+            props.fieldConfig.optionsConfig
+        );
+        setSelectedValues((prev) => [...prev, resData]);
+        let result = formContext.getValues(props.fieldConfig.name) || [];
+        result = result.includes(resData.value) ? result.filter((v: string) => v != resData.value) : [...result, resData.value];
+        formContext.setValue(props.fieldConfig.name, result);
+    };
+
+    const getInput = () => {
+        return (
+            <Listbox
+                as={"div"}
+                {...hookProps}
+                value={formContext.getValues(props.fieldConfig.name) || []}
+                name={props.fieldConfig.name}
+                defaultValue={props.fieldConfig.defaultValue}
+                key={props.fieldConfig.name}
+                className={"relative form-listbox flex-1"}
+                onChange={(selectedOptions) => {
+                    const chossenOptions = listOptions.filter(op => selectedOptions.includes(op.value));
+                    setSelectedValues(prev => [...prev, ...chossenOptions])
+                    handleChange(
+                        selectedOptions,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    )
+                }
+                }
+                multiple>
+                <ListboxButton
+                    className={
+                        props.fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                            props.fieldConfig.customClassNames?.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                        formContext,
+                        props.fieldConfig,
+                        [...selectedValues, ...listOptions],
+                        props.onChange
+                    )}
+                </ListboxButton>
+                <RenderListOptions
+                    formContext={formContext}
+                    onChange={props.onChange}
+                    formField={FormFieldType.TYPEAHEAD_MULTI_SELECT}
+                    ref={dynamicSelectRef}
+                    fieldConfig={props.fieldConfig}
+                    listOptions={[...selectedValues, ...listOptions]}
+                    setListOptions={setListOptions}
+                    loading={loading}
+                    setLoading={setLoading}
+                    createCallback={(data) => updateListOptions(data)}
+                    queryCallback={(query) => fetchData(query)}
+                />
+            </Listbox>
+        );
+    };
+    if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+        return <></>;
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+export default TypeaheadMultiSelect;

package/src/form/formfields/UrlField.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Input } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+const UrlField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  /**
+   * Raw Form Field
+   */
+  const getInput = () => {
+    return (
+      <Input
+        {...hookProps}
+        type="url"
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
+        }`}
+        onKeyDown={(e) => {
+          props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+        }}
+        onChange={(e) => {
+          handleChange(
+            e.target.value,
+            formContext,
+            props.fieldConfig,
+            props.onChange
+          );
+        }}
+      />
+    );
+  };
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default UrlField;

package/src/form/hooks/useDynamicReducer.tsx

@@ -0,0 +1,42 @@
+import { useContext, useEffect } from "react";
+import { ReactReduxContext, useSelector } from "react-redux";
+import {
+  ReduceAndSagaSchema,
+  StoreStateSchema,
+} from "../schema/FormFieldSchema";
+
+interface useDymanicReducerProps {
+  reducerConfig: ReduceAndSagaSchema;
+}
+
+function useDymanicReducer<T>({ reducerConfig }: useDymanicReducerProps) {
+  let state = useSelector(
+    (state: any) =>
+      state[
+        reducerConfig.reduceName as typeof reducerConfig.reduceName
+      ] as any as StoreStateSchema<T>
+  );
+
+  const redux = useContext(ReactReduxContext);
+
+  let store = redux && (redux.store as any);
+
+  useEffect(() => {
+    if (!state) {
+      inject();
+    }
+  }, []);
+
+  const inject = () => {
+    store?.injectReducer?.({
+      [reducerConfig.reduceName]: reducerConfig.reducer,
+    });
+    store?.injectSaga?.(reducerConfig.reduceName, reducerConfig.saga);
+  };
+
+  return {
+    state: state as StoreStateSchema<T>,
+  };
+}
+
+export default useDymanicReducer;

package/src/form/schema/CustomValidators.ts

@@ -0,0 +1,63 @@
+
+export const emailIdsValidator = (value: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    const emailArray = value.split(',').filter(email => email.trim() !== '');
+
+    // Check for duplicate emails
+    const uniqueEmails = new Set<string>();
+    for (const email of emailArray) {
+        const trimmedEmail = email.trim();
+
+        // If any email is not valid, return an error message
+        if (!emailRegex.test(trimmedEmail)) {
+            return `Invalid email address: ${trimmedEmail}`;
+        }
+
+        // If the email is a duplicate, return an error message
+        if (uniqueEmails.has(trimmedEmail)) {
+            return `Duplicate email address: ${trimmedEmail}`;
+        }
+
+        uniqueEmails.add(trimmedEmail);
+    }
+    return undefined;
+
+}
+
+export const queryValidator = (value: string, formValues: any) => {
+    // Get the length of the collection
+    var max_number_allowed = formValues.rules.length; // $(".chained-item.well").length;
+    // var regex = /(\d+|and|or|\(|\))/g;
+    var valueArray = value.split(/(\(|\)|\s+)/).filter(function (token) {
+        return token.trim() !== ""
+    });
+    var preCount = 0, postCount = 0, isValid = true;
+
+    if (valueArray.length <= 2) {
+        return 'The Query is too short to be valid';
+    }
+
+    if (isNaN(parseInt(valueArray[0])) && (valueArray[0] !== '(')) {
+        return "Invalid start element of query. Should start with number.";
+    }
+
+    if (valueArray[valueArray.length - 1] !== ')' && isNaN(parseInt(valueArray[valueArray.length - 1]))) {
+        return "Invalid end element of query, Should end with number or closing parenthesis";
+    }
+
+    for (var i = 0; i < valueArray.length; i++) {
+        if (parseInt(valueArray[i]) > max_number_allowed) {
+            return "Query values exceeded maxing number of rules";
+        }
+        if (valueArray[i] === ')') {
+            preCount++;
+        } else if (valueArray[i] === '(') {
+            postCount++;
+        } else if (isNaN(parseInt(valueArray[i])) && !['and', 'or'].includes(valueArray[i].toLowerCase())) {
+            isValid = false;
+        }
+    }
+    // Input meets all criteria
+    return (preCount === postCount && isValid) ? undefined : "Please enter a valid query. The expression should contain only 'and' and 'or' words, numbers from 1 to the maximum allowed value, and have balanced parentheses."
+}

package/src/form/schema/FormFieldSchema.ts

@@ -0,0 +1,342 @@
+import { ActionCreatorWithPayload, Reducer } from "@reduxjs/toolkit";
+import { PropsWithChildren, ReactNode } from "react";
+import {
+    UseFieldArrayAppend,
+    UseFieldArrayPrepend,
+    UseFieldArrayRemove,
+    UseFormGetValues,
+    UseFormSetValue,
+    ValidateResult,
+} from "react-hook-form";
+import { Saga } from "redux-saga";
+import { emailIdsValidator, queryValidator } from "./CustomValidators";
+
+export enum FormFieldType {
+    INPUT = "INPUT",
+    PASSWORD = "PASSWORD",
+
+    MULTI_SELECT = "MULTI_SELECT",
+    SELECT = "SELECT",
+
+    CHECKBOX = "CHECKBOX",
+    CHECKBOXBUTTONS = "CHECKBOXBUTTONS",
+    ARRAY = "ARRAY",
+    TIME = "TIME",
+    NUMBER = "NUMBER",
+    INPUT_GROUP = "INPUT_GROUP",
+    FILTER = "FILTER",
+    VIEW_FILTER = "VIEW_FILTER",
+    RADIO = "RADIO",
+    TEXTAREA = "TEXTAREA",
+    DATE_PICKER = "DATE_PICKER",
+    DATE_RANGE_PICKER = "DATE_RANGE_PICKER",
+
+    DYNAMIC_SELECT = "DYNAMIC_SELECT",
+    RADIO_GROUP = "RADIO_GROUP",
+    DYNAMIC_MULTI_SELECT = "DYNAMIC_MULTI_SELECT",
+
+    TYPEAHEAD = "TYPEAHEAD",
+    TYPEAHEAD_MULTI_SELECT = "TYPEAHEAD_MULTI_SELECT",
+    PHONE_NUMBER_INPUT = "PHONE_NUMBER_INPUT",
+    SWITCH = "SWITCH",
+    RANGE = "RANGE",
+    FILE_UPLOAD = "FILE_UPLOAD",
+    BROWSE_BOX = "BROWSE_BOX",
+    COLOR_PICKER = "COLOR_PICKER",
+    URL = "URL",
+    PROFILE_PICKER = "PROFILE_PICKER",
+    COMBO_SELECT = "COMBO_SELECT",
+    COMBO_MULTI_SELECT = "COMBO_MULTI_SELECT",
+    DATE = "DATE",
+    BUSINESS_HOURS = "BUSINESS_HOURS",
+
+    IFRAME = "IFRAME",
+}
+
+export enum FormFieldSubType {
+    TEXT,
+    EMAIL,
+}
+
+export interface FormFieldComponentPropSchema {
+    fieldConfig: FormFieldSchema;
+    onChange?: (data: any) => void;
+}
+
+export type formContainerProps = PropsWithChildren<{}>;
+
+export enum OutputFormatType {
+    STRING,
+    ARRAY,
+}
+
+export type DropdownFieldConfig = {
+    showSelectedCount: boolean;
+    showDeleteOption: boolean;
+    showCreateOption: boolean;
+    showSearchBox: boolean;
+    createLabelText?: string;
+    isCaseSensitive?: boolean;
+};
+
+export type FormFieldSchema = {
+    /**
+     * Required attributes
+     */
+    name: string;
+    required: boolean;
+    formFieldType: FormFieldType;
+
+    /**
+     * Html attributes
+     */
+    label?: string;
+    readOnly?: boolean;
+    placeholder?: string;
+    helpText?: string;
+    disabled?: boolean;
+    autoComplete?: "on" | "off" | string;
+    maxLength?: number;
+    minLength?: number;
+    max?: number;
+    min?: number;
+    rows?: number;
+    defaultValue?: string | string[] | {} | boolean;
+    options?: FieldOptionsSchema[];
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    // ref?:any
+
+    /**
+     * Custom Handling functions
+     */
+    onChange?: (data: any) => void;
+    onKeyDown?: (event: any) => void;
+    fetchCallback?: (data: any) => void;
+    onCreateTrigger?: (data: any, createCallBack: (data: any) => void) => void;
+
+    /**
+     * Custom attributes
+     */
+    validateSpaces?: boolean;
+    ignoreFetchValue?: boolean;
+    decimalAllowed?: boolean;
+    errorMessage?: string;
+    submitOnChange?: boolean;
+    formFieldPattern?: FormFieldPatternsImpl[];
+    fetchUrl?: string;
+    postUrl?: string;
+    fileAccept?: string;
+    icon?: ReactNode;
+    outputFormat?: OutputFormatType;
+    children?: FormFieldSchema[];
+    defaultOptions?: FieldOptionsSchema[];
+    optionsConfig?: OptionMappingConfig;
+    mapperType?: string;
+    forceUpdate?: boolean;
+    disableHeaderInFetch?: boolean;
+    dropdownFieldConfig?: DropdownFieldConfig;
+
+    /**
+     * Redux configuration attribute
+     */
+    store?: ReduceAndSagaSchema;
+    customUrlForRedux?: string;
+
+    /**
+     * Customise the default styles
+     */
+    customClassNames?: {
+        fieldClassName?: string;
+        labelClassName?: string;
+        wrapperClassName?: string;
+        optionClassName?: string;
+        optionsWrapperClassName?: string;
+    };
+    align?: FieldAlignType;
+    disableDefaultWrapper?: boolean;
+    hideWhenNoResults?: boolean;
+    fieldOptionWrapper?: React.FC<{ data: any; selected?: boolean }>;
+    seperateGroupElements?: boolean; // for input group component @component -> InputGroupField.tsx
+
+    /**
+     * Wrapper attributes
+     */
+    html?: React.FC<formContainerProps>;
+    fieldContainer?: React.FC<{}>;
+    wrapper?: React.FC<PropsWithChildren>;
+    arrayWrapper?: React.FC<
+        PropsWithChildren<{
+            getValues: UseFormGetValues<any>;
+            append: UseFieldArrayAppend<any, string>;
+            prepend: UseFieldArrayPrepend<any, string>;
+            remove: UseFieldArrayRemove;
+        }>
+    >;
+    arrayIndexWrapper?: React.FC<
+        PropsWithChildren<{
+            append: UseFieldArrayAppend<any, string>;
+            prepend: UseFieldArrayPrepend<any, string>;
+            remove: UseFieldArrayRemove;
+            index: number;
+            getValues: UseFormGetValues<any>;
+            setValue: UseFormSetValue<any>;
+            length: number;
+            mappedName: string;
+            childByFieldName: (
+                fieldName: string,
+                mapperType?: string
+            ) => JSX.Element | JSX.Element[];
+        }>
+    >;
+};
+export type FieldOptionsSchema = {
+    value: string | any;
+    label: string | any;
+    isDisabled?: boolean;
+    helpText?: string;
+    groupName?: string;
+    icon?: React.ReactNode;
+};
+
+export type OptionMappingConfig = {
+    valueKey: string;
+    labelKey: string;
+    listItemKey?: string;
+    groupKey?: string;
+    disabledKey?: string;
+};
+
+export enum FieldAlignType {
+    HORIZONTAL,
+    VERTICAL,
+}
+
+export interface FormFieldPatterns {
+    getMessage(): string;
+
+    getPattern(): RegExp | undefined;
+
+    getValidate(): (value: string, formValues: any) => ValidateResult;
+}
+
+export class FormFieldPatternsImpl implements FormFieldPatterns {
+    public static ALL_PATTERNS: { [name: string]: FormFieldPatterns } = {};
+
+    static readonly REQUIRED = new FormFieldPatternsImpl(
+        "REQUIRED",
+        "This field is required",
+        /abc/g
+    );
+    static readonly EMAIL = new FormFieldPatternsImpl(
+        "EMAIL",
+        "Please enter a valid email address",
+        /^([A-Za-z0-9\._%+\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z]{2,})$/
+    );
+    // static readonly PASSWORD = new FormFieldPatternsImpl(
+    //     "PASSWORD",
+    //     "Please enter a valid password",
+    //     /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+    // );
+    static readonly PASSWORD = new FormFieldPatternsImpl(
+        "PASSWORD",
+        "Password must be at least 8 characters long and include an uppercase letter, a lowercase letter, a digit, and a special character (!, @, #, $, %, ^, &, *).",
+        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/
+    );
+
+    static readonly URL = new FormFieldPatternsImpl(
+        "URL",
+        "Please enter a valid URL (e.g., http://example.com)",
+        /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/[a-zA-Z0-9\-._~:/?#[\]]*)?$/
+    );
+
+    static readonly CUSTOM_QUERY = new FormFieldPatternsImpl(
+        "CUSTOM_QUERY",
+        "",
+        undefined,
+        queryValidator
+    );
+    static readonly EMAIL_ID_COMA_SEPARATE = new FormFieldPatternsImpl(
+        "EMAIL_ID_COMA_SEPARATE",
+        "",
+        undefined,
+        emailIdsValidator
+    );
+    static readonly NO_SPECIAL_CHAR_EXCEPT_UNDERSCORE_LOWERCASE =
+        new FormFieldPatternsImpl(
+            "NO_SPECIAL_CHAR_EXCEPT_UNDERSCORE_LOWERCASE",
+            "Please enter a value with only lowercase letters, numbers, and underscores (no spaces or other special characters).",
+            /^[a-z0-9_]+$/
+        );
+    static readonly SHOPIFY_URL_PATTERN = new FormFieldPatternsImpl(
+        "SHOPIFY_URL_PATTERN",
+        "Please enter a valid shopify url.",
+        /^https?\:\/\/[a-zA-Z0-9][a-zA-Z0-9\-]*\.myshopify\.com\/?/
+    );
+    static readonly MFA_CODE_PATTERN = new FormFieldPatternsImpl(
+        "MFA_CODE_PATTERN",
+        "Please enter a valid MFA code.",
+        /^[0-9]{6}$/
+    );
+    static readonly SPACES_NOT_ALLOWED = new FormFieldPatternsImpl(
+        "SPACES_NOT_ALLOWED",
+        "Please enter a value without spaces.",
+        /^[^\s]+$/
+    );
+    static readonly PHONE_NUMBER = new FormFieldPatternsImpl(
+        "PHONE_NUMBER",
+        "Please enter a valid phone number.",
+        /^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[456789]\d{9}|(\d[ -]?){10}\d$/
+    );
+    
+    static readonly DOMAIN_NAME_PATTERN = new FormFieldPatternsImpl(
+        "DOMAIN_NAME_PATTERN",
+        "Please enter a valid domain name.",
+        /^[a-z0-9-]{1,63}(\.[a-z0-9-]{1,63})+$/
+    );
+    static readonly LOWERCASE_UNDERSCORE_WITHOUT_LEADING_NUMBER =
+        new FormFieldPatternsImpl(
+            "LOWERCASE_UNDERSCORE_WITHOUT_LEADING_NUMBER",
+            "Please enter a value with only lowercase letters, numbers, and underscores. The first character cannot be a number or any other special character except underscore.",
+            /^[a-z][a-z0-9_]*$/
+        );
+
+    private constructor(
+        private readonly patternName: string,
+        private readonly message: string,
+        private readonly pattern: RegExp | undefined,
+        private readonly validator?: (a: string, b: any) => ValidateResult
+    ) {
+        FormFieldPatternsImpl.ALL_PATTERNS[patternName] = this;
+    }
+
+    getMessage(): string {
+        return this.message;
+    }
+
+    getPattern(): RegExp | undefined {
+        return this.pattern;
+    }
+
+    getValidate(): any {
+        return this.validator;
+    }
+}
+
+export type ReducerSchema = {
+    reduceName: string;
+    action: {
+        [key: string]: string;
+    };
+};
+
+export type ReduceAndSagaSchema = ReducerSchema & {
+    saga: Saga;
+    reducer: Reducer;
+    initialFetchReducerAction?: ActionCreatorWithPayload<any>;
+};
+
+export type StoreStateSchema<T> = {
+    data: T | T[] | undefined;
+    loading: boolean;
+};