@capyx/components-library 0.0.6 → 0.0.8

package/dist/components/TagsInput.d.ts

@@ -1,18 +1,26 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 /**
  * Props for the TagsInput component
  */
 export type TagsInputProps = {
+    /** Field name — required for form integration and the hidden native input */
+    name: string;
     /** Array of current tag values */
-    value: string[];
+    value?: string[];
     /** Callback function called when tags change */
-    onChange: (value: string[]) => void;
+    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;
+    /** Whether at least one tag is required */
+    required?: boolean;
+    /** Label used in validation error messages (e.g. "Skills is required") */
+    label?: string;
+    /** Minimum number of tags required */
+    min?: number;
+    /** Maximum number of tags allowed */
+    max?: number;
 };
 /**
  * TagsInput - A multi-tag input component using Material-UI Autocomplete
@@ -21,6 +29,14 @@ export type TagsInputProps = {
  * Automatically trims whitespace and filters empty values. Tags are displayed
  * as chips with delete functionality.
  *
+ * Supports validation via:
+ * - **react-hook-form**: When wrapped in a `FormProvider`, the component
+ *   registers itself with `Controller` and validates `required`, `min`,
+ *   and `max` rules automatically.
+ * - **Native HTML5**: A hidden `<input>` element participates in native
+ *   constraint validation (`required` attribute), making it compatible with
+ *   any form library that relies on `checkValidity()` / `reportValidity()`.
+ *
  * @example
  * ```tsx
  * <TagsInput
@@ -28,6 +44,9 @@ export type TagsInputProps = {
  *   value={tags}
  *   onChange={setTags}
  *   placeholder="Add skills..."
+ *   required
+ *   min={1}
+ *   max={5}
  * />
  * ```
  */

package/dist/components/TagsInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiFxC,CAAC"}
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../lib/components/TagsInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgPxC,CAAC"}

package/dist/components/TagsInput.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { Autocomplete, Chip, TextField } from '@mui/material';
+import { Autocomplete, Chip, FormHelperText, TextField } from '@mui/material';
+import { useEffect, useRef } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 /**
  * TagsInput - A multi-tag input component using Material-UI Autocomplete
  *
@@ -8,6 +10,14 @@ import { Autocomplete, Chip, TextField } from '@mui/material';
  * Automatically trims whitespace and filters empty values. Tags are displayed
  * as chips with delete functionality.
  *
+ * Supports validation via:
+ * - **react-hook-form**: When wrapped in a `FormProvider`, the component
+ *   registers itself with `Controller` and validates `required`, `min`,
+ *   and `max` rules automatically.
+ * - **Native HTML5**: A hidden `<input>` element participates in native
+ *   constraint validation (`required` attribute), making it compatible with
+ *   any form library that relies on `checkValidity()` / `reportValidity()`.
+ *
  * @example
  * ```tsx
  * <TagsInput
@@ -15,53 +25,138 @@ import { Autocomplete, Chip, TextField } from '@mui/material';
  *   value={tags}
  *   onChange={setTags}
  *   placeholder="Add skills..."
+ *   required
+ *   min={1}
+ *   max={5}
  * />
  * ```
  */
