@capyx/components-library 0.0.1

package/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite",
+  async viteFinal(config) {
+    // Suppress "use client" directive warnings from MUI components
+    if (config.build) {
+      config.build.rollupOptions = {
+        ...config.build.rollupOptions,
+        onwarn(warning, warn) {
+          // Ignore "use client" directive warnings
+          if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('"use client"')) {
+            return;
+          }
+          warn(warning);
+        },
+      };
+    }
+    return config;
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,36 @@
+import type { Preview } from '@storybook/react-vite'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'react-quill-new/dist/quill.snow.css';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#1a1a1a',
+        },
+        {
+          name: 'light',
+          value: '#ffffff',
+        },
+      ],
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/README.md

@@ -0,0 +1,210 @@
+# 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

package/biome.json

@@ -0,0 +1,37 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "warn"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

package/lib/addons/CharacterCountInput.tsx

@@ -0,0 +1,204 @@
+import React, {
+	type FC,
+	type PropsWithChildren,
+	type ReactElement,
+	type ReactNode,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { Form } from 'react-bootstrap';
+
+const DEFAULT_VALID_HTML_ELEMENTS = [
+	'text',
+	'email',
+	'password',
+	'search',
+	'tel',
+	'url',
+	'textarea',
+];
+
+/**
+ * Props for the CharacterCountInput component
+ */
+export type CharacterCountInputProps = PropsWithChildren<{
+	/** Array of valid HTML element types to monitor (e.g., ["text", "email", "textarea"]) */
+	validHTMLElements?: string[];
+	/** CSS class for the container wrapper */
+	containerClassName?: string;
+	/** CSS class for the character counter element */
+	counterClassName?: string;
+	/** CSS class applied when character count is normal */
+	normalClassName?: string;
+	/** CSS class applied when character count is near the limit */
+	warningClassName?: string;
+	/** CSS class applied when character count reaches the limit */
+	dangerClassName?: string;
+	/** Number of characters remaining before warning state (default: 10) */
+	warningThreshold?: number;
+	/** Custom function to format the counter display */
+	formatCounter?: (current: number, max: number) => ReactNode;
+	/** Whether to show the character counter (default: true) */
+	showCounter?: boolean;
+	/** Whether to show counter even when input is empty (default: false) */
+	showWhenEmpty?: boolean;
+}>;
+
+/**
+ * A wrapper component that adds a character counter to text inputs and textareas.
+ * Automatically detects the maxLength property from the child input and displays
+ * the current character count with visual feedback.
+ *
+ * Features:
+ * - Automatic character counting from input/textarea children
+ * - Visual feedback with customizable warning and danger states
+ * - Configurable warning threshold
+ * - Custom counter formatting
+ * - Support for multiple input types (text, email, password, textarea, etc.)
+ * - Show/hide counter toggle
+ *
+ * @example
+ * // Basic usage with TextInput
+ * <CharacterCountInput>
+ *   <TextInput
+ *     name="bio"
+ *     type="text"
+ *     maxLength={100}
+ *     placeholder="Enter your bio"
+ *   />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom styling and warning threshold
+ * <CharacterCountInput
+ *   warningThreshold={20}
+ *   normalClassName="text-muted"
+ *   warningClassName="text-warning"
+ *   dangerClassName="text-danger"
+ * >
+ *   <TextAreaInput name="message" maxLength={200} />
+ * </CharacterCountInput>
+ *
+ * @example
+ * // With custom counter format
+ * <CharacterCountInput
+ *   formatCounter={(current, max) => (
+ *     <span>{max - current} characters remaining</span>
+ *   )}
+ * >
+ *   <TextInput name="title" maxLength={50} />
+ * </CharacterCountInput>
+ */
+export const CharacterCountInput: FC<CharacterCountInputProps> = ({
+	validHTMLElements,
+	children,
+	containerClassName = 'text-end',
+	counterClassName = '',
+	normalClassName = 'text-muted',
+	warningClassName = 'text-warning',
+	dangerClassName = 'text-danger',
+	warningThreshold = 10,
+	formatCounter,
+	showCounter = true,
+	showWhenEmpty = false,
+}) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [characterCount, setCharacterCount] = useState<number>(0);
+	const [maxLength, setMaxLength] = useState<number | null>(null);
+
+	useEffect(() => {
+		if (!containerRef.current) return;
+
+		// Extract maxLength from child props
+		const childProps = (
+			children as ReactElement<{
+				type?: string;
+				as?: string;
+				maxLength?: number;
+			}>
+		)?.props;
+
+		if (childProps?.maxLength) {
+			setMaxLength(childProps.maxLength);
+		}
+
+		// Use MutationObserver to wait for input element to be rendered
+		const findAndAttachInput = () => {
+			const input = containerRef.current?.querySelector('input, textarea') as
+				| HTMLInputElement
+				| HTMLTextAreaElement
+				| null;
+
+			if (!input) return null;
+
+			const inputReader = () => {
+				setCharacterCount(input.value?.length ?? 0);
+			};
+
+			input.addEventListener('input', inputReader);
+			input.addEventListener('keyup', inputReader);
+			inputReader(); // Initial read
+
+			return () => {
+				input.removeEventListener('input', inputReader);
+				input.removeEventListener('keyup', inputReader);
+			};
+		};
+
+		// Try to find input immediately
+		let cleanup = findAndAttachInput();
+
+		// If not found, wait for it to be rendered
+		if (!cleanup && containerRef.current) {
+			const observer = new MutationObserver(() => {
+				if (!cleanup) {
+					cleanup = findAndAttachInput();
+					if (cleanup) {
+						observer.disconnect();
+					}
+				}
+			});
+
+			observer.observe(containerRef.current, {
+				childList: true,
+				subtree: true,
+			});
+
+			return () => {
+				observer.disconnect();
+				cleanup?.();
+			};
+		}
+
+		return cleanup || undefined;
+	}, [children, validHTMLElements]);
+
+	const getCounterClassName = (): string => {
+		if (maxLength === null) return normalClassName;
+
+		if (characterCount === maxLength) return dangerClassName;
+		if (characterCount >= maxLength - warningThreshold) return warningClassName;
+
+		return normalClassName;
+	};
+
+	const renderCounter = (): ReactNode => {
+		if (!showCounter || maxLength === null) return null;
+		if (!showWhenEmpty && characterCount === 0) return null;
+
+		const className = `${counterClassName} ${getCounterClassName()}`.trim();
+		const content = formatCounter
+			? formatCounter(characterCount, maxLength)
+			: `${characterCount} / ${maxLength}`;
+
+		return <Form.Text className={className}>{content}</Form.Text>;
+	};
+
+	return (
+		<div ref={containerRef} className={containerClassName}>
+			{children}
+			{renderCounter()}
+		</div>
+	);
+};

