mui-fast-start 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.md +403 -403
  2. package/README_KR.md +403 -403
  3. package/dist/components/Object/Select/ObjSelectRecord.d.ts +2 -1
  4. package/dist/components/Object/Select/ObjSelectRecord.d.ts.map +1 -1
  5. package/dist/components/Single/Select/SingleSelectRecord.d.ts +2 -1
  6. package/dist/components/Single/Select/SingleSelectRecord.d.ts.map +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/styles/FastStartProps.d.ts +2 -1
  9. package/dist/styles/FastStartProps.d.ts.map +1 -1
  10. package/dist/types/props.d.ts +1 -1
  11. package/dist/types/props.d.ts.map +1 -1
  12. package/dist/types/provider.d.ts +2 -1
  13. package/dist/types/provider.d.ts.map +1 -1
  14. package/examples/basic/README.md +73 -73
  15. package/examples/basic/eslint.config.js +23 -23
  16. package/examples/basic/index.html +13 -13
  17. package/examples/basic/package.json +37 -37
  18. package/examples/basic/src/App.css +4 -4
  19. package/examples/basic/src/App.tsx +28 -28
  20. package/examples/basic/src/index.css +29 -29
  21. package/examples/basic/src/main.tsx +50 -50
  22. package/examples/basic/src/pages/ObjPage.tsx +175 -175
  23. package/examples/basic/src/pages/SinglePage.tsx +137 -137
  24. package/examples/basic/tsconfig.app.json +43 -43
  25. package/examples/basic/tsconfig.json +7 -7
  26. package/examples/basic/tsconfig.node.json +40 -40
  27. package/examples/basic/vite.config.ts +28 -28
  28. package/mui-fast-start-0.1.4.tgz +0 -0
  29. package/package.json +67 -67
  30. package/src/components/Object/Checkbox/ObjCheckIcon.tsx +29 -29
  31. package/src/components/Object/Checkbox/ObjCheckbox.tsx +31 -31
  32. package/src/components/Object/Select/ObjSelectOne.tsx +33 -33
  33. package/src/components/Object/Select/ObjSelectRecord.tsx +33 -33
  34. package/src/components/Object/Textfield/ObjNumber.tsx +51 -51
  35. package/src/components/Object/Textfield/ObjText.tsx +29 -29
  36. package/src/components/Single/Checkbox/SingleCheckIcon.tsx +27 -27
  37. package/src/components/Single/Checkbox/SingleCheckbox.tsx +33 -33
  38. package/src/components/Single/Select/BaseSingleSelect.tsx +45 -45
  39. package/src/components/Single/Select/SingleSelectOne.tsx +56 -56
  40. package/src/components/Single/Select/SingleSelectRecord.tsx +51 -51
  41. package/src/components/Single/TextField/SingleNumber.tsx +18 -18
  42. package/src/components/Single/TextField/SingleText.tsx +13 -13
  43. package/src/components/index.ts +15 -15
  44. package/src/hooks/index.ts +3 -3
  45. package/src/hooks/splits/useSplitNumberProps.ts +161 -161
  46. package/src/hooks/splits/useSplitTextProps.ts +36 -36
  47. package/src/hooks/state/useObjToSingle.ts +24 -24
  48. package/src/index.ts +7 -7
  49. package/src/styles/FastStartProps.ts +82 -81
  50. package/src/styles/FastStartProvider.tsx +25 -25
  51. package/src/types/index.ts +3 -3
  52. package/src/types/props.internal.ts +21 -21
  53. package/src/types/props.ts +81 -81
  54. package/src/types/provider.ts +72 -71
  55. package/src/types/types.ts +9 -9
  56. package/src/utils/index.ts +2 -2
  57. package/src/utils/number/calculate.ts +102 -102
  58. package/src/utils/object/error.ts +15 -15
  59. package/src/utils/object/merge.ts +47 -47
  60. package/tsconfig.json +34 -34
  61. package/tsconfig.lib.json +9 -9
  62. package/vite.config.ts +35 -35