-export const TagsInput = ({ value = [], onChange, placeholder = 'Add tags...', disabled = false, name, }) => {
-    return (_jsx(Autocomplete, { multiple: true, freeSolo: true, 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) => (_createElement(Chip, { ...getTagProps({ index }), key: option, label: option, sx: {
-                backgroundColor: '#212529',
-                color: '#ffffff',
-                '& .MuiChip-deleteIcon': {
-                    color: 'rgba(255, 255, 255, 0.7)',
+export const TagsInput = ({ name, value: valueProp = [], onChange, placeholder = 'Add tags...', disabled = false, required = false, label, min, max, }) => {
+    const formContext = useFormContext();
+    const nativeInputRef = useRef(null);
+    const fieldLabel = label || 'This field';
+    // Keep the hidden native input's custom validity in sync with the tag count
+    // so that form.checkValidity() / form.reportValidity() report the right error.
+    useEffect(() => {
+        const input = nativeInputRef.current;
+        if (!input)
+            return;
+        const count = valueProp.length;
+        if (required && count === 0) {
+            input.setCustomValidity(`${fieldLabel} is required`);
+        }
+        else if (min != null && count < min) {
+            input.setCustomValidity(`At least ${min} tag${min === 1 ? '' : 's'} required`);
+        }
+        else if (max != null && count > max) {
+            input.setCustomValidity(`No more than ${max} tag${max === 1 ? '' : 's'} allowed`);
+        }
+        else {
+            input.setCustomValidity('');
+        }
+    }, [valueProp, required, min, max, fieldLabel]);
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const buildRules = () => ({
+        required: required ? `${fieldLabel} is required` : false,
+        validate: {
+            ...(min != null
+                ? {
+                    min: (v) => v.length >= min ||
+                        `At least ${min} tag${min === 1 ? '' : 's'} required`,
+                }
+                : {}),
+            ...(max != null
+                ? {
+                    max: (v) => v.length <= max ||
+                        `No more than ${max} tag${max === 1 ? '' : 's'} allowed`,
+                }
+                : {}),
+        },
+    });
+    const cleanValues = (newValue) => {
+        const cleaned = newValue
+            .map((v) => (typeof v === 'string' ? v.trim() : v))
+            .filter((v) => v.length > 0);
+        // Enforce max cap
+        if (max != null && cleaned.length > max) {
+            return cleaned.slice(0, max);
+        }
+        return cleaned;
+    };
+    const renderChips = (tagValue, getTagProps) => tagValue.map((option, index) => (_createElement(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',
-                    MozUserSelect: 'none',
-                    msUserSelect: 'none',
-                    pointerEvents: 'auto',
-                    '&::selection': {
-                        backgroundColor: 'transparent',
-                        color: 'transparent',
-                    },
-                    '& svg': {
-                        userSelect: 'none',
-                        WebkitUserSelect: 'none',
-                        pointerEvents: 'none',
-                    },
-                    '&:hover': {
-                        color: '#dc3545',
-                    },
+                    pointerEvents: 'none',
                 },
-            } }))), renderInput: (params) => (_jsx(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',
-                    },
+                '&:hover': {
+                    color: '#dc3545',
                 },
-            } })) }));
+            },
+        } })));
+    const inputSx = (hasError) => ({
+        '& .MuiOutlinedInput-root': {
+            padding: '4px',
+            minHeight: '38px',
+            '& fieldset': {
+                borderColor: hasError ? '#dc3545' : '#ced4da',
+            },
+            '&:hover fieldset': {
+                borderColor: hasError ? '#dc3545' : '#86b7fe',
+            },
+            '&.Mui-focused fieldset': {
+                borderColor: hasError ? '#dc3545' : '#86b7fe',
+                borderWidth: '1px',
+            },
+        },
+    });
+    // ── react-hook-form mode ──────────────────────────────────────────────
+    if (formContext) {
+        const errorMessage = getFieldError(name);
+        const hasError = !!errorMessage;
+        return (_jsx(Controller, { name: name, control: formContext.control, defaultValue: valueProp, rules: buildRules(), render: ({ field }) => {
+                const tags = field.value ?? [];
+                return (_jsxs("div", { children: [_jsx(Autocomplete, { multiple: true, freeSolo: true, options: [], value: tags, onChange: (_event, newValue) => {
+                                const cleaned = cleanValues(newValue);
+                                field.onChange(cleaned);
+                                onChange?.(cleaned);
+                            }, disabled: disabled, renderValue: (tagValue, getTagProps) => renderChips(tagValue, getTagProps), renderInput: (params) => (_jsx(TextField, { ...params, name: name, placeholder: tags.length === 0 ? placeholder : undefined, variant: "outlined", size: "small", error: hasError, sx: inputSx(hasError), onBlur: field.onBlur })) }), hasError && (_jsx(FormHelperText, { error: true, sx: { mx: '14px', mt: '3px' }, children: errorMessage }))] }));
+            } }));
+    }
+    // ── standalone mode ───────────────────────────────────────────────────
+    return (_jsxs("div", { children: [_jsx(Autocomplete, { multiple: true, freeSolo: true, options: [], value: valueProp, onChange: (_event, newValue) => {
+                    const cleaned = cleanValues(newValue);
+                    onChange?.(cleaned);
+                }, disabled: disabled, renderValue: (tagValue, getTagProps) => renderChips(tagValue, getTagProps), renderInput: (params) => (_jsx(TextField, { ...params, name: name, placeholder: valueProp.length === 0 ? placeholder : undefined, variant: "outlined", size: "small", sx: inputSx(false) })) }), _jsx("input", { ref: nativeInputRef, type: "text", name: `${name}__native`, value: valueProp.join(','), "aria-hidden": "true", tabIndex: -1, onChange: () => { }, style: {
+                    position: 'absolute',
+                    width: 0,
+                    height: 0,
+                    opacity: 0,
+                    padding: 0,
+                    margin: 0,
+                    border: 'none',
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                } })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "Capyx Components Library for forms across applications",
 	"publishConfig": {
 		"access": "public"
@@ -50,38 +50,38 @@
 		"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",
+		"@biomejs/biome": "^2.4.3",
+		"@chromatic-com/storybook": "^5.0.1",
+		"@storybook/addon-a11y": "^10.2.10",
+		"@storybook/addon-docs": "^10.2.10",
+		"@storybook/addon-onboarding": "^10.2.10",
+		"@storybook/addon-vitest": "^10.2.10",
+		"@storybook/react-vite": "^10.2.10",
 		"@types/dateformat": "^5.0.3",
 		"@types/lodash.debounce": "^4.0.9",
-		"@types/node": "^25.0.9",
-		"@types/react": "^19.2.8",
+		"@types/node": "^25.3.0",
+		"@types/react": "^19.2.14",
 		"@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",
+		"@vitest/browser-playwright": "^4.0.18",
+		"@vitest/coverage-v8": "^4.0.18",
+		"playwright": "^1.58.2",
+		"storybook": "^10.2.10",
 		"typescript": "^5.9.3",
-		"vitest": "^4.0.17"
+		"vitest": "^4.0.18"
 	},
 	"dependencies": {
 		"@emotion/styled": "^11.14.1",
-		"@mui/material": "^7.3.7",
-		"@mui/x-date-pickers": "^8.25.0",
+		"@mui/material": "^7.3.8",
+		"@mui/x-date-pickers": "^8.27.0",
 		"bootstrap": "^5.3.8",
 		"dateformat": "^5.0.3",
 		"dayjs": "^1.11.19",
 		"lodash.debounce": "^4.0.8",
-		"react": "^19.2.3",
+		"react": "^19.2.4",
 		"react-autosuggest": "^10.1.0",
 		"react-bootstrap": "^2.10.10",
 		"react-hook-form": "^7.71.1",
-		"react-quill-new": "^3.7.0"
+		"react-quill-new": "^3.8.3"
 	}
 }