package/lib/addons/index.ts

@@ -0,0 +1,2 @@
+export type { CharacterCountInputProps } from './CharacterCountInput';
+export { CharacterCountInput } from './CharacterCountInput';

package/lib/components/CheckInput.tsx

@@ -0,0 +1,126 @@
+import React, { type FC } from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the CheckInput component
+ */
+export type CheckInputProps = {
+	/** The name of the checkbox input field */
+	name: string;
+	/** Label text displayed next to the checkbox */
+	label?: string;
+	/** Whether the checkbox is required */
+	required?: boolean;
+	/** Current checked state (standalone mode) */
+	value?: boolean;
+	/** Callback function called when the checked state changes */
+	onChange?: (checked: boolean) => void;
+	/** Callback function called when the checkbox loses focus */
+	onBlur?: () => void;
+	/** Whether the checkbox is disabled */
+	disabled?: boolean;
+	/** Custom HTML id for the checkbox element */
+	id?: string;
+};
+
+/**
+ * CheckInput - A checkbox input component with react-hook-form integration
+ *
+ * Provides a checkbox input that works both standalone and with react-hook-form.
+ * Automatically integrates with FormProvider when available, providing validation
+ * and error handling.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <CheckInput
+ *   name="agreeToTerms"
+ *   label="I agree to the terms"
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <CheckInput
+ *   name="newsletter"
+ *   label="Subscribe to newsletter"
+ *   value={subscribed}
+ *   onChange={setSubscribed}
+ * />
+ * ```
+ */
+export const CheckInput: FC<CheckInputProps> = ({
+	name,
+	label,
+	required = false,
+	value,
+	onChange,
+	onBlur,
+	disabled = false,
+	id,
+}) => {
+	const formContext = useFormContext();
+
+	// Helper to safely get nested error
+	const getFieldError = (fieldName: string) => {
+		try {
+			const error = formContext?.formState?.errors?.[fieldName];
+			return error?.message as string | undefined;
+		} catch {
+			return undefined;
+		}
+	};
+
+	const errorMessage = getFieldError(name);
+	const inputId = id || `check-input-${name}`;
+
+	// Integrated with react-hook-form
+	if (formContext) {
+		return (
+			<Controller
+				name={name}
+				control={formContext.control}
+				rules={{
+					required: required ? `${label || 'This field'} is required` : false,
+				}}
+				render={({ field }) => (
+					<Form.Check
+						{...field}
+						id={inputId}
+						type="checkbox"
+						label={label}
+						checked={field.value ?? false}
+						onChange={(e) => {
+							const checked = e.target.checked;
+							field.onChange(checked);
+							onChange?.(checked);
+						}}
+						onBlur={() => {
+							field.onBlur();
+							onBlur?.();
+						}}
+						disabled={disabled}
+						required={required}
+						isInvalid={!!errorMessage}
+						feedback={errorMessage}
+						feedbackType="invalid"
+					/>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode (no form context)
+	return (
+		<Form.Check
+			id={inputId}
+			type="checkbox"
+			label={label}
+			checked={value ?? false}
+			onChange={(e) => onChange?.(e.target.checked)}
+			onBlur={onBlur}
+			disabled={disabled}
+			required={required}
+		/>
+	);
+};