formik-form-components 0.2.18 → 0.2.20
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 +170 -394
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,25 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Formik Form Components
|
|
2
2
|
|
|
3
|
-
A comprehensive collection of reusable, accessible, and customizable form components built with React
|
|
3
|
+
A comprehensive collection of reusable, accessible, and customizable form components built with **React**, **Material UI**, **Formik**, and **Tiptap**. This library helps you build production-ready forms faster while maintaining consistency with Material Design.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- 🚀 **30+** production-ready form components
|
|
12
|
+
- 🎨 Consistent Material Design styling
|
|
13
|
+
- 🔍 Built-in validation support (Formik + Yup)
|
|
14
|
+
- 📱 Fully responsive and mobile-friendly
|
|
15
|
+
- 🎯 Full TypeScript support
|
|
16
|
+
- 🛠️ Easy theming with MUI
|
|
17
|
+
- 📅 Date & time pickers with calendar icons
|
|
18
|
+
- ✨ Rich text editor powered by Tiptap
|
|
19
|
+
- 📂 File & image uploads with preview
|
|
20
|
+
- 🌍 Internationalization (i18n) ready
|
|
21
|
+
|
|
22
|
+
---
|
|
4
23
|
|
|
5
24
|
## Table of Contents
|
|
6
25
|
|
|
@@ -8,462 +27,219 @@ A comprehensive collection of reusable, accessible, and customizable form compon
|
|
|
8
27
|
- [Peer Dependencies](#peer-dependencies)
|
|
9
28
|
- [Getting Started](#getting-started)
|
|
10
29
|
- [Available Components](#available-components)
|
|
11
|
-
- [Component
|
|
30
|
+
- [Component Examples](#component-examples)
|
|
12
31
|
- [Theming](#theming)
|
|
13
32
|
- [TypeScript Support](#typescript-support)
|
|
14
33
|
- [Contributing](#contributing)
|
|
15
34
|
- [License](#license)
|
|
16
35
|
|
|
36
|
+
---
|
|
37
|
+
|
|
17
38
|
## Installation
|
|
18
39
|
|
|
19
40
|
```bash
|
|
20
|
-
#
|
|
21
|
-
npm install formik-form-components
|
|
41
|
+
# npm
|
|
42
|
+
npm install formik-form-components
|
|
22
43
|
|
|
23
|
-
#
|
|
44
|
+
# yarn
|
|
24
45
|
yarn add formik-form-components
|
|
25
46
|
```
|
|
26
47
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
This package has the following peer dependencies. You can install them all with a single command:
|
|
30
|
-
|
|
31
|
-
### Prerequisites
|
|
48
|
+
---
|
|
32
49
|
|
|
33
|
-
|
|
34
|
-
- Node.js 16.0.0 or higher
|
|
35
|
-
|
|
36
|
-
### Installation
|
|
37
|
-
|
|
38
|
-
Using npm:
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
# First, ensure TypeScript 5+ is installed
|
|
42
|
-
npm install --save-dev typescript@latest
|
|
50
|
+
## Getting Started
|
|
43
51
|
|
|
44
|
-
|
|
45
|
-
npm install formik @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers dayjs @iconify/react react-phone-input-2 framer-motion react-dropzone i18next react-i18next react-lazy-load-image-component @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-text-align --legacy-peer-deps
|
|
46
|
-
```
|
|
52
|
+
### 1. Wrap your app with `ThemeProvider` (recommended)
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
```tsx
|
|
55
|
+
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
49
56
|
|
|
50
|
-
|
|
51
|
-
# First, ensure TypeScript 5+ is installed
|
|
52
|
-
yarn add --dev typescript@latest
|
|
57
|
+
const theme = createTheme({});
|
|
53
58
|
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
export default function App() {
|
|
60
|
+
return (
|
|
61
|
+
<ThemeProvider theme={theme}>
|
|
62
|
+
<YourApp />
|
|
63
|
+
</ThemeProvider>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
56
66
|
```
|
|
57
67
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
Some dependencies are marked as optional and are only required if you use specific components:
|
|
61
|
-
|
|
62
|
-
- **Rich Text Editor**:
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
@tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-text-align
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
- **Date Pickers**:
|
|
69
|
-
|
|
70
|
-
```bash
|
|
71
|
-
@mui/x-date-pickers dayjs
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
- **File Upload**:
|
|
75
|
-
|
|
76
|
-
```bash
|
|
77
|
-
react-dropzone
|
|
78
|
-
```
|
|
68
|
+
---
|
|
79
69
|
|
|
80
|
-
|
|
70
|
+
### 2. Basic Form Example
|
|
81
71
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
72
|
+
```tsx
|
|
73
|
+
import { Formik, Form } from 'formik';
|
|
74
|
+
import * as Yup from 'yup';
|
|
75
|
+
import { Button, Box } from '@mui/material';
|
|
76
|
+
import {
|
|
77
|
+
AppInputField,
|
|
78
|
+
AppCheckBox,
|
|
79
|
+
AppDatePicker,
|
|
80
|
+
AppRichTextEditor,
|
|
81
|
+
AppRating,
|
|
82
|
+
AppRadioGroup,
|
|
83
|
+
AppMultiSelector,
|
|
84
|
+
} from 'formik-form-components';
|
|
85
|
+
|
|
86
|
+
const validationSchema = Yup.object({
|
|
87
|
+
name: Yup.string().required('Name is required'),
|
|
88
|
+
email: Yup.string().email('Invalid email').required('Email is required'),
|
|
89
|
+
dob: Yup.date().required('Date of birth is required'),
|
|
90
|
+
bio: Yup.string().required('Bio is required'),
|
|
91
|
+
rating: Yup.number().required('Rating is required'),
|
|
92
|
+
gender: Yup.string().required('Gender is required'),
|
|
93
|
+
interests: Yup.array().min(1, 'Select at least one interest'),
|
|
94
|
+
terms: Yup.boolean().oneOf([true], 'You must accept the terms'),
|
|
95
|
+
});
|
|
96
96
|
|
|
97
|
-
|
|
97
|
+
const interests = [
|
|
98
|
+
{ value: 'sports', label: 'Sports' },
|
|
99
|
+
{ value: 'music', label: 'Music' },
|
|
100
|
+
{ value: 'reading', label: 'Reading' },
|
|
101
|
+
{ value: 'travel', label: 'Travel' },
|
|
102
|
+
];
|
|
103
|
+
|
|
104
|
+
const genderOptions = [
|
|
105
|
+
{ value: 'male', label: 'Male' },
|
|
106
|
+
{ value: 'female', label: 'Female' },
|
|
107
|
+
{ value: 'other', label: 'Other' },
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
export default function ExampleForm() {
|
|
111
|
+
return (
|
|
112
|
+
<Formik
|
|
113
|
+
initialValues={{
|
|
114
|
+
name: '',
|
|
115
|
+
email: '',
|
|
116
|
+
dob: null,
|
|
117
|
+
bio: '',
|
|
118
|
+
rating: 0,
|
|
119
|
+
gender: '',
|
|
120
|
+
interests: [],
|
|
121
|
+
terms: false,
|
|
122
|
+
}}
|
|
123
|
+
validationSchema={validationSchema}
|
|
124
|
+
onSubmit={(values) => console.log(values)}
|
|
125
|
+
>
|
|
126
|
+
{({ isSubmitting }) => (
|
|
127
|
+
<Form>
|
|
128
|
+
<Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
|
|
129
|
+
<AppInputField name="name" label="Full Name" />
|
|
130
|
+
<AppInputField name="email" label="Email" type="email" />
|
|
131
|
+
<AppDatePicker name="dob" label="Date of Birth" />
|
|
132
|
+
<AppRichTextEditor name="bio" label="Bio" />
|
|
133
|
+
<AppRating name="rating" label="Rating" />
|
|
134
|
+
<AppRadioGroup name="gender" label="Gender" options={genderOptions} row />
|
|
135
|
+
<AppMultiSelector name="interests" label="Interests" options={interests} />
|
|
136
|
+
<AppCheckBox
|
|
137
|
+
name="terms"
|
|
138
|
+
option={[{ name: 'terms', label: 'I agree to the terms', value: 'yes' }]}
|
|
139
|
+
/>
|
|
140
|
+
<Button type="submit" variant="contained" disabled={isSubmitting}>
|
|
141
|
+
Submit
|
|
142
|
+
</Button>
|
|
143
|
+
</Box>
|
|
144
|
+
</Form>
|
|
145
|
+
)}
|
|
146
|
+
</Formik>
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
```
|
|
98
150
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
```bash
|
|
102
|
-
yarn add formik-form-components @mui/material @emotion/react @emotion/styled formik yup
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
2. **Wrap your app with ThemeProvider (optional but recommended)**:
|
|
106
|
-
|
|
107
|
-
```tsx
|
|
108
|
-
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
109
|
-
|
|
110
|
-
const theme = createTheme({
|
|
111
|
-
// Your theme configuration
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
function App() {
|
|
115
|
-
return (
|
|
116
|
-
<ThemeProvider theme={theme}>
|
|
117
|
-
<YourApp />
|
|
118
|
-
</ThemeProvider>
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
3. **Basic Form Example**:
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
import { Formik, Form } from 'formik';
|
|
127
|
-
import * as Yup from 'yup';
|
|
128
|
-
import {
|
|
129
|
-
AppInputField,
|
|
130
|
-
AppCheckBox,
|
|
131
|
-
AppDatePicker,
|
|
132
|
-
AppPhoneNoInput,
|
|
133
|
-
AppSearchableSelect,
|
|
134
|
-
AppRichTextEditor,
|
|
135
|
-
AppRating,
|
|
136
|
-
AppRadioGroup,
|
|
137
|
-
AppMultiSelector
|
|
138
|
-
} from '@tkturners/form-components';
|
|
139
|
-
import { Button, Box } from '@mui/material';
|
|
140
|
-
|
|
141
|
-
const validationSchema = Yup.object({
|
|
142
|
-
name: Yup.string().required('Name is required'),
|
|
143
|
-
email: Yup.string().email('Invalid email').required('Email is required'),
|
|
144
|
-
phone: Yup.string().required('Phone number is required'),
|
|
145
|
-
dob: Yup.date().required('Date of birth is required'),
|
|
146
|
-
bio: Yup.string().required('Bio is required'),
|
|
147
|
-
rating: Yup.number().required('Rating is required'),
|
|
148
|
-
gender: Yup.string().required('Gender is required'),
|
|
149
|
-
interests: Yup.array().min(1, 'Select at least one interest'),
|
|
150
|
-
terms: Yup.boolean().oneOf([true], 'You must accept the terms')
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
const interests = [
|
|
154
|
-
{ value: 'sports', label: 'Sports' },
|
|
155
|
-
{ value: 'music', label: 'Music' },
|
|
156
|
-
{ value: 'reading', label: 'Reading' },
|
|
157
|
-
{ value: 'travel', label: 'Travel' },
|
|
158
|
-
];
|
|
159
|
-
|
|
160
|
-
const genderOptions = [
|
|
161
|
-
{ value: 'male', label: 'Male' },
|
|
162
|
-
{ value: 'female', label: 'Female' },
|
|
163
|
-
{ value: 'other', label: 'Other' },
|
|
164
|
-
];
|
|
165
|
-
|
|
166
|
-
function MyForm() {
|
|
167
|
-
const initialValues = {
|
|
168
|
-
name: '',
|
|
169
|
-
email: '',
|
|
170
|
-
phone: '',
|
|
171
|
-
dob: null,
|
|
172
|
-
bio: '',
|
|
173
|
-
rating: 0,
|
|
174
|
-
gender: '',
|
|
175
|
-
interests: [],
|
|
176
|
-
terms: false
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
const handleSubmit = (values, { setSubmitting }) => {
|
|
180
|
-
console.log('Form submitted:', values);
|
|
181
|
-
setSubmitting(false);
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
return (
|
|
185
|
-
<Formik
|
|
186
|
-
initialValues={initialValues}
|
|
187
|
-
validationSchema={validationSchema}
|
|
188
|
-
onSubmit={handleSubmit}
|
|
189
|
-
>
|
|
190
|
-
{({ isSubmitting, setFieldValue, values }) => (
|
|
191
|
-
<Form>
|
|
192
|
-
<Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
|
|
193
|
-
<AppInputField
|
|
194
|
-
name="name"
|
|
195
|
-
label="Full Name"
|
|
196
|
-
placeholder="Enter your full name"
|
|
197
|
-
fullWidth
|
|
198
|
-
margin="normal"
|
|
199
|
-
/>
|
|
200
|
-
|
|
201
|
-
<AppInputField
|
|
202
|
-
name="email"
|
|
203
|
-
label="Email Address"
|
|
204
|
-
type="email"
|
|
205
|
-
placeholder="your.email@example.com"
|
|
206
|
-
fullWidth
|
|
207
|
-
margin="normal"
|
|
208
|
-
/>
|
|
209
|
-
|
|
210
|
-
<AppPhoneNoInput
|
|
211
|
-
name="phone"
|
|
212
|
-
label="Phone Number"
|
|
213
|
-
fullWidth
|
|
214
|
-
margin="normal"
|
|
215
|
-
/>
|
|
216
|
-
|
|
217
|
-
<AppDatePicker
|
|
218
|
-
name="dob"
|
|
219
|
-
label="Date of Birth"
|
|
220
|
-
fullWidth
|
|
221
|
-
margin="normal"
|
|
222
|
-
/>
|
|
223
|
-
|
|
224
|
-
<AppRichTextEditor
|
|
225
|
-
name="bio"
|
|
226
|
-
label="Biography"
|
|
227
|
-
placeholder="Tell us about yourself..."
|
|
228
|
-
fullWidth
|
|
229
|
-
margin="normal"
|
|
230
|
-
/>
|
|
231
|
-
|
|
232
|
-
<AppRating
|
|
233
|
-
name="rating"
|
|
234
|
-
label="How would you rate your experience?"
|
|
235
|
-
precision={0.5}
|
|
236
|
-
size="large"
|
|
237
|
-
margin="normal"
|
|
238
|
-
/>
|
|
239
|
-
|
|
240
|
-
<AppRadioGroup
|
|
241
|
-
name="gender"
|
|
242
|
-
label="Gender"
|
|
243
|
-
options={genderOptions}
|
|
244
|
-
row
|
|
245
|
-
margin="normal"
|
|
246
|
-
/>
|
|
247
|
-
|
|
248
|
-
<AppMultiSelector
|
|
249
|
-
name="interests"
|
|
250
|
-
label="Interests"
|
|
251
|
-
options={interests}
|
|
252
|
-
fullWidth
|
|
253
|
-
margin="normal"
|
|
254
|
-
/>
|
|
255
|
-
|
|
256
|
-
<AppCheckBox
|
|
257
|
-
name="terms"
|
|
258
|
-
label="I agree to the terms and conditions"
|
|
259
|
-
margin="normal"
|
|
260
|
-
/>
|
|
261
|
-
|
|
262
|
-
<Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
|
|
263
|
-
<Button
|
|
264
|
-
type="submit"
|
|
265
|
-
variant="contained"
|
|
266
|
-
color="primary"
|
|
267
|
-
disabled={isSubmitting}
|
|
268
|
-
>
|
|
269
|
-
{isSubmitting ? 'Submitting...' : 'Submit'}
|
|
270
|
-
</Button>
|
|
271
|
-
</Box>
|
|
272
|
-
</Box>
|
|
273
|
-
</Form>
|
|
274
|
-
)}
|
|
275
|
-
</Formik>
|
|
276
|
-
);
|
|
277
|
-
}
|
|
278
|
-
```
|
|
151
|
+
---
|
|
279
152
|
|
|
280
153
|
## Available Components
|
|
281
154
|
|
|
282
|
-
### Form
|
|
155
|
+
### Form Inputs
|
|
283
156
|
|
|
284
|
-
- `AppInputField`
|
|
285
|
-
- `
|
|
286
|
-
- `
|
|
287
|
-
- `AppSwitch`
|
|
157
|
+
- `AppInputField`
|
|
158
|
+
- `AppTextArea`
|
|
159
|
+
- `AppCheckBox`
|
|
160
|
+
- `AppSwitch`
|
|
161
|
+
- `AppRadioGroup`
|
|
162
|
+
- `AppRating`
|
|
288
163
|
|
|
289
|
-
###
|
|
164
|
+
### Selection Components
|
|
290
165
|
|
|
291
|
-
- `AppSelect`
|
|
292
|
-
- `AppSearchableSelect`
|
|
293
|
-
- `AppMultiSelector`
|
|
294
|
-
- `AppSearchableMultiSelector`
|
|
166
|
+
- `AppSelect`
|
|
167
|
+
- `AppSearchableSelect`
|
|
168
|
+
- `AppMultiSelector`
|
|
169
|
+
- `AppSearchableMultiSelector`
|
|
170
|
+
- `AppAutocomplete`
|
|
171
|
+
- `AppTagsCreator`
|
|
295
172
|
|
|
296
|
-
### Date & Time
|
|
173
|
+
### Date & Time Pickers
|
|
297
174
|
|
|
298
|
-
- `AppDatePicker`
|
|
299
|
-
- `AppTimePicker`
|
|
300
|
-
- `
|
|
301
|
-
- `
|
|
175
|
+
- `AppDatePicker`
|
|
176
|
+
- `AppTimePicker`
|
|
177
|
+
- `AppDateAndTimePicker`
|
|
178
|
+
- `AppDateTimePicker`
|
|
302
179
|
|
|
303
|
-
###
|
|
180
|
+
### File Handling
|
|
304
181
|
|
|
305
|
-
- `
|
|
306
|
-
- `
|
|
307
|
-
- `
|
|
182
|
+
- `AppUploadFile`
|
|
183
|
+
- `AppSimpleUploadFile`
|
|
184
|
+
- `AppUploadFile`
|
|
185
|
+
- `AppSimpleUploadFile`
|
|
308
186
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
- `AppPhoneNoInput` - Phone number input with country code selector
|
|
312
|
-
- `AppRating` - Star rating component
|
|
313
|
-
- `AppAutocomplete` - Autocomplete input with suggestions
|
|
314
|
-
- `AppSlider` - Range slider input
|
|
315
|
-
- `AppFormErrorMessage` - Displays form validation errors
|
|
316
|
-
|
|
317
|
-
## Component Documentation
|
|
318
|
-
|
|
319
|
-
### AppInputField
|
|
320
|
-
|
|
321
|
-
A versatile text input field with built-in validation and Material-UI styling.
|
|
322
|
-
|
|
323
|
-
```tsx
|
|
324
|
-
import { AppInputField } from 'formik-form-components';
|
|
325
|
-
|
|
326
|
-
<AppInputField
|
|
327
|
-
name="username"
|
|
328
|
-
label="Username"
|
|
329
|
-
placeholder="Enter your username"
|
|
330
|
-
fullWidth
|
|
331
|
-
margin="normal"
|
|
332
|
-
required
|
|
333
|
-
helperText="Choose a unique username"
|
|
334
|
-
InputProps={{
|
|
335
|
-
startAdornment: <InputAdornment position="start">@</InputAdornment>,
|
|
336
|
-
}}
|
|
337
|
-
/>
|
|
338
|
-
```
|
|
339
|
-
|
|
340
|
-
#### Props
|
|
341
|
-
|
|
342
|
-
| Prop | Type | Default | Description |
|
|
343
|
-
| ---------- | ------- | -------- | -------------------------------------------------------------- |
|
|
344
|
-
| name | string | required | Field name for Formik |
|
|
345
|
-
| label | string | '' | Field label |
|
|
346
|
-
| type | string | 'text' | Input type (text, email, password, etc.) |
|
|
347
|
-
| fullWidth | boolean | false | If true, the input will take up the full width |
|
|
348
|
-
| required | boolean | false | If true, adds required asterisk |
|
|
349
|
-
| disabled | boolean | false | If true, the input will be disabled |
|
|
350
|
-
| multiline | boolean | false | If true, renders a textarea |
|
|
351
|
-
| rows | number | 4 | Number of rows to display when multiline is true |
|
|
352
|
-
| InputProps | object | {} | Props applied to the Input component |
|
|
353
|
-
| ...other | any | - | Any other props will be passed to the underlying MUI TextField |
|
|
354
|
-
|
|
355
|
-
### AppRichTextEditor
|
|
356
|
-
|
|
357
|
-
A powerful rich text editor built with TipTap.
|
|
358
|
-
|
|
359
|
-
```tsx
|
|
360
|
-
import { AppRichTextEditor } from '@tkturners/form-components';
|
|
361
|
-
|
|
362
|
-
<AppRichTextEditor
|
|
363
|
-
name="content"
|
|
364
|
-
label="Content"
|
|
365
|
-
placeholder="Start writing here..."
|
|
366
|
-
fullWidth
|
|
367
|
-
margin="normal"
|
|
368
|
-
toolbarItems={['bold', 'italic', 'underline', 'link', 'bulletList', 'orderedList']}
|
|
369
|
-
/>
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
#### Props
|
|
373
|
-
|
|
374
|
-
| Prop | Type | Default | Description |
|
|
375
|
-
| ------------ | -------- | ------------------- | -------------------------------------------------------------- |
|
|
376
|
-
| name | string | required | Field name for Formik |
|
|
377
|
-
| label | string | '' | Field label |
|
|
378
|
-
| placeholder | string | '' | Placeholder text |
|
|
379
|
-
| toolbarItems | string[] | All available items | Array of toolbar items to display |
|
|
380
|
-
| ...other | any | - | Any other props will be passed to the underlying MUI TextField |
|
|
187
|
+
---
|
|
381
188
|
|
|
382
189
|
## Theming
|
|
383
190
|
|
|
384
|
-
All components
|
|
191
|
+
All components fully support **Material UI theming**.
|
|
385
192
|
|
|
386
193
|
```tsx
|
|
387
194
|
import { createTheme } from '@mui/material/styles';
|
|
388
195
|
|
|
389
|
-
const theme = createTheme({
|
|
390
|
-
components: {
|
|
391
|
-
MuiTextField: {
|
|
392
|
-
defaultProps: {
|
|
393
|
-
variant: 'outlined',
|
|
394
|
-
fullWidth: true,
|
|
395
|
-
margin: 'normal',
|
|
396
|
-
},
|
|
397
|
-
},
|
|
398
|
-
// Override specific component styles
|
|
399
|
-
MuiFormControl: {
|
|
400
|
-
styleOverrides: {
|
|
401
|
-
root: {
|
|
402
|
-
marginBottom: '1rem',
|
|
403
|
-
},
|
|
404
|
-
},
|
|
405
|
-
},
|
|
406
|
-
},
|
|
407
|
-
// Custom palette
|
|
196
|
+
export const theme = createTheme({
|
|
408
197
|
palette: {
|
|
409
|
-
primary: {
|
|
410
|
-
|
|
411
|
-
},
|
|
412
|
-
secondary: {
|
|
413
|
-
main: '#dc004e',
|
|
414
|
-
},
|
|
198
|
+
primary: { main: '#1976d2' },
|
|
199
|
+
secondary: { main: '#dc004e' },
|
|
415
200
|
},
|
|
416
201
|
});
|
|
417
202
|
```
|
|
418
203
|
|
|
204
|
+
### Dark Mode
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
const darkTheme = createTheme({
|
|
208
|
+
palette: { mode: 'dark' },
|
|
209
|
+
});
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
419
214
|
## TypeScript Support
|
|
420
215
|
|
|
421
|
-
All components are written in TypeScript and
|
|
216
|
+
All components are written in **TypeScript** and fully typed.
|
|
422
217
|
|
|
423
218
|
```tsx
|
|
424
219
|
type FormValues = {
|
|
425
220
|
name: string;
|
|
426
221
|
email: string;
|
|
427
|
-
// ... other fields
|
|
428
222
|
};
|
|
429
|
-
|
|
430
|
-
const validationSchema = Yup.object<FormValues>({
|
|
431
|
-
name: Yup.string().required('Required'),
|
|
432
|
-
email: Yup.string().email('Invalid email').required('Required'),
|
|
433
|
-
// ... other validations
|
|
434
|
-
});
|
|
435
|
-
|
|
436
|
-
// In your component
|
|
437
|
-
<Formik<FormValues>
|
|
438
|
-
initialValues={{
|
|
439
|
-
name: '',
|
|
440
|
-
email: '',
|
|
441
|
-
// ... other initial values
|
|
442
|
-
}}
|
|
443
|
-
validationSchema={validationSchema}
|
|
444
|
-
onSubmit={(values) => {
|
|
445
|
-
// values is properly typed as FormValues
|
|
446
|
-
console.log(values);
|
|
447
|
-
}}
|
|
448
|
-
>
|
|
449
|
-
{/* ... */}
|
|
450
|
-
</Formik>
|
|
451
223
|
```
|
|
452
224
|
|
|
453
|
-
|
|
225
|
+
---
|
|
454
226
|
|
|
455
|
-
|
|
227
|
+
## Contributing
|
|
456
228
|
|
|
457
229
|
1. Fork the repository
|
|
458
230
|
2. Create a feature branch
|
|
459
231
|
3. Commit your changes
|
|
460
|
-
4.
|
|
461
|
-
|
|
232
|
+
4. Open a Pull Request
|
|
233
|
+
|
|
234
|
+
---
|
|
462
235
|
|
|
463
236
|
## License
|
|
464
237
|
|
|
465
|
-
|
|
238
|
+
MIT © tkturners
|
|
239
|
+
|
|
240
|
+
---
|
|
466
241
|
|
|
467
242
|
## Support
|
|
468
243
|
|
|
469
|
-
If you
|
|
244
|
+
If you find a bug or have a feature request, please open an issue on GitHub:
|
|
245
|
+
https://github.com/tkturners/formik-form-components/issues
|