mui-fast-start 0.1.4 → 0.2.0

package/src/components/Single/TextField/SingleFloat.tsx

@@ -0,0 +1,12 @@
+import {useContext} from "react";
+import {TextField} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {SingleNumberProps} from "../../../types";
+import {useSplitSingleFloatProps} from "../../../hooks";
+
+
+export const SingleFloat = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.Float as SingleNumberProps;
+    const props = useSplitSingleFloatProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}

package/src/components/Single/TextField/SingleInteger.tsx

@@ -0,0 +1,12 @@
+import {useContext} from "react";
+import {TextField} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {SingleNumberProps} from "../../../types";
+import {useSplitSingleIntegerProps} from "../../../hooks";
+
+
+export const SingleInteger = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.Integer as SingleNumberProps;
+    const props = useSplitSingleIntegerProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}

package/src/components/Single/TextField/SingleText.tsx

@@ -0,0 +1,12 @@
+import {useContext} from "react";
+import useSplitSingleTextProps from '../../../hooks/splits/useSplitSingleTextProps';
+import {TextField} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {SingleTextProps} from "../../../types";
+
+
+export const SingleText = (customProps: SingleTextProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.Text as SingleTextProps;
+    const props = useSplitSingleTextProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}

package/src/components/index.ts

@@ -0,0 +1,13 @@
+// Object components
+export { ObjCheckbox } from './Obj/Checkbox/ObjCheckbox';
+export { ObjCheckIcon } from './Obj/Checkbox/ObjCheckIcon';
+export { ObjFloat } from './Obj/Textfield/ObjFloat';
+export { ObjInteger } from './Obj/Textfield/ObjInteger';
+export { ObjText } from './Obj/Textfield/ObjText';
+
+// Single components
+export { SingleCheckbox } from './Single/Checkbox/SingleCheckbox';
+export { SingleCheckIcon } from './Single/Checkbox/SingleCheckIcon';
+export { SingleFloat } from './Single/TextField/SingleFloat';
+export { SingleInteger } from './Single/TextField/SingleInteger';
+export { SingleText } from './Single/TextField/SingleText';

package/src/hooks/splits/useSplitSingleNumberProps.ts

