@capyx/components-library 0.0.1

package/lib/components/SelectInput.tsx

@@ -0,0 +1,144 @@
+import React, { type ChangeEvent, type FC } from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the SelectInput component
+ */
+export type SelectInputProps = {
+	/** The name of the select input field */
+	name: string;
+	/** Label text displayed for the select */
+	label?: string;
+	/** Array of option strings to display in the dropdown */
+	options: string[];
+	/** Placeholder text shown when no option is selected (default: "Select...") */
+	helpText?: string;
+	/** Size of the select control */
+	controlSize?: 'sm' | 'lg';
+	/** Current selected value (standalone mode) */
+	value?: string;
+	/** Callback function called when the selection changes */
+	onChange?: (value: string) => void;
+	/** Whether the select is disabled */
+	disabled?: boolean;
+	/** Whether the select is required */
+	required?: boolean;
+	/** Array of option values to display in bold */
+	highlightValues?: string[];
+};
+
+/**
+ * SelectInput - A dropdown select component with react-hook-form integration
+ *
+ * Provides a select dropdown that works both standalone and with react-hook-form.
+ * Supports option highlighting, custom placeholder text, and automatic validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <SelectInput
+ *   name="country"
+ *   label="Country"
+ *   options={["USA", "Canada", "UK"]}
+ *   required
+ * />
+ *
+ * // Standalone mode
+ * <SelectInput
+ *   name="role"
+ *   options={["Admin", "User", "Guest"]}
+ *   value={selectedRole}
+ *   onChange={setSelectedRole}
+ *   highlightValues={["Admin"]}
+ * />
+ * ```
+ */
+export const SelectInput: FC<SelectInputProps> = ({
+	name,
+	label,
+	options = [],
+	helpText = 'Select...',
+	controlSize,
+	value,
+	onChange,
+	disabled = false,
+	required = false,
+	highlightValues = [],
+}) => {
+	const formContext = useFormContext();
+
+	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 isInvalid = !!errorMessage;
+
+	const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
+		onChange?.(event.currentTarget.value);
+	};
+
+	const renderOptions = () => (
+		<>
+			<option value="">{helpText.trim()}</option>
+			{options.map((option: string) => {
+				const style = highlightValues.includes(option)
+					? { fontWeight: 'bold' as const }
+					: {};
+				const key = option.replace(/ /g, '');
+				return (
+					<option style={style} key={key} value={key}>
+						{option.trim()}
+					</option>
+				);
+			})}
+		</>
+	);
+
+	// 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.Select
+						{...field}
+						onChange={(e) => {
+							field.onChange(e);
+							onChange?.(e.target.value);
+						}}
+						required={required}
+						size={controlSize}
+						disabled={disabled}
+						isInvalid={isInvalid}
+					>
+						{renderOptions()}
+					</Form.Select>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode
+	return (
+		<Form.Select
+			required={required}
+			size={controlSize}
+			value={value || ''}
+			onChange={handleSelectChange}
+			disabled={disabled}
+		>
+			{renderOptions()}
+		</Form.Select>
+	);
+};

package/lib/components/SwitchInput.tsx

