@umituz/react-native-design-system 2.6.94 → 2.6.95

package/src/molecules/FormField.README.md

@@ -1,636 +1,423 @@
 # FormField
 
-FormField is a molecule component that combines a label, input field, and validation messages into a complete form input unit. It wraps `AtomicInput` with `AtomicText` for labels and error/helper messages.
+A molecule component that combines label, input field, and validation messages into a complete form input unit.
 
-## Features
+## Import & Usage
 
-- 📝 **Complete Form Input**: Label, input, and messages in one component
-- ✅ **Validation**: Error and helper text support
-- 🔴 **Required Indicator**: Visual required field marker
-- 🎨 **Theme-Aware**: Design token integration
-- ♿ **Accessible**: Full accessibility support
-- 🎯 **Simple API**: Easy to use with minimal props
-
-## Installation
-
-```tsx
-import { FormField } from 'react-native-design-system';
+```typescript
+import { FormField } from 'react-native-design-system/src/molecules/FormField';
 ```
 
-## Basic Usage
+**Location:** `src/molecules/FormField.tsx`
 
-```tsx
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { FormField } from 'react-native-design-system';
-
-export const BasicExample = () => {
-  const [email, setEmail] = useState('');
-
-  return (
-    <View style={{ padding: 16 }}>
-      <FormField
-        label="Email"
-        value={email}
-        onChangeText={setEmail}
-        placeholder="Enter your email"
-      />
-    </View>
-  );
-};
-```
-
-## Basic Input
+## Basic Usage
 
 ```tsx
-<FormField
-  label="Username"
-  value={username}
-  onChangeText={setUsername}
-  placeholder="Enter username"
-/>
-```
+const [email, setEmail] = useState('');
 
-## With Error
-
-```tsx
 <FormField
   label="Email"
   value={email}
   onChangeText={setEmail}
   placeholder="Enter your email"
-  error="Please enter a valid email address"
 />
 ```
 
-## Required Field
+## Strategy
 
-```tsx
-<FormField
-  label="Password"
-  value={password}
-  onChangeText={setPassword}
-  placeholder="Enter password"
-  secureTextEntry
-  required
-/>
-```
+**Purpose**: Provide a consistent, accessible form input unit with integrated labeling, validation, and helper text.
 
-## Helper Text
+**When to Use**:
+- All form inputs requiring labels
+- Data entry forms (login, registration, settings)
+- Multi-field forms
+- Input fields with validation requirements
+- Fields needing helper text or error messages
 
-```tsx
-<FormField
-  label="Username"
-  value={username}
-  onChangeText={setUsername}
-  placeholder="Choose a username"
-  helperText="Must be at least 3 characters long"
-/>
-```
+**When NOT to Use**:
+- For standalone inputs without labels (use AtomicInput instead)
+- For search-only inputs (use SearchBar instead)
+- For simple text display (use AtomicText instead)
+
+## Rules
+
+### Required
+
+1. **MUST** have a `label` prop for accessibility
+2. **ALWAYS** provide `value` and `onChangeText` for controlled inputs
+3. **MUST** show clear error messages when validation fails
+4. **SHOULD** provide helper text for format requirements
+5. **ALWAYS** mark required fields visually with `required` prop
+6. **MUST** clear errors when user starts typing
+7. **SHOULD** use appropriate `keyboardType` for the input type
+
+### Error Handling
+
+1. **MUST** provide specific, actionable error messages
+2. **SHOULD** show errors only after validation (not on focus)
+3. **MUST** clear error when user corrects the input
+4. **NEVER** show generic errors like "Invalid input"
+
+### Validation
+
+1. **Validate on blur**: Validate when user leaves the field
+2. **Clear on type**: Clear error when user starts typing
+3. **Show inline errors**: Display errors below the input
+4. **Required fields**: Always validate required fields
 
-## Custom Required Indicator
+### Helper Text
+
+1. **Use for guidance**: Explain format or requirements
+2. **Keep concise**: One short sentence
+3. **Don't state obvious**: Avoid "Enter your name"
+4. **Provide examples**: Show format when helpful
+
+## Forbidden
+
+❌ **NEVER** do these:
 
 ```tsx
