formik-form-components 0.3.1 → 1.0.1

package/README.md

@@ -1,446 +1,135 @@
 # Formik Form Components
 
-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.
+A collection of reusable form components built with Formik, React, and Tailwind CSS.
 
-![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
 
----
+- 🏗️ Pre-built form components for common use cases
+- 🎨 Styled with Tailwind CSS for easy customization
+- 🚀 Built with TypeScript for type safety
+- 🔄 Seamless integration with Formik
+- 📱 Responsive design
 
-## ✨ Features
-
-- 🚀 **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
-- ♿ 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
-
----
-
-## 📦 Installation
+## Installation
 
 ```bash
-# npm
 npm install formik-form-components
-
-# yarn
+# or
 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
+## Peer Dependencies
 
-### 1. Configure Tailwind CSS
+This package requires the following peer dependencies:
 
-If you haven't already, set up Tailwind CSS in your project:
-
-```bash
-npx tailwindcss init -p
-```
-
-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: [],
+```json
+{
+  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+  "formik": "^2.0.0",
+  "@headlessui/react": "^1.0.0 || ^2.0.0",
+  "@heroicons/react": "^1.0.0 || ^2.0.0"
 }
 ```
 
-### 2. Import Tailwind CSS
+## Usage
 
-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
+### Basic Form Setup
 
 ```tsx
-import { Formik, Form } from 'formik';
-import * as Yup from 'yup';
-import {
-  AppInputField,
-  AppCheckBox,
-  AppDatePicker,
-  AppTextArea,
-  AppSelectInput,
-  SubmitButton,
-} from 'formik-form-components';
+import { Form, AppInputField, 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'),
-  birthDate: Yup.date().required('Birth date is required'),
-  country: Yup.string().required('Country is required'),
-  bio: Yup.string().required('Bio is required'),
-  terms: Yup.boolean().oneOf([true], 'You must accept the terms'),
-});
+const MyForm = () => {
+  const initialValues = {
+    email: '',
+    password: '',
+  };
 
-const countryOptions = [
-  { label: 'United States', value: 'us' },
-  { label: 'Canada', value: 'ca' },
-  { label: 'United Kingdom', value: 'uk' },
-  { label: 'Australia', value: 'au' },
-];
+  const handleSubmit = (values) => {
+    console.log(values);
+  };
 
-export default function ExampleForm() {
   return (
-    <Formik
-      initialValues={{
-        name: '',
-        email: '',
-        birthDate: null,
-        country: '',
-        bio: '',
-        terms: false,
-      }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
+    <Form
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md"
     >
-      {({ isSubmitting }) => (
-        <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>
+      <AppInputField
+        name="email"
+        label="Email"
+        type="email"
+        placeholder="Enter your email"
+        required
+      />
+      <AppInputField
+        name="password"
+        label="Password"
+        type="password"
+        placeholder="Enter your password"
+        required
+      />
+      <SubmitButton className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+        Submit
+      </SubmitButton>
+    </Form>
   );
-}
+};
 ```
 
----
-
-## 📚 Available Components
-
-### Form Inputs
+## Available Components
 
-- **`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
+- **Form** - Wrapper component that sets up Formik context
+- **AppInputField** - Text input field with label and error handling
+- **AppTextArea** - Textarea input field
+- **AppSelectInput** - Dropdown select input
+- **AppCheckBox** - Checkbox input
+- **AppRadioGroup** - Radio button group
+- **AppSwitch** - Toggle switch
+- **AppDatePicker** - Date picker input
+- **AppDateAndTimePicker** - Combined date and time picker
+- **AppPhoneNoInput** - Phone number input with country code selection
+- **AppRating** - Star rating input
+- **AppTagsCreator** - Tag input with creation
+- **AppMultiSelector** - Multi-select dropdown
+- **AppAutoCompleter** - Autocomplete input with suggestions
+- **AppUploadFile** - File upload component
+- **AppSimpleUploadFile** - Simplified file upload
+- **SubmitButton** - Form submit button with loading state
 
-### Selection Components
+## Styling
 
-- **`AppSelectInput`** - Native HTML select dropdown
-- **`AppAutoComplete`** - Autocomplete with tags
-- **`AppAutoCompleter`** - Advanced autocomplete with search
-- **`AppMultiSelector`** - Multi-select with checkboxes
-- **`AppTagsCreator`** - Tag input with suggestions
+Components are styled using Tailwind CSS. You can customize the appearance by:
 
-### Date & Time Pickers
+1. Overriding the default classes using the `className` prop
+2. Using Tailwind's JIT compiler to customize the theme
+3. Using CSS modules or styled-components for more complex styling needs
 
-- **`AppDatePicker`** - Native HTML5 date picker
-- **`AppDateAndTimePicker`** - Native HTML5 datetime-local picker
+## Development
 
-### File Handling
+### Installation
 
-- **`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)
-
----
-
-## 🎨 Customization
-
-All components accept standard Tailwind CSS classes for customization:
-
-```tsx
-<AppInputField 
-  name="email" 
-  label="Email" 
-  className="border-2 border-blue-500"
-  labelClassName="text-lg font-bold"
-  containerClassName="mb-6"
-/>
-```
-
-### Custom Theme Colors
-
-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
-      },
-    },
-  },
-},
-```
-
----
-
-## 🔧 Component Props
-
-### Common Props (Available on Most Components)
-
-```tsx
-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>
-);
+```bash
+git clone https://github.com/yourusername/formik-form-components.git
+cd formik-form-components
+npm install
 ```
 
-### File Upload with Preview
+### Building
 
-```tsx
-<AppUploadFile
-  name="avatar"
-  label="Upload Profile Picture"
-  accept={{ 'image/*': ['.png', '.jpg', '.jpeg'] }}
-  maxSize={2 * 1024 * 1024} // 2MB
-  maxFiles={1}
-/>
+```bash
+npm run build
 ```
 
----
+### Testing
 
-## 🌐 Internationalization
+```bash
+npm test
+## License
 
-Components support i18n through React-i18next:
+MIT
 
-```tsx
-import { useTranslation } from 'react-i18next';
+## Learn More
 
-function MyForm() {
-  const { t } = useTranslation();
-  
-  return (
-    <AppInputField 
-      name="name" 
-      label={t('form.name')} 
-      placeholder={t('form.namePlaceholder')}
-    />
-  );
-}
+You can learn more in the [React documentation](https://reactjs.org/).
 ```
-
----
-
-## ♿ 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 (`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
-
-MIT © [tkturners](https://github.com/tkturners)
-
----
-
-## 🆘 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)
-
----
-
-## 🙏 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! 🎉**

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/Form/AppAutoCompleter.d.ts

@@ -0,0 +1,10 @@
+interface AppAutoCompleterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "onChange"> {
+    name: string;
+    label: string;
+    options: string[];
+    multiple?: boolean;
+    className?: string;
+}
+export default function AppAutoCompleter({ name, label, options, multiple, className, ...inputProps }: AppAutoCompleterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppAutoCompleter.d.ts.map

package/dist/Form/AppCheckBox.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface CheckboxOption {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+}
+interface AppCheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name" | "type"> {
+    name: string;
+    options: CheckboxOption[];
+    label?: string;
+    row?: boolean;
+}
+declare const AppCheckBox: React.FC<AppCheckBoxProps>;
+export default AppCheckBox;
+//# sourceMappingURL=AppCheckBox.d.ts.map

package/dist/Form/AppDateAndTimePicker.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface AppDateTimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "onChange" | "min" | "max"> {
+    name: string;
+    label?: string;
+    /** Disable selecting past date & time */
+    disablePast?: boolean;
+    /** Disable selecting future date & time */
+    disableFuture?: boolean;
+    min?: string;
+    max?: string;
+}
+declare const AppDateTimeInput: React.FC<AppDateTimeInputProps>;
+export default AppDateTimeInput;
+//# sourceMappingURL=AppDateAndTimePicker.d.ts.map

package/dist/Form/AppDatePicker.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface AppDatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "min" | "max"> {
+    name: string;
+    label: string;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+    className?: string;
+}
+declare const AppDatePicker: React.FC<AppDatePickerProps>;
+export default AppDatePicker;
+//# sourceMappingURL=AppDatePicker.d.ts.map

package/dist/Form/AppFormErrorMessage.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface AppFormErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    alwaysShow?: boolean;
+    className?: string;
+}
+declare const AppFormErrorMessage: React.FC<AppFormErrorMessageProps>;
+export default AppFormErrorMessage;
+//# sourceMappingURL=AppFormErrorMessage.d.ts.map

package/dist/Form/AppInputField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface AppInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name"> {
+    name: string;
+    label: React.ReactNode;
+    className?: string;
+}
+declare const AppInputField: React.FC<AppInputFieldProps>;
+export default AppInputField;
+//# sourceMappingURL=AppInputField.d.ts.map

package/dist/Form/AppMultiSelector.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface AppSelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+interface AppMultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    name: string;
+    label?: string;
+    options: AppSelectOption[];
+    maxSelections?: number;
+    placeholder?: string;
+    showSelectedCount?: boolean;
+    className?: string;
+    onChange?: (value: Array<string | number>) => void;
+}
+declare const AppMultiSelect: React.FC<AppMultiSelectProps>;
+export default AppMultiSelect;
+//# sourceMappingURL=AppMultiSelector.d.ts.map

package/dist/Form/AppPhoneNoInput.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "react-phone-number-input/style.css";
+import "../styles/PhoneInputCustom.css";
+interface AppPhoneNoInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+    name: string;
+    label: string;
+    international?: boolean;
+    withCountryCallingCode?: boolean;
+    className?: string;
+    onChange?: (value: string | undefined) => void;
+    value?: string;
+    error?: string;
+}
+declare const AppPhoneNoInput: React.FC<AppPhoneNoInputProps>;
+export default AppPhoneNoInput;
+//# sourceMappingURL=AppPhoneNoInput.d.ts.map

package/dist/Form/AppRadioGroup.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface RadioOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+interface AppRadioGroupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "name"> {
+    name: string;
+    options: RadioOption[];
+    label?: string;
+    className?: string;
+    row?: boolean;
+    onChange?: (value: string | number) => void;
+}
+declare const AppRadioGroup: React.FC<AppRadioGroupProps>;
+export default AppRadioGroup;
+//# sourceMappingURL=AppRadioGroup.d.ts.map

package/dist/Form/AppRating.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface AppRatingProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+    name: string;
+    label?: string;
+    max?: number;
+    helperText?: string;
+    onChange?: (value: number | null) => void;
+    className?: string;
+}
+declare const AppRating: React.ForwardRefExoticComponent<AppRatingProps & React.RefAttributes<HTMLDivElement>>;
+export default AppRating;
+//# sourceMappingURL=AppRating.d.ts.map