@capyx/components-library 0.0.1 → 0.0.3

package/lib/addons/CharacterCountInput.tsx

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

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

package/lib/components/CheckInput.tsx

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

package/lib/components/DateInput.tsx

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