@capyx/components-library 0.0.1 → 0.0.3

package/lib/components/TextInput.tsx

@@ -1,381 +0,0 @@
-import debounce from 'lodash.debounce';
-import React, {
-	type ChangeEvent,
-	type FC,
-	type ReactElement,
-	type SyntheticEvent,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import Autosuggest from 'react-autosuggest';
-import { Form, InputGroup } from 'react-bootstrap';
-import { Controller, useFormContext } from 'react-hook-form';
-
-const formatSpaces = (value: string) =>
-	value.replace(
-		/(?<=[A-Z])(?![0-9]+)(?=[A-Z][a-z])|(?<=[^A-Z])(?![0-9]+)(?=[A-Z])|(?<=[A-Za-z])(?![0-9]+)(?=[^A-Za-z])/g,
-		' ',
-	);
-
-/**
- * Props for the TextInput component
- */
-export type TextInputProps = {
-	/** The name of the text input field */
-	name?: string;
-	/** Label text displayed for the input */
-	label?: string;
-	/** HTML input type (default: "text") */
-	type?: string;
-	/** Minimum value for number/date inputs */
-	min?: string | number;
-	/** Maximum value for number/date inputs */
-	max?: string | number;
-	/** Whether the field is required */
-	required?: boolean;
-	/** Maximum number of characters allowed */
-	maxLength?: number;
-	/** Size variant of the input control */
-	controlSize?: 'sm' | 'lg' | undefined;
-	/** Placeholder text shown when input is empty */
-	placeholder?: string;
-	/** Controlled field value */
-	fieldValue?: string | number | Date | boolean | undefined;
-	/** Callback to update field value */
-	setFieldValue?: (value: string | number | Date | boolean | undefined) => void;
-	/** Callback to save/persist field value */
-	saveFieldvalue?: (
-		value: string | number | Date | boolean | undefined,
-	) => void;
-	/** Whether the input is disabled */
-	disabled?: boolean;
-	/** Whether the input is read-only */
-	isReadOnly?: boolean;
-	/** Whether to render as plain text */
-	isPlainText?: boolean;
-	/** Regex pattern for validation */
-	pattern?: string;
-	/** Icon element to display in the input group */
-	icon?: ReactElement | null;
-	/** Enable autocomplete/suggestions functionality */
-	shouldAutoComplete?: boolean;
-	/** Array of suggestion values for autocomplete */
-	values?: string[];
-	/** Debounce delay in milliseconds for value changes */
-	debounceMs?: number;
-};
-
-/**
- * A versatile text input component with support for react-hook-form integration,
- * autocomplete suggestions, debouncing, and various input types.
- *
- * Features:
- * - Seamless integration with react-hook-form for validation and state management
- * - Autocomplete with suggestion filtering when enabled
- * - Debounced value updates to reduce callback frequency
- * - Support for various input types (text, number, email, tel, etc.)
- * - Built-in validation rules (required, min, max, maxLength, pattern)
- * - Icon support for enhanced UI
- * - Automatic phone number formatting for tel type
- *
- * @example
- * // Basic usage with react-hook-form
- * <TextInput
- *   name="email"
- *   label="Email Address"
- *   type="email"
- *   required
- *   placeholder="Enter your email"
- * />
- *
- * @example
- * // With autocomplete suggestions
- * <TextInput
- *   name="country"
- *   label="Country"
- *   shouldAutoComplete
- *   values={["USA", "Canada", "Mexico"]}
- * />
- *
- * @example
- * // With debouncing and custom callbacks
- * <TextInput
- *   name="search"
- *   placeholder="Search..."
- *   debounceMs={300}
- *   setFieldValue={handleSearch}
- * />
- */
-export const TextInput: FC<TextInputProps> = ({
-	name,
-	label,
-	type = 'text',
-	min,
-	max,
-	required,
-	maxLength,
-	controlSize,
-	placeholder,
-	fieldValue,
-	setFieldValue,
-	saveFieldvalue,
-	disabled,
-	isReadOnly,
-	isPlainText,
-	pattern,
-	icon,
-	shouldAutoComplete,
-	values = [],
-	debounceMs,
-}) => {
-	const formContext = useFormContext();
-
-	// Create refs for debounced functions to clean up on unmount
-	const debouncedSetFieldValueRef = useRef<ReturnType<typeof debounce> | null>(
-		null,
-	);
-	const debouncedSaveFieldValueRef = useRef<ReturnType<typeof debounce> | null>(
-		null,
-	);
-
-	// Create debounced versions of callbacks if debounceMs is provided
-	useEffect(() => {
-		if (debounceMs && setFieldValue) {
-			debouncedSetFieldValueRef.current = debounce(setFieldValue, debounceMs);
-		}
-		if (debounceMs && saveFieldvalue) {
-			debouncedSaveFieldValueRef.current = debounce(saveFieldvalue, debounceMs);
-		}
-
-		// Cleanup on unmount
-		return () => {
-			debouncedSetFieldValueRef.current?.cancel();
-			debouncedSaveFieldValueRef.current?.cancel();
-		};
-	}, [debounceMs, setFieldValue, saveFieldvalue]);
-
-	const fieldError =
-		formContext && name ? formContext.formState.errors[name] : null;
-	const isInvalid = !!fieldError;
-
-	const [suggestions, setSuggestions] = useState<string[]>([]);
-
-	const getSuggestions = (value: string) => {
-		const inputValue = value.trim().toLowerCase();
-		const inputLength = inputValue.length;
-
-		return inputLength === 0
-			? []
-			: values.filter(
-					(v: string) => v.trim().toLowerCase().indexOf(inputValue) > -1,
-				);
-	};
-
-	const onChange = (
-		_event: SyntheticEvent,
-		{ newValue }: { newValue: string | number | Date | undefined },
-	) => {
-		if (debounceMs) {
-			if (debouncedSetFieldValueRef.current)
-				debouncedSetFieldValueRef.current(newValue);
-			if (debouncedSaveFieldValueRef.current)
-				debouncedSaveFieldValueRef.current(newValue);
-		} else {
-			if (setFieldValue) setFieldValue(newValue);
-			if (saveFieldvalue) saveFieldvalue(newValue);
-		}
-	};
-
-	const defaultOnChange = async (event: ChangeEvent<HTMLInputElement>) => {
-		if (type === 'tel') {
-			const nativeEvent = event.nativeEvent as InputEvent;
-			const isPasted = nativeEvent.inputType?.startsWith('insertFromPaste');
-			if (isPasted) {
-				const pasted: string = event.currentTarget.value;
-				const formatted = pasted.replace(/[./]/g, ' ');
-				event.currentTarget.value = formatted;
-			}
-		}
-
-		if (setFieldValue) setFieldValue(event.currentTarget.value);
-		if (saveFieldvalue) saveFieldvalue(event.currentTarget.value);
-	};
-
-	let processedFieldValue = fieldValue;
-	if (label && label === 'Profile') {
-		processedFieldValue = formatSpaces(fieldValue as string);
-	}
-
-	if (formContext && name) {
-		// With react-hook-form Controller
-		if (shouldAutoComplete && values?.length > 0) {
-			return (
-				<Autosuggest
-					suggestions={suggestions}
-					onSuggestionsFetchRequested={({ value }: { value: string }) => {
-						const newSuggestions = getSuggestions(value);
-						setSuggestions(newSuggestions);
-					}}
-					onSuggestionsClearRequested={() => setSuggestions([])}
-					getSuggestionValue={(item: string) => item}
-					renderSuggestion={(suggestion: string) => (
-						<span key={suggestion}>{suggestion}</span>
-					)}
-					highlightFirstSuggestion={true}
-					inputProps={{
-						value: String(processedFieldValue || ''),
-						onChange: (
-							_event: SyntheticEvent,
-							{ newValue }: { newValue: string },
-						) => {
-							if (formContext && name) {
-								formContext.setValue(name, newValue);
-							}
-							if (setFieldValue) setFieldValue(newValue);
-							if (saveFieldvalue) saveFieldvalue(newValue);
-						},
-					}}
-					renderInputComponent={({ value, onChange, ...props }) => (
-						<InputGroup>
-							{icon && <InputGroup.Text>{icon}</InputGroup.Text>}
-							<Form.Control
-								type={type}
-								// biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-								size={controlSize as any}
-								min={min ?? undefined}
-								max={max ?? undefined}
-								required={required ?? false}
-								maxLength={maxLength ?? undefined}
-								placeholder={placeholder ?? undefined}
-								value={value}
-								onChange={onChange}
-								disabled={disabled}
-								readOnly={isReadOnly}
-								plaintext={isPlainText}
-								pattern={pattern}
-								isInvalid={isInvalid}
-								{...props}
-							/>
-						</InputGroup>
-					)}
-				/>
-			);
-		}
-
-		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,
-					min: min
-						? { value: Number(min), message: `Minimum value is ${min}` }
-						: undefined,
-					max: max
-						? { value: Number(max), message: `Maximum value is ${max}` }
-						: undefined,
-					pattern: pattern
-						? { value: new RegExp(pattern), message: 'Invalid format' }
-						: undefined,
-				}}
-				render={({ field: { value, ...field } }) => (
-					<Form.Control
-						{...field}
-						value={value ?? ''}
-						type={type}
-						// biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-						size={controlSize as any}
-						min={min ?? undefined}
-						max={max ?? undefined}
-						required={required ?? false}
-						maxLength={maxLength ?? undefined}
-						placeholder={placeholder ?? undefined}
-						onChange={(e) => {
-							field.onChange(e);
-							if (setFieldValue) setFieldValue(e.target.value);
-							if (saveFieldvalue) saveFieldvalue(e.target.value);
-						}}
-						disabled={disabled}
-						readOnly={isReadOnly}
-						plaintext={isPlainText}
-						pattern={pattern}
-						isInvalid={isInvalid}
-					/>
-				)}
-			/>
-		);
-	}
-	// Without react-hook-form (fallback)
-	if (shouldAutoComplete && values?.length > 0) {
-		return (
-			<Autosuggest
-				suggestions={suggestions}
-				onSuggestionsFetchRequested={({ value }: { value: string }) => {
-					const newSuggestions = getSuggestions(value);
-					setSuggestions(newSuggestions);
-				}}
-				onSuggestionsClearRequested={() => setSuggestions([])}
-				getSuggestionValue={(item: string) => item}
-				renderSuggestion={(suggestion: string) => (
-					<span key={suggestion}>{suggestion}</span>
-				)}
-				highlightFirstSuggestion={true}
-				inputProps={{
-					value: String(processedFieldValue || ''),
-					onChange,
-				}}
-				renderInputComponent={(inputProps) => {
-					const { value, onChange, ...props } = inputProps;
-					return (
-						<InputGroup>
-							{icon && <InputGroup.Text>{icon}</InputGroup.Text>}
-							<Form.Control
-								type={type}
-								// biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-								size={controlSize as any}
-								min={min ?? undefined}
-								max={max ?? undefined}
-								required={required ?? false}
-								maxLength={maxLength ?? undefined}
-								placeholder={placeholder ?? undefined}
-								value={String(value || '')}
-								onChange={onChange}
-								disabled={disabled}
-								readOnly={isReadOnly}
-								plaintext={isPlainText}
-								pattern={pattern}
-								{...props}
-							/>
-						</InputGroup>
-					);
-				}}
-			/>
-		);
-	}
-
-	return (
-		<Form.Control
-			type={type}
-			// biome-ignore lint/suspicious/noExplicitAny: Type mismatch between Props and Form.Control - controlSize needs type assertion
-			size={controlSize as any}
-			min={min ?? undefined}
-			max={max ?? undefined}
-			required={required ?? false}
-			maxLength={maxLength ?? undefined}
-			placeholder={placeholder ?? undefined}
-			onChange={defaultOnChange}
-			value={processedFieldValue as Exclude<string | number | Date, Date>}
-			disabled={disabled}
-			readOnly={isReadOnly}
-			plaintext={isPlainText}
-			pattern={pattern}
-		/>
-	);
-};