@@ -0,0 +1,116 @@
+import React, { type FC } from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the SwitchInput component
+ */
+export type SwitchInputProps = {
+	/** The name of the switch input field */
+	name: string;
+	/** Label text displayed next to the switch */
+	label?: string;
+	/** Whether the switch is required */
+	required?: boolean;
+	/** Current on/off state (standalone mode) */
+	value?: boolean;
+	/** Callback function called when the switch state changes */
+	onChange?: (checked: boolean) => void;
+	/** Whether the switch is disabled */
+	disabled?: boolean;
+	/** Custom HTML id for the switch element */
+	id?: string;
+};
+
+/**
+ * SwitchInput - A toggle switch component with react-hook-form integration
+ *
+ * Provides a toggle switch 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
+ * <SwitchInput
+ *   name="notifications"
+ *   label="Enable notifications"
+ * />
+ *
+ * // Standalone mode
+ * <SwitchInput
+ *   name="darkMode"
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={setIsDarkMode}
+ * />
+ * ```
+ */
+export const SwitchInput: FC<SwitchInputProps> = ({
+	name,
+	label,
+	required = false,
+	value,
+	onChange,
+	disabled = false,
+	id,
+}) => {
+	const formContext = useFormContext();
+
+	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 || `switch-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="switch"
+						label={label}
+						checked={field.value ?? false}
+						onChange={(e) => {
+							const checked = e.target.checked;
+							field.onChange(checked);
+							onChange?.(checked);
+						}}
+						disabled={disabled}
+						required={required}
+						isInvalid={!!errorMessage}
+						feedback={errorMessage}
+						feedbackType="invalid"
+					/>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode
+	return (
+		<Form.Check
+			id={inputId}
+			type="switch"
+			label={label}
+			checked={value ?? false}
+			onChange={(e) => onChange?.(e.target.checked)}
+			disabled={disabled}
+			required={required}
+		/>
+	);
+};

package/lib/components/TagsInput.tsx

@@ -0,0 +1,118 @@
+import { Autocomplete, Chip, TextField } from '@mui/material';
+import React, { type FC } from 'react';
+
+/**
+ * Props for the TagsInput component
+ */
+export type TagsInputProps = {
+	/** Array of current tag values */
+	value: string[];
+	/** Callback function called when tags change */
+	onChange: (value: string[]) => void;
+	/** Placeholder text shown when no tags are entered (default: "Add tags...") */
+	placeholder?: string;
+	/** Whether the input is disabled */
+	disabled?: boolean;
+	/** Name attribute for the input field */
+	name?: string;
+};
+
+/**
+ * TagsInput - A multi-tag input component using Material-UI Autocomplete
+ *
+ * Provides a tag input interface where users can add/remove multiple tags.
+ * Automatically trims whitespace and filters empty values. Tags are displayed
+ * as chips with delete functionality.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput
+ *   name="skills"
+ *   value={tags}
+ *   onChange={setTags}
+ *   placeholder="Add skills..."
+ * />
+ * ```
+ */
+export const TagsInput: FC<TagsInputProps> = ({
+	value = [],
+	onChange,
+	placeholder = 'Add tags...',
+	disabled = false,
+	name,
+}) => {
+	return (
+		<Autocomplete
+			multiple
+			freeSolo
+			options={[]}
+			value={value}
+			onChange={(_event, newValue) => {
+				// Filter out empty strings and trim whitespace
+				const cleanedValues = newValue
+					.map((v) => (typeof v === 'string' ? v.trim() : v))
+					.filter((v) => v.length > 0);
+				onChange(cleanedValues);
+			}}
+			disabled={disabled}
+			renderValue={(tagValue, getTagProps) =>
+				tagValue.map((option, index) => (
+					<Chip
+						{...getTagProps({ index })}
+						key={option}
+						label={option}
+						sx={{
+							backgroundColor: '#212529',
+							color: '#ffffff',
+							'& .MuiChip-deleteIcon': {
+								color: 'rgba(255, 255, 255, 0.7)',
+								userSelect: 'none',
+								WebkitUserSelect: 'none',
+								MozUserSelect: 'none',
+								msUserSelect: 'none',
+								pointerEvents: 'auto',
+								'&::selection': {
+									backgroundColor: 'transparent',
+									color: 'transparent',
+								},
+								'& svg': {
+									userSelect: 'none',
+									WebkitUserSelect: 'none',
+									pointerEvents: 'none',
+								},
+								'&:hover': {
+									color: '#dc3545',
+								},
+							},
+						}}
+					/>
+				))
+			}
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					name={name}
+					placeholder={value.length === 0 ? placeholder : undefined}
+					variant="outlined"
+					size="small"
+					sx={{
+						'& .MuiOutlinedInput-root': {
+							padding: '4px',
+							minHeight: '38px',
+							'& fieldset': {
+								borderColor: '#ced4da',
+							},
+							'&:hover fieldset': {
+								borderColor: '#86b7fe',
+							},
+							'&.Mui-focused fieldset': {
+								borderColor: '#86b7fe',
+								borderWidth: '1px',
+							},
+						},
+					}}
+				/>
+			)}
+		/>
+	);
+};

package/lib/components/TextAreaInput.tsx

