formik-form-components 0.2.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 SMS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,423 @@
+# 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.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Peer Dependencies](#peer-dependencies)
+- [Getting Started](#getting-started)
+- [Available Components](#available-components)
+- [Component Documentation](#component-documentation)
+- [Theming](#theming)
+- [TypeScript Support](#typescript-support)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Installation
+
+```bash
+# Using npm
+npm install formik-form-components
+
+# Using yarn
+yarn add formik-form-components
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies. Make sure they are installed in your project:
+
+```bash
+# Core React
+react@^17.0.0 || ^18.0.0
+react-dom@^17.0.0 || ^18.0.0
+
+# Material-UI v5+
+@emotion/react@^11.0.0
+@emotion/styled@^11.0.0
+@mui/material@^5.0.0 || ^6.0.0
+@mui/lab@^5.0.0 || ^6.0.0
+@mui/x-date-pickers@^6.0.0
+
+# Form Management
+formik@^2.0.0
+
+yup@^0.32.0  # Recommended for validation
+
+# Rich Text Editor (for AppRichTextEditor)
+@tiptap/react@^2.0.0
+@tiptap/starter-kit@^2.0.0
+@tiptap/extension-link@^2.0.0
+@tiptap/extension-text-align@^2.0.0
+
+# Icons (optional but recommended)
+@mui/icons-material@^5.0.0 || ^6.0.0
+@iconify/react@^4.0.0
+```
+
+## Getting Started
+
+1. **Install the package and dependencies**:
+   ```bash
+   yarn add formik-form-components @mui/material @emotion/react @emotion/styled formik yup
+   ```
+
+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,
+     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')
+   });
+   
+   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);
+     };
+   
+     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>
+     );
+   }
+   ```
+
+## Available Components
+
+### Form Controls
+- `AppInputField` - Text input field with validation
+- `AppCheckBox` - Checkbox input with label
+- `AppRadioGroup` - Group of radio buttons
+- `AppSwitch` - Toggle switch component
+
+### Selectors
+- `AppSelect` - Basic select dropdown
+- `AppSearchableSelect` - Searchable select dropdown
+- `AppMultiSelector` - Multi-select dropdown with chips
+- `AppSearchableMultiSelector` - Searchable multi-select
+
+### Date & Time
+- `AppDatePicker` - Date picker
+- `AppTimePicker` - Time picker
+- `AppDateTimePicker` - Combined date and time picker
+- `AppDateRangePicker` - Date range picker
+
+### Rich Content
+- `AppRichTextEditor` - Rich text editor with formatting options
+- `AppFileUpload` - File upload component with preview
+- `AppImageUpload` - Image upload with crop and preview
+
+### 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
+
+## Component Documentation
+
+### AppInputField
+
+A versatile text input field with built-in validation and Material-UI styling.
+
+```tsx
+import { AppInputField } from 'formik-form-components';
+
+<AppInputField
+  name="username"
+  label="Username"
+  placeholder="Enter your username"
+  fullWidth
+  margin="normal"
+  required
+  helperText="Choose a unique username"
+  InputProps={{
+    startAdornment: <InputAdornment position="start">@</InputAdornment>,
+  }}
+/>
+```
+
+#### Props
+
+| 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
+
+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.
+
+```tsx
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  components: {
+    MuiTextField: {
+      defaultProps: {
+        variant: 'outlined',
+        fullWidth: true,
+        margin: 'normal',
+      },
+    },
+    // Override specific component styles
+    MuiFormControl: {
+      styleOverrides: {
+        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:
+
+```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
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Support
+
+If you encounter any issues or have questions, please [open an issue](https://github.com/tkturners/formik-form-components/issues) on GitHub.

package/dist/index.d.ts

@@ -0,0 +1,270 @@
+import * as React$1 from 'react';
+import React__default, { ReactElement, ReactNode, SetStateAction } from 'react';
+import { FormikValues, FormikConfig, FormikProps } from 'formik';
+import { SelectProps } from '@mui/material/Select';
+import { Dayjs } from 'dayjs';
+import { StandardTextFieldProps, RadioGroupProps, AutocompleteProps, SxProps, BoxProps } from '@mui/material';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Theme } from '@mui/material/styles';
+import { DropzoneOptions } from 'react-dropzone';
+import { IconifyIcon } from '@iconify/react';
+
+interface Props$e {
+    name: string;
+    label: string;
+    required?: boolean;
+    minDate?: Dayjs;
+    disablePast?: boolean;
+    [key: string]: unknown;
+}
+declare const AppDatePicker: ({ name, label, required, disablePast, ...otherProps }: Props$e) => React__default.JSX.Element;
+
+interface AppSelectOptions$4 {
+    label: string;
+    value: string | number;
+}
+interface Props$d extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    options: AppSelectOptions$4[];
+    disabled?: boolean;
+}
+declare function AppAutoCompleter({ placeholder, name, label, options, disabled }: Props$d): React.JSX.Element;
+
+interface Props$c {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    [key: string]: unknown;
+}
+declare const AppDateAndTimePicker: ({ name, label, required, ...otherProps }: Props$c) => React__default.JSX.Element;
+
+interface Props$b {
+    name: string;
+    alwaysShow?: boolean;
+}
+declare function AppFormErrorMessage({ name, alwaysShow }: Props$b): React.JSX.Element | null;
+
+interface AppTextAreaProps {
+    name: string;
+    label: string;
+}
+declare function AppTextArea({ name, label }: AppTextAreaProps): React.JSX.Element;
+
+interface Props$a extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+    name: string;
+    freeSolo?: boolean;
+    multiple?: boolean;
+    label?: string;
+    placeholder?: string;
+    options: string[];
+    disabled?: boolean;
+}
+declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, }: Props$a): React.JSX.Element;
+
+interface AppSwitchInputProps {
+    name: string;
+    label?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    inputStyle?: React__default.CSSProperties;
+    [key: string]: unknown;
+}
+declare function AppSwitchInput({ name, label, className, style, inputStyle, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
+
+interface AppSwitchProps {
+    name: string;
+    label: string;
+}
+declare function AppSwitch({ name, label }: AppSwitchProps): React.JSX.Element;
+
+interface FormProps<T> extends FormikConfig<T> {
+    children?: ((props: FormikProps<T>) => ReactNode) | ReactNode;
+    className?: string;
+}
+declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
+
+interface Props$9 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+    name: string;
+    freeSolo?: boolean;
+    label?: string;
+    placeholder?: string;
+    options: string[];
+}
+declare function AppAutoComplete({ placeholder, name, label, options }: Props$9): React.JSX.Element;
+
+interface Props$8 {
+    option: {
+        label: string;
+        name: string;
+    }[];
+    name: string;
+}
+declare const CheckboxField: React__default.FC<Props$8>;
+
+interface Props$7 extends StandardTextFieldProps {
+    name: string;
+    label: ReactNode;
+    tagUser?: string;
+    hasReply?: boolean;
+    required?: boolean;
+}
+declare function AppInputField({ name, label, type, InputProps, required, ...otherProps }: Props$7): React__default.JSX.Element;
+
+interface AppSelectOptions$3 {
+    label: string;
+    value: string | number;
+}
+interface Props$6 extends Omit<SelectProps<(string | number)[]>, 'name' | 'label' | 'value' | 'onChange'> {
+    name: string;
+    label: string;
+    multiple?: boolean;
+    options: AppSelectOptions$3[];
+    required?: boolean;
+}
+declare function AppMultiSelector({ multiple, name, label, options, required, ...otherProps }: Props$6): React.JSX.Element;
+
+interface AppPhoneNoInputProps {
+    name: string;
+    label?: string;
+    required?: boolean;
+    [key: string]: unknown;
+}
+declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
+
+type Props$5 = RadioGroupProps & {
+    name: string;
+    options: {
+        label: string;
+        value: string | number;
+    }[];
+};
+declare function AppRadioGroup({ name, options, ...rest }: Props$5): React.JSX.Element;
+
+interface AppRatingProps {
+    name: string;
+    label: string;
+}
+declare function AppRating({ name, label }: AppRatingProps): React.JSX.Element;
+
+interface Props$4 {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+}
+declare const AppRichTextEditor: ({ name, label, required, placeholder }: Props$4) => react_jsx_runtime.JSX.Element | null;
+
+interface AppSelectOptions$2 {
+    label: string;
+    value: number;
+    searchAbleValue1?: string;
+    searchAbleValue2?: string;
+    searchAbleValue3?: string;
+}
+interface Props$3 {
+    name: string;
+    label: string;
+    multiple?: boolean;
+    options: AppSelectOptions$2[];
+    setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
+    required?: boolean;
+}
+declare function AppSearchableMultiSelector({ multiple, name, label, options, required, setSearchQuery, }: Props$3): React__default.JSX.Element;
+
+interface AppSelectOptions$1 {
+    label: string;
+    value: string | number;
+    searchAbleValue1?: string;
+    searchAbleValue2?: string;
+    searchAbleValue3?: string;
+}
+interface Props$2 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, 'options' | 'renderInput' | 'value' | 'onChange'> {
+    name: string;
+    label: string;
+    options: AppSelectOptions$1[];
+    setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
+    required?: boolean;
+    placeholder?: string;
+    isResetRequired?: boolean;
+}
+declare function AppSearchableSelectInput({ name, label, required, options, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$2): React__default.JSX.Element;
+
+interface AppSelectOptions {
+    label: string;
+    value: string | number;
+}
+interface Props$1 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+    name: string;
+    label: string;
+    options: AppSelectOptions[];
+    required?: boolean;
+    fullWidth?: boolean;
+}
+declare function AppSelectInput({ name, label, fullWidth, required, options, ...otherProps }: Props$1): React.JSX.Element;
+
+interface AppSimpleUploadFilePropTypes {
+    name: string;
+    label?: string;
+    multiple?: boolean;
+}
+declare const AppSimpleUploadFile: ({ name, multiple }: AppSimpleUploadFilePropTypes) => React.JSX.Element;
+
+interface FileItem extends File {
+    id?: number | string;
+    preview?: string;
+    url?: string;
+    is_private?: boolean;
+    [key: string]: unknown;
+}
+
+interface CustomFile extends File {
+    path?: string;
+    preview?: string;
+    lastModifiedDate?: Date;
+}
+interface UploadProps extends DropzoneOptions {
+    error?: boolean;
+    sx?: SxProps<Theme>;
+    thumbnail?: boolean;
+    isClickable?: boolean;
+    placeholder?: React.ReactNode;
+    helperText?: React.ReactNode;
+    disableMultiple?: boolean;
+    isEditable?: boolean;
+    onDeleteButtonClick?: (file: FileItem) => void;
+    onPrivacyUpdateClick?: (file: FileItem) => void;
+    file?: CustomFile | string | File;
+    onDelete?: VoidFunction;
+    files?: (File | string | {
+        name: string;
+        url: string;
+    })[];
+    onUpload?: VoidFunction;
+    onRemove?: (file: CustomFile | string) => void;
+    onRemoveAll?: VoidFunction;
+}
+
+interface AppUploadFilePropTypes extends UploadProps {
+    name: string;
+    label?: string;
+}
+declare const AppUploadFile: ({ name, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
+
+interface SubmitButtonProps {
+    children: React__default.ReactNode;
+    loading?: boolean;
+    [key: string]: any;
+}
+declare const SubmitButton: ({ children, loading, disabled, ...rest }: SubmitButtonProps) => React__default.JSX.Element;
+
+type IconifyProps = IconifyIcon | string;
+
+interface Props extends BoxProps {
+    icon: IconifyProps;
+}
+declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
+
+export { AppAutoComplete, AppAutoCompleter, CheckboxField as AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };