@capyx/components-library 0.0.1 → 0.0.3

package/dist/components/TextAreaInput.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import debounce from 'lodash.debounce';
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+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 = ({ 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(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) => {
+        if (debounceMs && debouncedOnChangeRef.current) {
+            debouncedOnChangeRef.current(value);
+        }
+        else if (onChange) {
+            onChange(value);
+        }
+    };
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const isInvalid = !!errorMessage;
+    const textareaRef = useRef(null);
+    const [_textAreaValue, setTextAreaValue] = useState('');
+    const _handleTextAreaChange = (event) => {
+        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 (_jsx(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 }) => (_jsx(Form.Control, { ...field, onChange: (e) => {
+                    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 (_jsx(Form.Control, { as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
+};

package/dist/components/TextInput.d.ts

@@ -0,0 +1,68 @@
+import type { FC } from 'react';
+/**
+ * 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;
+    /** Placeholder text shown when input is empty */
+    placeholder?: string;
+    /** Size of the input control */
+    size?: 'sm' | 'lg';
+    /** Current input value (standalone mode) */
+    value?: string | number;
+    /** Callback function called when the input value changes */
+    onChange?: (value: string) => void;
+    /** Callback function called when the input loses focus */
+    onBlur?: () => void;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Whether to render as plain text */
+    plainText?: boolean;
+    /** Minimum value for number inputs */
+    min?: string | number;
+    /** Maximum value for number inputs */
+    max?: string | number;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Regex pattern for validation */
+    pattern?: string;
+};
+/**
+ * TextInput - A text input component with react-hook-form integration
+ *
+ * Provides a text input that works both standalone and with react-hook-form.
+ * Supports various input types (text, number, email, tel, password, etc.) and
+ * automatic validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <TextInput
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   required
+ *   placeholder="Enter your email"
+ * />
+ *
+ * // Standalone mode
+ * <TextInput
+ *   name="username"
+ *   label="Username"
+ *   value={username}
+ *   onChange={setUsername}
+ *   maxLength={50}
+ * />
+ * ```
+ */
+export declare const TextInput: FC<TextInputProps>;
+//# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA6GxC,CAAC"}

package/dist/components/TextInput.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import { Controller, useFormContext } from 'react-hook-form';
+/**
+ * TextInput - A text input component with react-hook-form integration
+ *
+ * Provides a text input that works both standalone and with react-hook-form.
+ * Supports various input types (text, number, email, tel, password, etc.) and
+ * automatic validation.
+ *
+ * @example
+ * ```tsx
+ * // With react-hook-form
+ * <TextInput
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   required
+ *   placeholder="Enter your email"
+ * />
+ *
+ * // Standalone mode
+ * <TextInput
+ *   name="username"
+ *   label="Username"
+ *   value={username}
+ *   onChange={setUsername}
+ *   maxLength={50}
+ * />
+ * ```
+ */
+export const TextInput = ({ name, label, type = 'text', placeholder, size, value, onChange, onBlur, required = false, disabled = false, readOnly = false, plainText = false, min, max, maxLength, pattern, }) => {
+    const formContext = useFormContext();
+    // Helper to safely get nested error
+    const getFieldError = (fieldName) => {
+        try {
+            const error = formContext?.formState?.errors?.[fieldName];
+            return error?.message;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const errorMessage = getFieldError(name);
+    const handleTextChange = (event) => {
+        onChange?.(event.currentTarget.value);
+    };
+    // Integrated with react-hook-form
+    if (formContext) {
+        return (_jsx(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 }) => (_jsx(Form.Control, { ...field, value: field.value ?? '', type: type, size: size, min: min, max: max, required: required, maxLength: maxLength, placeholder: placeholder, onChange: (e) => {
+                    field.onChange(e);
+                    onChange?.(e.target.value);
+                }, onBlur: () => {
+                    field.onBlur();
+                    onBlur?.();
+                }, disabled: disabled, readOnly: readOnly, plaintext: plainText, pattern: pattern, isInvalid: !!errorMessage })) }));
+    }
+    // Standalone mode (no form context)
+    return (_jsx(Form.Control, { type: type, size: size, min: min, max: max, required: required, maxLength: maxLength, placeholder: placeholder, value: value ?? '', onChange: handleTextChange, onBlur: onBlur, disabled: disabled, readOnly: readOnly, plaintext: plainText, pattern: pattern }));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,10 @@
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./addons"), exports);
+__exportStar(require("./components"), exports);

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './addons';
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,72 +1,87 @@
-{
-  "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"
-  }
-}
+{
+	"name": "@capyx/components-library",
+	"version": "0.0.3",
+	"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": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"directories": {
+		"lib": "lib"
+	},
+	"scripts": {
+		"build": "tsc && npm run build:cjs",
+		"build:cjs": "tsc --module commonjs --outDir dist-cjs && node scripts/rename-cjs.js",
+		"prepublishOnly": "npm run build",
+		"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/.storybook/main.ts

@@ -1,33 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding"
-  ],
-  "framework": "@storybook/react-vite",
-  async viteFinal(config) {
-    // Suppress "use client" directive warnings from MUI components
-    if (config.build) {
-      config.build.rollupOptions = {
-        ...config.build.rollupOptions,
-        onwarn(warning, warn) {
-          // Ignore "use client" directive warnings
-          if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('"use client"')) {
-            return;
-          }
-          warn(warning);
-        },
-      };
-    }
-    return config;
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,36 +0,0 @@
-import type { Preview } from '@storybook/react-vite'
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'react-quill-new/dist/quill.snow.css';
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-      values: [
-        {
-          name: 'dark',
-          value: '#1a1a1a',
-        },
-        {
-          name: 'light',
-          value: '#ffffff',
-        },
-      ],
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo'
-    }
-  },
-};
-
-export default preview;

package/.storybook/vitest.setup.ts

@@ -1,7 +0,0 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/biome.json

@@ -1,37 +0,0 @@
-{
-	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "tab"
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true,
-			"suspicious": {
-				"noExplicitAny": "warn"
-			}
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "single"
-		}
-	},
-	"assist": {
-		"enabled": true,
-		"actions": {
-			"source": {
-				"organizeImports": "on"
-			}
-		}
-	}
-}