@@ -0,0 +1,159 @@
+import type {TextFieldProps} from "@mui/material";
+import {fastDeepMerge, floatCalculate, integerCalculate, processFloat, processInteger} from "../../utils";
+import React, {useCallback, useMemo, useState} from "react";
+import {InputLabelType, SingleNumberProps} from "../../types";
+
+type CalculateNumber = number | null | undefined;
+type CalculateFunction = (
+    value: string | null,
+    min: CalculateNumber,
+    max: CalculateNumber,
+    def: CalculateNumber
+) => CalculateNumber;
+
+const useSplitSingleNumberProps = (
+    defaultProps: SingleNumberProps,
+    customProps: SingleNumberProps,
+    process: (value: string) => string,
+    calculate: CalculateFunction,
+    lockKeys: string[] = []
+): TextFieldProps => {
+    const [draft, setDraft] = useState<string | null>(null);
+    const {
+        get, set, errorData,
+        minLength, maxLength,
+        startAdornment, endAdornment,
+        disappear, def, min, max, step,
+        ...props
+    } = useMemo(() =>
+        fastDeepMerge<SingleNumberProps>({...defaultProps}, customProps),
+        [defaultProps, customProps]
+    );
+
+    const getCalculate = useCallback((value: string | null) => (
+        calculate(value, min, max, def)
+    ), [calculate, min, max, def]);
+
+    const getKeyboardValue = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+        const {value, valueAsNumber} = event.currentTarget;
+        return isNaN(valueAsNumber) ? getCalculate(value) : valueAsNumber;
+    }, [getCalculate]);
+
+    const getProcess = useCallback((event: React.ChangeEvent<HTMLInputElement>): string => {
+        const target = event.currentTarget;
+        const value: string = process(target.value);
+        if (value != target.value) {
+            target.value = value;
+        }
+        return value;
+    }, [process]);
+
+
+    const onSelect = useCallback(() => {
+        if (draft == null) setDraft(get.toString());
+    }, [draft, get]);
+
+    const onChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            const result: string = getProcess(event);
+            const num: CalculateNumber = getCalculate(result);
+            if (num != null && !isNaN(num) && get != num) {
+                set(num);
+            }
+
+            setDraft(event.currentTarget.value);
+        },
+        [getProcess, getCalculate, get, set]
+    );
+
+    const onBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+        const {value} = event.currentTarget;
+
+        setDraft(null);
+        const num: CalculateNumber = getCalculate(value);
+        if (get != num) set(num as number);
+    }, [getCalculate, get, set]);
+
+    const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (lockKeys.includes(event.key) || step == null) {
+            event.preventDefault();
+            return;
+        }
+
+        const input = event.currentTarget;
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            const calNum: CalculateNumber = getKeyboardValue(event);
+            if (calNum == null) return;
+
+            const num: number = calNum + step;
+            if (max != null && num > max) {
+                input.value = max.toString();
+            } else {
+                input.value = digitRound(num, step).toString();
+            }
+        } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            const calNum: CalculateNumber = getKeyboardValue(event);
+            if (calNum == null) return;
+
+            const num: number = calNum - step;
+            if (min != null && num < min) {
+                input.value = min.toString();
+            } else {
+                input.value = digitRound(num, step).toString();
+            }
+        }
+    }, [getKeyboardValue, lockKeys, max, min, step]);
+
+    const value = useMemo(() => (draft == null ? get : draft), [get, draft]);
+    const inputLabel: InputLabelType = useMemo(() => (
+        (draft == null && (!get || isNaN(get))) ? {} : { shrink: true }
+    ), [draft, get]);
+
+    return fastDeepMerge<TextFieldProps>({
+        error: !!errorData,
+        helperText: errorData,
+        value,
+        onChange,
+        onSelect,
+        onBlur,
+        slotProps: {
+            htmlInput: {step, min, max, minLength, maxLength, onKeyDown},
+            inputLabel: inputLabel,
+            input: {startAdornment, endAdornment}
+        }
+    }, (props as TextFieldProps));
+}
+
+const digitRound = (num: number, step: number) => {
+    step = Math.abs(step);
+    if (step === 0) return num;
+    const decimals: number = -Math.floor(Math.log10(step));
+    if (decimals > 0) {
+        return Number(Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals));
+    }
+    return num;
+}
+
+const useSplitSingleFloatProps = (
+    defaultProps: SingleNumberProps,
+    customProps: SingleNumberProps,
+): TextFieldProps => useSplitSingleNumberProps(
+    defaultProps, customProps,
+    processFloat, floatCalculate
+);
+
+const useSplitSingleIntegerProps = (
+    defaultProps: SingleNumberProps,
+    customProps: SingleNumberProps,
+): TextFieldProps => useSplitSingleNumberProps(
+    defaultProps, customProps,
+    processInteger, integerCalculate,
+    [".", "e", "E"]
+)
+
+export {
+    useSplitSingleFloatProps,
+    useSplitSingleIntegerProps
+};

package/src/hooks/splits/useSplitSingleTextProps.ts

@@ -0,0 +1,36 @@
+import type {TextFieldProps} from "@mui/material";
+import React, {useCallback} from "react";
+import {SingleTextProps} from "../../types";
+import {fastDeepMerge} from "../../utils";
+
+const useSplitSingleTextProps = (
+    defaultProps: SingleTextProps,
+    customProps: SingleTextProps
+): TextFieldProps => {
+    const {
+        get, set, errorData,
+        minLength, maxLength,
+        startAdornment, endAdornment,
+        ...props
+    } = fastDeepMerge({...defaultProps}, customProps);
+
+    const onChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            set(event.currentTarget.value);
+        },
+        [set]
+    );
+
+    return fastDeepMerge<TextFieldProps>({
+        error: !!errorData,
+        helperText: errorData,
+        value: get,
+        onChange,
+        slotProps: {
+            htmlInput: {minLength, maxLength},
+            input: {startAdornment, endAdornment}
+        }
+    }, (props as TextFieldProps));
+}
+
+export default useSplitSingleTextProps;

package/src/hooks/state/useObjToSingle.ts

