@capyx/components-library 0.0.1 → 0.0.2

package/lib/components/FileInput.tsx

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

@@ -1,112 +0,0 @@
-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>
-			)}
-		</>
-	);
-};

package/lib/components/SelectInput.tsx

@@ -1,144 +0,0 @@
-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>
-	);
-};