@capyx/components-library 0.0.1

package/lib/components/DateInput.tsx

@@ -0,0 +1,179 @@
+import { DatePicker } from '@mui/x-date-pickers';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import React, { type FC } from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the DateInput component
+ */
+export type DateInputProps = {
+	/** The name of the date input field */
+	name: string;
+	/** Label text displayed for the date picker */
+	label?: string;
+	/** Current date value (standalone mode) */
+	value?: Date | null;
+	/** Callback function called when the date changes */
+	onChange?: (date: Date | null) => void;
+	/** Callback function called when the input loses focus */
+	onBlur?: () => void;
+	/** Whether the date field is required */
+	required?: boolean;
+	/** Whether the date picker is disabled */
+	disabled?: boolean;
+	/** Minimum selectable date */
+	minDate?: Date;
+	/** Maximum selectable date */
+	maxDate?: Date;
+	/** Date format string (default: "DD/MM/YYYY") */
+	dateFormat?: string;
+	/** Size of the text field (default: "small") */
+	textFieldSize?: 'small' | 'medium';
+	/** Whether to disable future dates */
+	disableFuture?: boolean;
+	/** Whether to disable past dates */
+	disablePast?: boolean;
+	/** Which calendar views to display */
+	views?: Array<'year' | 'month' | 'day'>;
+};
+
+/**
+ * DateInput - A date picker component using Material-UI with react-hook-form integration
+ *
+ * Provides a date picker with calendar interface that works both standalone and with
+ * react-hook-form. Uses MUI DatePicker internally with customizable date ranges,
+ * formats, and validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <DateInput
+ *   name="birthdate"
+ *   label="Date of Birth"
+ *   required
+ *   disableFuture
+ * />
+ *
+ * // Standalone mode
+ * <DateInput
+ *   name="appointmentDate"
+ *   label="Select Date"
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   minDate={new Date()}
+ * />
+ * ```
+ */
+export const DateInput: FC<DateInputProps> = ({
+	name,
+	label,
+	value,
+	onChange,
+	onBlur,
+	required = false,
+	disabled = false,
+	minDate,
+	maxDate,
+	dateFormat = 'DD/MM/YYYY',
+	textFieldSize = 'small',
+	disableFuture = false,
+	disablePast = false,
+	views,
+}) => {
+	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);
+
+	// Convert Date to Dayjs
+	const convertToDateValue = (date: Date | null | undefined): Dayjs | undefined => {
+		if (!date) return undefined;
+		return dayjs(date);
+	};
+
+	// 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.Group>
+						<DatePicker
+							label={label}
+							value={convertToDateValue(field.value)}
+							onChange={(newValue: Dayjs | null) => {
+								const dateValue = newValue?.isValid()
+									? newValue.toDate()
+									: null;
+								field.onChange(dateValue);
+								onChange?.(dateValue);
+							}}
+							disabled={disabled}
+							format={dateFormat}
+							minDate={convertToDateValue(minDate)}
+							maxDate={convertToDateValue(maxDate)}
+							disableFuture={disableFuture}
+							disablePast={disablePast}
+							views={views}
+							slotProps={{
+								textField: {
+									size: textFieldSize,
+									required: required,
+									error: !!errorMessage,
+									helperText: errorMessage,
+									onBlur: () => {
+										field.onBlur();
+										onBlur?.();
+									},
+								},
+							}}
+						/>
+					</Form.Group>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode (no form context)
+	return (
+		<Form.Group>
+			<DatePicker
+				label={label}
+				value={convertToDateValue(value)}
+				onChange={(newValue: Dayjs | null) => {
+					const dateValue = newValue?.isValid() ? newValue.toDate() : null;
+					onChange?.(dateValue);
+				}}
+				disabled={disabled}
+				format={dateFormat}
+				minDate={convertToDateValue(minDate)}
+				maxDate={convertToDateValue(maxDate)}
+				disableFuture={disableFuture}
+				disablePast={disablePast}
+				views={views}
+				slotProps={{
+					textField: {
+						size: textFieldSize,
+						required: required,
+						onBlur: onBlur,
+					},
+				}}
+			/>
+		</Form.Group>
+	);
+};

package/lib/components/FileInput.tsx

