@comparaonline/form-controllers

Form Controllers Library

Table of Contents

1. About The Project
2. Getting Started
3. Available Controllers
4. Basic Usage Examples
   • InputTextController
   • InputTelController
   • InputDateController
   • InputBirthDateController
   • InputEmailController
   • InputIdNumberController
   • InputPlateController
   • InputFileController
   • SelectController
   • CheckboxController
   • RadioButtonGroupController
   • OptionPanelController
   • InputDateRangeController
   • InputOTPController
5. Contributing
6. Changelog

About The Project

The Form Controllers Library serves as a bridge between react-hook-form and comparanent-ui. It provides a set of pre-configured controllers that wrap our inputs UI components, integrating them seamlessly with react-hook-form. This library aims to reduce boilerplate code and enhance developer productivity when working with forms in our projects.

Key Features:

• Seamless integration with react-hook-form
• Pre-configured controllers for our custom UI components
• Consistent form handling across projects
• Reduced boilerplate code
• Enhanced developer productivity

Getting Started

To get started with the Form Controllers Library, follow these steps:

1. Install the package in your project:

npm install @comparaonline/form-controllers
# or
yarn add @comparaonline/form-controllers
# or
pnpm add @comparaonline/form-controllers

1. Import and use the controllers in the client project (see Usage Examples below).

Development

To run the project locally for development:

1. Clone the repository
2. Install dependencies:

yarn

1. Start the development server:

yarn dev

Available Controllers

The library provides the following controllers:

1. InputTextController
2. InputTelController
3. InputDateController
4. InputBirthDateController
5. InputEmailController
6. InputIdNumberController
7. InputPlateController
8. InputFileController
9. SelectController
10. CheckboxController
11. RadioButtonGroupController
12. OptionPanelController
13. InputDateRangeController
14. InputOTPController

Basic Usage Examples

InputTextController

import { InputTextController } from '@comparaonline/form-controllers';

<InputTextController
  name="username"
  label="Username"
  control={control}
  rules={{ required: 'Username is required' }}
/>;

InputTelController

import { InputTelController } from '@comparaonline/form-controllers';

<InputTelController
  name="phoneNumber"
  label="Phone Number"
  control={control}
  rules={{ required: 'Phone number is required' }}
/>;

InputDateController

import { InputDateController } from '@comparaonline/form-controllers';

<InputDateController name="eventDate" label="Event Date" control={control} />;

InputBirthDateController

import { InputBirthDateController } from '@comparaonline/form-controllers';

<InputBirthDateController name="birthDate" label="Birth Date" control={control} />;

InputEmailController

import { InputEmailController } from '@comparaonline/form-controllers';

<InputEmailController
  name="email"
  label="Email Address"
  control={control}
  rules={{ required: 'Email is required' }}
/>;

InputIdNumberController

import { InputIdNumberController } from '@comparaonline/form-controllers';

<InputIdNumberController
  name="idNumber"
  label="ID Number"
  control={control}
  rules={{ required: 'ID number is required' }}
/>;

InputPlateController

import { InputPlateController } from '@comparaonline/form-controllers';

<InputPlateController name="licensePlate" label="License Plate" control={control} />;

InputFileController

import { InputFileController } from '@comparaonline/form-controllers';

<InputFileController
  name="document"
  label="Upload Document"
  control={control}
  accept=".pdf,.doc,.docx"
/>;

SelectController

import { SelectController } from '@comparaonline/form-controllers';

<SelectController
  name="country"
  label="Country"
  control={control}
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' },
  ]}
/>;

CheckboxController

import { CheckboxController } from '@comparaonline/form-controllers';

<CheckboxController name="terms" label="I agree to the terms and conditions" control={control} />;

RadioButtonGroupController

import { RadioButtonGroupController } from '@comparaonline/form-controllers';

<RadioButtonGroupController
  name="gender"
  label="Gender"
  control={control}
  options={[
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' },
  ]}
/>;

OptionPanelController

import { OptionPanelController } from '@comparaonline/form-controllers';

<OptionPanelController
  name="plan"
  label="Select a Plan"
  control={control}
  options={[
    { value: 'basic', label: 'Basic Plan', description: 'For individuals' },
    { value: 'pro', label: 'Pro Plan', description: 'For small businesses' },
    { value: 'enterprise', label: 'Enterprise Plan', description: 'For large organizations' },
  ]}
/>;

InputDateRangeController

import { InputDateRangeController } from '@comparaonline/form-controllers';

<InputDateRangeController name="dateRange" label="Select Date Range" control={control} />;

InputOTPController

import { InputOTPController } from '@comparaonline/form-controllers';

<InputOTPController name="otp" label="Enter OTP" control={control} length={6} />;

For more detailed usage examples and props for each controller, please refer to the component documentation.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Changelog

After updating this library, we recommend reviewing our changelog to stay informed about recent changes like new features, bug fixes and breaking changes.