formik-form-components 0.2.7 → 0.2.8

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 (2) hide show
  1. package/README.md +122 -76
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -18,59 +18,99 @@ A comprehensive collection of reusable, accessible, and customizable form compon
18
18
 
19
19
  ```bash
20
20
  # Using npm
21
- npm install formik-form-components
21
+ npm install formik-form-components --legacy-peer-deps
22
22
 
23
23
  # Using yarn
24
- yarn add formik-form-components
24
+ yarn add formik-form-components --legacy-peer-deps
25
25
  ```
26
26
 
27
27
  ## Peer Dependencies
28
28
 
29
- This package requires the following peer dependencies. Make sure they are installed in your project:
29
+ This package has the following peer dependencies. You can install them all with a single command:
30
+
31
+ ### Prerequisites
32
+
33
+ - TypeScript 5.0.0 or higher is required
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
43
+
44
+ # Then install peer dependencies with --legacy-peer-deps to handle dependency conflicts
45
+ npm install @mui/material@5.15.0 @mui/icons-material@5.15.0 @mui/x-date-pickers@6.19.0 @emotion/react @emotion/styled @iconify/react @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-text-align classnames dayjs framer-motion@10.16.4 i18next react-i18next@12.3.1 react-dropzone react-phone-input-2 sanitize-html yup --legacy-peer-deps
46
+ ```
47
+
48
+ Or with Yarn:
30
49
 
31
50
  ```bash
32
- # Core React
33
- react@^17.0.0 || ^18.0.0
34
- react-dom@^17.0.0 || ^18.0.0
35
-
36
- # Material-UI v5+
37
- @emotion/react@^11.0.0
38
- @emotion/styled@^11.0.0
39
- @mui/material@^5.0.0 || ^6.0.0
40
- @mui/lab@^5.0.0 || ^6.0.0
41
- @mui/x-date-pickers@^6.0.0
42
-
43
- # Form Management
44
- formik@^2.0.0
45
-
46
- yup@^0.32.0 # Recommended for validation
47
-
48
- # Rich Text Editor (for AppRichTextEditor)
49
- @tiptap/react@^2.0.0
50
- @tiptap/starter-kit@^2.0.0
51
- @tiptap/extension-link@^2.0.0
52
- @tiptap/extension-text-align@^2.0.0
53
-
54
- # Icons (optional but recommended)
55
- @mui/icons-material@^5.0.0 || ^6.0.0
56
- @iconify/react@^4.0.0
51
+ # First, ensure TypeScript 5+ is installed
52
+ yarn add --dev typescript@latest
53
+
54
+ # Then install peer dependencies
55
+ yarn add @iconify/react@^6.0.0 @mui/icons-material@^6.0.0 @mui/material@^6.0.0 @mui/x-date-pickers@^8.0.0 @tiptap/extension-link@^3.0.0 @tiptap/extension-text-align@^3.0.0 @tiptap/react@^3.0.0 @tiptap/starter-kit@^3.0.0 classnames@^2.5.1 dayjs@^1.11.0 formik@^2.2.9 framer-motion@^12.0.0 i18next@^25.0.0 lodash@^4.17.21 react@^18.0.0 react-dom@^18.0.0 react-dropzone@^14.0.0 react-i18next@^16.0.0 react-lazy-load-image-component@^3.0.0 react-phone-input-2@^2.15.1 sanitize-html@^2.17.0 yup@^1.2.0
57
56
  ```
58
57
 
58
+ ### Optional Dependencies
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
+ ```
79
+
80
+ - **Internationalization**:
81
+
82
+ ```bash
83
+ i18next react-i18next
84
+ ```
85
+
86
+ - **Animations**:
87
+
88
+ ```bash
89
+ framer-motion
90
+ ```
91
+
92
+ - **Icons**:
93
+ ```bash
94
+ @mui/icons-material @iconify/react
95
+ ```
96
+
59
97
  ## Getting Started
60
98
 
61
99
  1. **Install the package and dependencies**:
100
+
62
101
  ```bash
63
102
  yarn add formik-form-components @mui/material @emotion/react @emotion/styled formik yup
64
103
  ```
65
104
 
66
105
  2. **Wrap your app with ThemeProvider (optional but recommended)**:
