mui-fast-start 0.3.2 → 0.3.4
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.
- package/README.md +403 -403
- package/README_KR.md +403 -403
- package/dist/components/Object/Select/ObjSelectRecord.d.ts +2 -1
- package/dist/components/Object/Select/ObjSelectRecord.d.ts.map +1 -1
- package/dist/components/Single/Select/SingleSelectRecord.d.ts +2 -1
- package/dist/components/Single/Select/SingleSelectRecord.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/styles/FastStartProps.d.ts +2 -1
- package/dist/styles/FastStartProps.d.ts.map +1 -1
- package/dist/types/props.d.ts +1 -1
- package/dist/types/props.d.ts.map +1 -1
- package/dist/types/provider.d.ts +2 -1
- package/dist/types/provider.d.ts.map +1 -1
- package/examples/basic/README.md +73 -73
- package/examples/basic/eslint.config.js +23 -23
- package/examples/basic/index.html +13 -13
- package/examples/basic/package.json +37 -37
- package/examples/basic/src/App.css +4 -4
- package/examples/basic/src/App.tsx +28 -28
- package/examples/basic/src/index.css +29 -29
- package/examples/basic/src/main.tsx +50 -50
- package/examples/basic/src/pages/ObjPage.tsx +175 -175
- package/examples/basic/src/pages/SinglePage.tsx +144 -137
- package/examples/basic/tsconfig.app.json +43 -43
- package/examples/basic/tsconfig.json +7 -7
- package/examples/basic/tsconfig.node.json +40 -40
- package/examples/basic/vite.config.ts +28 -28
- package/mui-fast-start-0.1.4.tgz +0 -0
- package/package.json +67 -67
- package/src/components/Object/Checkbox/ObjCheckIcon.tsx +29 -29
- package/src/components/Object/Checkbox/ObjCheckbox.tsx +31 -31
- package/src/components/Object/Select/ObjSelectOne.tsx +33 -33
- package/src/components/Object/Select/ObjSelectRecord.tsx +33 -33
- package/src/components/Object/Textfield/ObjNumber.tsx +51 -51
- package/src/components/Object/Textfield/ObjText.tsx +29 -29
- package/src/components/Single/Checkbox/SingleCheckIcon.tsx +27 -27
- package/src/components/Single/Checkbox/SingleCheckbox.tsx +33 -33
- package/src/components/Single/Select/BaseSingleSelect.tsx +45 -45
- package/src/components/Single/Select/SingleSelectOne.tsx +56 -56
- package/src/components/Single/Select/SingleSelectRecord.tsx +51 -51
- package/src/components/Single/TextField/SingleNumber.tsx +18 -18
- package/src/components/Single/TextField/SingleText.tsx +13 -13
- package/src/components/index.ts +15 -15
- package/src/hooks/index.ts +3 -3
- package/src/hooks/splits/useSplitNumberProps.ts +161 -161
- package/src/hooks/splits/useSplitTextProps.ts +36 -36
- package/src/hooks/state/useObjToSingle.ts +24 -24
- package/src/index.ts +7 -7
- package/src/styles/FastStartProps.ts +82 -81
- package/src/styles/FastStartProvider.tsx +25 -25
- package/src/types/index.ts +3 -3
- package/src/types/props.internal.ts +21 -21
- package/src/types/props.ts +81 -81
- package/src/types/provider.ts +72 -71
- package/src/types/types.ts +9 -9
- package/src/utils/index.ts +2 -2
- package/src/utils/number/calculate.ts +102 -102
- package/src/utils/object/error.ts +15 -15
- package/src/utils/object/merge.ts +47 -47
- package/tsconfig.json +34 -34
- package/tsconfig.lib.json +9 -9
- package/vite.config.ts +35 -35
package/README.md
CHANGED
|
@@ -1,403 +1,403 @@
|
|
|
1
|
-
# Mui Fast Start
|
|
2
|
-
|
|
3
|
-
[한국어 (Korean)](./README_KR.md)
|
|
4
|
-
|
|
5
|
-
This library is built on [MUI](https://mui.com/) and [React](https://react.dev/), and is licensed under the MIT License.
|
|
6
|
-
|
|
7
|
-
It was developed for rapid development, aiming to reduce repetitive or similar code patterns.
|
|
8
|
-
|
|
9
|
-
# Example
|
|
10
|
-
### Usage
|
|
11
|
-
This library extends the props of MUI/React components.
|
|
12
|
-
You can use the original props along with the additional props defined by mui-fast-start.
|
|
13
|
-
|
|
14
|
-
For example, if MUI's TextField is used like this:
|
|
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
|
-
With mui-fast-start's extended props (`get`, `set`), you can use it as follows while maintaining the original props syntax:
|
|
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
|
-
A Provider that defines default **props** to inject.
|
|
41
|
-
Priority order is `default values > createDefaultProps > component props`. If no props are specified, the props defined here will be applied globally.
|
|
42
|
-
|
|
43
|
-
This component has MUI's ThemeProvider built-in, so be careful not to use ThemeProvider again.
|
|
44
|
-
|
|
45
|
-
Example:
|
|
46
|
-
```tsx
|
|
47
|
-
import {createTheme, CssBaseline} from "@mui/material";
|
|
48
|
-
import { createMfsProps } 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 components are used with a single useState.
|
|
79
|
-
|
|
80
|
-
In MUI, you would originally create value and onChange functions like this:
|
|
81
|
-
|
|
82
|
-
**MUI Example**
|
|
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="Text"
|
|
99
|
-
value={text}
|
|
100
|
-
onChange={handleTextChange}
|
|
101
|
-
slotProps={{
|
|
102
|
-
htmlInput: {
|
|
103
|
-
maxLength: 10,
|
|
104
|
-
}
|
|
105
|
-
}}
|
|
106
|
-
/>
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
**mui-fast-start Example**
|
|
110
|
-
```tsx
|
|
111
|
-
import { SingleText } from "mui-fast-start";
|
|
112
|
-
|
|
113
|
-
const [text, setText] = useState<string>('');
|
|
114
|
-
|
|
115
|
-
<SingleText
|
|
116
|
-
label='Text'
|
|
117
|
-
maxLength={10}
|
|
118
|
-
get={text} set={setText}
|
|
119
|
-
/>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## Obj
|
|
123
|
-
The `name` prop is required and values are changed based on the name.
|
|
124
|
-
|
|
125
|
-
Components that receive an object type, where the object's key is specified as the name prop.
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
**MUI Example**
|
|
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='Test'
|
|
159
|
-
value={temp.tempText}
|
|
160
|
-
onChange={handleTextChange}
|
|
161
|
-
/>
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
**mui-fast-start Example**
|
|
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='Text'
|
|
187
|
-
name='tempText'
|
|
188
|
-
get={temp}
|
|
189
|
-
set={setTemp}
|
|
190
|
-
/>
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
# Props
|
|
195
|
-
### SingleFloat
|
|
196
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
197
|
-
|
|
198
|
-
| Name | Type | Default | Description |
|
|
199
|
-
|:-:|:-:|:-:|:-:|
|
|
200
|
-
| get | number | (required) | First value of useState |
|
|
201
|
-
| set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
|
|
202
|
-
| label | React.ReactNode | - | Label content |
|
|
203
|
-
| err | string | - | Error message |
|
|
204
|
-
| minLength | number | - | Minimum input length |
|
|
205
|
-
| maxLength | number | - | Maximum input length |
|
|
206
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
207
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
208
|
-
| def | number | 0 | Default value when input format is invalid |
|
|
209
|
-
| min | number | - | Minimum value |
|
|
210
|
-
| max | number | - | Maximum value |
|
|
211
|
-
| step | number | 0.01 | Step increment size |
|
|
212
|
-
|
|
213
|
-
### SingleInteger
|
|
214
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
215
|
-
|
|
216
|
-
| Name | Type | Default | Description |
|
|
217
|
-
|:-:|:-:|:-:|:-:|
|
|
218
|
-
| get | number | (required) | First value of useState |
|
|
219
|
-
| set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
|
|
220
|
-
| label | React.ReactNode | - | Label content |
|
|
221
|
-
| err | string | - | Error message |
|
|
222
|
-
| minLength | number | - | Minimum input length |
|
|
223
|
-
| maxLength | number | - | Maximum input length |
|
|
224
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
225
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
226
|
-
| def | number | 0 | Default value when input format is invalid |
|
|
227
|
-
| min | number | - | Minimum value |
|
|
228
|
-
| max | number | - | Maximum value |
|
|
229
|
-
| step | number | 1 | Step increment size |
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
### SingleText
|
|
233
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
234
|
-
|
|
235
|
-
| Name | Type | Default | Description |
|
|
236
|
-
|:-:|:-:|:-:|:-:|
|
|
237
|
-
| get | string | (required) | First value of useState |
|
|
238
|
-
| set | Dispatch<SetStateAction<string>> | (required) | Second value of useState |
|
|
239
|
-
| label | React.ReactNode | - | Label content |
|
|
240
|
-
| err | string | - | Error message |
|
|
241
|
-
| minLength | number | - | Minimum input length |
|
|
242
|
-
| maxLength | number | - | Maximum input length |
|
|
243
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
244
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
245
|
-
|
|
246
|
-
### SingleCheckbox
|
|
247
|
-
Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
|
|
248
|
-
|
|
249
|
-
| Name | Type | Default | Description |
|
|
250
|
-
|:-:|:-:|:-:|:-:|
|
|
251
|
-
| get | boolean | (required) | First value of useState |
|
|
252
|
-
| set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
|
|
253
|
-
| label | React.ReactNode | - | Label content |
|
|
254
|
-
|
|
255
|
-
### SingleCheckIcon
|
|
256
|
-
Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
|
|
257
|
-
|
|
258
|
-
| Name | Type | Default | Description |
|
|
259
|
-
|:-:|:-:|:-:|:-:|
|
|
260
|
-
| get | boolean | (required) | First value of useState |
|
|
261
|
-
| set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
|
|
262
|
-
| on | React.ReactNode | (required) | Node displayed when true |
|
|
263
|
-
| off | React.ReactNode | (required) | Node displayed when false |
|
|
264
|
-
|
|
265
|
-
### SingleSelectOne
|
|
266
|
-
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
267
|
-
|
|
268
|
-
| Name | Type | Default | Description |
|
|
269
|
-
|:-:|:-:|:-:|:-:|
|
|
270
|
-
| get | any | (required) | First value of useState |
|
|
271
|
-
| set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
|
|
272
|
-
| label | React.ReactNode | - | Label content |
|
|
273
|
-
| err | string | - | Error message |
|
|
274
|
-
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
275
|
-
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
276
|
-
| items | any[] | (required) | Selectable items |
|
|
277
|
-
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
278
|
-
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
279
|
-
|
|
280
|
-
### SingleSelectRecord
|
|
281
|
-
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
282
|
-
|
|
283
|
-
| Name | Type | Default | Description |
|
|
284
|
-
|:-:|:-:|:-:|:-:|
|
|
285
|
-
| get | any | (required) | First value of useState |
|
|
286
|
-
| set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
|
|
287
|
-
| label | React.ReactNode | - | Label content |
|
|
288
|
-
| err | string | - | Error message |
|
|
289
|
-
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
290
|
-
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
291
|
-
| items | any[] | (required) | Selectable items |
|
|
292
|
-
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
293
|
-
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
294
|
-
|
|
295
|
-
----
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
### ObjNumber
|
|
299
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
300
|
-
|
|
301
|
-
| Name | Type | Default | Description |
|
|
302
|
-
|:-:|:-:|:-:|:-:|
|
|
303
|
-
| get | object | (required) | First value of useState |
|
|
304
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
305
|
-
| name | string | (required) | Object key name |
|
|
306
|
-
| label | React.ReactNode | - | Label content |
|
|
307
|
-
| err | object | - | Error message |
|
|
308
|
-
| minLength | number | - | Minimum input length |
|
|
309
|
-
| maxLength | number | - | Maximum input length |
|
|
310
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
311
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
312
|
-
| def | number | 0 | Default value when input format is invalid |
|
|
313
|
-
| min | number | - | Minimum value |
|
|
314
|
-
| max | number | - | Maximum value |
|
|
315
|
-
| step | number | 0.01 | Step increment size |
|
|
316
|
-
|
|
317
|
-
### ObjInteger
|
|
318
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
319
|
-
|
|
320
|
-
| Name | Type | Default | Description |
|
|
321
|
-
|:-:|:-:|:-:|:-:|
|
|
322
|
-
| get | object | (required) | First value of useState |
|
|
323
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
324
|
-
| name | string | (required) | Object key name |
|
|
325
|
-
| label | React.ReactNode | - | Label content |
|
|
326
|
-
| err | object | - | Error message |
|
|
327
|
-
| minLength | number | - | Minimum input length |
|
|
328
|
-
| maxLength | number | - | Maximum input length |
|
|
329
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
330
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
331
|
-
| def | number | 0 | Default value when input format is invalid |
|
|
332
|
-
| min | number | - | Minimum value |
|
|
333
|
-
| max | number | - | Maximum value |
|
|
334
|
-
| step | number | 1 | Step increment size |
|
|
335
|
-
|
|
336
|
-
### ObjText
|
|
337
|
-
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
338
|
-
|
|
339
|
-
| Name | Type | Default | Description |
|
|
340
|
-
|:-:|:-:|:-:|:-:|
|
|
341
|
-
| get | object | (required) | First value of useState |
|
|
342
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
343
|
-
| name | string | (required) | Object key name |
|
|
344
|
-
| label | React.ReactNode | - | Label content |
|
|
345
|
-
| err | object | - | Error message |
|
|
346
|
-
| minLength | number | - | Minimum input length |
|
|
347
|
-
| maxLength | number | - | Maximum input length |
|
|
348
|
-
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
349
|
-
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
350
|
-
|
|
351
|
-
### ObjCheckbox
|
|
352
|
-
Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
|
|
353
|
-
|
|
354
|
-
| Name | Type | Default | Description |
|
|
355
|
-
|:-:|:-:|:-:|:-:|
|
|
356
|
-
| get | object | (required) | First value of useState |
|
|
357
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
358
|
-
| name | string | (required) | Object key name |
|
|
359
|
-
| label | React.ReactNode | - | Label content |
|
|
360
|
-
|
|
361
|
-
### ObjCheckIcon
|
|
362
|
-
Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
|
|
363
|
-
|
|
364
|
-
| Name | Type | Default | Description |
|
|
365
|
-
|:-:|:-:|:-:|:-:|
|
|
366
|
-
| get | object | (required) | First value of useState |
|
|
367
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
368
|
-
| name | string | (required) | Object key name |
|
|
369
|
-
| on | React.ReactNode | (required) | Node displayed when true |
|
|
370
|
-
| off | React.ReactNode | (required) | Node displayed when false |
|
|
371
|
-
|
|
372
|
-
### ObjSelectOne
|
|
373
|
-
Extended props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
|
|
374
|
-
|
|
375
|
-
| Name | Type | Default | Description |
|
|
376
|
-
|:-:|:-:|:-:|:-:|
|
|
377
|
-
| get | object | (required) | First value of useState |
|
|
378
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
379
|
-
| name | string | (required) | Object key name |
|
|
380
|
-
| label | React.ReactNode | - | Label content |
|
|
381
|
-
| err | object | - | Error message |
|
|
382
|
-
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
383
|
-
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
384
|
-
| items | any[] | (required) | Selectable items |
|
|
385
|
-
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
386
|
-
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
387
|
-
|
|
388
|
-
### ObjSelectRecord
|
|
389
|
-
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
390
|
-
|
|
391
|
-
| Name | Type | Default | Description |
|
|
392
|
-
|:-:|:-:|:-:|:-:|
|
|
393
|
-
| get | object | (required) | First value of useState |
|
|
394
|
-
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
395
|
-
| name | string | (required) | Object key name |
|
|
396
|
-
| label | React.ReactNode | - | Label content |
|
|
397
|
-
| err | object | - | Error message |
|
|
398
|
-
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
399
|
-
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
400
|
-
| items | any[] | (required) | Selectable items |
|
|
401
|
-
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
402
|
-
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
403
|
-
|
|
1
|
+
# Mui Fast Start
|
|
2
|
+
|
|
3
|
+
[한국어 (Korean)](./README_KR.md)
|
|
4
|
+
|
|
5
|
+
This library is built on [MUI](https://mui.com/) and [React](https://react.dev/), and is licensed under the MIT License.
|
|
6
|
+
|
|
7
|
+
It was developed for rapid development, aiming to reduce repetitive or similar code patterns.
|
|
8
|
+
|
|
9
|
+
# Example
|
|
10
|
+
### Usage
|
|
11
|
+
This library extends the props of MUI/React components.
|
|
12
|
+
You can use the original props along with the additional props defined by mui-fast-start.
|
|
13
|
+
|
|
14
|
+
For example, if MUI's TextField is used like this:
|
|
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
|
+
With mui-fast-start's extended props (`get`, `set`), you can use it as follows while maintaining the original props syntax:
|
|
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
|
+
A Provider that defines default **props** to inject.
|
|
41
|
+
Priority order is `default values > createDefaultProps > component props`. If no props are specified, the props defined here will be applied globally.
|
|
42
|
+
|
|
43
|
+
This component has MUI's ThemeProvider built-in, so be careful not to use ThemeProvider again.
|
|
44
|
+
|
|
45
|
+
Example:
|
|
46
|
+
```tsx
|
|
47
|
+
import {createTheme, CssBaseline} from "@mui/material";
|
|
48
|
+
import { createMfsProps } 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 components are used with a single useState.
|
|
79
|
+
|
|
80
|
+
In MUI, you would originally create value and onChange functions like this:
|
|
81
|
+
|
|
82
|
+
**MUI Example**
|
|
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="Text"
|
|
99
|
+
value={text}
|
|
100
|
+
onChange={handleTextChange}
|
|
101
|
+
slotProps={{
|
|
102
|
+
htmlInput: {
|
|
103
|
+
maxLength: 10,
|
|
104
|
+
}
|
|
105
|
+
}}
|
|
106
|
+
/>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**mui-fast-start Example**
|
|
110
|
+
```tsx
|
|
111
|
+
import { SingleText } from "mui-fast-start";
|
|
112
|
+
|
|
113
|
+
const [text, setText] = useState<string>('');
|
|
114
|
+
|
|
115
|
+
<SingleText
|
|
116
|
+
label='Text'
|
|
117
|
+
maxLength={10}
|
|
118
|
+
get={text} set={setText}
|
|
119
|
+
/>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Obj
|
|
123
|
+
The `name` prop is required and values are changed based on the name.
|
|
124
|
+
|
|
125
|
+
Components that receive an object type, where the object's key is specified as the name prop.
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
**MUI Example**
|
|
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='Test'
|
|
159
|
+
value={temp.tempText}
|
|
160
|
+
onChange={handleTextChange}
|
|
161
|
+
/>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
**mui-fast-start Example**
|
|
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='Text'
|
|
187
|
+
name='tempText'
|
|
188
|
+
get={temp}
|
|
189
|
+
set={setTemp}
|
|
190
|
+
/>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
# Props
|
|
195
|
+
### SingleFloat
|
|
196
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
197
|
+
|
|
198
|
+
| Name | Type | Default | Description |
|
|
199
|
+
|:-:|:-:|:-:|:-:|
|
|
200
|
+
| get | number | (required) | First value of useState |
|
|
201
|
+
| set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
|
|
202
|
+
| label | React.ReactNode | - | Label content |
|
|
203
|
+
| err | string | - | Error message |
|
|
204
|
+
| minLength | number | - | Minimum input length |
|
|
205
|
+
| maxLength | number | - | Maximum input length |
|
|
206
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
207
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
208
|
+
| def | number | 0 | Default value when input format is invalid |
|
|
209
|
+
| min | number | - | Minimum value |
|
|
210
|
+
| max | number | - | Maximum value |
|
|
211
|
+
| step | number | 0.01 | Step increment size |
|
|
212
|
+
|
|
213
|
+
### SingleInteger
|
|
214
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
215
|
+
|
|
216
|
+
| Name | Type | Default | Description |
|
|
217
|
+
|:-:|:-:|:-:|:-:|
|
|
218
|
+
| get | number | (required) | First value of useState |
|
|
219
|
+
| set | Dispatch<SetStateAction<number>> | (required) | Second value of useState |
|
|
220
|
+
| label | React.ReactNode | - | Label content |
|
|
221
|
+
| err | string | - | Error message |
|
|
222
|
+
| minLength | number | - | Minimum input length |
|
|
223
|
+
| maxLength | number | - | Maximum input length |
|
|
224
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
225
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
226
|
+
| def | number | 0 | Default value when input format is invalid |
|
|
227
|
+
| min | number | - | Minimum value |
|
|
228
|
+
| max | number | - | Maximum value |
|
|
229
|
+
| step | number | 1 | Step increment size |
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
### SingleText
|
|
233
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
234
|
+
|
|
235
|
+
| Name | Type | Default | Description |
|
|
236
|
+
|:-:|:-:|:-:|:-:|
|
|
237
|
+
| get | string | (required) | First value of useState |
|
|
238
|
+
| set | Dispatch<SetStateAction<string>> | (required) | Second value of useState |
|
|
239
|
+
| label | React.ReactNode | - | Label content |
|
|
240
|
+
| err | string | - | Error message |
|
|
241
|
+
| minLength | number | - | Minimum input length |
|
|
242
|
+
| maxLength | number | - | Maximum input length |
|
|
243
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
244
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
245
|
+
|
|
246
|
+
### SingleCheckbox
|
|
247
|
+
Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
|
|
248
|
+
|
|
249
|
+
| Name | Type | Default | Description |
|
|
250
|
+
|:-:|:-:|:-:|:-:|
|
|
251
|
+
| get | boolean | (required) | First value of useState |
|
|
252
|
+
| set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
|
|
253
|
+
| label | React.ReactNode | - | Label content |
|
|
254
|
+
|
|
255
|
+
### SingleCheckIcon
|
|
256
|
+
Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
|
|
257
|
+
|
|
258
|
+
| Name | Type | Default | Description |
|
|
259
|
+
|:-:|:-:|:-:|:-:|
|
|
260
|
+
| get | boolean | (required) | First value of useState |
|
|
261
|
+
| set | Dispatch<SetStateAction<boolean>> | (required) | Second value of useState |
|
|
262
|
+
| on | React.ReactNode | (required) | Node displayed when true |
|
|
263
|
+
| off | React.ReactNode | (required) | Node displayed when false |
|
|
264
|
+
|
|
265
|
+
### SingleSelectOne
|
|
266
|
+
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
267
|
+
|
|
268
|
+
| Name | Type | Default | Description |
|
|
269
|
+
|:-:|:-:|:-:|:-:|
|
|
270
|
+
| get | any | (required) | First value of useState |
|
|
271
|
+
| set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
|
|
272
|
+
| label | React.ReactNode | - | Label content |
|
|
273
|
+
| err | string | - | Error message |
|
|
274
|
+
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
275
|
+
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
276
|
+
| items | any[] | (required) | Selectable items |
|
|
277
|
+
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
278
|
+
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
279
|
+
|
|
280
|
+
### SingleSelectRecord
|
|
281
|
+
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
282
|
+
|
|
283
|
+
| Name | Type | Default | Description |
|
|
284
|
+
|:-:|:-:|:-:|:-:|
|
|
285
|
+
| get | any | (required) | First value of useState |
|
|
286
|
+
| set | Dispatch<SetStateAction<any>> | (required) | Second value of useState |
|
|
287
|
+
| label | React.ReactNode | - | Label content |
|
|
288
|
+
| err | string | - | Error message |
|
|
289
|
+
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
290
|
+
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
291
|
+
| items | any[] | (required) | Selectable items |
|
|
292
|
+
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
293
|
+
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
294
|
+
|
|
295
|
+
----
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
### ObjNumber
|
|
299
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
300
|
+
|
|
301
|
+
| Name | Type | Default | Description |
|
|
302
|
+
|:-:|:-:|:-:|:-:|
|
|
303
|
+
| get | object | (required) | First value of useState |
|
|
304
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
305
|
+
| name | string | (required) | Object key name |
|
|
306
|
+
| label | React.ReactNode | - | Label content |
|
|
307
|
+
| err | object | - | Error message |
|
|
308
|
+
| minLength | number | - | Minimum input length |
|
|
309
|
+
| maxLength | number | - | Maximum input length |
|
|
310
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
311
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
312
|
+
| def | number | 0 | Default value when input format is invalid |
|
|
313
|
+
| min | number | - | Minimum value |
|
|
314
|
+
| max | number | - | Maximum value |
|
|
315
|
+
| step | number | 0.01 | Step increment size |
|
|
316
|
+
|
|
317
|
+
### ObjInteger
|
|
318
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
319
|
+
|
|
320
|
+
| Name | Type | Default | Description |
|
|
321
|
+
|:-:|:-:|:-:|:-:|
|
|
322
|
+
| get | object | (required) | First value of useState |
|
|
323
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
324
|
+
| name | string | (required) | Object key name |
|
|
325
|
+
| label | React.ReactNode | - | Label content |
|
|
326
|
+
| err | object | - | Error message |
|
|
327
|
+
| minLength | number | - | Minimum input length |
|
|
328
|
+
| maxLength | number | - | Maximum input length |
|
|
329
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
330
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
331
|
+
| def | number | 0 | Default value when input format is invalid |
|
|
332
|
+
| min | number | - | Minimum value |
|
|
333
|
+
| max | number | - | Maximum value |
|
|
334
|
+
| step | number | 1 | Step increment size |
|
|
335
|
+
|
|
336
|
+
### ObjText
|
|
337
|
+
Extended props: [TextFieldProps](https://mui.com/material-ui/api/text-field/)
|
|
338
|
+
|
|
339
|
+
| Name | Type | Default | Description |
|
|
340
|
+
|:-:|:-:|:-:|:-:|
|
|
341
|
+
| get | object | (required) | First value of useState |
|
|
342
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
343
|
+
| name | string | (required) | Object key name |
|
|
344
|
+
| label | React.ReactNode | - | Label content |
|
|
345
|
+
| err | object | - | Error message |
|
|
346
|
+
| minLength | number | - | Minimum input length |
|
|
347
|
+
| maxLength | number | - | Maximum input length |
|
|
348
|
+
| startAdornment | React.ReactNode | - | Start InputAdornment |
|
|
349
|
+
| endAdornment | React.ReactNode | - | End InputAdornment |
|
|
350
|
+
|
|
351
|
+
### ObjCheckbox
|
|
352
|
+
Extended props: [CheckboxProps](https://mui.com/material-ui/api/checkbox/)
|
|
353
|
+
|
|
354
|
+
| Name | Type | Default | Description |
|
|
355
|
+
|:-:|:-:|:-:|:-:|
|
|
356
|
+
| get | object | (required) | First value of useState |
|
|
357
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
358
|
+
| name | string | (required) | Object key name |
|
|
359
|
+
| label | React.ReactNode | - | Label content |
|
|
360
|
+
|
|
361
|
+
### ObjCheckIcon
|
|
362
|
+
Extended props: [IconButtonProps](https://mui.com/material-ui/api/icon-button/)
|
|
363
|
+
|
|
364
|
+
| Name | Type | Default | Description |
|
|
365
|
+
|:-:|:-:|:-:|:-:|
|
|
366
|
+
| get | object | (required) | First value of useState |
|
|
367
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
368
|
+
| name | string | (required) | Object key name |
|
|
369
|
+
| on | React.ReactNode | (required) | Node displayed when true |
|
|
370
|
+
| off | React.ReactNode | (required) | Node displayed when false |
|
|
371
|
+
|
|
372
|
+
### ObjSelectOne
|
|
373
|
+
Extended props: [ObjSelectOne](https://mui.com/material-ui/api/select/)
|
|
374
|
+
|
|
375
|
+
| Name | Type | Default | Description |
|
|
376
|
+
|:-:|:-:|:-:|:-:|
|
|
377
|
+
| get | object | (required) | First value of useState |
|
|
378
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
379
|
+
| name | string | (required) | Object key name |
|
|
380
|
+
| label | React.ReactNode | - | Label content |
|
|
381
|
+
| err | object | - | Error message |
|
|
382
|
+
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
383
|
+
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
384
|
+
| items | any[] | (required) | Selectable items |
|
|
385
|
+
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
386
|
+
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
387
|
+
|
|
388
|
+
### ObjSelectRecord
|
|
389
|
+
Extended props: [SingleSelectOne](https://mui.com/material-ui/api/select/)
|
|
390
|
+
|
|
391
|
+
| Name | Type | Default | Description |
|
|
392
|
+
|:-:|:-:|:-:|:-:|
|
|
393
|
+
| get | object | (required) | First value of useState |
|
|
394
|
+
| set | Dispatch<SetStateAction<object>> | (required) | Second value of useState |
|
|
395
|
+
| name | string | (required) | Object key name |
|
|
396
|
+
| label | React.ReactNode | - | Label content |
|
|
397
|
+
| err | object | - | Error message |
|
|
398
|
+
| emptyItem | React.ReactNode | - | Node to display for empty item (allows empty value) |
|
|
399
|
+
| emptyValue | '' / null / undefined / any | - | Value inserted when empty item is selected |
|
|
400
|
+
| items | any[] | (required) | Selectable items |
|
|
401
|
+
| renderMenuItem | (item: any) => React.ReactNode | - | Function to render menu item |
|
|
402
|
+
| getKey | (item: any) => string | Required if item is not string or number | Function to return unique key for item |
|
|
403
|
+
|