+// ❌ No label
 <FormField
-  label="Email"
   value={email}
   onChangeText={setEmail}
-  placeholder="your@email.com"
-  required
-  requiredIndicator=" (required)"
+  placeholder="Email" // ❌ Placeholder is not a label
 />
-```
 
-## With Icons
+// ❌ Generic error message
+<FormField
+  label="Email"
+  error="Invalid" // ❌ Not actionable
+/>
 
-```tsx
+// ❌ Error persists after correction
 <FormField
   label="Email"
   value={email}
+  error={emailError} // ❌ Error still shows when typing
   onChangeText={setEmail}
-  placeholder="your@email.com"
-  leftIcon="mail-outline"
-  rightIcon="checkmark-circle-outline"
 />
-```
 
-## Example Usages
+// ❌ Required but not visually marked
+<FormField
+  label="Email" // ❌ Missing required prop
+  required={false} // Actually required
+/>
+
+// ❌ Unhelpful helper text
+<FormField
+  label="Email"
+  helperText="Enter your email here" // ❌ Obvious
+/>
 
-### Login Form
+// ❌ Wrong keyboard type
+<FormField
+  label="Email"
+  keyboardType="default" // ❌ Should be email-address
+/>
 
-```tsx
-export const LoginForm = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [errors, setErrors] = useState({});
-
-  const validate = () => {
-    const newErrors = {};
-
-    if (!email) {
-      newErrors.email = 'Email is required';
-    } else if (!isValidEmail(email)) {
-      newErrors.email = 'Please enter a valid email';
-    }
-
-    if (!password) {
-      newErrors.password = 'Password is required';
-    } else if (password.length < 6) {
-      newErrors.password = 'Password must be at least 6 characters';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = () => {
-    if (validate()) {
-      login({ email, password });
-    }
-  };
-
-  return (
-    <View style={{ padding: 16 }}>
-      <FormField
-        label="Email"
-        value={email}
-        onChangeText={setEmail}
-        placeholder="your@email.com"
-        keyboardType="email-address"
-        autoCapitalize="none"
-        error={errors.email}
-        required
-      />
-
-      <FormField
-        label="Password"
-        value={password}
-        onChangeText={setPassword}
-        placeholder="Enter password"
-        secureTextEntry
-        error={errors.password}
-        required
-      />
-
-      <Button title="Login" onPress={handleSubmit} />
-    </View>
-  );
+// ❌ Not clearing errors
+const handleChange = (text) => {
+  setEmail(text);
+  // ❌ Error not cleared
 };
 ```
 
-### Registration Form
+## Best Practices
+
+### Error Handling
 
+✅ **DO**:
 ```tsx
-export const RegistrationForm = () => {
-  const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    password: '',
-    confirmPassword: '',
-  });
-
-  const [errors, setErrors] = useState({});
-
-  const handleChange = (field, value) => {
-    setFormData({ ...formData, [field]: value });
-    // Clear error when user starts typing
-    if (errors[field]) {
-      setErrors({ ...errors, [field]: null });
-    }
-  };
-
-  const validate = () => {
-    const newErrors = {};
-
-    if (!formData.firstName) newErrors.firstName = 'First name is required';
-    if (!formData.lastName) newErrors.lastName = 'Last name is required';
-    if (!formData.email) newErrors.email = 'Email is required';
-    if (!formData.password) newErrors.password = 'Password is required';
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'Passwords do not match';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  return (
-    <ScrollView style={{ padding: 16 }}>
-      <FormField
-        label="First Name"
-        value={formData.firstName}
-        onChangeText={(value) => handleChange('firstName', value)}
-        placeholder="John"
-        error={errors.firstName}
-        required
-      />
-
-      <FormField
-        label="Last Name"
-        value={formData.lastName}
-        onChangeText={(value) => handleChange('lastName', value)}
-        placeholder="Doe"
-        error={errors.lastName}
-        required
-      />
-
-      <FormField
-        label="Email"
-        value={formData.email}
-        onChangeText={(value) => handleChange('email', value)}
-        placeholder="john.doe@example.com"
-        keyboardType="email-address"
-        autoCapitalize="none"
-        error={errors.email}
-        required
-      />
-
-      <FormField
-        label="Password"
-        value={formData.password}
-        onChangeText={(value) => handleChange('password', value)}
-        placeholder="Create a password"
-        secureTextEntry
-        error={errors.password}
-        helperText="Must be at least 8 characters"
-        required
-      />
-
-      <FormField
-        label="Confirm Password"
-        value={formData.confirmPassword}
-        onChangeText={(value) => handleChange('confirmPassword', value)}
-        placeholder="Confirm your password"
-        secureTextEntry
-        error={errors.confirmPassword}
-        required
-      />
-
-      <Button title="Create Account" onPress={validate} />
-    </ScrollView>
-  );
+const [email, setEmail] = useState('');
+const [emailError, setEmailError] = useState('');
+
+const validateEmail = (email) => {
+  if (!email) return 'Email is required';
+  if (!isValidEmail(email)) return 'Please enter a valid email address';
+  return '';
 };
-```
 
-### Profile Settings
+const handleChange = (text) => {
+  setEmail(text);
+  if (emailError) setEmailError(''); // Clear error on type
+};
 
-```tsx
-export const ProfileSettings = () => {
-  const [profile, setProfile] = useState({
-    displayName: '',
-    username: '',
-    bio: '',
-    location: '',
-    website: '',
-  });
-
-  return (
-    <ScrollView style={{ padding: 16 }}>
-      <FormField
-        label="Display Name"
-        value={profile.displayName}
-        onChangeText={(value) => setProfile({ ...profile, displayName: value })}
-        placeholder="John Doe"
-        helperText="This is how you'll appear on your profile"
-      />
-
-      <FormField
-        label="Username"
-        value={profile.username}
-        onChangeText={(value) => setProfile({ ...profile, username: value })}
-        placeholder="johndoe"
-        helperText="https://example.com/username"
-        leftIcon="at-outline"
-      />
-
-      <FormField
-        label="Bio"
-        value={profile.bio}
-        onChangeText={(value) => setProfile({ ...profile, bio: value })}
-        placeholder="Tell us about yourself"
-        multiline
-        numberOfLines={4}
-        helperText="Maximum 150 characters"
-      />
-
-      <FormField
-        label="Location"
-        value={profile.location}
-        onChangeText={(value) => setProfile({ ...profile, location: value })}
-        placeholder="New York, NY"
-        leftIcon="location-outline"
-      />
-
-      <FormField
-        label="Website"
-        value={profile.website}
-        onChangeText={(value) => setProfile({ ...profile, website: value })}
-        placeholder="https://yourwebsite.com"
-        keyboardType="url"
-        autoCapitalize="none"
-        leftIcon="link-outline"
-      />
-
-      <Button title="Save Changes" onPress={handleSave} />
-    </ScrollView>
-  );
+const handleBlur = () => {
+  const error = validateEmail(email);
+  setEmailError(error);
 };
-```
 
-### Address Form
+<FormField
+  label="Email"
+  value={email}
+  onChangeText={handleChange}
+  onBlur={handleBlur}
+  error={emailError}
+  keyboardType="email-address"
+  autoCapitalize="none"
+  required
+/>
+```
 
+❌ **DON'T**:
 ```tsx
-export const AddressForm = () => {
-  const [address, setAddress] = useState({
-    street: '',
-    apartment: '',
-    city: '',
-    state: '',
-    zipCode: '',
-    country: '',
-  });
-
-  return (
-    <View style={{ padding: 16 }}>
-      <FormField
-        label="Street Address"
-        value={address.street}
-        onChangeText={(value) => setAddress({ ...address, street: value })}
-        placeholder="123 Main St"
-        required
-      />
-
-      <FormField
-        label="Apartment/Suite (optional)"
-        value={address.apartment}
-        onChangeText={(value) => setAddress({ ...address, apartment: value })}
-        placeholder="Apt 4B"
-      />
-
-      <FormField
-        label="City"
-        value={address.city}
-        onChangeText={(value) => setAddress({ ...address, city: value })}
-        placeholder="New York"
-        required
-      />
-
-      <View style={{ flexDirection: 'row', gap: 8 }}>
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="State"
-            value={address.state}
-            onChangeText={(value) => setAddress({ ...address, state: value })}
-            placeholder="NY"
-            required
-          />
-        </View>
-
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="ZIP Code"
-            value={address.zipCode}
-            onChangeText={(value) => setAddress({ ...address, zipCode: value })}
-            placeholder="10001"
-            keyboardType="number-pad"
-            required
-          />
-        </View>
-      </View>
-
-      <FormField
-        label="Country"
-        value={address.country}
-        onChangeText={(value) => setAddress({ ...address, country: value })}
-        placeholder="United States"
-        required
-      />
-    </View>
-  );
+// ❌ Generic error
+<FormField
+  label="Email"
+  error="Invalid input" // Not specific
+/>
+
+// ❌ Error persists
+const handleChange = (text) => {
+  setEmail(text);
+  // Error still shows
 };
 ```
 
-### Credit Card Form
+### Helper Text
 
+✅ **DO**:
 ```tsx
-export const CreditCardForm = () => {
-  const [card, setCard] = useState({
-    cardNumber: '',
-    cardHolder: '',
-    expiryDate: '',
-    cvv: '',
-  });
-
-  const formatCardNumber = (text) => {
-    return text.replace(/\s/g, '').replace(/(.{4})/g, '$1 ').trim();
-  };
-
-  const formatExpiry = (text) => {
-    if (text.length === 2 && !text.includes('/')) {
-      return text + '/';
-    }
-    return text;
-  };
-
-  return (
-    <View style={{ padding: 16 }}>
-      <FormField
-        label="Card Number"
-        value={card.cardNumber}
-        onChangeText={(value) => setCard({ ...card, cardNumber: formatCardNumber(value) })}
-        placeholder="1234 5678 9012 3456"
-        keyboardType="number-pad"
-        maxLength={19}
-        leftIcon="card-outline"
-        required
-      />
-
-      <FormField
-        label="Cardholder Name"
-        value={card.cardHolder}
-        onChangeText={(value) => setCard({ ...card, cardHolder: value })}
-        placeholder="JOHN DOE"
-        autoCapitalize="characters"
-        required
-      />
-
-      <View style={{ flexDirection: 'row', gap: 8 }}>
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="Expiry Date"
-            value={card.expiryDate}
-            onChangeText={(value) => setCard({ ...card, expiryDate: formatExpiry(value) })}
-            placeholder="MM/YY"
-            keyboardType="number-pad"
-            maxLength={5}
-            required
-          />
-        </View>
-
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="CVV"
-            value={card.cvv}
-            onChangeText={(value) => setCard({ ...card, cvv: value })}
-            placeholder="123"
-            keyboardType="number-pad"
-            maxLength={4}
-            secureTextEntry
-            helperText="3 or 4 digits on back of card"
-            required
-          />
-        </View>
-      </View>
-    </View>
-  );
-};
+<FormField
+  label="Password"
+  helperText="Must be at least 8 characters with 1 number"
+  secureTextEntry
+/>
 ```
 
-### Search Form
-
+❌ **DON'T**:
 ```tsx
-export const SearchForm = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filters, setFilters] = useState({
-    category: '',
-    minPrice: '',
-    maxPrice: '',
-  });
-
-  return (
-    <View style={{ padding: 16 }}>
-      <FormField
-        label="Search"
-        value={searchTerm}
-        onChangeText={setSearchTerm}
-        placeholder="What are you looking for?"
-        leftIcon="search-outline"
-      />
-
-      <FormField
-        label="Category"
-        value={filters.category}
-        onChangeText={(value) => setFilters({ ...filters, category: value })}
-        placeholder="Select a category"
-        rightIcon="chevron-down-outline"
-      />
-
-      <View style={{ flexDirection: 'row', gap: 8 }}>
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="Min Price"
-            value={filters.minPrice}
-            onChangeText={(value) => setFilters({ ...filters, minPrice: value })}
-            placeholder="$0"
-            keyboardType="number-pad"
-          />
-        </View>
-
-        <View style={{ flex: 1 }}>
-          <FormField
-            label="Max Price"
-            value={filters.maxPrice}
-            onChangeText={(value) => setFilters({ ...filters, maxPrice: value })}
-            placeholder="$1000"
-            keyboardType="number-pad"
-          />
-        </View>
-      </View>
-
-      <Button title="Search" onPress={handleSearch} />
-    </View>
-  );
-};
+<FormField
+  label="Password"
+  helperText="Enter your password here" // Obvious
+/>
 ```
 
-## Props
-
-### FormFieldProps
-
-Extends `Omit<AtomicInputProps, 'state' | 'label'>`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | - | Field label |
-| `error` | `string` | - | Error message |
-| `helperText` | `string` | - | Helper text |
-| `required` | `boolean` | `false` | Show required indicator |
-| `containerStyle` | `ViewStyle` | - | Container style |
-| `style` | `ViewStyle` | - | Alias for containerStyle |
-| `requiredIndicator` | `string` | `' *'` | Required indicator text |
-
-Plus all AtomicInput props:
-- `value`, `onChangeText`, `placeholder`, `secureTextEntry`, `keyboardType`, etc.
-
-## Best Practices
-
-### 1. Error Handling
+### Required Fields
 
+✅ **DO**:
 ```tsx
-// ✅ Good: Clear specific errors
 <FormField
-  error="Email must be in format: user@example.com"
+  label="Email"
+  required
+  error={emailError}
 />
+```
 
-// ❌ Bad: Vague errors
+❌ **DON'T**:
+```tsx
+// ❌ No visual required indicator
 <FormField
-  error="Invalid"
+  label="Email"
+  error={emailError || '* Required'}
 />
 ```
 
-### 2. Helper Text
-
+## AI Coding Guidelines
+
+### For AI Agents
+
+When generating FormField components, follow these rules:
+
+1. **Always import from correct path**:
+   ```typescript
+   import { FormField } from 'react-native-design-system/src/molecules/FormField';
+   ```
+
+2. **Always provide a label**:
+   ```tsx
+   // ✅ Good
+   <FormField
+     label="Email"
+     value={email}
+     onChangeText={setEmail}
+   />
+
+   // ❌ Bad - no label
+   <FormField
+     value={email}
+     onChangeText={setEmail}
+     placeholder="Email" // Placeholder is not a label
+   />
+   ```
+
+3. **Always handle errors properly**:
+   ```tsx
+   // ✅ Good - clear errors on type
+   const handleChange = (text) => {
+     setValue(text);
+     if (error) setError('');
+   };
+
+   // ❌ Bad - error persists
+   const handleChange = (text) => {
+     setValue(text);
+     // Error still shows
+   };
+   ```
+
+4. **Always use specific error messages**:
+   ```tsx
+   // ✅ Good - specific errors
+   const validateEmail = (email) => {
+     if (!email) return 'Email is required';
+     if (!isValidEmail(email)) return 'Please enter a valid email address';
+     if (!isCompanyEmail(email)) return 'Please use your company email';
+     return '';
+   };
+
+   // ❌ Bad - generic error
+   const validate = (value) => {
+     if (!value) return 'Invalid';
+   };
+   ```
+
+5. **Always use appropriate keyboard type**:
+   ```tsx
+   // ✅ Good - correct keyboard types
+   <FormField
+     label="Email"
+     keyboardType="email-address"
+     autoCapitalize="none"
+   />
+   <FormField
+     label="ZIP Code"
+     keyboardType="number-pad"
+   />
+   <FormField
+     label="Website"
+     keyboardType="url"
+   />
+
+   // ❌ Bad - always default
+   <FormField
+     label="Email"
+     keyboardType="default"
+   />
+   ```
+
+### Common Patterns
+
+#### Basic Form Field
 ```tsx
-// ✅ Good: Helpful guidance
 <FormField
-  helperText="Must be at least 8 characters with 1 number"
+  label="Email"
+  value={email}
+  onChangeText={setEmail}
+  placeholder="your@email.com"
+  keyboardType="email-address"
+  autoCapitalize="none"
+  required
 />
+```
+
+#### Field with Error Handling
+```tsx
+const [email, setEmail] = useState('');
+const [error, setError] = useState('');
+
+const handleChange = (text) => {
+  setEmail(text);
+  if (error) setError('');
+};
+
+const handleBlur = () => {
+  if (!email) setError('Email is required');
+  else if (!isValidEmail(email)) setError('Please enter a valid email');
+};
 
-// ❌ Bad: Obvious info
 <FormField
-  helperText="Enter text here"
+  label="Email"
+  value={email}
+  onChangeText={handleChange}
+  onBlur={handleBlur}
+  error={error}
+  required
 />
 ```
 
-### 3. Required Fields
+#### Field with Helper Text
+```tsx
+<FormField
+  label="Password"
+  value={password}
+  onChangeText={setPassword}
+  placeholder="Enter password"
+  secureTextEntry
+  helperText="Must be at least 8 characters with 1 number"
+  required
+/>
+```
 
+#### Field with Icons
 ```tsx
-// ✅ Good: Use sparingly
 <FormField
   label="Email"
-  required
+  value={email}
+  onChangeText={setEmail}
+  placeholder="your@email.com"
+  leftIcon="mail-outline"
+  keyboardType="email-address"
 />
+```
 
-// ❌ Bad: Overuse
+#### Multiline Field
+```tsx
 <FormField
-  label="Optional Field"
-  required
+  label="Bio"
+  value={bio}
+  onChangeText={setBio}
+  placeholder="Tell us about yourself"
+  multiline
+  numberOfLines={4}
+  helperText="Maximum 150 characters"
 />
 ```
 
-## Accessibility
+## Props Reference
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | Yes | - | Field label |
+| `value` | `string` | Yes | - | Input value |
+| `onChangeText` | `(text: string) => void` | Yes | - | Change callback |
+| `error` | `string` | No | - | Error message |
+| `helperText` | `string` | No | - | Helper text |
+| `required` | `boolean` | No | `false` | Show required indicator |
+| `placeholder` | `string` | No | - | Placeholder text |
+| `secureTextEntry` | `boolean` | No | `false` | Password field |
+| `keyboardType` | `KeyboardType` | No | `'default'` | Keyboard type |
+| `autoCapitalize` | `'none' \| 'sentences' \| 'words' \| 'characters'` | No | - | Auto capitalize |
+| `multiline` | `boolean` | No | `false` | Multiline input |
+| `numberOfLines` | `number` | No | - | Number of lines |
+| `leftIcon` | `string` | No | - | Left icon name |
+| `rightIcon` | `string` | No | - | Right icon name |
+| `onBlur` | `() => void` | No | - | Blur callback |
+| `onFocus` | `() => void` | No | - | Focus callback |
 
-FormField provides full accessibility support:
+## Accessibility
 
-- ✅ Screen reader labels
-- ✅ Error announcements
-- ✅ Required field indicators
-- ✅ Helper text
-- ✅ Auto-focus handling
+- ✅ Screen reader announces label and current value
+- ✅ Error messages are announced to screen readers
+- ✅ Required fields are indicated visually
+- ✅ Helper text provides additional context
+- ✅ Proper label-input association
+- ✅ Touch target size maintained (min 44x44pt)
 
 ## Performance Tips
 
-1. **Controlled Inputs**: Always use controlled inputs with state
-2. **Validation Debounce**: Debounce validation for better UX
+1. **Controlled inputs**: Always use controlled inputs with state
+2. **Validation debounce**: Debounce validation for better UX
 3. **Memoization**: Memo validation functions
+4. **Clear errors**: Clear errors immediately on input change
 
 ## Related Components
 
 - [`AtomicInput`](../atoms/input/README.md) - Base input component
 - [`AtomicText`](../atoms/AtomicText/README.md) - Text component
 - [`Button`](../atoms/button/README.md) - Button component
-- [`AlertInline`](../alerts/README.md) - Inline alert component
+- [`BaseModal`](./BaseModal/README.md) - Modal for forms
 
 ## License