formik-form-components 0.2.18 → 0.2.19

package/README.md

@@ -1,7 +1,22 @@
-# formik-form-components
+# Formik Form Components
 
 A comprehensive collection of reusable, accessible, and customizable form components built with React, Material-UI, Formik, and Tiptap. Streamline your form development with pre-built, production-ready form elements that follow Material Design principles.
 
+![Form Components Preview](https://via.placeholder.com/1200x600/3f51b5/ffffff?text=Form+Components+Preview)
+
+## Features
+
+- 🚀 **30+** production-ready form components
+- 🎨 Consistent Material Design styling
+- 🔍 Built-in form validation with Yup
+- 📱 Fully responsive components
+- 🎯 TypeScript support
+- 🛠️ Customizable theming
+- 📅 Date/Time pickers with calendar icons
+- ✨ Rich text editing with Tiptap
+- 📱 Mobile-friendly file uploads
+- 🌍 Internationalization (i18n) ready
+
 ## Table of Contents
 
 - [Installation](#installation)
@@ -24,82 +39,34 @@ npm install formik-form-components --legacy-peer-deps
 yarn add formik-form-components
 ```
 
-## Peer Dependencies
-
-This package has the following peer dependencies. You can install them all with a single command:
+## Installation
 
 ### Prerequisites
 
-- TypeScript 5.0.0 or higher is required
+- TypeScript 5.0.0 or higher
 - Node.js 16.0.0 or higher
+- React 18.0.0 or higher
 
-### Installation
-
-Using npm:
-
-```bash
-# First, ensure TypeScript 5+ is installed
-npm install --save-dev typescript@latest
-
-# Then install peer dependencies with --legacy-peer-deps to handle dependency conflicts
-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
-```
-
-Or with Yarn:
+### Quick Start
 
 ```bash
-# First, ensure TypeScript 5+ is installed
-yarn add --dev typescript@latest
+# Using npm
+npx create-react-app my-app --template typescript
+cd my-app
+npm install formik-form-components
 
-# Then install peer dependencies
-yarn add 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
+# Or using Yarn
+yarn create react-app my-app --template typescript
+cd my-app
+yarn add formik-form-components
 ```
 
-### Optional Dependencies
-
-Some dependencies are marked as optional and are only required if you use specific components:
-
-- **Rich Text Editor**:
-
-  ```bash
-  @tiptap/react @tiptap/starter-kit @tiptap/extension-link @tiptap/extension-text-align
-  ```
-
-- **Date Pickers**:
-
-  ```bash
-  @mui/x-date-pickers dayjs
-  ```
-
-- **File Upload**:
-
-  ```bash
-  react-dropzone
-  ```
-
-- **Internationalization**:
-
-  ```bash
-  i18next react-i18next
-  ```
-
-- **Animations**:
-
-  ```bash
-  framer-motion
-  ```
-
-- **Icons**:
-  ```bash
-  @mui/icons-material @iconify/react
-  ```
-
 ## Getting Started
 
 1. **Install the package and dependencies**:
 
    ```bash
-   yarn add formik-form-components @mui/material @emotion/react @emotion/styled formik yup
+   npm install formik-form-components
    ```
 
 2. **Wrap your app with ThemeProvider (optional but recommended)**:
@@ -123,234 +90,339 @@ Some dependencies are marked as optional and are only required if you use specif
 3. **Basic Form Example**:
 
    ```tsx
-   import { Formik, Form } from 'formik';
-   import * as Yup from 'yup';
+   import { Formik, Form } from "formik";
+   import * as Yup from "yup";
    import {
-     AppInputField,
-     AppCheckBox,
-     AppDatePicker,
-     AppPhoneNoInput,
-     AppSearchableSelect,
-     AppRichTextEditor,
-     AppRating,
-     AppRadioGroup,
-     AppMultiSelector
-   } from '@tkturners/form-components';
-   import { Button, Box } from '@mui/material';
-
-   const validationSchema = Yup.object({
-     name: Yup.string().required('Name is required'),
-     email: Yup.string().email('Invalid email').required('Email is required'),
-     phone: Yup.string().required('Phone number is required'),
-     dob: Yup.date().required('Date of birth is required'),
-     bio: Yup.string().required('Bio is required'),
-     rating: Yup.number().required('Rating is required'),
-     gender: Yup.string().required('Gender is required'),
-     interests: Yup.array().min(1, 'Select at least one interest'),
-     terms: Yup.boolean().oneOf([true], 'You must accept the terms')
-   });
+   AppInputField,
+   AppCheckBox,
+   AppDatePicker,
+   AppRichTextEditor,
+   AppRating,
+   AppRadioGroup,
+   AppMultiSelector,
+   } from "formik-form-components";
+   import { FormikHelpers } from "formik";
+   import { Button, Box } from "@mui/material";
+   ```
 
-   const interests = [
-     { value: 'sports', label: 'Sports' },
-     { value: 'music', label: 'Music' },
-     { value: 'reading', label: 'Reading' },
-     { value: 'travel', label: 'Travel' },
-   ];
-
-   const genderOptions = [
-     { value: 'male', label: 'Male' },
-     { value: 'female', label: 'Female' },
-     { value: 'other', label: 'Other' },
-   ];
-
-   function MyForm() {
-     const initialValues = {
-       name: '',
-       email: '',
-       phone: '',
-       dob: null,
-       bio: '',
-       rating: 0,
-       gender: '',
-       interests: [],
-       terms: false
-     };
-
-     const handleSubmit = (values, { setSubmitting }) => {
-       console.log('Form submitted:', values);
-       setSubmitting(false);
-     };
+const validationSchema = Yup.object({
+name: Yup.string().required("Name is required"),
+email: Yup.string().email("Invalid email").required("Email is required"),
+phone: Yup.string().required("Phone number is required"),
+dob: Yup.date().required("Date of birth is required"),
+bio: Yup.string().required("Bio is required"),
+rating: Yup.number().required("Rating is required"),
+gender: Yup.string().required("Gender is required"),
+interests: Yup.array().min(1, "Select at least one interest"),
+terms: Yup.boolean().oneOf([true], "You must accept the terms"),
+});
 
-     return (
-       <Formik
-         initialValues={initialValues}
-         validationSchema={validationSchema}
-         onSubmit={handleSubmit}
-       >
-         {({ isSubmitting, setFieldValue, values }) => (
-           <Form>
-             <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
-               <AppInputField
-                 name="name"
-                 label="Full Name"
-                 placeholder="Enter your full name"
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppInputField
-                 name="email"
-                 label="Email Address"
-                 type="email"
-                 placeholder="your.email@example.com"
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppPhoneNoInput
-                 name="phone"
-                 label="Phone Number"
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppDatePicker
-                 name="dob"
-                 label="Date of Birth"
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppRichTextEditor
-                 name="bio"
-                 label="Biography"
-                 placeholder="Tell us about yourself..."
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppRating
-                 name="rating"
-                 label="How would you rate your experience?"
-                 precision={0.5}
-                 size="large"
-                 margin="normal"
-               />
-
-               <AppRadioGroup
-                 name="gender"
-                 label="Gender"
-                 options={genderOptions}
-                 row
-                 margin="normal"
-               />
-
-               <AppMultiSelector
-                 name="interests"
-                 label="Interests"
-                 options={interests}
-                 fullWidth
-                 margin="normal"
-               />
-
-               <AppCheckBox
-                 name="terms"
-                 label="I agree to the terms and conditions"
-                 margin="normal"
-               />
-
-               <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end' }}>
-                 <Button
-                   type="submit"
-                   variant="contained"
-                   color="primary"
-                   disabled={isSubmitting}
-                 >
-                   {isSubmitting ? 'Submitting...' : 'Submit'}
-                 </Button>
-               </Box>
-             </Box>
-           </Form>
-         )}
-       </Formik>
-     );
-   }
-   ```
+const interests = [
+{ value: "sports", label: "Sports" },
+{ value: "music", label: "Music" },
+{ value: "reading", label: "Reading" },
+{ value: "travel", label: "Travel" },
+];
+
+const genderOptions = [
+{ value: "male", label: "Male" },
+{ value: "female", label: "Female" },
+{ value: "other", label: "Other" },
+];
+
+function App() {
+const initialValues = {
+name: "",
+email: "",
+phone: "",
+dob: null,
+bio: "",
+rating: 0,
+gender: "",
+interests: [],
+terms: false,
+};
+
+const handleSubmit = (
+values: {
+[K in keyof typeof initialValues]: (typeof initialValues)[K];
+},
+{ setSubmitting }: FormikHelpers<typeof initialValues>
+) => {
+console.log("Form submitted:", values);
+setSubmitting(false);
+};
+
+return (
+<Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+{({ isSubmitting, setFieldValue, values }) => (
+
+<Form>
+<Box sx={{ maxWidth: 600, mx: "auto", p: 3 }}>
+<AppInputField
+              name="name"
+              label="Full Name"
+              placeholder="Enter your full name"
+              fullWidth
+              margin="normal"
+            />
+
+            <AppInputField
+              name="email"
+              label="Email Address"
+              type="email"
+              placeholder="your.email@example.com"
+              fullWidth
+              margin="normal"
+            />
+
+            <AppDatePicker name="birthDate" label="Birth Date" sx={{ mb: 2 }} />
+
+            <AppRichTextEditor
+              name="content"
+              label="Content"
+              variant="outlined"
+              sx={{ mb: 2 }}
+            />
+
+            <AppRating
+              name="rating"
+              label="How would you rate your experience?"
+              precision={0.5}
+              size="large"
+            />
+
+            <AppRadioGroup
+              name="gender"
+              label="Gender"
+              options={genderOptions}
+              row
+            />
+
+            <AppMultiSelector
+              name="interests"
+              label="Interests"
+              options={interests}
+              fullWidth
+            />
+
+            <AppCheckBox
+              name="terms"
+              option={[
+                {
+                  label: "I agree to terms and conditions",
+                  name: "terms",
+                  value: "agreed",
+                },
+              ]}
+              sx={{ mb: 2 }}
+            />
+
+            <Box sx={{ mt: 3, display: "flex", justifyContent: "flex-end" }}>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Submitting..." : "Submit"}
+              </Button>
+            </Box>
+          </Box>
+        </Form>
+      )}
+    </Formik>
+
+);
+}
+
+export default App;
+
+````
 
 ## Available Components
 
-### Form Controls
+### Form Inputs
 
-- `AppInputField` - Text input field with validation
-- `AppCheckBox` - Checkbox input with label
-- `AppRadioGroup` - Group of radio buttons
-- `AppSwitch` - Toggle switch component
+- `AppInputField` - Versatile text input with validation and Material-UI styling
+- `AppTextArea` - Multi-line text input with auto-resize
+- `AppCheckBox` - Customizable checkbox with label and validation
+- `AppSwitch` - Toggle switch with label and form integration
+- `AppRadioGroup` - Group of radio buttons with form validation
+- `AppRating` - Interactive star rating component
 
-### Selectors
+### Selection Components
 
-- `AppSelect` - Basic select dropdown
-- `AppSearchableSelect` - Searchable select dropdown
-- `AppMultiSelector` - Multi-select dropdown with chips
-- `AppSearchableMultiSelector` - Searchable multi-select
+- `AppSelect` - Dropdown select with Material-UI styling
+- `AppSearchableSelect` - Searchable dropdown with typeahead
+- `AppMultiSelector` - Multi-select with chips and search
+- `AppSearchableMultiSelector` - Searchable multi-select with chips
+- `AppAutocomplete` - Autocomplete with suggestions
+- `AppTagsCreator` - Tag input with creation and selection
 
-### Date & Time
+### Date & Time Pickers
 
-- `AppDatePicker` - Date picker
-- `AppTimePicker` - Time picker
-- `AppDateTimePicker` - Combined date and time picker
-- `AppDateRangePicker` - Date range picker
+- `AppDatePicker` - Date picker with calendar icon and validation
+- `AppTimePicker` - Time picker with 12/24 hour support
+- `AppDateAndTimePicker` - Combined date and time picker
+- `AppDateTimePicker` - Alternative date/time picker implementation
 
-### Rich Content
+### File Handling
 
-- `AppRichTextEditor` - Rich text editor with formatting options
-- `AppFileUpload` - File upload component with preview
+- `AppUploadFile` - File upload with drag & drop and preview
+- `AppSimpleUploadFile` - Basic file upload component
 - `AppImageUpload` - Image upload with crop and preview
 
+### Rich Content
+
+- `AppRichTextEditor` - Feature-rich WYSIWYG editor with Tiptap
+- `RichTextEditor` - Core rich text editor component
+
 ### Advanced
 
-- `AppPhoneNoInput` - Phone number input with country code selector
-- `AppRating` - Star rating component
-- `AppAutocomplete` - Autocomplete input with suggestions
-- `AppSlider` - Range slider input
-- `AppFormErrorMessage` - Displays form validation errors
+- `AppPhoneNoInput` - International phone number input
+- `AppFormErrorMessage` - Consistent error message display
+- `SubmitButton` - Form submission button with loading state
 
 ## Component Documentation
 
+## Component Examples
+
 ### AppInputField
 
 A versatile text input field with built-in validation and Material-UI styling.
 
 ```tsx
 import { AppInputField } from 'formik-form-components';
+import { InputAdornment } from '@mui/material';
+import { Email as EmailIcon } from '@mui/icons-material';
 
+// Basic usage
 <AppInputField
-  name="username"
-  label="Username"
-  placeholder="Enter your username"
+  name="email"
+  label="Email Address"
+  placeholder="Enter your email"
   fullWidth
-  margin="normal"
   required
-  helperText="Choose a unique username"
+  helperText="We'll never share your email"
   InputProps={{
-    startAdornment: <InputAdornment position="start">@</InputAdornment>,
+    startAdornment: (
+      <InputAdornment position="start">
+        <EmailIcon color="action" />
+      </InputAdornment>
+    ),
+  }}
+/>
+````
+
+### AppDatePicker
+
+Date picker with calendar icon and validation.
+
+```tsx
+import { AppDatePicker } from 'formik-form-components';
+
+<AppDatePicker
+  name="birthDate"
+  label="Date of Birth"
+  required
+  sx={{ mb: 2 }}
+  textFieldSx={{
+    '& .MuiOutlinedInput-root': {
+      '&:hover fieldset': {
+        borderColor: 'primary.main',
+      },
+    },
   }}
 />
 ```
 
-#### Props
+### AppRating
+
+Interactive star rating component with customizable colors.
+
+```tsx
+import { AppRating } from 'formik-form-components';
+
+<AppRating
+  name="rating"
+  label="Rating"
+  required
+  ratingSx={{
+    '& .MuiRating-iconFilled': {
+      color: '#ff6d75',
+    },
+    '& .MuiRating-iconHover': {
+      color: '#ff3d47',
+    },
+  }}
+/>
+```
+
+### AppUploadFile
+
+File upload component with drag & drop support.
+
+```tsx
+import { AppUploadFile } from 'formik-form-components';
+
+<AppUploadFile
+  name="document"
+  label="Upload Document"
+  accept="application/pdf"
+  maxSize={5 * 1024 * 1024} // 5MB
+  onDelete={() => setFieldValue("document", null)}
+  helperText="PDF files up to 5MB"
+/>
+```
 
-| Prop       | Type    | Default  | Description                                                    |
-| ---------- | ------- | -------- | -------------------------------------------------------------- |
-| name       | string  | required | Field name for Formik                                          |
-| label      | string  | ''       | Field label                                                    |
-| type       | string  | 'text'   | Input type (text, email, password, etc.)                       |
-| fullWidth  | boolean | false    | If true, the input will take up the full width                 |
-| required   | boolean | false    | If true, adds required asterisk                                |
-| disabled   | boolean | false    | If true, the input will be disabled                            |
-| multiline  | boolean | false    | If true, renders a textarea                                    |
-| rows       | number  | 4        | Number of rows to display when multiline is true               |
-| InputProps | object  | {}       | Props applied to the Input component                           |
-| ...other   | any     | -        | Any other props will be passed to the underlying MUI TextField |
+### AppRichTextEditor
+
+Feature-rich WYSIWYG editor based on Tiptap.
+
+```tsx
+import { AppRichTextEditor } from 'formik-form-components';
+
+<AppRichTextEditor
+  name="content"
+  label="Article Content"
+  placeholder="Start writing your article here..."
+  toolbarItems={[
+    'heading',
+    'bold', 'italic', 'underline', 'strike',
+    '|',
+    'bulletList', 'orderedList', 'blockquote',
+    '|',
+    'link', 'image', 'video',
+    '|',
+    'alignLeft', 'alignCenter', 'alignRight',
+    '|',
+    'undo', 'redo'
+  ]}
+  sx={{ minHeight: 300 }}
+/>
+```
+
+## Component Props
+
+### Common Props
+
+Most form components accept these common props:
+
+| Prop       | Type    | Default  | Description                                         |
+| ---------- | ------- | -------- | --------------------------------------------------- |
+| name       | string  | required | Field name for Formik                               |
+| label      | string  | ''       | Field label                                         |
+| required   | boolean | false    | Show required indicator                             |
+| disabled   | boolean | false    | Disable the input                                   |
+| helperText | string  | ''       | Helper text below the field                         |
+| fullWidth  | boolean | false    | Take full width of container                        |
+| sx         | SxProps | {}       | Custom styles                                       |
+| ...other   | any     | -        | Additional props passed to the underlying component |
 
 ### AppRichTextEditor
 
@@ -383,19 +455,48 @@ import { AppRichTextEditor } from '@tkturners/form-components';
 
 All components can be customized using Material-UI's theming system. You can override styles, default props, and more.
 
+### Basic Theme Customization
+
 ```tsx
 import { createTheme } from '@mui/material/styles';
 
-const theme = createTheme({
+export const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#3f51b5',
+      light: '#6573c3',
+      dark: '#2c387e',
+      contrastText: '#fff',
+    },
+    secondary: {
+      main: '#f50057',
+      light: '#f73378',
+      dark: '#ab003c',
+      contrastText: '#fff',
+    },
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h1: { fontSize: '2.5rem', fontWeight: 500 },
+    h2: { fontSize: '2rem', fontWeight: 500 },
+    // ... other typography settings
+  },
   components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: 8,
+        },
+      },
+    },
     MuiTextField: {
       defaultProps: {
         variant: 'outlined',
         fullWidth: true,
-        margin: 'normal',
+        size: 'small',
       },
     },