106
+
67
107
  ```tsx
68
108
  import { ThemeProvider, createTheme } from '@mui/material/styles';
69
-
109
+
70
110
  const theme = createTheme({
71
111
  // Your theme configuration
72
112
  });
73
-
113
+
74
114
  function App() {
75
115
  return (
76
116
  <ThemeProvider theme={theme}>
@@ -81,12 +121,13 @@ yup@^0.32.0 # Recommended for validation
81
121
  ```
82
122
 
83
123
  3. **Basic Form Example**:
124
+
84
125
  ```tsx
85
126
  import { Formik, Form } from 'formik';
86
127
  import * as Yup from 'yup';
87
- import {
88
- AppInputField,
89
- AppCheckBox,
128
+ import {
129
+ AppInputField,
130
+ AppCheckBox,
90
131
  AppDatePicker,
91
132
  AppPhoneNoInput,
92
133
  AppSearchableSelect,
@@ -96,7 +137,7 @@ yup@^0.32.0 # Recommended for validation
96
137
  AppMultiSelector
97
138
  } from '@tkturners/form-components';
98
139
  import { Button, Box } from '@mui/material';
99
-
140
+
100
141
  const validationSchema = Yup.object({
101
142
  name: Yup.string().required('Name is required'),
102
143
  email: Yup.string().email('Invalid email').required('Email is required'),
@@ -108,20 +149,20 @@ yup@^0.32.0 # Recommended for validation
108
149
  interests: Yup.array().min(1, 'Select at least one interest'),
109
150
  terms: Yup.boolean().oneOf([true], 'You must accept the terms')
110
151
  });
111
-
152
+
112
153
  const interests = [
113
154
  { value: 'sports', label: 'Sports' },
114
155
  { value: 'music', label: 'Music' },
115
156
  { value: 'reading', label: 'Reading' },
116
157
  { value: 'travel', label: 'Travel' },
117
158
  ];
118
-
159
+
119
160
  const genderOptions = [
120
161
  { value: 'male', label: 'Male' },
121
162
  { value: 'female', label: 'Female' },
122
163
  { value: 'other', label: 'Other' },
123
164
  ];
124
-
165
+
125
166
  function MyForm() {
126
167
  const initialValues = {
127
168
  name: '',
@@ -134,12 +175,12 @@ yup@^0.32.0 # Recommended for validation
134
175
  interests: [],
135
176
  terms: false
136
177
  };
137
-
178
+
138
179
  const handleSubmit = (values, { setSubmitting }) => {
139
180
  console.log('Form submitted:', values);
140
181
  setSubmitting(false);
141
182
  };
142
-
183
+
143
184
  return (
144
185
  <Formik
145
186
  initialValues={initialValues}
@@ -149,37 +190,37 @@ yup@^0.32.0 # Recommended for validation
149
190
  {({ isSubmitting, setFieldValue, values }) => (
150
191
  <Form>
151
192
  <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
152
- <AppInputField
153
- name="name"
154
- label="Full Name"
193
+ <AppInputField
194
+ name="name"
195
+ label="Full Name"
155
196
  placeholder="Enter your full name"
156
197
  fullWidth
157
198
  margin="normal"
158
199
  />
159
-
160
- <AppInputField
161
- name="email"
162
- label="Email Address"
200
+
201
+ <AppInputField
202
+ name="email"
203
+ label="Email Address"
163
204
  type="email"
164
205
  placeholder="your.email@example.com"
165
206
  fullWidth
166
207
  margin="normal"
167
208
  />
168
-
209
+
169
210
  <AppPhoneNoInput
170
211
  name="phone"
171
212
  label="Phone Number"
172
213
  fullWidth
173
214
  margin="normal"
174
215
  />
175
-
216
+
176
217
  <AppDatePicker
177
218
  name="dob"
178
219
  label="Date of Birth"
179
220
  fullWidth
180
221
  margin="normal"
181
222
  />
182
-
223
+
183
224
  <AppRichTextEditor
184
225
  name="bio"
185
226
  label="Biography"
@@ -187,7 +228,7 @@ yup@^0.32.0 # Recommended for validation
187
228
  fullWidth
188
229
  margin="normal"
189
230
  />
190
-
231
+
191
232
  <AppRating
192
233
  name="rating"
193
234
  label="How would you rate your experience?"
@@ -195,7 +236,7 @@ yup@^0.32.0 # Recommended for validation
195
236
  size="large"
196
237
  margin="normal"
197
238
  />
198
-
239
+
199
240
  <AppRadioGroup
200
241
  name="gender"
201
242
  label="Gender"
@@ -203,7 +244,7 @@ yup@^0.32.0 # Recommended for validation
203
244
  row
204
245
  margin="normal"
205
246
  />
206
-
247
+
207
248
  <AppMultiSelector
208
249
  name="interests"
209
250
  label="Interests"
@@ -211,17 +252,17 @@ yup@^0.32.0 # Recommended for validation
211
252
  fullWidth
212
253
  margin="normal"
213
254
  />
214
-
255
+
215
256
  <AppCheckBox
216
257
  name="terms"
217
258
  label="I agree to the terms and conditions"
218
259
  margin="normal"
219
260
  />
220
-
261
+
221
262
  <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
222
- <Button
223
- type="submit"
224
- variant="contained"
263
+ <Button
264
+ type="submit"
265
+ variant="contained"
225
266
  color="primary"
226
267
  disabled={isSubmitting}
227
268
  >
@@ -239,29 +280,34 @@ yup@^0.32.0 # Recommended for validation
239
280
  ## Available Components
240
281
 
241
282
  ### Form Controls
283
+
242
284
  - `AppInputField` - Text input field with validation
243
285
  - `AppCheckBox` - Checkbox input with label
244
286
  - `AppRadioGroup` - Group of radio buttons
245
287
  - `AppSwitch` - Toggle switch component
246
288
 
247
289
  ### Selectors
290
+
248
291
  - `AppSelect` - Basic select dropdown
249
292
  - `AppSearchableSelect` - Searchable select dropdown
250
293
  - `AppMultiSelector` - Multi-select dropdown with chips
251
294
  - `AppSearchableMultiSelector` - Searchable multi-select
252
295
 
253
296
  ### Date & Time
297
+
254
298
  - `AppDatePicker` - Date picker
255
299
  - `AppTimePicker` - Time picker
256
300
  - `AppDateTimePicker` - Combined date and time picker
257
301
  - `AppDateRangePicker` - Date range picker
258
302
 
259
303
  ### Rich Content
304
+
260
305
  - `AppRichTextEditor` - Rich text editor with formatting options
261
306
  - `AppFileUpload` - File upload component with preview
262
307
  - `AppImageUpload` - Image upload with crop and preview
263
308
 
264
309
  ### Advanced
310
+
265
311
  - `AppPhoneNoInput` - Phone number input with country code selector
266
312
  - `AppRating` - Star rating component
267
313
  - `AppAutocomplete` - Autocomplete input with suggestions
@@ -293,18 +339,18 @@ import { AppInputField } from 'formik-form-components';
293
339
 
294
340
  #### Props
295
341
 
296
- | Prop | Type | Default | Description |
297
- |------|------|---------|-------------|
298
- | name | string | required | Field name for Formik |
299
- | label | string | '' | Field label |
300
- | type | string | 'text' | Input type (text, email, password, etc.) |
301
- | fullWidth | boolean | false | If true, the input will take up the full width |
302
- | required | boolean | false | If true, adds required asterisk |
303
- | disabled | boolean | false | If true, the input will be disabled |
304
- | multiline | boolean | false | If true, renders a textarea |
305
- | rows | number | 4 | Number of rows to display when multiline is true |
306
- | InputProps | object | {} | Props applied to the Input component |
307
- | ...other | any | - | Any other props will be passed to the underlying MUI TextField |
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 |
308
354
 
309
355
  ### AppRichTextEditor
310
356
 
@@ -325,13 +371,13 @@ import { AppRichTextEditor } from '@tkturners/form-components';
325
371
 
326
372
  #### Props
327
373
 
328
- | Prop | Type | Default | Description |
329
- |------|------|---------|-------------|
330
- | name | string | required | Field name for Formik |
331
- | label | string | '' | Field label |
332
- | placeholder | string | '' | Placeholder text |
333
- | toolbarItems | string[] | All available items | Array of toolbar items to display |
334
- | ...other | any | - | Any other props will be passed to the underlying MUI TextField |
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 |
335
381
 
336
382
  ## Theming
337
383
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "formik-form-components",
3
- "version": "0.2.7",
3
+ "version": "0.2.8",
4
4
  "private": false,
5
5
  "description": "A collection of reusable form components built with React, Material UI, Formik, and Tiptap",
6
6
  "keywords": [