@@ -0,0 +1,211 @@
+import debounce from 'lodash.debounce';
+import React, {
+	type ChangeEvent,
+	type FC,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the TextAreaInput component
+ */
+export type TextAreaInputProps = {
+	/** The name of the textarea field */
+	name: string;
+	/** Label text displayed for the textarea */
+	label?: string;
+	/** Whether the field is required */
+	required?: boolean;
+	/** Maximum number of characters allowed */
+	maxLength?: number;
+	/** Size variant of the textarea control */
+	controlSize?: 'sm' | 'lg';
+	/** Placeholder text shown when textarea is empty */
+	placeholder?: string;
+	/** Controlled value of the textarea */
+	value?: string;
+	/** Callback fired when the value changes */
+	onChange?: (value: string) => void;
+	/** Whether the textarea is disabled */
+	disabled?: boolean;
+	/** Whether the textarea is read-only */
+	isReadOnly?: boolean;
+	/** Whether to render as plain text */
+	isPlainText?: boolean;
+	/** Debounce delay in milliseconds for value changes */
+	debounceMs?: number;
+};
+
+const MIN_TEXTAREA_HEIGHT = 32;
+
+/**
+ * A flexible textarea input component with automatic height adjustment,
+ * react-hook-form integration, and optional debouncing.
+ *
+ * Features:
+ * - Auto-expands height based on content
+ * - Seamless integration with react-hook-form for validation
+ * - Debounced onChange callback to reduce update frequency
+ * - Built-in validation rules (required, maxLength)
+ * - Works in both controlled and standalone modes
+ *
+ * @example
+ * // Basic usage with react-hook-form
+ * <TextAreaInput
+ *   name="description"
+ *   label="Description"
+ *   required
+ *   maxLength={500}
+ *   placeholder="Enter description..."
+ * />
+ *
+ * @example
+ * // With custom onChange and debouncing
+ * <TextAreaInput
+ *   name="notes"
+ *   label="Notes"
+ *   debounceMs={300}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * @example
+ * // Standalone mode without form context
+ * <TextAreaInput
+ *   name="comment"
+ *   value={commentText}
+ *   onChange={setCommentText}
+ *   placeholder="Add your comment..."
+ * />
+ */
+export const TextAreaInput: FC<TextAreaInputProps> = ({
+	name,
+	label,
+	required = false,
+	maxLength,
+	controlSize,
+	placeholder,
+	value,
+	onChange,
+	disabled = false,
+	isReadOnly = false,
+	isPlainText = false,
+	debounceMs,
+}) => {
+	const formContext = useFormContext();
+
+	// Create ref for debounced onChange to clean up on unmount
+	const debouncedOnChangeRef = useRef<ReturnType<typeof debounce> | null>(null);
+
+	// Create debounced version of onChange if debounceMs is provided
+	useEffect(() => {
+		if (debounceMs && onChange) {
+			debouncedOnChangeRef.current = debounce(onChange, debounceMs);
+		}
+
+		// Cleanup on unmount
+		return () => {
+			debouncedOnChangeRef.current?.cancel();
+		};
+	}, [debounceMs, onChange]);
+
+	// Helper to handle onChange with optional debouncing
+	const handleChange = (value: string) => {
+		if (debounceMs && debouncedOnChangeRef.current) {
+			debouncedOnChangeRef.current(value);
+		} else if (onChange) {
+			onChange(value);
+		}
+	};
+
+	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 isInvalid = !!errorMessage;
+
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const [_textAreaValue, setTextAreaValue] = useState('');
+
+	const _handleTextAreaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+		setTextAreaValue(event.target.value);
+		handleChange(event.target.value);
+	};
+
+	useLayoutEffect(() => {
+		if (textareaRef.current) {
+			textareaRef.current.style.height = 'inherit';
+			textareaRef.current.style.height = `${Math.max(
+				textareaRef.current.scrollHeight,
+				MIN_TEXTAREA_HEIGHT,
+			)}px`;
+		}
+	}, []);
+
+	// Integrated with react-hook-form
+	if (formContext) {
+		return (
+			<Controller
+				name={name}
+				control={formContext.control}
+				rules={{
+					required: required ? `${label || 'This field'} is required` : false,
+					maxLength: maxLength
+						? {
+								value: maxLength,
+								message: `Maximum ${maxLength} characters allowed`,
+							}
+						: undefined,
+				}}
+				render={({ field }) => (
+					<Form.Control
+						{...field}
+						onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+							field.onChange(e);
+							setTextAreaValue(e.target.value);
+							handleChange(e.target.value);
+						}}
+						ref={textareaRef}
+						style={{
+							minHeight: MIN_TEXTAREA_HEIGHT,
+							resize: 'none',
+						}}
+						as="textarea"
+						required={required}
+						maxLength={maxLength}
+						size={controlSize}
+						placeholder={placeholder}
+						disabled={disabled}
+						readOnly={isReadOnly}
+						plaintext={isPlainText}
+						isInvalid={isInvalid}
+					/>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode
+	return (
+		<Form.Control
+			as="textarea"
+			required={required}
+			maxLength={maxLength}
+			size={controlSize}
+			placeholder={placeholder}
+			value={value || ''}
+			disabled={disabled}
+			readOnly={isReadOnly}
+			plaintext={isPlainText}
+		/>
+	);
+};