@@ -0,0 +1,23 @@
+import type {Dispatch, SetStateAction} from "react";
+import {useCallback} from "react";
+import {KeysWithValue} from "../../types";
+
+const useObjToSingle = <Type extends object, Target>(
+    name: KeysWithValue<Type, Target> | string,
+    get: Type,
+    set: Dispatch<SetStateAction<Type>>
+): [Target, Dispatch<SetStateAction<Target>>] => {
+    const value: Target = (get as Record<string, Target>)?.[name as string];
+
+    const setValue: Dispatch<SetStateAction<Target>> = useCallback((action: SetStateAction<Target>) => {
+        set((state) => {
+            const newValue = typeof action === "function"
+                ? (action as (prev: Target) => Target)((state as Record<string, Target>)?.[name as string])
+                : action;
+            return ({ ...state, [name]: newValue });
+        });
+    }, [name, set]);
+    return [value, setValue];
+}
+
+export default useObjToSingle;

package/src/index.ts

@@ -0,0 +1,8 @@
+export {createDefaultProps} from "./styles/createDefaultProps.ts";
+export {
+    FastStartProvider,
+    FastStartContext
+} from "./styles/FastStartProvider.tsx";
+
+export * from "./components";
+export * from "./types";

package/src/styles/FastStartProvider.tsx

@@ -0,0 +1,26 @@
+import {createContext} from "react";
+import {ThemeProvider} from "@mui/material";
+import type {DefaultTheme} from "@mui/system";
+import {createDefaultProps} from "./createDefaultProps";
+import {FastStartDefaultProps, FastStartProviderProps} from "../types";
+
+
+const FastStartContext = createContext<FastStartDefaultProps>(createDefaultProps());
+
+const FastStartProvider = <T = DefaultTheme>(props: FastStartProviderProps<T>) => {
+    const {
+        defaultProps,
+        ...themeProps
+    } = props;
+
+    return (
+        <FastStartContext value={defaultProps}>
+            <ThemeProvider<T> {...themeProps}/>
+        </FastStartContext>
+    )
+}
+
+export {
+    FastStartContext,
+    FastStartProvider
+}

package/src/styles/createDefaultProps.ts

@@ -0,0 +1,45 @@
+import type {TextFieldProps} from "@mui/material";
+import {BaseNumberProps, FastStartDefaultProps} from "../types";
+import {fastDeepMerge} from "../utils";
+
+
+export const createDefaultProps = (
+    props?: FastStartDefaultProps | undefined
+): FastStartDefaultProps => {
+    const textFieldProps: TextFieldProps & BaseNumberProps = {
+        fullWidth: true,
+        autoComplete: 'off',
+        variant: 'outlined',
+        size: 'small'
+    }
+    const floatProps: TextFieldProps & BaseNumberProps = Object.assign({
+        inputMode: 'decimal',
+        type: 'text',
+        step: 0.01,
+        def: 0
+    }, textFieldProps);
+
+    const integerProps: TextFieldProps & BaseNumberProps = Object.assign({
+        inputMode: 'numeric',
+        type: 'text',
+        step: 1,
+        def: 0
+    }, textFieldProps);
+
+    return fastDeepMerge({
+        Single: {
+            Float: {...floatProps},
+            Integer: {...integerProps},
+            Text: {...textFieldProps},
+            Checkbox: {size: 'small'},
+            CheckIcon: {size: 'small'},
+        },
+        Obj: {
+            Float: {...floatProps},
+            Integer: {...integerProps},
+            Text: {...textFieldProps},
+            Checkbox: {size: 'small'},
+            CheckIcon: {size: 'small'},
+        }
+    } as FastStartDefaultProps, props as FastStartDefaultProps);
+}

package/src/types/props.ts