package/stories/CharacterCountInput.stories.tsx

@@ -1,104 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { CharacterCountInput } from '../lib/addons/CharacterCountInput';
-import { TextAreaInput } from '../lib/components/TextAreaInput';
-import { TextInput } from '../lib/components/TextInput';
-
-const meta = {
-	title: 'Addons/CharacterCountInput',
-	component: CharacterCountInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof CharacterCountInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			username: '',
-			bio: '',
-			description: '',
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const WithTextInput: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput>
-				<TextInput name="username" label="Username" maxLength={50} />
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};
-
-export const WithTextAreaInput: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput>
-				<TextAreaInput name="bio" label="Biography" maxLength={500} />
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};
-
-export const CustomWarningThreshold: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput
-				warningThreshold={100}
-				warningClassName="text-warning"
-				dangerClassName="text-danger"
-			>
-				<TextAreaInput
-					name="description"
-					label="Description"
-					maxLength={500}
-				/>
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};
-
-export const CustomCounterFormat: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput
-				formatCounter={(current, max) => (
-					<span style={{ fontWeight: 'bold' }}>
-						{current} of {max} characters used
-					</span>
-				)}
-			>
-				<TextInput name="username" label="Username" maxLength={50} />
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};
-
-export const AlwaysShowCounter: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput showWhenEmpty={true}>
-				<TextInput name="username" label="Username" maxLength={50} placeholder="Counter always visible" />
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};
-
-export const HiddenCounter: Story = {
-	render: () => (
-		<FormWrapper>
-			<CharacterCountInput showCounter={false}>
-				<TextInput name="username" label="Username" maxLength={50} />
-			</CharacterCountInput>
-		</FormWrapper>
-	),
-};