@@ -0,0 +1,353 @@
+import React, {
+	type ChangeEvent,
+	type FC,
+	type ReactNode,
+	useRef,
+	useState,
+} from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+
+/**
+ * Props for the FileInput component
+ */
+export type FileInputProps = {
+	/** The name of the file input field for form integration */
+	name?: string;
+	/** File types to accept (e.g., "image/*", ".pdf,.doc") */
+	accept?: string;
+	/** Whether to allow selecting multiple files */
+	multiple?: boolean;
+	/** Callback fired when file selection changes */
+	onChange?: (files: File | File[] | null) => void;
+	/** Callback fired when upload process starts */
+	onUploadStart?: () => void;
+	/** Callback fired when upload completes successfully */
+	onUploadComplete?: () => void;
+	/** Callback fired when upload encounters an error */
+	onUploadError?: (error: Error) => void;
+	/** Whether the file input is disabled */
+	disabled?: boolean;
+	/** Maximum file size in bytes */
+	maxSize?: number;
+	/** CSS class for the container element */
+	containerClassName?: string;
+	/** CSS class for the label element */
+	labelClassName?: string;
+	/** CSS class for the button element */
+	buttonClassName?: string;
+	/** CSS class for the file info text */
+	fileInfoClassName?: string;
+	/** CSS class for error messages */
+	errorClassName?: string;
+	/** Label text or element displayed above the input */
+	label?: ReactNode;
+	/** Text or element displayed on the button */
+	buttonText?: ReactNode;
+	/** Text shown when no file is selected */
+	noFileText?: ReactNode;
+	/** Text shown during file upload */
+	uploadingText?: ReactNode;
+	/** Custom function to format the file info display */
+	formatFileInfo?: (files: File | File[]) => ReactNode;
+	/** Custom validation function for individual files */
+	validateFile?: (file: File) => { valid: boolean; error?: string };
+	/** Whether file selection is required */
+	required?: boolean;
+};
+
+/**
+ * A customizable file input component with validation, upload lifecycle hooks,
+ * and react-hook-form integration.
+ *
+ * Features:
+ * - Single or multiple file selection
+ * - File type filtering via accept attribute
+ * - File size validation with configurable max size
+ * - Custom file validation logic
+ * - Upload lifecycle callbacks (start, complete, error)
+ * - Fully customizable UI with className props
+ * - Integration with react-hook-form for form validation
+ * - Custom formatting for file information display
+ *
+ * @example
+ * // Basic file upload with react-hook-form
+ * <FileInput
+ *   name="avatar"
+ *   label="Profile Picture"
+ *   accept="image/*"
+ *   required
+ *   maxSize={5 * 1024 * 1024} // 5MB
+ * />
+ *
+ * @example
+ * // Multiple files with custom validation
+ * <FileInput
+ *   name="documents"
+ *   label="Upload Documents"
+ *   multiple
+ *   accept=".pdf,.doc,.docx"
+ *   validateFile={(file) => {
+ *     if (file.name.length > 100) {
+ *       return { valid: false, error: "Filename too long" };
+ *     }
+ *     return { valid: true };
+ *   }}
+ *   onChange={(files) => console.log(files)}
+ * />
+ *
+ * @example
+ * // With upload lifecycle hooks
+ * <FileInput
+ *   name="report"
+ *   onUploadStart={() => console.log("Starting upload...")}
+ *   onUploadComplete={() => console.log("Upload complete!")}
+ *   onUploadError={(error) => console.error(error)}
+ * />
+ */
+export const FileInput: FC<FileInputProps> = ({
+	name,
+	accept,
+	multiple = false,
+	onChange,
+	onUploadStart,
+	onUploadComplete,
+	onUploadError,
+	disabled = false,
+	maxSize,
+	containerClassName = '',
+	labelClassName = '',
+	buttonClassName = '',
+	fileInfoClassName = '',
+	errorClassName = '',
+	label = 'Upload File',
+	buttonText = 'Choose File',
+	noFileText = 'No file selected',
+	uploadingText = 'Uploading...',
+	formatFileInfo,
+	validateFile,
+	required = false,
+}) => {
+	const fileInputRef = useRef<HTMLInputElement | null>(null);
+	const [selectedFiles, setSelectedFiles] = useState<File | File[] | null>(
+		null,
+	);
+	const [isUploading, setIsUploading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	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 formErrorMessage = name ? getFieldError(name) : undefined;
+
+	const handleFileUploadClick = () => {
+		if (isUploading || disabled) return;
+		fileInputRef.current?.click();
+	};
+
+	const validateFiles = (files: File[]): { valid: boolean; error?: string } => {
+		for (const file of files) {
+			// Check file size
+			if (maxSize && file.size > maxSize) {
+				return {
+					valid: false,
+					error: `File size exceeds maximum allowed size of ${(maxSize / 1024 / 1024).toFixed(2)}MB`,
+				};
+			}
+
+			// Custom validation
+			if (validateFile) {
+				const result = validateFile(file);
+				if (!result.valid) {
+					return result;
+				}
+			}
+		}
+
+		return { valid: true };
+	};
+
+	const handleFileChange = (
+		event: ChangeEvent<HTMLInputElement>,
+		fieldOnChange?: (value: File | File[] | null) => void,
+	) => {
+		setError(null);
+
+		const files = event.target.files;
+		if (!files || files.length === 0) {
+			setSelectedFiles(null);
+			onChange?.(null);
+			fieldOnChange?.(null);
+			return;
+		}
+
+		const fileArray = Array.from(files);
+
+		const validation = validateFiles(fileArray);
+		if (!validation.valid) {
+			setError(validation.error ?? 'Invalid file');
+			if (fileInputRef.current) {
+				fileInputRef.current.value = '';
+			}
+			return;
+		}
+
+		const result = multiple ? fileArray : fileArray[0];
+		setSelectedFiles(result);
+
+		// Reset input value to allow re-selecting the same file
+		if (fileInputRef.current) {
+			fileInputRef.current.value = '';
+		}
+
+		try {
+			onUploadStart?.();
+			setIsUploading(true);
+			onChange?.(result);
+			fieldOnChange?.(result);
+			onUploadComplete?.();
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error('Upload failed');
+			setError(error.message);
+			onUploadError?.(error);
+		} finally {
+			setIsUploading(false);
+		}
+	};
+
+	const renderFileInfo = (): ReactNode => {
+		if (isUploading) {
+			return (
+				<Form.Text className={fileInfoClassName}>{uploadingText}</Form.Text>
+			);
+		}
+
+		if (!selectedFiles) {
+			return <Form.Text className={fileInfoClassName}>{noFileText}</Form.Text>;
+		}
+
+		if (formatFileInfo) {
+			return (
+				<Form.Text className={fileInfoClassName}>
+					{formatFileInfo(selectedFiles)}
+				</Form.Text>
+			);
+		}
+
+		if (Array.isArray(selectedFiles)) {
+			return (
+				<Form.Text className={fileInfoClassName}>
+					{selectedFiles.length} file{selectedFiles.length !== 1 ? 's' : ''}{' '}
+					selected
+				</Form.Text>
+			);
+		}
+
+		return (
+			<Form.Text className={fileInfoClassName}>{selectedFiles.name}</Form.Text>
+		);
+	};
+
+	const displayError = error || formErrorMessage;
+
+	// Render with form context integration
+	if (formContext && name) {
+		return (
+			<Controller
+				name={name}
+				control={formContext.control}
+				rules={{
+					required: required
+						? `${typeof label === 'string' ? label : 'File'} is required`
+						: false,
+				}}
+				render={({ field }) => (
+					<Form.Group className={containerClassName}>
+						<input
+							type="file"
+							ref={(e) => {
+								fileInputRef.current = e;
+								field.ref(e);
+							}}
+							style={{ display: 'none' }}
+							accept={accept}
+							multiple={multiple}
+							onChange={(e) => handleFileChange(e, field.onChange)}
+							onBlur={field.onBlur}
+							disabled={disabled || isUploading}
+							aria-invalid={!!displayError}
+							aria-describedby={displayError ? `${name}-error` : undefined}
+						/>
+						{label && (
+							<Form.Label className={labelClassName}>{label}</Form.Label>
+						)}
+						<div>
+							<Button
+								variant="secondary"
+								className={buttonClassName}
+								onClick={handleFileUploadClick}
+								disabled={disabled || isUploading}
+							>
+								{buttonText}
+							</Button>{' '}
+							{renderFileInfo()}
+						</div>
+						{displayError && (
+							<Form.Control.Feedback
+								type="invalid"
+								className={errorClassName}
+								style={{ display: 'block' }}
+							>
+								{displayError}
+							</Form.Control.Feedback>
+						)}
+					</Form.Group>
+				)}
+			/>
+		);
+	}
+
+	// Standalone mode (no form context)
+	return (
+		<Form.Group className={containerClassName}>
+			<input
+				type="file"
+				ref={fileInputRef}
+				style={{ display: 'none' }}
+				accept={accept}
+				multiple={multiple}
+				onChange={(e) => handleFileChange(e)}
+				disabled={disabled || isUploading}
+			/>
+			{label && <Form.Label className={labelClassName}>{label}</Form.Label>}
+			<div>
+				<Button
+					variant="secondary"
+					className={buttonClassName}
+					onClick={handleFileUploadClick}
+					disabled={disabled || isUploading}
+				>
+					{buttonText}
+				</Button>{' '}
+				{renderFileInfo()}
+			</div>
+			{displayError && (
+				<Form.Control.Feedback
+					type="invalid"
+					className={errorClassName}
+					style={{ display: 'block' }}
+				>
+					{displayError}
+				</Form.Control.Feedback>
+			)}
+		</Form.Group>
+	);
+};

package/lib/components/RichTextInput.tsx

@@ -0,0 +1,112 @@
+import React, { type FC, type KeyboardEvent, useRef, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import ReactQuill from 'react-quill-new';
+import 'react-quill-new/dist/quill.snow.css';
+
+/**
+ * Props for the RichTextInput component
+ */
+export type RichTextInputProps = {
+	/** Whether the editor is in read-only mode */
+	readonly?: boolean;
+	/** Maximum number of characters allowed in the editor */
+	maxLength?: number;
+	/** Current value of the editor (HTML string) */
+	value?: string;
+	/** Callback function called when the content changes */
+	onChange?: (value: string) => void;
+	/** Whether the input should be styled as invalid */
+	isInvalid?: boolean;
+};
+
+/**
+ * RichTextInput - A rich text editor component using ReactQuill
+ *
+ * Provides a WYSIWYG editor with support for headers, bold, italic, underline, and lists.
+ * Includes optional character counting and length validation.
+ *
+ * @example
+ * ```tsx
+ * <RichTextInput
+ *   value={content}
+ *   onChange={setContent}
+ *   maxLength={1000}
+ * />
+ * ```
+ */
+export const RichTextInput: FC<RichTextInputProps> = ({
+	readonly = false,
+	maxLength,
+	value = '',
+	onChange,
+	isInvalid = false,
+}) => {
+	const reactQuillRef = useRef<ReactQuill>(null);
+	const [count, setCount] = useState(value.length);
+
+	const checkCharacterCount = (event: KeyboardEvent) => {
+		const currentRef = reactQuillRef.current;
+		if (currentRef != null && maxLength != null) {
+			const unprivilegedEditor = (
+				currentRef as ReactQuill & {
+					unprivilegedEditor?: { getHTML: () => string };
+				}
+			).unprivilegedEditor;
+			if (unprivilegedEditor) {
+				const length = unprivilegedEditor.getHTML().length;
+				if (length >= maxLength && event.key !== 'Backspace') {
+					event.preventDefault();
+				}
+			}
+		}
+	};
+
+	const setContentLength = () => {
+		const currentRef = reactQuillRef.current;
+		if (currentRef != null && maxLength != null) {
+			const unprivilegedEditor = (
+				currentRef as ReactQuill & {
+					unprivilegedEditor?: { getHTML: () => string };
+				}
+			).unprivilegedEditor;
+			if (unprivilegedEditor) {
+				const length = unprivilegedEditor.getHTML().length;
+				setCount(length);
+			}
+		}
+	};
+
+	const modules = {
+		toolbar: readonly
+			? false
+			: [
+					[{ header: [1, 2, 3, 4, 5, 6, false] }],
+					['bold', 'italic', 'underline'],
+					[{ list: 'ordered' }, { list: 'bullet' }],
+				],
+	};
+
+	const formats = ['header', 'bold', 'italic', 'underline', 'list', 'bullet'];
+
+	return (
+		<>
+			<ReactQuill
+				ref={reactQuillRef}
+				theme="snow"
+				onKeyDown={checkCharacterCount}
+				onKeyUp={setContentLength}
+				formats={formats}
+				modules={modules}
+				value={value}
+				onChange={onChange}
+				readOnly={readonly}
+				className={isInvalid ? 'is-invalid' : ''}
+			/>
+			{maxLength && (
+				<Form.Text className={count > maxLength ? 'text-danger' : 'text-muted'}>
+					{count}/{maxLength} characters
+				</Form.Text>
+			)}
+		</>
+	);
+};