-    // Override specific component styles
     MuiFormControl: {
       styleOverrides: {
         root: {
@@ -403,19 +504,115 @@ const theme = createTheme({
         },
       },
     },
+    // Add more component overrides as needed
+  },
+});
+```
+
+### Customizing Specific Components
+
+You can customize specific components by targeting their class names:
+
+```tsx
+const theme = createTheme({
+  components: {
+    // Customize DatePicker
+    MuiPickersDay: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            backgroundColor: theme.palette.primary.main,
+            '&:hover': {
+              backgroundColor: theme.palette.primary.dark,
+            },
+          },
+        },
+      },
+    },
+
+    // Customize Rating
+    MuiRating: {
+      styleOverrides: {
+        iconFilled: {
+          color: '#ff6d75',
+        },
+        iconHover: {
+          color: '#ff3d47',
+        },
+      },
+    },
+
+    // Customize Select
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'rgba(0, 0, 0, 0.23)',
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: '1px',
+          },
+        },
+      },
+    },
   },
-  // Custom palette
+});
+```
+
+### Dark Mode
+
+Easily implement dark mode with Material-UI's theme system:
+
+```tsx
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+const darkTheme = createTheme({
   palette: {
+    mode: 'dark',
     primary: {
-      main: '#1976d2',
+      main: '#90caf9',
     },
     secondary: {
-      main: '#dc004e',
+      main: '#f48fb1',
+    },
+    background: {
+      default: '#121212',
+      paper: '#1e1e1e',
     },
   },
 });
+
+function App() {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      {/* Your app components */}
+    </ThemeProvider>
+  );
+}
 ```
 
+        root: {
+          marginBottom: '1rem',
+        },
+      },
+    },
+
+},
+// Custom palette
+palette: {
+primary: {
+main: '#1976d2',
+},
+secondary: {
+main: '#dc004e',
+},
+},
+});
+
+````
+
 ## TypeScript Support
 
 All components are written in TypeScript and include type definitions. The form values should be properly typed when using with Formik:
@@ -448,7 +645,7 @@ const validationSchema = Yup.object<FormValues>({
 >
   {/* ... */}
 </Formik>
-```
+````
 
 ## Contributing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formik-form-components",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "private": false,
   "description": "A collection of reusable form components built with React, Material UI, Formik, and Tiptap",
   "keywords": [