package/stories/CheckInput.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { CheckInput } from '../lib/components/CheckInput';
-
-const meta = {
-	title: 'Components/CheckInput',
-	component: CheckInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-} satisfies Meta<typeof CheckInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			agreeToTerms: false,
-			newsletter: false,
-			remember: false,
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const Basic: Story = {
-	args: {
-		name: 'newsletter',
-		label: 'Subscribe to newsletter',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<CheckInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Required: Story = {
-	args: {
-		name: 'agreeToTerms',
-		label: 'I agree to the terms and conditions',
-		required: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<CheckInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Disabled: Story = {
-	args: {
-		name: 'remember',
-		label: 'Remember me',
-		disabled: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<CheckInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const DisabledChecked: Story = {
-	args: {
-		name: 'remember',
-		label: 'Remember me (checked & disabled)',
-		disabled: true,
-		value: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<CheckInput {...args} />
-		</FormWrapper>
-	),
-};

package/stories/DateInput.stories.tsx

@@ -1,137 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { FormProvider, useForm } from 'react-hook-form';
-import { DateInput } from '../lib/components/DateInput';
-
-const meta = {
-	title: 'Components/DateInput',
-	component: DateInput,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: ['autodocs'],
-	argTypes: {
-		textFieldSize: {
-			control: 'select',
-			options: ['small', 'medium'],
-		},
-		dateFormat: {
-			control: 'text',
-		},
-	},
-	decorators: [
-		(Story) => (
-			<LocalizationProvider dateAdapter={AdapterDayjs}>
-				<Story />
-			</LocalizationProvider>
-		),
-	],
-} satisfies Meta<typeof DateInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FormWrapper = ({ children }: { children: React.ReactNode }) => {
-	const methods = useForm({
-		defaultValues: {
-			birthdate: null,
-			appointmentDate: null,
-			deadline: null,
-		},
-	});
-
-	return <FormProvider {...methods}>{children}</FormProvider>;
-};
-
-export const Basic: Story = {
-	args: {
-		name: 'birthdate',
-		label: 'Date of Birth',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Required: Story = {
-	args: {
-		name: 'appointmentDate',
-		label: 'Appointment Date',
-		required: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const DisableFuture: Story = {
-	args: {
-		name: 'birthdate',
-		label: 'Date of Birth',
-		disableFuture: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const DisablePast: Story = {
-	args: {
-		name: 'appointmentDate',
-		label: 'Appointment Date',
-		disablePast: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const CustomFormat: Story = {
-	args: {
-		name: 'deadline',
-		label: 'Deadline',
-		dateFormat: 'YYYY-MM-DD',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const YearMonthOnly: Story = {
-	args: {
-		name: 'deadline',
-		label: 'Select Month',
-		views: ['year', 'month'],
-		dateFormat: 'MM/YYYY',
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};
-
-export const Disabled: Story = {
-	args: {
-		name: 'birthdate',
-		label: 'Date of Birth',
-		disabled: true,
-	},
-	render: (args) => (
-		<FormWrapper>
-			<DateInput {...args} />
-		</FormWrapper>
-	),
-};