@capyx/components-library 0.0.1

package/lib/components/TextInput.tsx

@@ -0,0 +1,381 @@
+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/lib/components/index.ts

@@ -0,0 +1,9 @@
+export { CheckInput } from './CheckInput';
+export { DateInput } from './DateInput';
+export { FileInput } from './FileInput';
+export { RichTextInput } from './RichTextInput';
+export { SelectInput } from './SelectInput';
+export { SwitchInput } from './SwitchInput';
+export { TagsInput } from './TagsInput';
+export { TextAreaInput } from './TextAreaInput';
+export { TextInput } from './TextInput';

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './addons';
+export * from './components';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@capyx/components-library",
+  "version": "0.0.1",
+  "description": "Capyx Components Library for forms across applications",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "components",
+    "library",
+    "typescript"
+  ],
+  "homepage": "https://gitlab.com/capyx/rmt/components-library#readme",
+  "bugs": {
+    "url": "https://gitlab.com/capyx/rmt/components-library/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@gitlab.com/capyx/rmt/components-library.git"
+  },
+  "author": "tinael.devresse@capyx.be",
+  "type": "commonjs",
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.11",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@types/dateformat": "^5.0.3",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.8",
+    "@types/react-autosuggest": "^10.1.11",
+    "@types/react-datepicker": "^7.0.0",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.11",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
+  },
+  "dependencies": {
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.3.7",
+    "@mui/x-date-pickers": "^8.25.0",
+    "bootstrap": "^5.3.8",
+    "dateformat": "^5.0.3",
+    "dayjs": "^1.11.19",
+    "lodash.debounce": "^4.0.8",
+    "react": "^19.2.3",
+    "react-autosuggest": "^10.1.0",
+    "react-bootstrap": "^2.10.10",
+    "react-hook-form": "^7.71.1",
+    "react-quill-new": "^3.7.0"
+  }
+}

package/stories/CharacterCountInput.stories.tsx

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

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