@@ -0,0 +1,67 @@
+import type {SlotProps, TextFieldOwnerState} from "@mui/material";
+import type {Dispatch, SetStateAction} from "react";
+import * as React from "react";
+import type {InputBaseProps} from "@mui/material/InputBase";
+import type {InputLabelProps} from "@mui/material/InputLabel";
+
+type HtmlInputType = SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
+type InputLabelType = SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+type KeysWithValue<Type extends object, Target> = {
+    [K in keyof Type]: Type[K] extends Target ? K : never
+}[keyof Type];
+
+interface BaseProps<Type, Error> {
+    get: Type;
+    set: Dispatch<SetStateAction<Type>>;
+    label?: React.ReactNode;
+    errorData?: Error;
+}
+
+type BasePropertyProps<TYPE> = BaseProps<TYPE, string>;
+
+interface BaseObjectProps<Type extends object, Target>
+    extends BaseProps<Type, Partial<Type> | object> {
+    name: KeysWithValue<Type, Target> | string;
+}
+
+
+interface BaseTextProps {
+    minLength?: number;
+    maxLength?: number;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+}
+
+interface BaseCheckIconProps {
+    on: React.ReactNode;
+    off: React.ReactNode;
+}
+
+interface BaseNumberProps extends BaseTextProps {
+    disappear?: boolean;
+    def?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+
+interface BaseSelectProps<I> {
+    renderMenuItem?: (item: I) => React.ReactNode;
+}
+
+interface BaseSelectItemProps<I> extends BaseSelectProps<I> {
+    items: I[];
+}
+
+export type {
+    KeysWithValue,
+    HtmlInputType,
+    InputLabelType,
+    BasePropertyProps,
+    BaseObjectProps,
+    BaseTextProps,
+    BaseCheckIconProps,
+    BaseNumberProps,
+    BaseSelectItemProps
+}

package/src/types/provider.ts

@@ -0,0 +1,47 @@
+import type {CheckboxProps, IconButtonProps, SelectProps, TextFieldProps, ThemeProviderProps} from "@mui/material";
+import {
+    BaseCheckIconProps,
+    BaseNumberProps,
+    BaseObjectProps,
+    BasePropertyProps,
+    BaseSelectItemProps,
+    BaseTextProps
+} from './props';
+import type {DeepPartial} from './types';
+
+export type SingleNumberProps = TextFieldProps & BaseNumberProps & BasePropertyProps<number>;
+export type SingleTextProps = TextFieldProps & BaseTextProps & BasePropertyProps<string>;
+export type SingleCheckboxProps = CheckboxProps & Omit<BasePropertyProps<boolean>, 'errorData'>;
+export type SingleCheckIconProps = IconButtonProps & BaseCheckIconProps & Omit<BasePropertyProps<boolean>, 'errorData' | 'label'>;
+
+export type ObjNumberProps<T extends object> = Omit<TextFieldProps, 'name'> & BaseNumberProps & BaseObjectProps<T, number>;
+export type ObjTextProps<T extends object> = Omit<TextFieldProps, 'name'> & BaseTextProps & BaseObjectProps<T, string>;
+export type ObjCheckboxProps<T extends object> = Omit<CheckboxProps, 'name'> & Omit<BaseObjectProps<T, boolean>, 'errorData'>;
+export type ObjCheckIconProps<T extends object> = Omit<IconButtonProps, 'name'> & BaseCheckIconProps & Omit<BaseObjectProps<T, boolean>, 'errorData' | 'label'>;
+
+
+type FastStartDefaultProps = DeepPartial<{
+    Single: {
+        Float: SingleNumberProps;
+        Integer: SingleNumberProps;
+        Text: SingleTextProps;
+        Checkbox: SingleCheckboxProps;
+        CheckIcon: SingleCheckIconProps;
+    },
+    Obj: {
+        Float: ObjNumberProps<object>;
+        Integer: ObjNumberProps<object>;
+        Text: ObjTextProps<object>;
+        Checkbox: ObjCheckboxProps<object>;
+        CheckIcon: ObjCheckIconProps<object>;
+    }
+}>;
+
+interface FastStartProviderProps<Theme> extends ThemeProviderProps<Theme> {
+    defaultProps: FastStartDefaultProps;
+}
+
+export type {
+    FastStartDefaultProps,
+    FastStartProviderProps,
+}

package/src/types/types.ts

@@ -0,0 +1,9 @@
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object
+        ? DeepPartial<T[K]>
+        : T[K];
+};
+
+export type {
+    DeepPartial
+}

package/src/utils/number/calculate.ts

