mui-fast-start 0.1.4 → 0.2.0

package/examples/basic/src/main.tsx

@@ -0,0 +1,57 @@
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import {createTheme, CssBaseline} from "@mui/material";
+import { FastStartProvider, createDefaultProps } from 'mui-fast-start';
+
+const theme = createTheme();
+const defaultProps = createDefaultProps({
+    Single: {
+        Float: {
+            variant: 'filled',
+            size: 'medium',
+            fullWidth: false,
+            autoComplete: 'off',
+            inputMode: 'decimal',
+            type: 'text',
+            step: 0.01,
+            def: 0
+        },
+        Integer: {
+            variant: 'filled',
+            size: 'medium',
+            fullWidth: false,
+            autoComplete: 'off',
+            inputMode: 'numeric',
+            type: 'text',
+            step: 1,
+            def: 0
+        }
+    },
+    Obj: {
+        Float: {
+            variant: 'filled',
+            size: 'medium',
+            fullWidth: false,
+            autoComplete: 'off',
+            inputMode: 'decimal',
+            type: 'text',
+            step: 0.01,
+            def: 0
+        }
+    }
+});
+
+createRoot(document.getElementById('root')!).render(
+    <FastStartProvider
+        defaultProps={defaultProps}
+        theme={theme}
+        defaultMode='dark'
+    >
+        <CssBaseline/>
+        <StrictMode>
+            <App/>
+        </StrictMode>
+    </FastStartProvider>
+)

package/examples/basic/src/pages/ObjPage.tsx

