npm - formik-form-components - Versions diffs - 0.2.19 → 0.2.21 - Mend

formik-form-components 0.2.19 → 0.2.21

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 (7) hide show

package/README.md CHANGED Viewed

@@ -1,666 +1,245 @@
 # 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.
+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.
 ![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
+- 🔍 Built-in validation support (Formik + Yup)
+- 📱 Fully responsive and mobile-friendly
+- 🎯 Full TypeScript support
+- 🛠️ Easy theming with MUI
+- 📅 Date & time pickers with calendar icons
+- ✨ Rich text editor powered by Tiptap
+- 📂 File & image uploads with preview
 - 🌍 Internationalization (i18n) ready
+---
 ## Table of Contents
 - [Installation](#installation)
 - [Peer Dependencies](#peer-dependencies)
 - [Getting Started](#getting-started)
 - [Available Components](#available-components)
-- [Component Documentation](#component-documentation)
+- [Component Examples](#component-examples)
 - [Theming](#theming)
 - [TypeScript Support](#typescript-support)
 - [Contributing](#contributing)
 - [License](#license)
+---
 ## Installation
 ```bash
-# Using npm
-npm install formik-form-components --legacy-peer-deps
+# npm
+npm install formik-form-components
-# Using yarn
+# yarn
 yarn add formik-form-components
 ```
-## Installation
+---
-### Prerequisites
+## Getting Started
-- TypeScript 5.0.0 or higher
-- Node.js 16.0.0 or higher
-- React 18.0.0 or higher
+### 1. Wrap your app with `ThemeProvider` (recommended)
-### Quick Start
+```tsx
+import { ThemeProvider, createTheme } from '@mui/material/styles';
-```bash
-# Using npm
-npx create-react-app my-app --template typescript
-cd my-app
-npm install formik-form-components
+const theme = createTheme({});
-# Or using Yarn
-yarn create react-app my-app --template typescript
-cd my-app
-yarn add formik-form-components
+export default function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
 ```
-## Getting Started
+---
+### 2. Basic Form Example
-1. **Install the package and dependencies**:
-   ```bash
-   npm install formik-form-components
-   ```
-2. **Wrap your app with ThemeProvider (optional but recommended)**:
-   ```tsx
-   import { ThemeProvider, createTheme } from '@mui/material/styles';
-   const theme = createTheme({
-     // Your theme configuration
-   });
-   function App() {
-     return (
-       <ThemeProvider theme={theme}>
-         <YourApp />
-       </ThemeProvider>
-     );
-   }
-   ```
-3. **Basic Form Example**:
-   ```tsx
-   import { Formik, Form } from "formik";
-   import * as Yup from "yup";
-   import {
-   AppInputField,
-   AppCheckBox,
-   AppDatePicker,
-   AppRichTextEditor,
-   AppRating,
-   AppRadioGroup,
-   AppMultiSelector,
-   } from "formik-form-components";
-   import { FormikHelpers } from "formik";
-   import { Button, Box } from "@mui/material";
-   ```
+```tsx
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
+import { Button, Box } from '@mui/material';
+import {
+  AppInputField,
+  AppCheckBox,
+  AppDatePicker,
+  AppRichTextEditor,
+  AppRating,
+  AppRadioGroup,
+  AppMultiSelector,
+} from 'formik-form-components';
 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"),
+  name: Yup.string().required('Name is required'),
+  email: Yup.string().email('Invalid email').required('Email 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'),
 });
 const interests = [
-{ value: "sports", label: "Sports" },
-{ value: "music", label: "Music" },
-{ value: "reading", label: "Reading" },
-{ value: "travel", label: "Travel" },
+  { 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" },
+  { 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}
+export default function ExampleForm() {
+  return (
+    <Formik
+      initialValues={{
+        name: '',
+        email: '',
+        dob: null,
+        bio: '',
+        rating: 0,
+        gender: '',
+        interests: [],
+        terms: false,
+      }}
       validationSchema={validationSchema}
-      onSubmit={handleSubmit}
+      onSubmit={(values) => console.log(values)}
     >
-{({ 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
-            />
+      {({ isSubmitting }) => (
+        <Form>
+          <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
+            <AppInputField name="name" label="Full Name" />
+            <AppInputField name="email" label="Email" type="email" />
+            <AppDatePicker name="dob" label="Date of Birth" />
+            <AppRichTextEditor name="bio" label="Bio" />
+            <AppRating name="rating" label="Rating" />
+            <AppRadioGroup name="gender" label="Gender" options={genderOptions} row />
+            <AppMultiSelector name="interests" label="Interests" options={interests} />
             <AppCheckBox
               name="terms"
-              option={[
-                {
-                  label: "I agree to terms and conditions",
-                  name: "terms",
-                  value: "agreed",
-                },
-              ]}
-              sx={{ mb: 2 }}
+              option={[{ name: 'terms', label: 'I agree to the terms', value: 'yes' }]}
             />
-            <Box sx={{ mt: 3, display: "flex", justifyContent: "flex-end" }}>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                disabled={isSubmitting}
-              >
-                {isSubmitting ? "Submitting..." : "Submit"}
-              </Button>
-            </Box>
+            <Button type="submit" variant="contained" disabled={isSubmitting}>
+              Submit
+            </Button>
           </Box>
         </Form>
       )}
     </Formik>
-);
+  );
 }
+```
-export default App;
-````
+---
 ## Available Components
 ### Form Inputs
-- `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
+- `AppInputField`
+- `AppTextArea`
+- `AppCheckBox`
+- `AppSwitch`
+- `AppRadioGroup`
+- `AppRating`
 ### Selection Components
-- `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
+- `AppSelect`
+- `AppSearchableSelect`
+- `AppMultiSelector`
+- `AppSearchableMultiSelector`
+- `AppAutocomplete`
+- `AppTagsCreator`
 ### Date & Time Pickers
-- `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
+- `AppDatePicker`
+- `AppTimePicker`
+- `AppDateAndTimePicker`
+- `AppDateTimePicker`
 ### File Handling
-- `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` - 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="email"
-  label="Email Address"
-  placeholder="Enter your email"
-  fullWidth
-  required
-  helperText="We'll never share your email"
-  InputProps={{
-    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',
-      },
-    },
-  }}
-/>
-```
+- `AppUploadFile`
+- `AppSimpleUploadFile`
+- `AppUploadFile`
+- `AppSimpleUploadFile`
-### 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"
-/>
-```
-### 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
-A powerful rich text editor built with TipTap.
-```tsx
-import { AppRichTextEditor } from '@tkturners/form-components';
-<AppRichTextEditor
-  name="content"
-  label="Content"
-  placeholder="Start writing here..."
-  fullWidth
-  margin="normal"
-  toolbarItems={['bold', 'italic', 'underline', 'link', 'bulletList', 'orderedList']}
-/>
-```
-#### Props
-| Prop         | Type     | Default             | Description                                                    |
-| ------------ | -------- | ------------------- | -------------------------------------------------------------- |
-| name         | string   | required            | Field name for Formik                                          |
-| label        | string   | ''                  | Field label                                                    |
-| placeholder  | string   | ''                  | Placeholder text                                               |
-| toolbarItems | string[] | All available items | Array of toolbar items to display                              |
-| ...other     | any      | -                   | Any other props will be passed to the underlying MUI TextField |
+---
 ## Theming
-All components can be customized using Material-UI's theming system. You can override styles, default props, and more.
-### Basic Theme Customization
+All components fully support **Material UI theming**.
 ```tsx
 import { createTheme } from '@mui/material/styles';
 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,
-        size: 'small',
-      },
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          marginBottom: '1rem',
-        },
-      },
-    },
-    // 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',
-          },
-        },
-      },
-    },
+    primary: { main: '#1976d2' },
+    secondary: { main: '#dc004e' },
   },
 });
 ```
 ### 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: '#90caf9',
-    },
-    secondary: {
-      main: '#f48fb1',
-    },
-    background: {
-      default: '#121212',
-      paper: '#1e1e1e',
-    },
-  },
+  palette: { mode: 'dark' },
 });
-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:
+All components are written in **TypeScript** and fully typed.
 ```tsx
 type FormValues = {
   name: string;
   email: string;
-  // ... other fields
 };
+```
-const validationSchema = Yup.object<FormValues>({
-  name: Yup.string().required('Required'),
-  email: Yup.string().email('Invalid email').required('Required'),
-  // ... other validations
-});
-// In your component
-<Formik<FormValues>
-  initialValues={{
-    name: '',
-    email: '',
-    // ... other initial values
-  }}
-  validationSchema={validationSchema}
-  onSubmit={(values) => {
-    // values is properly typed as FormValues
-    console.log(values);
-  }}
->
-  {/* ... */}
-</Formik>
-````
+---
 ## Contributing
-Contributions are welcome! Please follow these steps:
 1. Fork the repository
 2. Create a feature branch
 3. Commit your changes
-4. Push to the branch
-5. Create a new Pull Request
+4. Open a Pull Request
+---
 ## License
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+MIT © tkturners
+---
 ## Support
-If you encounter any issues or have questions, please [open an issue](https://github.com/tkturners/formik-form-components/issues) on GitHub.
+If you find a bug or have a feature request, please open an issue on GitHub:
+https://github.com/tkturners/formik-form-components/issues