@capyx/components-library 0.0.14 → 0.0.15

package/README.md

@@ -1,18 +1,21 @@
-# Components Library
+# Capyx Components Library
 
-A comprehensive React component library built with TypeScript, React 19, react-hook-form, react-bootstrap, and Material-UI (MUI).
+The shared React component library for all Capyx applications.
+
+Built with TypeScript and React 19, the library ships fully-typed ESM + CJS bundles. Components are opinionated about their UI stack (see [Coupled Dependencies](#coupled-dependencies)) so that every Capyx app has a consistent look and feel without having to re-configure the same set of libraries.
 
 ## Architecture
 
-This library follows a clear separation between **Components** and **Addons**:
+The library is organised into two layers:
 
-### Components (Base Input Types)
+### Components
 
-Components are specific input elements based on HTML input types and specialized use cases:
+Self-contained visual components (currently focused on form inputs, but not restricted to them):
 
 - **CheckInput** - Checkbox input for boolean values
 - **DateInput** - Date picker with formatted string output (using MUI DatePicker)
 - **FileInput** - File upload with validation and preview
+- **RichTextInput** - Rich text (WYSIWYG) editor using Quill. Grows with content by default; supports height-constrained / scrollable layouts (e.g. inside a modal)
 - **SelectInput** - Dropdown selection for single/multiple options
 - **SwitchInput** - Toggle switch for on/off values
 - **TagsInput** - Tag management with MUI Autocomplete
@@ -21,13 +24,58 @@ Components are specific input elements based on HTML input types and specialized
 
 ### Addons (Enhancement Wrappers)
 
-Addons wrap existing components to add functionality:
+Addons wrap existing components to add behaviour without modifying the base component:
 
 - **AutocompleteInput** - Adds autocomplete/suggestions dropdown to text inputs
 - **CharacterCountInput** - Adds character counting to text, textarea, or editor inputs
 - **EditorAddon** - Wraps TextAreaInput to add rich text editing (ReactQuill)
 - **Editor** (Legacy) - Standalone rich text editor (deprecated, use EditorAddon instead)
 
+## Coupled Dependencies
+
+The packages below are **production dependencies bundled with the library**. Every consuming application must have compatible versions installed. They are considered part of the library's core stack and should not be removed or swapped lightly.
+
+### UI foundation
+
+| Package | Version | Role |
+|---|---|---|
+| `react` | `^19` | Core framework |
+| `react-bootstrap` | `^2` | Layout, forms, modals, and all general UI primitives |
+| `bootstrap` | `^5` | CSS layer required by `react-bootstrap` |
+
+### Form management
+
+| Package | Version | Role |
+|---|---|---|
+| `react-hook-form` | `^7` | Form state, validation, and field registration — deeply integrated into most input components |
+
+### MUI (advanced components)
+
+| Package | Version | Role |
+|---|---|---|
+| `@mui/material` | `^7` | MUI component primitives (used by `TagsInput`, `SelectInput`, etc.) |
+| `@emotion/styled` | `^11` | Mandatory styling engine for MUI |
+| `@mui/x-date-pickers` | `^8` | Date picker used by `DateInput` |
+
+### Date & time
+
+| Package | Version | Role |
+|---|---|---|
+| `dayjs` | `^1` | Date adapter required by `@mui/x-date-pickers` |
+| `dateformat` | `^5` | Output formatting for `DateInput` |
+
+### Rich text
+
+| Package | Version | Role |
+|---|---|---|
+| `react-quill-new` | `^3` | Quill WYSIWYG editor used by `RichTextInput` |
+
+### Utilities
+
+| Package | Version | Role |
+|---|---|---|
+| `lodash.debounce` | `^4` | Debouncing used in `AutocompleteInput` |
+
 ## Features
 
 - ✅ **React 19** compatible
@@ -102,6 +150,83 @@ function MyForm() {
 }
 ```
 
+### RichTextInput
+
+`RichTextInput` is a Quill-based WYSIWYG editor that **grows with its content** by default.
+
+#### Basic usage
+
+```tsx
+import { RichTextInput } from '@your-package/components-library';
+
+function MyForm() {
+  const [content, setContent] = useState('');
+
+  return (
+    <RichTextInput
+      value={content}
+      onChange={setContent}
+      maxLength={5000}
+    />
+  );
+}
+```
+
+#### Height-constrained layout (e.g. inside a modal)
+
+By default the editor has no maximum height. In a constrained context — such as a Bootstrap `Modal` — you want the editor to grow until the modal fills the viewport, then scroll inside the editor instead of overflowing the page.
+
+Three things are required:
+
+1. **`<Modal scrollable>`** — Bootstrap caps the modal body at the available viewport height.
+2. **`d-flex flex-column overflow-hidden` on `<Modal.Body>`** — turns the body into a flex column that constrains its children to the available height.
+3. **`style={{ flex: 1, minHeight: 0 }}` on `<RichTextInput>`** — `flex: 1` fills the remaining space; `minHeight: 0` is required in a flex context so the wrapper can shrink below its natural size and pass the overflow constraint down to Quill.
+
+```tsx
+import { RichTextInput } from '@your-package/components-library';
+import { Modal, Button } from 'react-bootstrap';
+
+function MyModal({ show, onHide }) {
+  const [content, setContent] = useState('');
+
+  return (
+    <Modal show={show} onHide={onHide} scrollable>
+      <Modal.Header closeButton>
+        <Modal.Title>Edit content</Modal.Title>
+      </Modal.Header>
+
+      {/* flex column + overflow-hidden constrains children to available height */}
+      <Modal.Body className="d-flex flex-column overflow-hidden">
+        <RichTextInput
+          value={content}
+          onChange={setContent}
+          {/* flex:1 fills remaining space; minHeight:0 enables overflow */}
+          style={{ flex: 1, minHeight: 0 }}
+        />
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>Cancel</Button>
+        <Button variant="primary" onClick={onHide}>Save</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | `''` | Current editor content as an HTML string |
+| `onChange` | `(value: string) => void` | — | Fired on every content change |
+| `readonly` | `boolean` | `false` | Hides the toolbar and disables editing |
+| `maxLength` | `number` | — | Hard character limit (measured against the raw HTML string). Shows a counter below the editor |
+| `isInvalid` | `boolean` | `false` | Applies Bootstrap `is-invalid` border styling |
+| `formats` | `FormatType[]` | `['header','bold','italic','underline','list']` | Allowed Quill formats |
+| `style` | `CSSProperties` | — | Inline styles on the outer wrapper `div`. Use to constrain height in a flex context |
+| `wrapperClassName` | `string` | — | Extra CSS class names on the outer wrapper `div` |
+
 ### Using Addons
 
 #### Autocomplete Addon

package/dist/components/RichTextInput.d.ts

@@ -1,37 +1,89 @@
-import { type FC } from 'react';
+import { type CSSProperties, type FC } from 'react';
 import 'react-quill-new/dist/quill.snow.css';
+import './RichTextInput.css';
 declare const formats: readonly ["header", "bold", "color", "italic", "link", "strike", "script", "underline", "list", "code", "blockquote", "code-block"];
 type FormatType = typeof formats[number];
 /**
  * Props for the RichTextInput component
  */
 export type RichTextInputProps = {
-    /** Whether the editor is in read-only mode */
+    /** Whether the editor is in read-only mode. Hides the toolbar when `true`. */
     readonly?: boolean;
-    /** Maximum number of characters allowed in the editor */
+    /**
+     * Maximum number of characters allowed (measured against the raw HTML string).
+     * A character counter is shown below the editor when this prop is set.
+     * Typing is blocked once the limit is reached (Backspace is still allowed).
+     */
     maxLength?: number;
-    /** Current value of the editor (HTML string) */
+    /** Current value of the editor as an HTML string. */
     value?: string;
-    /** Callback function called when the content changes */
+    /** Callback fired on every content change, receiving the updated HTML string. */
     onChange?: (value: string) => void;
-    /** Whether the input should be styled as invalid */
+    /** When `true` the editor border is styled as invalid (Bootstrap `is-invalid`). */
     isInvalid?: boolean;
-    /** Supported formats for the editor */
+    /**
+     * Quill formats to enable. Defaults to `['header', 'bold', 'italic', 'underline', 'list']`.
+     * Only formats listed here can be applied even if the toolbar offers more.
+     */
     formats?: FormatType[];
+    /**
+     * Inline styles applied to the outer wrapper `div`.
+     *
+     * **Height / scroll behaviour**
+     *
+     * By default the editor grows with its content. Use this prop together with a
+     * flex context on the parent to cap the height and activate scrolling inside
+     * the editor once that cap is reached:
+     *
+     * ```tsx
+     * // Inside a Bootstrap Modal with the `scrollable` prop:
+     * <Modal.Body className="d-flex flex-column overflow-hidden">
+     *   <RichTextInput
+     *     value={content}
+     *     onChange={setContent}
+     *     style={{ flex: 1, minHeight: 0 }}
+     *   />
+     * </Modal.Body>
+     * ```
+     *
+     * - `flex: 1` fills the remaining space in the flex parent.
+     * - `minHeight: 0` is required in a flex context so the wrapper can shrink
+     *   below its natural size and hand the overflow constraint down to Quill.
+     */
+    style?: CSSProperties;
+    /** Extra CSS class names added to the outer wrapper `div`. */
+    wrapperClassName?: string;
 };
 /**
  * RichTextInput - A rich text editor component using ReactQuill
  *
- * Provides a WYSIWYG editor with support for headers, bold, italic, underline, and lists.
- * Includes optional character counting and length validation.
+ * Renders a Quill "snow" WYSIWYG editor. The editor **grows with its content**
+ * by default (no fixed height). To cap the height and enable scrolling — for
+ * example when the component is used inside a modal — pass `style` and set up
+ * a flex context on the parent (see `style` prop docs).
  *
- * @example
+ * @example Basic usage
  * ```tsx
- * <RichTextInput
- *   value={content}
- *   onChange={setContent}
- *   maxLength={1000}
- * />
+ * <RichTextInput value={content} onChange={setContent} />
+ * ```
+ *
+ * @example With character limit
+ * ```tsx
+ * <RichTextInput value={content} onChange={setContent} maxLength={1000} />
+ * ```
+ *
+ * @example Inside a Bootstrap Modal (expand-then-scroll)
+ * ```tsx
+ * <Modal show={show} onHide={close} scrollable>
+ *   <Modal.Header closeButton>Title</Modal.Header>
+ *   <Modal.Body className="d-flex flex-column overflow-hidden">
+ *     <RichTextInput
+ *       value={content}
+ *       onChange={setContent}
+ *       style={{ flex: 1, minHeight: 0 }}
+ *     />
+ *   </Modal.Body>
+ * </Modal>
  * ```
  */
 export declare const RichTextInput: FC<RichTextInputProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAGtE,OAAO,qCAAqC,CAAC;AAE7C,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4EhD,CAAC"}
+{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAG1F,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiFhD,CAAC"}

package/dist/components/RichTextInput.js

@@ -1,25 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { Form } from 'react-bootstrap';
 import ReactQuill from 'react-quill-new';
 import 'react-quill-new/dist/quill.snow.css';
+import './RichTextInput.css';
 const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'list', 'code', 'blockquote', 'code-block'];
 /**
  * RichTextInput - A rich text editor component using ReactQuill
  *
- * Provides a WYSIWYG editor with support for headers, bold, italic, underline, and lists.
- * Includes optional character counting and length validation.
+ * Renders a Quill "snow" WYSIWYG editor. The editor **grows with its content**
+ * by default (no fixed height). To cap the height and enable scrolling — for
+ * example when the component is used inside a modal — pass `style` and set up
+ * a flex context on the parent (see `style` prop docs).
  *
- * @example
+ * @example Basic usage
  * ```tsx
- * <RichTextInput
- *   value={content}
- *   onChange={setContent}
- *   maxLength={1000}
- * />
+ * <RichTextInput value={content} onChange={setContent} />
+ * ```
+ *
+ * @example With character limit
+ * ```tsx
+ * <RichTextInput value={content} onChange={setContent} maxLength={1000} />
+ * ```
+ *
+ * @example Inside a Bootstrap Modal (expand-then-scroll)
+ * ```tsx
+ * <Modal show={show} onHide={close} scrollable>
+ *   <Modal.Header closeButton>Title</Modal.Header>
+ *   <Modal.Body className="d-flex flex-column overflow-hidden">
+ *     <RichTextInput
+ *       value={content}
+ *       onChange={setContent}
+ *       style={{ flex: 1, minHeight: 0 }}
+ *     />
+ *   </Modal.Body>
+ * </Modal>
  * ```
  */
-export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'] }) => {
+export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'], style, wrapperClassName, }) => {
     const reactQuillRef = useRef(null);
     const [count, setCount] = useState(value.length);
     const checkCharacterCount = (event) => {
@@ -54,5 +72,5 @@ export const RichTextInput = ({ readonly = false, maxLength, value = '', onChang
             ],
     };
     // const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'list', 'code', 'blockquote', 'code-block'];
-    return (_jsxs(_Fragment, { children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
+    return (_jsxs("div", { className: `ql-rich-text-wrapper${wrapperClassName ? ` ${wrapperClassName}` : ''}`, style: style, children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.14",
-	"description": "Capyx Components Library for forms across applications",
+	"version": "0.0.15",
+	"description": "Shared React component library for Capyx applications",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -50,13 +50,13 @@
 		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.4",
+		"@biomejs/biome": "^2.4.5",
 		"@chromatic-com/storybook": "^5.0.1",
-		"@storybook/addon-a11y": "^10.2.13",
-		"@storybook/addon-docs": "^10.2.13",
-		"@storybook/addon-onboarding": "^10.2.13",
-		"@storybook/addon-vitest": "^10.2.13",
-		"@storybook/react-vite": "^10.2.13",
+		"@storybook/addon-a11y": "^10.2.15",
+		"@storybook/addon-docs": "^10.2.15",
+		"@storybook/addon-onboarding": "^10.2.15",
+		"@storybook/addon-vitest": "^10.2.15",
+		"@storybook/react-vite": "^10.2.15",
 		"@types/dateformat": "^5.0.3",
 		"@types/lodash.debounce": "^4.0.9",
 		"@types/node": "^25.3.3",
@@ -65,7 +65,7 @@
 		"@vitest/browser-playwright": "^4.0.18",
 		"@vitest/coverage-v8": "^4.0.18",
 		"playwright": "^1.58.2",
-		"storybook": "^10.2.13",
+		"storybook": "^10.2.15",
 		"typescript": "^5.9.3",
 		"vitest": "^4.0.18"
 	},