@@ -0,0 +1,93 @@
+import { Grid, InputAdornment, TextField } from "@mui/material";
+import { ObjCheckbox, ObjCheckIcon, ObjFloat, ObjInteger, ObjText } from "mui-fast-start";
+import { useState } from "react";
+
+type TempType = {
+    check1: boolean,
+    check2: boolean,
+    float: number,
+    integer: number,
+    text: string
+}
+
+const ObjPage = () => {
+    const [error, setError] = useState<object>({
+        text: '에러 메시지',
+    })
+    const [temp, setTemp] = useState<TempType>({
+        check1: false,
+        check2: false,
+        float: 0,
+        integer: 0,
+        text: ''
+    });
+
+    const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTemp({...temp, text: e.target.value});
+    }
+
+    return (
+        <Grid container>
+            <TextField
+                fullWidth={true}
+                autoComplete="off"
+                size="small"
+                variant="outlined" 
+                label='테스트'
+                value={temp.text}
+                onChange={handleTextChange}
+            />
+
+            <Grid size={12}>
+                {JSON.stringify(temp)}
+            </Grid>
+
+            <Grid size={2}>
+                <ObjCheckbox<TempType>
+                    label='테스트1' name='check1'
+                    get={temp} set={setTemp}
+                />
+            </Grid>
+            <Grid size={2}>
+                <ObjCheckIcon<TempType>
+                    on='on' off='off' name='check2'
+                    get={temp} set={setTemp}
+                />
+            </Grid>
+
+            <Grid size={2}>
+                <ObjFloat<TempType>
+                    label='실수형' name='float'
+                    get={temp} set={setTemp}
+                    errorData={error}
+                />
+            </Grid>
+            <Grid size={2}>
+                <ObjInteger<TempType>
+                    label='정수형' name='integer'
+                    get={temp} set={setTemp}
+                    errorData={error}
+                />
+            </Grid>
+            <Grid size={2}>
+                <ObjText<TempType>
+                    label='텍스트' name='text'
+                    get={temp} set={setTemp}
+                    errorData={error}
+                    startAdornment={(
+                        <InputAdornment position="start">
+                            S
+                        </InputAdornment>
+                    )}
+                    endAdornment={(
+                        <InputAdornment position="end">
+                            E
+                        </InputAdornment>
+                    )}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+
+export default ObjPage;

package/examples/basic/src/pages/SinglePage.tsx

@@ -0,0 +1,70 @@
+import {Grid, InputAdornment, TextField} from "@mui/material";
+import {SingleCheckbox, SingleCheckIcon, SingleFloat, SingleInteger, SingleText} from "mui-fast-start";
+import React, {useState} from "react";
+
+const SinglePage = () => {
+    const [float, setFloat] = useState<number>(0);
+    const [integer, setInteger] = useState<number>(0);
+    const [text, setText] = useState<string>('');
+    const [checked, setChecked] = useState<boolean>(false);
+
+
+    return (
+        <Grid container>
+            <Grid size={2}>{checked.toString()}</Grid>
+            <Grid size={2}>
+                <SingleCheckbox
+                    label='테스트'
+                    get={checked} set={setChecked}
+                />
+            </Grid>
+
+            <Grid size={2}>{checked.toString()}</Grid>
+            <Grid size={2}>
+                <SingleCheckIcon
+                    on={"on"} off={"off"}
+                    get={checked} set={setChecked}
+                />
+            </Grid>
+
+            <Grid size={2}>{float}</Grid>
+            <Grid size={2}>
+                <SingleFloat
+                    label='실수형'
+                    min={-100} max={100}
+                    get={float} set={setFloat}
+                />
+            </Grid>
+
+            <Grid size={2}>{integer}</Grid>
+            <Grid size={2}>
+                <SingleInteger
+                    label='정수형'
+                    min={-100} max={100}
+                    startAdornment={(
+                        <InputAdornment position="start">
+                            S
+                        </InputAdornment>
+                    )}
+                    endAdornment={(
+                        <InputAdornment position="end">
+                            E
+                        </InputAdornment>
+                    )}
+                    get={integer} set={setInteger}
+                />
+            </Grid>
+
+            <Grid size={2}>{text}</Grid>
+            <Grid size={2}>
+                <SingleText
+                    label='텍스트'
+                    maxLength={10}
+                    get={text} set={setText}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+
+export default SinglePage;

package/examples/basic/tsconfig.app.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path alias for local library development */
+//    "baseUrl": ".",
+//    "paths": {
+//      "mui-fast-start": ["../../src/index.ts"],
+//      "mui-fast-start/styles": ["../../src/styles/index.ts"],
+//      "mui-fast-start/hooks": ["../../src/hooks/index.ts"],
+//      "mui-fast-start/types": ["../../src/types/index.ts"]
+//    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src", "../../src"]
+}

package/examples/basic/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/examples/basic/tsconfig.node.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Path alias for local library development */
+//    "baseUrl": ".",
+//    "paths": {
+//      "mui-fast-start": ["../../src/index.ts"],
+//      "mui-fast-start/styles": ["../../src/styles/index.ts"],
+//      "mui-fast-start/hooks": ["../../src/hooks/index.ts"],
+//      "mui-fast-start/types": ["../../src/types/index.ts"]
+//    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/basic/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+const libRoot = resolve(__dirname, '../../src');
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      // 'mui-fast-start/styles': resolve(libRoot, 'styles/index.ts'),
+      // 'mui-fast-start/hooks': resolve(libRoot, 'hooks/index.ts'),
+      // 'mui-fast-start/types': resolve(libRoot, 'types/index.ts'),
+      'mui-fast-start': resolve(libRoot, 'index.ts'),
+      //
+      // '@': libRoot,
+      // '@components': resolve(libRoot, 'components'),
+      // '@hooks': resolve(libRoot, 'hooks'),
+      // '@styles': resolve(libRoot, 'styles'),
+      // '@types': resolve(libRoot, 'types'),
+      // '@utils': resolve(libRoot, 'utils'),
+    }
+  },
+  optimizeDeps: {
+    exclude: ['mui-fast-start']
+  }
+})

package/package.json