package/README_KR.md CHANGED
@@ -1,404 +1,404 @@
1
- # Mui Fast Start
2
-
3
- [English](./README.md)
4
-
5
- 해당 라이브러리는 [MUI](https://mui.com/)와 [React](https://ko.react.dev/)기반으로 구현된 라이브러리로 MIT라이센스를 따르고 있습니다.
6
-
7
- 빠르게 개발을 하기 위해서 개발된 라이브러리로 비슷하거나 반복적으로 사용되는 코드를 줄이기 위한 목적으로 만들어지게 되었습니다.
8
-
9
- # Example
10
- ### 사용법
11
- 해당 라이브러이에서는 기본적으로 mui/react의 props를 확장해서 사용하고 있습니다.
12
- mui-fast-start에서 지정된 props에서 원본 props를 그대로 사용하시면 됩니다.
13
-
14
- 예시로 mui의 TextField의 사용법이 아래와 같은 경우
15
- ```tsx
16
- import TextField from '@mui/material/TextField';
17
-
18
- <TextField
19
- id="outlined-basic"
20
- label="Outlined"
21
- variant="outlined"
22
- />
23
- ```
24
- mui-fast-start에서 확장 props가 get, set라고 했을때 아래와 같이 기존의 props문법을 따르게 사용할 수 있습니다.
25
- ```tsx
26
- import { SingleText } from "mui-fast-start";
27
-
28
- <SingleText
29
- id="outlined-basic"
30
- label="Outlined"
31
- variant="outlined"
32
- get={text} set={setText}
33
- />
34
- ```
35
-
36
-
37
-
38
- # Doc
39
- ## FastStartProvider
40
- 기본값으로 주입할 **props**를 정의하는 Provider입니다.
41
- 우선순위는 `기본값 > createDefaultProps > components props`순으로 따로 props를 지정하지 않으면 여기에서 지정한 props가 전체 적용됩니다.
42
-
43
- 해당 컴포넌트는 mui의 ThemeProvider가 내장되어 있는 컴포넌트이므로 한 번 더 사용하지 않도록 주의가 필요합니다.
44
-
45
- 예시
46
- ```tsx
47
- import {createTheme, CssBaseline} from "@mui/material";
48
- import { createDefaultProps } from 'mui-fast-start/styles';
49
- import { FastStartProvider } from 'mui-fast-start';
50
-
51
- const theme = createTheme();
52
- const mfsProps = createMfsProps({
53
- Single: {
54
- MfsText: {
55
- maxLength: 255
56
- }
57
- },
58
- Object: {
59
- MfsText: {
60
- maxLength: 255
61
- }
62
- }
63
- });
64
-
65
- <FastStartProvider
66
- defaultProps={mfsProps}
67
- theme={theme}
68
- defaultMode='dark'
69
- >
70
- <CssBaseline/>
71
- <StrictMode>
72
- <App/>
73
- </StrictMode>
74
- </FastStartProvider>
75
- ```
76
-
77
- ## Single
78
- Single컴포넌트는 단일 useState에서 사용되는 컴포넌트입니다.
79
-
80
- mui에서 본래 아래와 같이 value와 onChange의 함수를 만들어 사용했던 내용을 해당 라이브러리에서는
81
-
82
- **mui 사용예제**
83
- ```tsx
84
- import React, { useState } from "react";
85
- import TextField from '@mui/material/TextField';
86
-
87
- const [text, setText] = useState<string>('');
88
-
89
- const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
90
- setText(e.target.value);
91
- }
92
-
93
- <TextField
94
- fullWidth={true}
95
- autoComplete="off"
96
- size="small"
97
- variant="outlined"
98
- label="텍스트"
99
- value={text}
100
- onChange={handleTextChange}
101
- slotProps={{
102
- htmlInput: {
103
- maxLength: 10,
104
- }
105
- }}
106
- />
107
- ```
108
-
109
- **mui-fast-start 사용예제**
110
- ```tsx
111
- import { SingleText } from "mui-fast-start";
112
-
113
- const [text, setText] = useState<string>('');
114
-
115
- <SingleText
116
- label='텍스트'
117
- maxLength={10}
118
- get={text} set={setText}
119
- />
120
- ```
121
-
122
- ## Obj
123
- name이 필수값으로 사용되며 name 기준으로 값이 변경됩니다.
124
-
125
- object타입을 받는 컴포넌트로 해당 object의 key값을 name으로 받는 컴포넌트입니다.
126
-
127
-
128
- **mui 사용예제**
129
- ```tsx
130
- import React, { useState } from "react";
131
- import TextField from '@mui/material/TextField';
132
-
133
- type TempType = {
134
- check1: boolean,
135
- check2: boolean,
136
- float: number,
137
- integer: number,
138
- tempText: string
139
- }
140
-
141
- const [temp, setTemp] = useState<TempType>({
142
- check1: false,
143
- check2: false,
144
- float: 0,
145
- integer: 0,
146
- tempText: ''
147
- });
148
-
149
- const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
150
- setTemp({...temp, tempText: e.target.value});
151
- }
152
-
153
- <TextField
154
- fullWidth={true}
155
- autoComplete="off"
156
- size="small"
157
- variant="outlined"
158
- label='테스트'
159
- value={temp.tempText}
160
- onChange={handleTextChange}
161
- />
162
- ```
163
-
164
- **mui-fast-start 사용예제**
165
- ```tsx
166
- import React, { useState } from "react";
167
- import { ObjText } from "mui-fast-start";
168
-
169
- type TempType = {
170
- check1: boolean,
171
- check2: boolean,
172
- float: number,
173
- integer: number,
174
- tempText: string
175
- }
176
-
177
- const [temp, setTemp] = useState<TempType>({
178
- check1: false,
179
- check2: false,
180
- float: 0,
181
- integer: 0,
182
- tempText: ''
183
- });
184
-
185
- <ObjText<TempType>
186
- label='텍스트'
187
- name='tempText'
188
- get={temp}
189
- set={setTemp}
190
- />
191
- ```
192
-
193
-
194
- # Props
195
- ### SingleFloat
196
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
197
-
198
- | 이름 | 타입 | 기본값 | 설명 |
199
- |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
200
- | get | number | (필수값) | useState의 1번째 값 |
201
- | set | Dispatch<SetStateAction<number>> | (필수값) | useState의 2번째 값 |
202
- | label | React.ReactNode | - | 라벨 내용 |
203
- | err | string | - | 에러 메시지 |
204
- | minLength | number | - | 입력할 수 있는 최소 길이 |
205
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
206
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
207
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
208
- | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
209
- | min | number | - | 입력할 수 있는 최소값 |
210
- | max | number | - | 입력할 수 있는 최대값 |
211
- | step | number | 0.01 | 스탭으로 올렸을때 증가하는 크기 |
212
-
213
- ### SingleInteger
214
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
215
-
216
- | 이름 | 타입 | 기본값 | 설명 |
217
- |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
218
- | get | number | (필수값) | useState의 1번째 값 |
219
- | set | Dispatch<SetStateAction<number>> | (필수값) | useState의 2번째 값 |
220
- | label | React.ReactNode | - | 라벨 내용 |
221
- | err | string | - | 에러 메시지 |
222
- | minLength | number | - | 입력할 수 있는 최소 길이 |
223
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
224
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
225
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
226
- | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
227
- | min | number | - | 입력할 수 있는 최소값 |
228
- | max | number | - | 입력할 수 있는 최대값 |
229
- | step | number | 1 | 스탭으로 올렸을때 증가하는 크기 |
230
-
231
-
232
- ### SingleText
233
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
234
-
235
- | 이름 | 타입 | 기본값 | 설명 |
236
- |:--------------:|:--------------------------------:|:-----:|:--------------------:|
237
- | get | string | (필수값) | useState의 1번째 값 |
238
- | set | Dispatch<SetStateAction<string>> | (필수값) | useState의 2번째 값 |
239
- | label | React.ReactNode | - | 라벨 내용 |
240
- | err | string | - | 에러 메시지 |
241
- | minLength | number | - | 입력할 수 있는 최소 길이 |
242
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
243
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
244
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
245
-
246
- ### SingleCheckbox
247
- 확장 props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
248
-
249
- | 이름 | 타입 | 기본값 | 설명 |
250
- |:-----:|:---------------------------------:|:-----:|:---------------:|
251
- | get | boolean | (필수값) | useState의 1번째 값 |
252
- | set | Dispatch<SetStateAction<boolean>> | (필수값) | useState의 2번째 값 |
253
- | label | React.ReactNode | - | 라벨 내용 |
254
-
255
- ### SingleCheckIcon
256
- 확장 props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
257
-
258
- | 이름 | 타입 | 기본값 | 설명 |
259
- |:---:|:---------------------------------:|:-----:|:-----------------:|
260
- | get | boolean | (필수값) | useState의 1번째 값 |
261
- | set | Dispatch<SetStateAction<boolean>> | (필수값) | useState의 2번째 값 |
262
- | on | React.ReactNode | (필수값) | true일때 표시되는 node |
263
- | off | React.ReactNode | (필수값) | false일때 표시되는 node |
264
-
265
-
266
- ### SingleSelectOne
267
- 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
268
-
269
- | 이름 | 타입 | 기본값 | 설명 |
270
- |:--------------:|:------------------------------:|:--------------------------:|:---------------------------:|
271
- | get | any | (필수값) | useState의 1번째 값 |
272
- | set | Dispatch<SetStateAction<any>> | (필수값) | useState의 2번째 값 |
273
- | label | React.ReactNode | - | 라벨 내용 |
274
- | err | string | - | 에러 메시지 |
275
- | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
276
- | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
277
- | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
278
- | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
279
- | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
280
-
281
-
282
- ### SingleSelectRecord
283
- 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
284
-
285
- | 이름 | 타입 | 기본값 | 설명 |
286
- |:--------------:|:------------------------------:|:--------------------------:|:---------------------------:|
287
- | get | any | (필수값) | useState의 1번째 값 |
288
- | set | Dispatch<SetStateAction<any>> | (필수값) | useState의 2번째 값 |
289
- | label | React.ReactNode | - | 라벨 내용 |
290
- | err | string | - | 에러 메시지 |
291
- | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
292
- | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
293
- | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
294
- | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
295
- | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
296
-
297
- ----
298
-
299
-
300
- ### ObjNumber
301
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
302
-
303
- | 이름 | 타입 | 기본값 | 설명 |
304
- |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
305
- | get | object | (필수값) | useState의 1번째 값 |
306
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
307
- | name | string | (필수값) | object의 키 값 |
308
- | label | React.ReactNode | - | 라벨 내용 |
309
- | err | object | - | 에러 메시지 |
310
- | minLength | number | - | 입력할 수 있는 최소 길이 |
311
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
312
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
313
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
314
- | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
315
- | min | number | - | 입력할 수 있는 최소값 |
316
- | max | number | - | 입력할 수 있는 최대값 |
317
- | step | number | 0.01 | 스탭으로 올렸을때 증가하는 크기 |
318
-
319
- ### ObjInteger
320
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
321
-
322
- | 이름 | 타입 | 기본값 | 설명 |
323
- |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
324
- | get | object | (필수값) | useState의 1번째 값 |
325
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
326
- | name | string | (필수값) | object의 키 값 |
327
- | label | React.ReactNode | - | 라벨 내용 |
328
- | err | object | - | 에러 메시지 |
329
- | minLength | number | - | 입력할 수 있는 최소 길이 |
330
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
331
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
332
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
333
- | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
334
- | min | number | - | 입력할 수 있는 최소값 |
335
- | max | number | - | 입력할 수 있는 최대값 |
336
- | step | number | 1 | 스탭으로 올렸을때 증가하는 크기 |
337
-
338
- ### ObjText
339
- 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
340
-
341
- | 이름 | 타입 | 기본값 | 설명 |
342
- |:--------------:|:--------------------------------:|:-----:|:--------------------:|
343
- | get | object | (필수값) | useState의 1번째 값 |
344
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
345
- | name | string | (필수값) | object의 키 값 |
346
- | label | React.ReactNode | - | 라벨 내용 |
347
- | err | object | - | 에러 메시지 |
348
- | minLength | number | - | 입력할 수 있는 최소 길이 |
349
- | maxLength | number | - | 입력할 수 있는 최대 길이 |
350
- | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
351
- | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
352
-
353
- ### SingleCheckbox
354
- 확장 props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
355
-
356
- | 이름 | 타입 | 기본값 | 설명 |
357
- |:-----:|:--------------------------------:|:-----:|:---------------:|
358
- | get | object | (필수값) | useState의 1번째 값 |
359
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
360
- | name | string | (필수값) | object의 키 값 |
361
- | label | React.ReactNode | - | 라벨 내용 |
362
-
363
- ### SingleCheckIcon
364
- 확장 props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
365
-
366
- | 이름 | 타입 | 기본값 | 설명 |
367
- |:----:|:--------------------------------:|:-----:|:-----------------:|
368
- | get | object | (필수값) | useState의 1번째 값 |
369
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
370
- | name | string | (필수값) | object의 키 값 |
371
- | on | React.ReactNode | (필수값) | true일때 표시되는 node |
372
- | off | React.ReactNode | (필수값) | false일때 표시되는 node |
373
-
374
- ### ObjSelectOne
375
- 확장 props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
376
-
377
- | 이름 | 타입 | 기본값 | 설명 |
378
- |:--------------:|:--------------------------------:|:--------------------------:|:---------------------------:|
379
- | get | object | (필수값) | useState의 1번째 값 |
380
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
381
- | name | string | (필수값) | object의 키 값 |
382
- | label | React.ReactNode | - | 라벨 내용 |
383
- | err | object | - | 에러 메시지 |
384
- | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
385
- | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
386
- | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
387
- | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
388
- | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
389
-
390
- ### SingleSelectRecord
391
- 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
392
-
393
- | 이름 | 타입 | 기본값 | 설명 |
394
- |:--------------:|:--------------------------------:|:--------------------------:|:---------------------------:|
395
- | get | object | (필수값) | useState의 1번째 값 |
396
- | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
397
- | name | string | (필수값) | object의 키 값 |
398
- | label | React.ReactNode | - | 라벨 내용 |
399
- | err | object | - | 에러 메시지 |
400
- | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
401
- | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
402
- | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
403
- | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
1
+ # Mui Fast Start
2
+
3
+ [English](./README.md)
4
+
5
+ 해당 라이브러리는 [MUI](https://mui.com/)와 [React](https://ko.react.dev/)기반으로 구현된 라이브러리로 MIT라이센스를 따르고 있습니다.
6
+
7
+ 빠르게 개발을 하기 위해서 개발된 라이브러리로 비슷하거나 반복적으로 사용되는 코드를 줄이기 위한 목적으로 만들어지게 되었습니다.
8
+
9
+ # Example
10
+ ### 사용법
11
+ 해당 라이브러이에서는 기본적으로 mui/react의 props를 확장해서 사용하고 있습니다.
12
+ mui-fast-start에서 지정된 props에서 원본 props를 그대로 사용하시면 됩니다.
13
+
14
+ 예시로 mui의 TextField의 사용법이 아래와 같은 경우
15
+ ```tsx
16
+ import TextField from '@mui/material/TextField';
17
+
18
+ <TextField
19
+ id="outlined-basic"
20
+ label="Outlined"
21
+ variant="outlined"
22
+ />
23
+ ```
24
+ mui-fast-start에서 확장 props가 get, set라고 했을때 아래와 같이 기존의 props문법을 따르게 사용할 수 있습니다.
25
+ ```tsx
26
+ import { SingleText } from "mui-fast-start";
27
+
28
+ <SingleText
29
+ id="outlined-basic"
30
+ label="Outlined"
31
+ variant="outlined"
32
+ get={text} set={setText}
33
+ />
34
+ ```
35
+
36
+
37
+
38
+ # Doc
39
+ ## FastStartProvider
40
+ 기본값으로 주입할 **props**를 정의하는 Provider입니다.
41
+ 우선순위는 `기본값 > createDefaultProps > components props`순으로 따로 props를 지정하지 않으면 여기에서 지정한 props가 전체 적용됩니다.
42
+
43
+ 해당 컴포넌트는 mui의 ThemeProvider가 내장되어 있는 컴포넌트이므로 한 번 더 사용하지 않도록 주의가 필요합니다.
44
+
45
+ 예시
46
+ ```tsx
47
+ import {createTheme, CssBaseline} from "@mui/material";
48
+ import { createDefaultProps } from 'mui-fast-start/styles';
49
+ import { FastStartProvider } from 'mui-fast-start';
50
+
51
+ const theme = createTheme();
52
+ const mfsProps = createMfsProps({
53
+ Single: {
54
+ MfsText: {
55
+ maxLength: 255
56
+ }
57
+ },
58
+ Object: {
59
+ MfsText: {
60
+ maxLength: 255
61
+ }
62
+ }
63
+ });
64
+
65
+ <FastStartProvider
66
+ defaultProps={mfsProps}
67
+ theme={theme}
68
+ defaultMode='dark'
69
+ >
70
+ <CssBaseline/>
71
+ <StrictMode>
72
+ <App/>
73
+ </StrictMode>
74
+ </FastStartProvider>
75
+ ```
76
+
77
+ ## Single
78
+ Single컴포넌트는 단일 useState에서 사용되는 컴포넌트입니다.
79
+
80
+ mui에서 본래 아래와 같이 value와 onChange의 함수를 만들어 사용했던 내용을 해당 라이브러리에서는
81
+
82
+ **mui 사용예제**
83
+ ```tsx
84
+ import React, { useState } from "react";
85
+ import TextField from '@mui/material/TextField';
86
+
87
+ const [text, setText] = useState<string>('');
88
+
89
+ const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
90
+ setText(e.target.value);
91
+ }
92
+
93
+ <TextField
94
+ fullWidth={true}
95
+ autoComplete="off"
96
+ size="small"
97
+ variant="outlined"
98
+ label="텍스트"
99
+ value={text}
100
+ onChange={handleTextChange}
101
+ slotProps={{
102
+ htmlInput: {
103
+ maxLength: 10,
104
+ }
105
+ }}
106
+ />
107
+ ```
108
+
109
+ **mui-fast-start 사용예제**
110
+ ```tsx
111
+ import { SingleText } from "mui-fast-start";
112
+
113
+ const [text, setText] = useState<string>('');
114
+
115
+ <SingleText
116
+ label='텍스트'
117
+ maxLength={10}
118
+ get={text} set={setText}
119
+ />
120
+ ```
121
+
122
+ ## Obj
123
+ name이 필수값으로 사용되며 name 기준으로 값이 변경됩니다.
124
+
125
+ object타입을 받는 컴포넌트로 해당 object의 key값을 name으로 받는 컴포넌트입니다.
126
+
127
+
128
+ **mui 사용예제**
129
+ ```tsx
130
+ import React, { useState } from "react";
131
+ import TextField from '@mui/material/TextField';
132
+
133
+ type TempType = {
134
+ check1: boolean,
135
+ check2: boolean,
136
+ float: number,
137
+ integer: number,
138
+ tempText: string
139
+ }
140
+
141
+ const [temp, setTemp] = useState<TempType>({
142
+ check1: false,
143
+ check2: false,
144
+ float: 0,
145
+ integer: 0,
146
+ tempText: ''
147
+ });
148
+
149
+ const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
150
+ setTemp({...temp, tempText: e.target.value});
151
+ }
152
+
153
+ <TextField
154
+ fullWidth={true}
155
+ autoComplete="off"
156
+ size="small"
157
+ variant="outlined"
158
+ label='테스트'
159
+ value={temp.tempText}
160
+ onChange={handleTextChange}
161
+ />
162
+ ```
163
+
164
+ **mui-fast-start 사용예제**
165
+ ```tsx
166
+ import React, { useState } from "react";
167
+ import { ObjText } from "mui-fast-start";
168
+
169
+ type TempType = {
170
+ check1: boolean,
171
+ check2: boolean,
172
+ float: number,
173
+ integer: number,
174
+ tempText: string
175
+ }
176
+
177
+ const [temp, setTemp] = useState<TempType>({
178
+ check1: false,
179
+ check2: false,
180
+ float: 0,
181
+ integer: 0,
182
+ tempText: ''
183
+ });
184
+
185
+ <ObjText<TempType>
186
+ label='텍스트'
187
+ name='tempText'
188
+ get={temp}
189
+ set={setTemp}
190
+ />
191
+ ```
192
+
193
+
194
+ # Props
195
+ ### SingleFloat
196
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
197
+
198
+ | 이름 | 타입 | 기본값 | 설명 |
199
+ |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
200
+ | get | number | (필수값) | useState의 1번째 값 |
201
+ | set | Dispatch<SetStateAction<number>> | (필수값) | useState의 2번째 값 |
202
+ | label | React.ReactNode | - | 라벨 내용 |
203
+ | err | string | - | 에러 메시지 |
204
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
205
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
206
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
207
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
208
+ | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
209
+ | min | number | - | 입력할 수 있는 최소값 |
210
+ | max | number | - | 입력할 수 있는 최대값 |
211
+ | step | number | 0.01 | 스탭으로 올렸을때 증가하는 크기 |
212
+
213
+ ### SingleInteger
214
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
215
+
216
+ | 이름 | 타입 | 기본값 | 설명 |
217
+ |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
218
+ | get | number | (필수값) | useState의 1번째 값 |
219
+ | set | Dispatch<SetStateAction<number>> | (필수값) | useState의 2번째 값 |
220
+ | label | React.ReactNode | - | 라벨 내용 |
221
+ | err | string | - | 에러 메시지 |
222
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
223
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
224
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
225
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
226
+ | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
227
+ | min | number | - | 입력할 수 있는 최소값 |
228
+ | max | number | - | 입력할 수 있는 최대값 |
229
+ | step | number | 1 | 스탭으로 올렸을때 증가하는 크기 |
230
+
231
+
232
+ ### SingleText
233
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
234
+
235
+ | 이름 | 타입 | 기본값 | 설명 |
236
+ |:--------------:|:--------------------------------:|:-----:|:--------------------:|
237
+ | get | string | (필수값) | useState의 1번째 값 |
238
+ | set | Dispatch<SetStateAction<string>> | (필수값) | useState의 2번째 값 |
239
+ | label | React.ReactNode | - | 라벨 내용 |
240
+ | err | string | - | 에러 메시지 |
241
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
242
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
243
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
244
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
245
+
246
+ ### SingleCheckbox
247
+ 확장 props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
248
+
249
+ | 이름 | 타입 | 기본값 | 설명 |
250
+ |:-----:|:---------------------------------:|:-----:|:---------------:|
251
+ | get | boolean | (필수값) | useState의 1번째 값 |
252
+ | set | Dispatch<SetStateAction<boolean>> | (필수값) | useState의 2번째 값 |
253
+ | label | React.ReactNode | - | 라벨 내용 |
254
+
255
+ ### SingleCheckIcon
256
+ 확장 props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
257
+
258
+ | 이름 | 타입 | 기본값 | 설명 |
259
+ |:---:|:---------------------------------:|:-----:|:-----------------:|
260
+ | get | boolean | (필수값) | useState의 1번째 값 |
261
+ | set | Dispatch<SetStateAction<boolean>> | (필수값) | useState의 2번째 값 |
262
+ | on | React.ReactNode | (필수값) | true일때 표시되는 node |
263
+ | off | React.ReactNode | (필수값) | false일때 표시되는 node |
264
+
265
+
266
+ ### SingleSelectOne
267
+ 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
268
+
269
+ | 이름 | 타입 | 기본값 | 설명 |
270
+ |:--------------:|:------------------------------:|:--------------------------:|:---------------------------:|
271
+ | get | any | (필수값) | useState의 1번째 값 |
272
+ | set | Dispatch<SetStateAction<any>> | (필수값) | useState의 2번째 값 |
273
+ | label | React.ReactNode | - | 라벨 내용 |
274
+ | err | string | - | 에러 메시지 |
275
+ | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
276
+ | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
277
+ | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
278
+ | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
279
+ | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
280
+
281
+
282
+ ### SingleSelectRecord
283
+ 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
284
+
285
+ | 이름 | 타입 | 기본값 | 설명 |
286
+ |:--------------:|:------------------------------:|:--------------------------:|:---------------------------:|
287
+ | get | any | (필수값) | useState의 1번째 값 |
288
+ | set | Dispatch<SetStateAction<any>> | (필수값) | useState의 2번째 값 |
289
+ | label | React.ReactNode | - | 라벨 내용 |
290
+ | err | string | - | 에러 메시지 |
291
+ | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
292
+ | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
293
+ | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
294
+ | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
295
+ | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
296
+
297
+ ----
298
+
299
+
300
+ ### ObjNumber
301
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
302
+
303
+ | 이름 | 타입 | 기본값 | 설명 |
304
+ |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
305
+ | get | object | (필수값) | useState의 1번째 값 |
306
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
307
+ | name | string | (필수값) | object의 키 값 |
308
+ | label | React.ReactNode | - | 라벨 내용 |
309
+ | err | object | - | 에러 메시지 |
310
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
311
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
312
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
313
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
314
+ | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
315
+ | min | number | - | 입력할 수 있는 최소값 |
316
+ | max | number | - | 입력할 수 있는 최대값 |
317
+ | step | number | 0.01 | 스탭으로 올렸을때 증가하는 크기 |
318
+
319
+ ### ObjInteger
320
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
321
+
322
+ | 이름 | 타입 | 기본값 | 설명 |
323
+ |:--------------:|:--------------------------------:|:-----:|:-------------------------------------:|
324
+ | get | object | (필수값) | useState의 1번째 값 |
325
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
326
+ | name | string | (필수값) | object의 키 값 |
327
+ | label | React.ReactNode | - | 라벨 내용 |
328
+ | err | object | - | 에러 메시지 |
329
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
330
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
331
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
332
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
333
+ | def | number | 0 | 입력된 숫자형식이 잘못되거나 했을때 들어가는 기본으로 들어가지는 값 |
334
+ | min | number | - | 입력할 수 있는 최소값 |
335
+ | max | number | - | 입력할 수 있는 최대값 |
336
+ | step | number | 1 | 스탭으로 올렸을때 증가하는 크기 |
337
+
338
+ ### ObjText
339
+ 확장 props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
340
+
341
+ | 이름 | 타입 | 기본값 | 설명 |
342
+ |:--------------:|:--------------------------------:|:-----:|:--------------------:|
343
+ | get | object | (필수값) | useState의 1번째 값 |
344
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
345
+ | name | string | (필수값) | object의 키 값 |
346
+ | label | React.ReactNode | - | 라벨 내용 |
347
+ | err | object | - | 에러 메시지 |
348
+ | minLength | number | - | 입력할 수 있는 최소 길이 |
349
+ | maxLength | number | - | 입력할 수 있는 최대 길이 |
350
+ | startAdornment | React.ReactNode | - | 시작 InputAdornment 형식 |
351
+ | endAdornment | React.ReactNode | - | 종료 InputAdornment 형식 |
352
+
353
+ ### SingleCheckbox
354
+ 확장 props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
355
+
356
+ | 이름 | 타입 | 기본값 | 설명 |
357
+ |:-----:|:--------------------------------:|:-----:|:---------------:|
358
+ | get | object | (필수값) | useState의 1번째 값 |
359
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
360
+ | name | string | (필수값) | object의 키 값 |
361
+ | label | React.ReactNode | - | 라벨 내용 |
362
+
363
+ ### SingleCheckIcon
364
+ 확장 props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
365
+
366
+ | 이름 | 타입 | 기본값 | 설명 |
367
+ |:----:|:--------------------------------:|:-----:|:-----------------:|
368
+ | get | object | (필수값) | useState의 1번째 값 |
369
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
370
+ | name | string | (필수값) | object의 키 값 |
371
+ | on | React.ReactNode | (필수값) | true일때 표시되는 node |
372
+ | off | React.ReactNode | (필수값) | false일때 표시되는 node |
373
+
374
+ ### ObjSelectOne
375
+ 확장 props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
376
+
377
+ | 이름 | 타입 | 기본값 | 설명 |
378
+ |:--------------:|:--------------------------------:|:--------------------------:|:---------------------------:|
379
+ | get | object | (필수값) | useState의 1번째 값 |
380
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
381
+ | name | string | (필수값) | object의 키 값 |
382
+ | label | React.ReactNode | - | 라벨 내용 |
383
+ | err | object | - | 에러 메시지 |
384
+ | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
385
+ | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
386
+ | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
387
+ | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
388
+ | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |
389
+
390
+ ### SingleSelectRecord
391
+ 확장 props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
392
+
393
+ | 이름 | 타입 | 기본값 | 설명 |
394
+ |:--------------:|:--------------------------------:|:--------------------------:|:---------------------------:|
395
+ | get | object | (필수값) | useState의 1번째 값 |
396
+ | set | Dispatch<SetStateAction<object>> | (필수값) | useState의 2번째 값 |
397
+ | name | string | (필수값) | object의 키 값 |
398
+ | label | React.ReactNode | - | 라벨 내용 |
399
+ | err | object | - | 에러 메시지 |
400
+ | emptyItem | React.ReactNode | - | 빈 값 허용 및 비어있는 아이템을 표시할 node |
401
+ | emptyValue | '' / null / undefined / any | - | 빈 값을 선택했을때 삽입되는 값 |
402
+ | items | any[] | (필수값) | 선택할 수 있는 아이템들 |
403
+ | renderMenuItem | (item: any) => React.ReactNode | - | 아이템을 렌더링하는 함수 |
404
404
  | getKey | (item: any) => string | string, number 가 아닐 경우 필수값 | 아이템을 고유한 키로 반환하는 함수 |