@capyx/components-library 0.0.1 → 0.0.3

package/README.md

@@ -1,210 +1,250 @@
-# 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
-- ✅ **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
-
-```bash
-npm install react react-dom react-hook-form react-bootstrap @mui/material @mui/x-date-pickers dayjs react-quill-new react-autosuggest
-```
-
-## Usage
-
-### Basic Component Usage
-
-```tsx
-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
-
-```tsx
-import { TextInput, CharacterCountInput } from '@your-package/components-library';
-
-function MyForm() {
-  return (
-    <CharacterCountInput>
-      <TextInput
-        name='bio'
-        label='Biography'
-        maxLength={200}
-      />
-    </CharacterCountInput>
-  );
-}
-```
-
-#### Editor Addon (Rich Text)
-
-```tsx
-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
-
-```tsx
-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:
-
-```tsx
-<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:
-
-```tsx
-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
-
-## License
-
-MIT
+# 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 for various types (text, email, password, number, etc.)
+
+### Addons (Enhancement Wrappers)
+
+Addons wrap existing components to add functionality:
+
+- **AutocompleteInput** - Adds autocomplete/suggestions dropdown to text inputs
+- **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
+
+```bash
+npm install @capyx/components-library
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies to be installed in your project:
+
+```bash
+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
+
+```tsx
+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
+
+#### Autocomplete Addon
+
+```tsx
+import { TextInput, AutocompleteInput } from '@your-package/components-library';
+
+function MyForm() {
+  const countries = ['USA', 'Canada', 'UK', 'Australia'];
+
+  return (
+    <AutocompleteInput suggestions={countries}>
+      <TextInput
+        name='country'
+        label='Country'
+        placeholder='Type to search...'
+      />
+    </AutocompleteInput>
+  );
+}
+```
+
+#### Character Count Addon
+
+```tsx
+import { TextInput, CharacterCountInput } from '@your-package/components-library';
+
+function MyForm() {
+  return (
+    <CharacterCountInput>
+      <TextInput
+        name='bio'
+        label='Biography'
+        maxLength={200}
+      />
+    </CharacterCountInput>
+  );
+}
+```
+
+#### Editor Addon (Rich Text)
+
+```tsx
+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
+
+Addons can be nested to combine their functionality:
+
+```tsx
+import { TextInput, AutocompleteInput, CharacterCountInput } from '@your-package/components-library';
+
+function MyForm() {
+  const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston'];
+
+  return (
+    <CharacterCountInput>
+      <AutocompleteInput suggestions={cities}>
+        <TextInput
+          name='city'
+          label='City'
+          maxLength={50}
+        />
+      </AutocompleteInput>
+    </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:
+
+```tsx
+<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:
+
+```tsx
+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

package/dist/addons/AutocompleteInput.d.ts

@@ -0,0 +1,40 @@
+import type { FC, PropsWithChildren } from 'react';
+/**
+ * Props for the AutocompleteInput component
+ */
+export type AutocompleteInputProps = PropsWithChildren<{
+    /** Array of suggestion values for autocomplete */
+    suggestions: string[];
+    /** Whether to highlight the first suggestion (default: true) */
+    highlightFirstSuggestion?: boolean;
+}>;
+/**
+ * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs
+ *
+ * Wraps any text input component (like TextInput) and enhances it with dropdown
+ * suggestions that filter based on user input. Works seamlessly with both standalone
+ * and react-hook-form integrated inputs.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <AutocompleteInput suggestions={["USA", "Canada", "UK"]}>
+ *   <TextInput
+ *     name="country"
+ *     label="Country"
+ *     placeholder="Type to search..."
+ *   />
+ * </AutocompleteInput>
+ *
+ * // Standalone mode
+ * <AutocompleteInput suggestions={skills}>
+ *   <TextInput
+ *     name="skill"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </AutocompleteInput>
+ * ```
+ */
+export declare const AutocompleteInput: FC<AutocompleteInputProps>;
+//# sourceMappingURL=AutocompleteInput.d.ts.map

package/dist/addons/AutocompleteInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../lib/addons/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAKjF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;IACtD,kDAAkD;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gEAAgE;IAChE,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgHxD,CAAC"}

package/dist/addons/AutocompleteInput.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import Autosuggest from 'react-autosuggest';
+import { useFormContext } from 'react-hook-form';
+/**
+ * AutocompleteInput - A wrapper addon that adds autocomplete/suggestions to text inputs
+ *
+ * Wraps any text input component (like TextInput) and enhances it with dropdown
+ * suggestions that filter based on user input. Works seamlessly with both standalone
+ * and react-hook-form integrated inputs.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <AutocompleteInput suggestions={["USA", "Canada", "UK"]}>
+ *   <TextInput
+ *     name="country"
+ *     label="Country"
+ *     placeholder="Type to search..."
+ *   />
+ * </AutocompleteInput>
+ *
+ * // Standalone mode
+ * <AutocompleteInput suggestions={skills}>
+ *   <TextInput
+ *     name="skill"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </AutocompleteInput>
+ * ```
+ */
+export const AutocompleteInput = ({ suggestions: allSuggestions, children, highlightFirstSuggestion = true, }) => {
+    const formContext = useFormContext();
+    const [filteredSuggestions, setFilteredSuggestions] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const nameRef = useRef('');
+    // Extract child props
+    const childElement = children;
+    const childProps = childElement?.props;
+    const name = childProps?.name || '';
+    nameRef.current = name;
+    // Sync input value with form context or child value
+    useEffect(() => {
+        if (formContext && name) {
+            const formValue = formContext.getValues(name);
+            setInputValue(formValue || '');
+        }
+        else if (childProps?.value !== undefined) {
+            setInputValue(String(childProps.value));
+        }
+    }, [formContext, name, childProps?.value]);
+    // Filter suggestions based on input value
+    const getSuggestions = (value) => {
+        const trimmedValue = value.trim().toLowerCase();
+        if (trimmedValue.length === 0)
+            return [];
+        return allSuggestions.filter((suggestion) => suggestion.toLowerCase().includes(trimmedValue));
+    };
+    const onSuggestionsFetchRequested = ({ value }) => {
+        setFilteredSuggestions(getSuggestions(value));
+    };
+    const onSuggestionsClearRequested = () => {
+        setFilteredSuggestions([]);
+    };
+    const getSuggestionValue = (suggestion) => suggestion;
+    const renderSuggestion = (suggestion) => _jsx("span", { children: suggestion });
+    const handleChange = (_event, { newValue }) => {
+        setInputValue(newValue);
+        // Update form context if available
+        if (formContext && name) {
+            formContext.setValue(name, newValue);
+        }
+        // Call child's onChange if provided
+        childProps?.onChange?.(newValue);
+    };
+    return (_jsx(Autosuggest, { suggestions: filteredSuggestions, onSuggestionsFetchRequested: onSuggestionsFetchRequested, onSuggestionsClearRequested: onSuggestionsClearRequested, getSuggestionValue: getSuggestionValue, renderSuggestion: renderSuggestion, highlightFirstSuggestion: highlightFirstSuggestion, inputProps: {
+            value: inputValue,
+            onChange: handleChange,
+        }, renderInputComponent: (inputProps) => {
+            // Clone the child element and merge with autosuggest props
+            const { value, onChange: autosuggestOnChange, ...autosuggestProps } = inputProps;
+            return cloneElement(childElement, {
+                ...autosuggestProps,
+                value,
+                onChange: (newValue) => {
+                    // Handle both event objects and direct values
+                    const actualValue = typeof newValue === 'string'
+                        ? newValue
+                        : newValue?.target
+                            ?.value || '';
+                    // Create synthetic event for Autosuggest
+                    const syntheticEvent = {};
+                    autosuggestOnChange?.(syntheticEvent, {
+                        newValue: actualValue,
+                        method: 'type',
+                    });
+                },
+            });
+        } }));
+};