formik-form-components 0.2.30 → 0.3.1

package/README.md

@@ -1,41 +1,31 @@
 # Formik Form Components
 
-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.
+A comprehensive collection of reusable, accessible, and customizable form components built with **React**, **Tailwind CSS**, and **Formik**. This library helps you build production-ready forms faster while maintaining a clean, modern design with pure HTML5 elements.
 
-![Form Components Preview](https://via.placeholder.com/1200x600/3f51b5/ffffff?text=Form+Components+Preview)
+![npm version](https://img.shields.io/npm/v/formik-form-components)
+![license](https://img.shields.io/npm/l/formik-form-components)
+![downloads](https://img.shields.io/npm/dt/formik-form-components)
 
 ---
 
-## Features
+## ✨ Features
 
-- 🚀 **30+** production-ready form components
-- 🎨 Consistent Material Design styling
+- 🚀 **20+** production-ready form components
+- 🎨 Styled with **Tailwind CSS** for maximum flexibility
 - 🔍 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
+- 🎯 Full **TypeScript** support
+- ♿ Accessibility-first with proper ARIA attributes
+- 📅 Native HTML5 date & time pickers
+- ✨ Rich text editor powered by **Tiptap**
+- 📂 File & image uploads with drag-and-drop
 - 🌍 Internationalization (i18n) ready
+- 🎭 No dependencies on UI frameworks (MUI, etc.)
+- 🔧 Fully customizable with Tailwind classes
 
 ---
 
-## Table of Contents
-
-- [Installation](#installation)
-- [Peer Dependencies](#peer-dependencies)
-- [Getting Started](#getting-started)
-- [Available Components](#available-components)
-- [Component Examples](#component-examples)
-- [Theming](#theming)
-- [TypeScript Support](#typescript-support)
-- [Contributing](#contributing)
-- [License](#license)
-
----
-
-## Installation
+## 📦 Installation
 
 ```bash
 # npm
@@ -43,68 +33,112 @@ npm install formik-form-components
 
 # yarn
 yarn add formik-form-components
+
+# pnpm
+pnpm add formik-form-components
+```
+
+### Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install react react-dom formik tailwindcss
 ```
 
 ---
 
-## Getting Started
+## 🚀 Getting Started
 
-### 1. Wrap your app with `ThemeProvider` (recommended)
+### 1. Configure Tailwind CSS
 
-```tsx
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+If you haven't already, set up Tailwind CSS in your project:
 
-const theme = createTheme({});
+```bash
+npx tailwindcss init -p
+```
 
-export default function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <YourApp />
-    </ThemeProvider>
-  );
+Update your `tailwind.config.js` to include the package's components:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/formik-form-components/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#e3f2fd',
+          100: '#bbdefb',
+          200: '#90caf9',
+          300: '#64b5f6',
+          400: '#42a5f5',
+          500: '#2196f3',
+          600: '#1e88e5',
+          700: '#1976d2',
+          800: '#1565c0',
+          900: '#0d47a1',
+        },
+        error: {
+          50: '#ffebee',
+          100: '#ffcdd2',
+          200: '#ef9a9a',
+          300: '#e57373',
+          400: '#ef5350',
+          500: '#f44336',
+          600: '#e53935',
+          700: '#d32f2f',
+          800: '#c62828',
+          900: '#b71c1c',
+        },
+      },
+    },
+  },
+  plugins: [],
 }
 ```
 
----
+### 2. Import Tailwind CSS
 
-### 2. Basic Form Example
+In your main CSS file (e.g., `src/index.css` or `src/App.css`):
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### 3. Basic Form Example
 
 ```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,
+  AppTextArea,
+  AppSelectInput,
+  SubmitButton,
 } 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'),
-  dob: Yup.date().required('Date of birth is required'),
+  birthDate: Yup.date().required('Birth date is required'),
+  country: Yup.string().required('Country 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' },
-];
-
-const genderOptions = [
-  { value: 'male', label: 'Male' },
-  { value: 'female', label: 'Female' },
-  { value: 'other', label: 'Other' },
+const countryOptions = [
+  { label: 'United States', value: 'us' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'United Kingdom', value: 'uk' },
+  { label: 'Australia', value: 'au' },
 ];
 
 export default function ExampleForm() {
@@ -113,34 +147,69 @@ export default function ExampleForm() {
       initialValues={{
         name: '',
         email: '',
-        dob: null,
+        birthDate: null,
+        country: '',
         bio: '',
-        rating: 0,
-        gender: '',
-        interests: [],
         terms: false,
       }}
       validationSchema={validationSchema}
       onSubmit={(values) => console.log(values)}
     >
       {({ 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={[{ name: 'terms', label: 'I agree to the terms', value: 'yes' }]}
-            />
-            <Button type="submit" variant="contained" disabled={isSubmitting}>
-              Submit
-            </Button>
-          </Box>
+        <Form className="max-w-2xl mx-auto p-6 space-y-4">
+          <h1 className="text-2xl font-bold mb-6">User Registration</h1>
+          
+          <AppInputField 
+            name="name" 
+            label="Full Name" 
+            required 
+          />
+          
+          <AppInputField 
+            name="email" 
+            label="Email Address" 
+            type="email" 
+            required 
+          />
+          
+          <AppDatePicker 
+            name="birthDate" 
+            label="Date of Birth" 
+            required 
+          />
+          
+          <AppSelectInput 
+            name="country" 
+            label="Country" 
+            options={countryOptions} 
+            placeholder="Select a country"
+            required 
+          />
+          
+          <AppTextArea 
+            name="bio" 
+            label="Bio" 
+            rows={4} 
+            maxLength={500}
+            showCount
+            required 
+          />
+          
+          <AppCheckBox
+            name="terms"
+            option={[{ 
+              name: 'terms', 
+              label: 'I agree to the terms and conditions', 
+              value: true 
+            }]}
+          />
+          
+          <SubmitButton 
+            loading={isSubmitting}
+            fullWidth
+          >
+            Submit
+          </SubmitButton>
         </Form>
       )}
     </Formik>
@@ -150,94 +219,228 @@ export default function ExampleForm() {
 
 ---
 
-## Available Components
+## 📚 Available Components
 
 ### Form Inputs
 
-- `AppInputField`
-- `AppTextArea`
-- `AppCheckBox`
-- `AppSwitch`
-- `AppRadioGroup`
-- `AppRating`
+- **`AppInputField`** - Text input with validation and password toggle
+- **`AppTextArea`** - Multi-line text input with character counter
+- **`AppCheckBox`** - Checkbox input (single or multiple)
+- **`AppSwitch`** / **`AppSwitchInput`** - Toggle switch component
+- **`AppRadioGroup`** - Radio button group
+- **`AppRating`** - Star rating component
+- **`AppPhoneNoInput`** - International phone number input
 
 ### Selection Components
 
-- `AppSelect`
-- `AppMultiSelector`
-- `AppAutocomplete`
-- `AppTagsCreator`
+- **`AppSelectInput`** - Native HTML select dropdown
+- **`AppAutoComplete`** - Autocomplete with tags
+- **`AppAutoCompleter`** - Advanced autocomplete with search
+- **`AppMultiSelector`** - Multi-select with checkboxes
+- **`AppTagsCreator`** - Tag input with suggestions
 
 ### Date & Time Pickers
 
-- `AppDatePicker`
-- `AppTimePicker`
-- `AppDateAndTimePicker`
-- `AppDateTimePicker`
+- **`AppDatePicker`** - Native HTML5 date picker
+- **`AppDateAndTimePicker`** - Native HTML5 datetime-local picker
 
 ### File Handling
 
-- `AppUploadFile`
-- `AppSimpleUploadFile`
-- `AppUploadFile`
-- `AppSimpleUploadFile`
+- **`AppUploadFile`** - Drag-and-drop file upload with preview
+- **`AppSimpleUploadFile`** - Simple file upload button
+
+### Rich Text
+
+- **`AppRichTextEditor`** - Rich text editor powered by Tiptap
+
+### Other
+
+- **`SubmitButton`** - Submit button with loading state
+- **`Iconify`** - Icon component (optional, uses @iconify/react)
 
 ---
 
-## Theming
+## 🎨 Customization
 
-All components fully support **Material UI theming**.
+All components accept standard Tailwind CSS classes for customization:
 
 ```tsx
-import { createTheme } from '@mui/material/styles';
+<AppInputField 
+  name="email" 
+  label="Email" 
+  className="border-2 border-blue-500"
+  labelClassName="text-lg font-bold"
+  containerClassName="mb-6"
+/>
+```
+
+### Custom Theme Colors
 
-export const theme = createTheme({
-  palette: {
-    primary: { main: '#1976d2' },
-    secondary: { main: '#dc004e' },
+You can customize the primary and error colors in your `tailwind.config.js` to match your brand:
+
+```js
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        500: '#your-brand-color',
+        600: '#your-brand-color-dark',
+        // ... other shades
+      },
+    },
   },
-});
+},
 ```
 
-### Dark Mode
+---
+
+## 🔧 Component Props
+
+### Common Props (Available on Most Components)
 
 ```tsx
-const darkTheme = createTheme({
-  palette: { mode: 'dark' },
+interface CommonProps {
+  name: string;                    // Required: Field name for Formik
+  label?: string;                  // Label text
+  required?: boolean;              // Show required indicator
+  disabled?: boolean;              // Disable the field
+  helperText?: string;             // Helper text below input
+  className?: string;              // Custom classes for input
+  labelClassName?: string;         // Custom classes for label
+  errorClassName?: string;         // Custom classes for error text
+  containerClassName?: string;     // Custom classes for container
+}
+```
+
+### AppInputField Specific Props
+
+```tsx
+interface AppInputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+  label?: ReactNode;
+  required?: boolean;
+  helperText?: string;
+  // ... plus all HTML input attributes
+}
+```
+
+---
+
+## 📖 Advanced Examples
+
+### Custom Validation Messages
+
+```tsx
+const schema = Yup.object({
+  password: Yup.string()
+    .min(8, 'Password must be at least 8 characters')
+    .matches(/[A-Z]/, 'Must contain at least one uppercase letter')
+    .required('Password is required'),
 });
 ```
 
+### Multi-Step Form
+
+```tsx
+const [step, setStep] = useState(1);
+
+return (
+  <Formik
+    initialValues={initialValues}
+    validationSchema={getValidationSchema(step)}
+    onSubmit={(values) => {
+      if (step < 3) {
+        setStep(step + 1);
+      } else {
+        // Submit final form
+      }
+    }}
+  >
+    {/* Render different fields based on step */}
+  </Formik>
+);
+```
+
+### File Upload with Preview
+
+```tsx
+<AppUploadFile
+  name="avatar"
+  label="Upload Profile Picture"
+  accept={{ 'image/*': ['.png', '.jpg', '.jpeg'] }}
+  maxSize={2 * 1024 * 1024} // 2MB
+  maxFiles={1}
+/>
+```
+
 ---
 
-## TypeScript Support
+## 🌐 Internationalization
 
-All components are written in **TypeScript** and fully typed.
+Components support i18n through React-i18next:
 
 ```tsx
-type FormValues = {
-  name: string;
-  email: string;
-};
+import { useTranslation } from 'react-i18next';
+
+function MyForm() {
+  const { t } = useTranslation();
+  
+  return (
+    <AppInputField 
+      name="name" 
+      label={t('form.name')} 
+      placeholder={t('form.namePlaceholder')}
+    />
+  );
+}
 ```
 
 ---
 
-## Contributing
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+
+- Proper ARIA labels and descriptions
+- Keyboard navigation support
+- Screen reader friendly
+- Focus management
+- Error announcements
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
 
 1. Fork the repository
-2. Create a feature branch
-3. Commit your changes
-4. Open a Pull Request
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
 ---
 
-## License
+## 📄 License
 
-MIT © tkturners
+MIT © [tkturners](https://github.com/tkturners)
 
 ---
 
-## Support
+## 🆘 Support
 
 If you find a bug or have a feature request, please open an issue on GitHub:
-https://github.com/tkturners/formik-form-components/issues
+[https://github.com/tkturners/formik-form-components/issues](https://github.com/tkturners/formik-form-components/issues)
+
+---
+
+## 🙏 Acknowledgments
+
+- Built with [Formik](https://formik.org/)
+- Styled with [Tailwind CSS](https://tailwindcss.com/)
+- Rich text editing powered by [Tiptap](https://tiptap.dev/)
+- Icons from [@iconify/react](https://iconify.design/)
+
+---
+
+**Happy Coding! 🎉**