@@ -1,85 +1,67 @@
-{
-  "name": "mui-fast-start",
-  "version": "0.1.4",
-  "description": "Fast and easy-to-use MUI components for React",
-  "keywords": [
-    "mui",
-    "material-ui",
-    "react",
-    "components",
-    "form"
-  ],
-  "author": "PersesTitan",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/VaneProject/mui-fast-start.git"
-  },
-  "type": "module",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && tsc -p tsconfig.lib.json",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/types/styles/index.d.ts"
-    },
-    "./hooks": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/types/hooks/index.d.ts"
-    },
-    "./types": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/types/types/index.d.ts"
-    }
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@mui/material": ">=6",
-    "@emotion/react": ">=11",
-    "@emotion/styled": ">=11"
-  },
-  "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@eslint/js": "^9.39.1",
-    "@mui/material": "^7.1.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "npm:rolldown-vite@7.2.5"
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
-  }
-}
+{
+  "name": "mui-fast-start",
+  "version": "0.2.0",
+  "description": "Fast and easy-to-use MUI components for React",
+  "keywords": [
+    "mui",
+    "material-ui",
+    "react",
+    "components",
+    "form"
+  ],
+  "author": "PersesTitan",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PersesTitan/mui-fast-start.git"
+  },
+
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11",
+    "@mui/material": ">=6",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^9.39.1",
+    "@mui/material": "^7.1.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/src/components/Obj/Checkbox/ObjCheckIcon.tsx

@@ -0,0 +1,19 @@
+import {useContext} from "react";
+import {DeepPartial, ObjCheckIconProps, SingleCheckIconProps} from "../../../types";
+import {fastDeepMerge} from "../../../utils";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleCheckIcon} from "../../Single/Checkbox/SingleCheckIcon.tsx";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+
+export const ObjCheckIcon = <T extends object>(customProps: ObjCheckIconProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Obj?.CheckIcon as DeepPartial<ObjCheckIconProps<T>>;
+    const {get, set, ...props} = fastDeepMerge<ObjCheckIconProps<T>>(defaultProps, customProps);
+    const [value, setValue] = useObjToSingle<T, boolean>(props.name, get, set);
+
+    return (
+        <SingleCheckIcon
+            get={value} set={setValue}
+            {...(props as unknown as Omit<SingleCheckIconProps, 'get' | 'set'>)}
+        />
+    );
+}

package/src/components/Obj/Checkbox/ObjCheckbox.tsx

@@ -0,0 +1,19 @@
+import React, {useContext} from "react";
+import useObjToSingle from '../../../hooks/state/useObjToSingle.ts';
+import {fastDeepMerge} from "../../../utils";
+import {DeepPartial, ObjCheckboxProps, SingleCheckboxProps} from "../../../types";
+import {SingleCheckbox} from "../../Single/Checkbox/SingleCheckbox.tsx";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+
+export const ObjCheckbox = <T extends object>(customProps: ObjCheckboxProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Obj?.Checkbox as DeepPartial<ObjCheckboxProps<T>>;
+    const {get, set, ...props} = fastDeepMerge<ObjCheckboxProps<T>>(defaultProps, customProps);
+    const [value, setValue] = useObjToSingle<T, boolean>(props.name, get, set);
+
+    return (
+        <SingleCheckbox
+            get={value} set={setValue}
+            {...(props as unknown as Omit<SingleCheckboxProps, 'set' | 'get'>)}
+        />
+    );
+}

package/src/components/Obj/Textfield/ObjFloat.tsx

@@ -0,0 +1,22 @@
+import {useContext} from "react";
+import {DeepPartial, ObjNumberProps, SingleNumberProps} from "../../../types";
+import {fastDeepMerge} from "../../../utils";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleFloat} from "../../Single/TextField/SingleFloat.tsx";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+
+
+export const ObjFloat = <T extends object>(customProps: ObjNumberProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Obj?.Float as DeepPartial<ObjNumberProps<T>>;
+    const {get, set, errorData, ...props} = fastDeepMerge<ObjNumberProps<T>>(defaultProps, customProps);
+    const [value, setValue] = useObjToSingle<T, number>(props.name, get, set);
+
+    return (
+        <SingleFloat
+            get={value} set={setValue}
+            errorData={errorObjectToString(props.name, errorData)}
+            {...(props as unknown as Omit<SingleNumberProps, 'get' | 'set' | 'errorData'>)}
+        />
+    )
+}

