@capyx/components-library 0.0.1 → 0.0.3

package/lib/components/SwitchInput.tsx

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

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

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