Components Library

A comprehensive React component library built with TypeScript, React 19, react-hook-form, react-bootstrap, and Material-UI (MUI).

Architecture

This library follows a clear separation between Components and Addons:

Components (Base Input Types)

Components are specific input elements based on HTML input types and specialized use cases:

• CheckInput - Checkbox input for boolean values
• DateInput - Date picker with formatted string output (using MUI DatePicker)
• FileInput - File upload with validation and preview
• SelectInput - Dropdown selection for single/multiple options
• SwitchInput - Toggle switch for on/off values
• TagsInput - Tag management with MUI Autocomplete
• TextAreaInput - Multiline text input with auto-growing height
• TextInput - Single-line text input with optional autocomplete

Addons (Enhancement Wrappers)

Addons wrap existing components to add functionality:

• CharacterCountInput - Adds character counting to text, textarea, or editor inputs
• EditorAddon - Wraps TextAreaInput to add rich text editing (ReactQuill)
• Editor (Legacy) - Standalone rich text editor (deprecated, use EditorAddon instead)

Features

• ✅ React 19 compatible
• ✅ TypeScript with full type safety and auto-generated type declarations
• ✅ ESM and CommonJS dual module support
• ✅ react-hook-form integration for form state management and validation
• ✅ react-bootstrap for consistent styling
• ✅ Material-UI (MUI) for advanced components (DatePicker, Autocomplete)
• ✅ Standalone or form-integrated modes
• ✅ Consistent error handling
• ✅ Customizable styling

Installation

npm install @capyx/components-library

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

npm install react react-dom react-hook-form react-bootstrap @mui/material @mui/x-date-pickers dayjs react-quill-new react-autosuggest

TypeScript Support

This library is written in TypeScript and includes full type definitions. Type declarations are automatically provided when you install the package, giving you:

• Full IntelliSense and autocomplete in your IDE
• Type checking for component props
• Improved development experience with inline documentation

No additional @types packages are needed!

Usage

Basic Component Usage

import { TextInput, CheckInput, DateInput } from '@your-package/components-library';
import { FormProvider, useForm } from 'react-hook-form';

function MyForm() {
  const methods = useForm();

  return (
    <FormProvider {...methods}>
      <form>
        <TextInput
          name='username'
          label='Username'
          required
          maxLength={50}
        />

        <CheckInput
          name='terms'
          label='I agree to terms'
          required
        />

        <DateInput
          name='birthdate'
          label='Date of Birth'
          required
        />
      </form>
    </FormProvider>
  );
}

Using Addons

Character Count Addon

import { TextInput, CharacterCountInput } from '@your-package/components-library';

function MyForm() {
  return (
    <CharacterCountInput>
      <TextInput
        name='bio'
        label='Biography'
        maxLength={200}
      />
    </CharacterCountInput>
  );
}

Editor Addon (Rich Text)

import { EditorAddon } from '@your-package/components-library';
import { Controller, useFormContext } from 'react-hook-form';

function MyForm() {
  const { control } = useFormContext();

  return (
    <Controller
      name='content'
      control={control}
      render={({ field }) => (
        <EditorAddon
          value={field.value}
          onChange={field.onChange}
          maxLength={5000}
        />
      )}
    />
  );
}

Combining Addons

import { CharacterCountInput, EditorAddon } from '@your-package/components-library';

function MyForm() {
  const [value, setValue] = useState('');

  return (
    <CharacterCountInput>
      <EditorAddon
        value={value}
        onChange={setValue}
        maxLength={1000}
      />
    </CharacterCountInput>
  );
}

Component API

Common Props

All components support these common props when used with react-hook-form:

• name: string (required) - Field name for form registration
• label?: string - Label text
• required?: boolean - Whether the field is required
• disabled?: boolean - Whether the field is disabled

Standalone Mode

All components can be used without react-hook-form by providing value and onChange props:

<TextInput
  name='standalone'
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Styling

Components use react-bootstrap and MUI components, making them easy to customize:

• Override Bootstrap variables for global theming
• Use MUI theme provider for MUI components
• Add custom className props (where supported)

TypeScript Support

All components are fully typed with TypeScript. Import types as needed:

import type { TextAreaInputProps, CheckInputProps } from '@your-package/components-library';

React 19 Compatibility

This library is built and tested with React 19. All components use modern React patterns:

• Functional components with hooks
• No deprecated lifecycle methods
• No unsafe React APIs
• Full concurrent mode support

Contributing

When adding new components:

1. Components go in lib/components/ - base input types
2. Addons go in lib/addons/ - wrappers that enhance components
3. All components must support both react-hook-form and standalone modes
4. Export types alongside components
5. Update index files for proper exports