package/src/components/Obj/Textfield/ObjInteger.tsx

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import {DeepPartial, ObjNumberProps, SingleNumberProps} from "../../../types";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {fastDeepMerge} from "../../../utils";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleInteger} from "../../Single/TextField/SingleInteger.tsx";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+
+
+export const ObjInteger = <T extends object>(customProps: ObjNumberProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Obj?.Integer as DeepPartial<ObjNumberProps<T>>;
+    const {get, set, errorData, ...props} = fastDeepMerge<ObjNumberProps<T>>(defaultProps, customProps);
+    const [value, setValue] = useObjToSingle<T, number>(props.name, get, set);
+
+    return (
+        <SingleInteger
+            get={value} set={setValue}
+            errorData={errorObjectToString(props.name, errorData)}
+            {...(props as unknown as Omit<SingleNumberProps, 'get' | 'set' | 'errorData'>)}
+        />
+    )
+}

package/src/components/Obj/Textfield/ObjText.tsx

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import {DeepPartial, ObjTextProps, SingleTextProps} from "../../../types";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {fastDeepMerge} from "../../../utils";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleText} from "../../Single/TextField/SingleText.tsx";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+
+
+export const ObjText = <T extends object>(customProps: ObjTextProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Obj?.Text as DeepPartial<ObjTextProps<T>>;
+    const {get, set, errorData, ...props} = fastDeepMerge<ObjTextProps<T>>(defaultProps, customProps);
+    const [value, setValue] = useObjToSingle<T, string>(props.name, get, set);
+
+    return (
+        <SingleText
+            get={value} set={setValue}
+            errorData={errorObjectToString(props.name, errorData)}
+            {...(props as unknown as Omit<SingleTextProps, 'get' | 'set' | 'errorData'>)}
+        />
+    );
+};

package/src/components/Single/Checkbox/SingleCheckIcon.tsx

@@ -0,0 +1,25 @@
+import {useCallback, useContext} from "react";
+import {IconButton} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {SingleCheckIconProps} from "../../../types";
+import {fastDeepMerge} from "../../../utils";
+
+
+export const SingleCheckIcon = (customProps: SingleCheckIconProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.CheckIcon;
+    const {
+        get, set, on, off,
+        ...props
+    } = fastDeepMerge<SingleCheckIconProps>(defaultProps, customProps);
+
+    const onClick = useCallback(() => set((state) => !state), [set]);
+
+    return (
+        <IconButton
+            onClick={onClick}
+            {...props}
+        >
+            {get ? on : off}
+        </IconButton>
+    )
+}

package/src/components/Single/Checkbox/SingleCheckbox.tsx

@@ -0,0 +1,31 @@
+import {Checkbox, FormControlLabel} from "@mui/material";
+import React, {useCallback, useContext} from "react";
+import {SingleCheckboxProps} from "../../../types";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {fastDeepMerge} from "../../../utils";
+
+
+export const SingleCheckbox = (customProps: SingleCheckboxProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.Checkbox;
+    const {
+        get, set, label,
+        ...props
+    } = fastDeepMerge<SingleCheckboxProps>(defaultProps, customProps);
+
+    const onChange = useCallback(() => set((state) => !state), [set]);
+
+    return label == null ? (
+        <Checkbox
+            checked={get}
+            onChange={onChange}
+            {...props}
+        />
+    ) : (
+        <FormControlLabel
+            checked={get}
+            label={label}
+            onChange={onChange}
+            control={<Checkbox {...props}/>}
+        />
+    );
+};