@@ -0,0 +1,102 @@
+type CalculateNumber = number | null | undefined;
+
+const floatCalculate = (
+    value: string | null,
+    min: CalculateNumber,
+    max: CalculateNumber,
+    def: CalculateNumber
+): CalculateNumber => {
+    let calc: CalculateNumber = 0;
+    if (value == null || isEmpty(value)) {
+        calc = def;
+    } else {
+        for (const token of value.split(/(?=[+-])/g)) {
+            if (/^[+-]?\d+\.\d+$/.test(token)) {
+                calc += parseFloat(token);
+            } else if (/^[+-]?\d+$/.test(token)) {
+                calc += parseInt(token, 10);
+            }
+        }
+    }
+
+    if (calc != null) {
+        if (max != null) calc = Math.min(max, calc);
+        if (min != null) calc = Math.min(min, calc);
+    }
+    return calc;
+}
+
+const integerCalculate = (
+    value: string | null,
+    min: CalculateNumber,
+    max: CalculateNumber,
+    def: CalculateNumber
+): CalculateNumber => {
+    let calc: CalculateNumber = 0;
+    if (value == null || isEmpty(value)) {
+        calc = def;
+    } else {
+        for (const token of value.split(/(?=[+-])/g)) {
+            if (/^[+-]?\d+$/.test(token)) {
+                calc += parseInt(token, 10);
+            }
+        }
+    }
+
+    if (calc != null) {
+        if (max != null) calc = Math.min(max, calc);
+        if (min != null) calc = Math.min(min, calc);
+    }
+    return calc;
+}
+
+const processFloat = (text: string): string => {
+    const value: string = text
+        .replace(/[^0-9+.-]/g, '')
+        .replace(/([+-]){2,}/g, (match, op) => op);
+
+    let result: string = '';
+    let token: string = '';
+    let decimalUsed: boolean = false;
+
+    for (let i = 0; i < value.length; i++) {
+        const char = value[i];
+
+        if (char >= '0' && char <= '9') {
+            token += char;
+        } else if (char === '.') {
+            if (!decimalUsed) {
+                if (token === '') {
+                    token = '0';
+                }
+                token += '.';
+                decimalUsed = true;
+            }
+        } else if (char === '+' || char === '-') {
+            if (token !== '') {
+                result += token;
+            }
+            result += char;
+            token = '';
+            decimalUsed = false;
+        }
+    }
+    return result + token;
+}
+
+const processInteger = (text: string): string => text
+    .replace(/[^0-9+-]/g, '')
+    .replace(/\./g, '')
+    .replace(/([+-]){2,}/g, (match, op) => op.charAt(0))
+    .replace(/^([+-]{2,})/, match => match.charAt(0));
+
+function isEmpty(str: string): boolean {
+    return str.length === 0 || !str.trim();
+}
+
+export {
+    floatCalculate,
+    integerCalculate,
+    processFloat,
+    processInteger
+}

package/src/utils/object/error.ts

@@ -0,0 +1,14 @@
+import {BaseObjectProps, KeysWithValue} from "../../types";
+
+function errorObjectToString<Type extends object, Target>(
+    name: KeysWithValue<Type, Target> | string | undefined,
+    data: BaseObjectProps<Type, Target>['errorData']
+): string | undefined {
+    return (name != null && typeof data === 'object')
+        ? (data as Record<string, string>)[name as string]
+        : undefined;
+}
+
+export {
+    errorObjectToString
+}

package/src/utils/object/merge.ts

@@ -0,0 +1,47 @@
+import {DeepPartial} from "../../types";
+
+type AnyObj = Record<string, any>;
+
+function isPlainObject(v: any): v is AnyObj {
+    return v !== null && typeof v === "object" && v.constructor === Object;
+}
+
+function isEmpty(v: object): boolean {
+    return Object.keys(v).length === 0;
+}
+
+function fastDeepMerge<T extends object>(target: DeepPartial<T> | undefined, source: T): T {
+    if (target === source || !isPlainObject(source) || isEmpty(source)) {
+        return target as T;
+    } else if (!isPlainObject(target) || isEmpty(target)) {
+        return source;
+    }
+
+    const result: AnyObj = {...target};
+    const stack: [AnyObj, AnyObj][] = [[result, source as AnyObj]];
+
+    while (stack.length) {
+        const [tNode, sNode] = stack.pop()!;
+
+        for (const key in sNode) {
+            if (!Object.prototype.hasOwnProperty.call(sNode, key)) continue;
+
+            const sVal = sNode[key];
+            const tVal = tNode[key];
+
+            if (isPlainObject(tVal) && isPlainObject(sVal)) {
+                const copy = {...tVal};
+                tNode[key] = copy;
+                stack.push([copy, sVal]);
+            } else {
+                tNode[key] = sVal;
+            }
+        }
+    }
+    return result as T;
+}
+
+
+export {
+    fastDeepMerge
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+
+    /* Build options */
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist",
+
+    /* Bundler mode */
+    "strict": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+
+    /* Interop */
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    /* Library options */
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+  },
+  "include": ["src"],
+}