From e93e64f31ab65ba1f0d39d3940841c0643e54810 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Tue, 4 Nov 2025 09:49:42 -0500 Subject: [PATCH 1/9] Update clover to v3 --- package-lock.json | 17 ++++++++++------- package.json | 4 ++-- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index d8ede58..4d65579 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "devDependencies": { "@alcalzone/esm2cjs": "^1.4.1", "@eslint/js": "^9.28.0", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "@storybook/addon-a11y": "^9.0.9", "@storybook/addon-docs": "^9.0.9", "@storybook/react-vite": "^9.0.9", @@ -55,7 +55,7 @@ "peerDependencies": { "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "react": "^18.3.1", "react-dom": "^18.3.1" } @@ -3235,9 +3235,9 @@ ] }, "node_modules/@samvera/clover-iiif": { - "version": "2.19.2", - "resolved": "https://registry.npmjs.org/@samvera/clover-iiif/-/clover-iiif-2.19.2.tgz", - "integrity": "sha512-pOTMLBi7VM9HsyqMZxq2Se8bkTGaRtyAG1WUf5QZy5nK5/jAkepHPfTN8o+CjR651vTnanoTaeWJFYLR9E6a4g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@samvera/clover-iiif/-/clover-iiif-3.0.3.tgz", + "integrity": "sha512-jDy7tpMY+v0CnDpgb53qUVULUUjDD7Bvm64ZR3lV0RIAFua13P/8taJImOM9SjAe2zVFOy299FzMoOOKIIw5Cg==", "dev": true, "license": "ISC", "dependencies": { @@ -3267,9 +3267,12 @@ "swiper": "^9.0.0", "uuid": "^9.0.1" }, + "engines": { + "node": ">=20.10.0" + }, "peerDependencies": { - "react": ">=18.2.0 <20", - "react-dom": ">=18.2.0 <20", + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0", "swiper": "^9.0.0" } }, diff --git a/package.json b/package.json index a5b36dd..46969e8 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "peerDependencies": { "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -75,7 +75,7 @@ "devDependencies": { "@alcalzone/esm2cjs": "^1.4.1", "@eslint/js": "^9.28.0", - "@samvera/clover-iiif": "^2.19.2", + "@samvera/clover-iiif": "^3.0.0", "@storybook/addon-a11y": "^9.0.9", "@storybook/addon-docs": "^9.0.9", "@storybook/react-vite": "^9.0.9", From 2aae0c8c2dbdb21ee6fea9aa3e880ee6a4565280 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Wed, 5 Nov 2025 11:54:12 -0500 Subject: [PATCH 2/9] Upgrade to react v19 and fix textarea input --- package-lock.json | 404 +++++++++++++---------- package.json | 9 +- src/components/TextArea/index.tsx | 17 +- src/components/TextArea/style.module.css | 54 ++- src/plugin/Panel/ChatInput/index.tsx | 8 +- 5 files changed, 271 insertions(+), 221 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d65579..6cf2a5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@mediapipe/tasks-genai": "^0.10.14", "ai": "^5.0.76", "dedent": "^1.7.0", - "react-basic-contenteditable": "^1.0.6", "react-markdown": "^10.1.0" }, "devDependencies": { @@ -42,8 +41,8 @@ "eslint-plugin-storybook": "^9.0.9", "jsdom": "^26.1.0", "prettier-plugin-organize-imports": "^4.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.0.9", "storybook-css-modules": "^1.0.8", "tsc-alias": "^1.8.16", @@ -56,8 +55,8 @@ "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", "@samvera/clover-iiif": "^3.0.0", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0" } }, "node_modules/@adobe/css-tools": { @@ -1674,34 +1673,34 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz", - "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==", + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.9" + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/dom": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz", - "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==", + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.7.0", - "@floating-ui/utils": "^0.2.9" + "@floating-ui/core": "^1.7.3", + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", - "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", "dev": true, "license": "MIT", "dependencies": { - "@floating-ui/dom": "^1.0.0" + "@floating-ui/dom": "^1.7.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -1709,9 +1708,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", - "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", "dev": true, "license": "MIT" }, @@ -2089,24 +2088,6 @@ "node": ">= 8" } }, - "node_modules/@nulib/use-markdown": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@nulib/use-markdown/-/use-markdown-0.2.3.tgz", - "integrity": "sha512-gQRrLQtHIpqsBkX2ny+zwXBYP6ysyNqhqSgXRt2h2qh8b1ibn6/31tCRqOEyWllrt8GpjCjpD0pKHcISEQINGQ==", - "dev": true, - "dependencies": { - "rehype-raw": "^7.0.0", - "rehype-stringify": "^10.0.0", - "remark-gfm": "^4.0.0", - "remark-parse": "^11.0.0", - "remark-rehype": "^11.1.0", - "unified": "^11.0.4" - }, - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, "node_modules/@opentelemetry/api": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", @@ -2134,13 +2115,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@radix-ui/primitive": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz", - "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==", - "dev": true, - "license": "MIT" - }, "node_modules/@radix-ui/react-arrow": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz", @@ -2190,16 +2164,16 @@ } }, "node_modules/@radix-ui/react-checkbox": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz", - "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz", + "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", @@ -2220,18 +2194,25 @@ } } }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-collapsible": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz", - "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz", + "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" @@ -2251,6 +2232,13 @@ } } }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-collection": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz", @@ -2327,13 +2315,13 @@ } }, "node_modules/@radix-ui/react-dismissable-layer": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz", - "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz", + "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", @@ -2354,10 +2342,17 @@ } } }, + "node_modules/@radix-ui/react-dismissable-layer/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-focus-guards": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz", - "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz", + "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==", "dev": true, "license": "MIT", "peerDependencies": { @@ -2416,22 +2411,22 @@ } }, "node_modules/@radix-ui/react-popover": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz", - "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz", + "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", - "@radix-ui/react-dismissable-layer": "1.1.10", - "@radix-ui/react-focus-guards": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-popper": "1.2.7", + "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", @@ -2453,10 +2448,17 @@ } } }, + "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-popper": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz", - "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz", + "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==", "dev": true, "license": "MIT", "dependencies": { @@ -2512,9 +2514,9 @@ } }, "node_modules/@radix-ui/react-presence": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz", - "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz", + "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==", "dev": true, "license": "MIT", "dependencies": { @@ -2561,19 +2563,19 @@ } }, "node_modules/@radix-ui/react-radio-group": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz", - "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz", + "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-roving-focus": "1.1.10", + "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" @@ -2593,14 +2595,21 @@ } } }, + "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-roving-focus": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz", - "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz", + "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", @@ -2625,24 +2634,31 @@ } } }, + "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-select": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz", - "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==", + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz", + "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==", "dev": true, "license": "MIT", "dependencies": { "@radix-ui/number": "1.1.1", - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", - "@radix-ui/react-dismissable-layer": "1.1.10", - "@radix-ui/react-focus-guards": "1.1.2", + "@radix-ui/react-dismissable-layer": "1.1.11", + "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-popper": "1.2.7", + "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", @@ -2669,6 +2685,13 @@ } } }, + "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-slot": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", @@ -2689,13 +2712,13 @@ } }, "node_modules/@radix-ui/react-switch": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz", - "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==", + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz", + "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", @@ -2718,20 +2741,27 @@ } } }, + "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-tabs": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz", - "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz", + "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==", "dev": true, "license": "MIT", "dependencies": { - "@radix-ui/primitive": "1.1.2", + "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", - "@radix-ui/react-presence": "1.1.4", + "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", - "@radix-ui/react-roving-focus": "1.1.10", + "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { @@ -2749,6 +2779,13 @@ } } }, + "node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/primitive": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz", + "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==", + "dev": true, + "license": "MIT" + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz", @@ -3276,6 +3313,24 @@ "swiper": "^9.0.0" } }, + "node_modules/@samvera/clover-iiif/node_modules/@nulib/use-markdown": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@nulib/use-markdown/-/use-markdown-0.2.3.tgz", + "integrity": "sha512-gQRrLQtHIpqsBkX2ny+zwXBYP6ysyNqhqSgXRt2h2qh8b1ibn6/31tCRqOEyWllrt8GpjCjpD0pKHcISEQINGQ==", + "dev": true, + "dependencies": { + "rehype-raw": "^7.0.0", + "rehype-stringify": "^10.0.0", + "remark-gfm": "^4.0.0", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.1.0", + "unified": "^11.0.4" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -3286,7 +3341,37 @@ "@babel/runtime": "^7.13.10" } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-compose-refs": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", + "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-label": "2.0.2", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", @@ -3305,7 +3390,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-context": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-context": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", @@ -3324,45 +3409,34 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz", - "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==", + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-id": "1.0.1", - "@radix-ui/react-label": "2.0.2", - "@radix-ui/react-primitive": "1.0.3" + "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" + "react": "^16.8 || ^17.0 || ^18.0" }, "peerDependenciesMeta": { "@types/react": { "optional": true - }, - "@types/react-dom": { - "optional": true } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-id": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", - "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.1" + "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", @@ -3374,7 +3448,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-label": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz", "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==", @@ -3399,7 +3473,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-primitive": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", @@ -3424,7 +3498,7 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-slot": { + "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", @@ -3444,25 +3518,6 @@ } } }, - "node_modules/@samvera/clover-iiif/node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", - "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@standard-schema/spec": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", @@ -3564,9 +3619,9 @@ "license": "MIT" }, "node_modules/@storybook/icons": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.4.0.tgz", - "integrity": "sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.6.0.tgz", + "integrity": "sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==", "dev": true, "license": "MIT", "engines": { @@ -8952,6 +9007,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -9244,6 +9300,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -11494,27 +11551,14 @@ } }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", + "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, "engines": { "node": ">=0.10.0" } }, - "node_modules/react-basic-contenteditable": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/react-basic-contenteditable/-/react-basic-contenteditable-1.0.6.tgz", - "integrity": "sha512-6TV0ZHaL+996sLyGFfoNxfUpGD+568V/dajBjYDJoskzukR4lUa/p4y4d0rNrZ47pfeBb+Yw+0v+GWcdja9T7Q==", - "license": "MIT", - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, "node_modules/react-docgen": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-8.0.0.tgz", @@ -11582,16 +11626,16 @@ } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", + "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", + "dev": true, "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.2.0" } }, "node_modules/react-error-boundary": { @@ -12651,13 +12695,11 @@ } }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "dev": true, + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", diff --git a/package.json b/package.json index 46969e8..5a84fb1 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "@iiif/parser": "^2.2.0", "@iiif/presentation-3": "^2.2.3", "@samvera/clover-iiif": "^3.0.0", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0" }, "dependencies": { "@ai-sdk/anthropic": "^2.0.35", @@ -69,7 +69,6 @@ "@mediapipe/tasks-genai": "^0.10.14", "ai": "^5.0.76", "dedent": "^1.7.0", - "react-basic-contenteditable": "^1.0.6", "react-markdown": "^10.1.0" }, "devDependencies": { @@ -95,8 +94,8 @@ "eslint-plugin-storybook": "^9.0.9", "jsdom": "^26.1.0", "prettier-plugin-organize-imports": "^4.1.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.0.0", + "react-dom": "^19.0.0", "storybook": "^9.0.9", "storybook-css-modules": "^1.0.8", "tsc-alias": "^1.8.16", diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index fa9eec8..7dcc221 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -1,11 +1,8 @@ -import type { ComponentProps, FC } from "react"; +import type { FC } from "react"; import React from "react"; -import ContentEditable from "react-basic-contenteditable"; import styles from "./style.module.css"; -type ContentEditableProps = ComponentProps; - -export interface TextareaProps extends ContentEditableProps { +export interface TextareaProps extends React.HTMLAttributes { label?: string; labelDisplay?: "hidden" | "visible"; error?: string; @@ -45,19 +42,13 @@ export const Textarea: FC = ({
- + {children &&
{children}
}
{(error || helperText) && ( diff --git a/src/components/TextArea/style.module.css b/src/components/TextArea/style.module.css index 949f85a..79380f9 100644 --- a/src/components/TextArea/style.module.css +++ b/src/components/TextArea/style.module.css @@ -33,7 +33,7 @@ } /* Base textarea styles */ -.textarea { +.textareaWrapper { display: flex; flex-direction: column; gap: var(--clover-ai-sizes-2); @@ -50,61 +50,79 @@ border-width: calc(var(--clover-ai-sizes-1) / calc(var(--golden-ratio) * 2)); border-style: solid; background-color: transparent; + margin-block-end: var(--clover-ai-sizes-1); /* configurable styles */ - --textarea-border-color: var(--clover-ai-colors-accent, #e6e8eb); + --textarea-border-color: var(--clover-ai-colors-accent); border-color: var(--textarea-border-color); - &:has(*:focus) { - --textarea-border-color: var(--clover-ai-colors-accentMuted); - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + --textarea-box-shadow-color: color-mix( + in srgb, + var(--clover-ai-colors-accentMuted) 10%, + transparent + ); + --textarea-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--textarea-box-shadow-color); + + &:has(textarea:focus) { + box-shadow: var(--textarea-box-shadow); } } -.textarea[data-error="true"] { +.textareaWrapper[data-error="true"] { --textarea-border-color: var(--clover-ai-colors-error); + &:has(textarea:focus) { + --textarea-box-shadow-color: color-mix(in srgb, var(--clover-ai-colors-error) 10%, transparent); + } } /* Variant styles */ -.textarea[data-variant="bordered"] { +.textareaWrapper[data-variant="bordered"] { border: 2px solid var(--colors-border, #e5e7eb); background-color: transparent; } -.textarea[data-variant="filled"] { +.textareaWrapper[data-variant="filled"] { border: 1px solid transparent; background-color: var(--colors-background, #f9fafb); } /* Size styles */ -.textarea[data-size="small"] { +.textareaWrapper[data-size="small"] { padding: 0.5rem; font-size: 0.875rem; min-height: 1.5rem; } -.textarea[data-size="medium"] { +.textareaWrapper[data-size="medium"] { padding: 0.618rem; font-size: 1rem; min-height: 3rem; } -.textarea[data-size="large"] { +.textareaWrapper[data-size="large"] { padding: 0.75rem; font-size: 1.125rem; min-height: 3.5rem; } -.contentEditableContainer { +textarea { cursor: pointer; margin: 0; + padding: 0; + white-space: pre-wrap; + border: none; + width: 100%; + font-family: inherit; + resize: none; + field-sizing: content; + min-height: 2em; + max-height: 4em; + scrollbar-color: var(--clover-ai-colors-secondaryAlt) transparent; + overflow-y: scroll; +} - & > *[contenteditable] { - white-space: pre-wrap; - outline: 0px solid transparent; - padding: 0; - width: 100%; - } +textarea:focus { + outline: none; } .placeholder { diff --git a/src/plugin/Panel/ChatInput/index.tsx b/src/plugin/Panel/ChatInput/index.tsx index 297e072..b397320 100644 --- a/src/plugin/Panel/ChatInput/index.tsx +++ b/src/plugin/Panel/ChatInput/index.tsx @@ -97,10 +97,10 @@ export const ChatInput: FC = () => { label="What would you like to know?" labelDisplay="hidden" size="small" - updatedContent={formState !== "idle" ? "" : undefined} - onChange={(input) => { - setTextareaValue(input); - if (input?.trim() && textareaError) { + // updatedContent={formState !== "idle" ? "" : undefined} + onChange={({ currentTarget }) => { + setTextareaValue(currentTarget.value); + if (currentTarget.value?.trim() && textareaError) { setTextareaError(""); } }} From f3c441c94090cf1a0c09a55ee4385b1627195f85 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Wed, 5 Nov 2025 14:53:22 -0500 Subject: [PATCH 3/9] Fix textarea clearing on submit --- src/components/TextArea/index.tsx | 10 +++++++++- src/plugin/Panel/ChatInput/index.tsx | 5 ++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx index 7dcc221..e45b5ac 100644 --- a/src/components/TextArea/index.tsx +++ b/src/components/TextArea/index.tsx @@ -7,6 +7,7 @@ export interface TextareaProps extends React.HTMLAttributes labelDisplay?: "hidden" | "visible"; error?: string; helperText?: string; + innerText?: string; variant?: "default" | "bordered" | "filled"; size?: "small" | "medium" | "large"; id?: string; @@ -18,6 +19,7 @@ export const Textarea: FC = ({ labelDisplay = "visible", error, helperText, + innerText, variant = "default", size = "medium", children, @@ -27,6 +29,8 @@ export const Textarea: FC = ({ const labelId = `textarea-label`; const helperId = `textarea-helper`; + console.log(innerText); + return (
{label && ( @@ -48,7 +52,11 @@ export const Textarea: FC = ({ data-variant={variant} id={textareaId} > - + {children &&
{children}
}
{(error || helperText) && ( diff --git a/src/plugin/Panel/ChatInput/index.tsx b/src/plugin/Panel/ChatInput/index.tsx index b397320..59eabae 100644 --- a/src/plugin/Panel/ChatInput/index.tsx +++ b/src/plugin/Panel/ChatInput/index.tsx @@ -10,7 +10,6 @@ export const ChatInput: FC = () => { const { dispatch, state } = usePlugin(); const [textareaValue, setTextareaValue] = useState(""); const [textareaError, setTextareaError] = useState(""); - const [formState, setFormState] = useState<"idle" | "loading" | "error" | "success">("idle"); function clearConversation() { @@ -28,6 +27,7 @@ export const ChatInput: FC = () => { } setTextareaError(""); + setTextareaValue(""); setFormState("loading"); const userMessage: UserMessage = { @@ -60,7 +60,6 @@ export const ChatInput: FC = () => { try { await state?.provider?.generate_response([userMessage], state.messages); - setTextareaValue(""); } catch (error) { // eslint-disable-next-line no-console console.error("Error sending message:", error); @@ -97,7 +96,7 @@ export const ChatInput: FC = () => { label="What would you like to know?" labelDisplay="hidden" size="small" - // updatedContent={formState !== "idle" ? "" : undefined} + innerText={textareaValue} onChange={({ currentTarget }) => { setTextareaValue(currentTarget.value); if (currentTarget.value?.trim() && textareaError) { From ae979689b2bb71ced37f2384fda22fb9ce81ba95 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Thu, 6 Nov 2025 22:19:38 -0500 Subject: [PATCH 4/9] Chnage TextArea to PromptInput --- src/components/PromptInput/index.tsx | 30 +++++++ .../style.module.css | 81 +++---------------- src/components/TextArea/index.tsx | 69 ---------------- src/components/index.ts | 4 +- src/plugin/Panel/ChatInput/index.tsx | 12 +-- 5 files changed, 46 insertions(+), 150 deletions(-) create mode 100644 src/components/PromptInput/index.tsx rename src/components/{TextArea => PromptInput}/style.module.css (60%) delete mode 100644 src/components/TextArea/index.tsx diff --git a/src/components/PromptInput/index.tsx b/src/components/PromptInput/index.tsx new file mode 100644 index 0000000..ba4338c --- /dev/null +++ b/src/components/PromptInput/index.tsx @@ -0,0 +1,30 @@ +import type { FC } from "react"; +import React from "react"; +import styles from "./style.module.css"; + +export interface PromptInputProps extends React.TextareaHTMLAttributes { + error?: string; + placeholder?: string; + children?: React.ReactNode; +} + +export const PromptInput: FC = ({ + error, + placeholder = "What would you like to know?", + children, + ...rest +}) => { + return ( +
+ {error &&
{error}
} +
+ + {children &&
{children}
} +
+
+ ); +}; diff --git a/src/components/TextArea/style.module.css b/src/components/PromptInput/style.module.css similarity index 60% rename from src/components/TextArea/style.module.css rename to src/components/PromptInput/style.module.css index 79380f9..30ef1b4 100644 --- a/src/components/TextArea/style.module.css +++ b/src/components/PromptInput/style.module.css @@ -1,42 +1,21 @@ -:root { - --content-editable-padding: 0.85rem; -} -/* Container styles */ -.container { +.promptInputContainer { width: 100%; + display: flex; + flex-direction: column; + gap: var(--clover-ai-sizes-1); } -/* Label styles */ -.label { - display: block; - margin-bottom: 0.5rem; +.errorMessage { + margin-top: 0.25rem; font-size: 0.875rem; - font-weight: 500; - color: inherit; -} - -.label[data-error="true"] { - color: #ef4444; -} - -/* Visually hidden but accessible to screen readers */ -.visuallyHidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; + color: var(--clover-ai-colors-error); } -/* Base textarea styles */ -.textareaWrapper { +.promptInput { display: flex; flex-direction: column; gap: var(--clover-ai-sizes-2); + padding: var(--clover-ai-sizes-2); border-radius: 0.5rem; outline: none; transition: @@ -68,43 +47,13 @@ } } -.textareaWrapper[data-error="true"] { +.promptInput[data-error="true"] { --textarea-border-color: var(--clover-ai-colors-error); &:has(textarea:focus) { --textarea-box-shadow-color: color-mix(in srgb, var(--clover-ai-colors-error) 10%, transparent); } } -/* Variant styles */ -.textareaWrapper[data-variant="bordered"] { - border: 2px solid var(--colors-border, #e5e7eb); - background-color: transparent; -} - -.textareaWrapper[data-variant="filled"] { - border: 1px solid transparent; - background-color: var(--colors-background, #f9fafb); -} - -/* Size styles */ -.textareaWrapper[data-size="small"] { - padding: 0.5rem; - font-size: 0.875rem; - min-height: 1.5rem; -} - -.textareaWrapper[data-size="medium"] { - padding: 0.618rem; - font-size: 1rem; - min-height: 3rem; -} - -.textareaWrapper[data-size="large"] { - padding: 0.75rem; - font-size: 1.125rem; - min-height: 3.5rem; -} - textarea { cursor: pointer; margin: 0; @@ -144,13 +93,3 @@ textarea:focus { gap: 0.5rem; } } - -.helperText { - margin-top: 0.25rem; - font-size: 0.875rem; - color: var(--colors-text-secondary, #6b7280); -} - -.helperText[data-error="true"] { - color: var(--clover-ai-colors-error); -} diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx deleted file mode 100644 index e45b5ac..0000000 --- a/src/components/TextArea/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { FC } from "react"; -import React from "react"; -import styles from "./style.module.css"; - -export interface TextareaProps extends React.HTMLAttributes { - label?: string; - labelDisplay?: "hidden" | "visible"; - error?: string; - helperText?: string; - innerText?: string; - variant?: "default" | "bordered" | "filled"; - size?: "small" | "medium" | "large"; - id?: string; - children?: React.ReactNode; -} - -export const Textarea: FC = ({ - label, - labelDisplay = "visible", - error, - helperText, - innerText, - variant = "default", - size = "medium", - children, - ...rest -}) => { - const textareaId = `textarea-contenteditable-container`; - const labelId = `textarea-label`; - const helperId = `textarea-helper`; - - console.log(innerText); - - return ( -
- {label && ( - - )} -
- - {children &&
{children}
} -
- {(error || helperText) && ( -
- {error || helperText} -
- )} -
- ); -}; diff --git a/src/components/index.ts b/src/components/index.ts index ed3f636..919b326 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,8 +1,8 @@ export { Button } from "./Button"; export type { ButtonProps } from "./Button"; -export { Textarea } from "./TextArea"; -export type { TextareaProps } from "./TextArea"; +export { PromptInput } from "./PromptInput"; +export type { PromptInputProps } from "./PromptInput"; export { Message } from "./Messages/Message"; diff --git a/src/plugin/Panel/ChatInput/index.tsx b/src/plugin/Panel/ChatInput/index.tsx index 59eabae..8eaca1c 100644 --- a/src/plugin/Panel/ChatInput/index.tsx +++ b/src/plugin/Panel/ChatInput/index.tsx @@ -1,4 +1,4 @@ -import { Button, Textarea } from "@components"; +import { Button, PromptInput } from "@components"; import { usePlugin } from "@context"; import { Add, ArrowUp, Clear } from "@icons"; import { MediaContent, UserMessage } from "@types"; @@ -90,13 +90,9 @@ export const ChatInput: FC = () => { handleSubmit(e); }} > - + ); }; From 734fa4f2c2aeda5916ecd8cc83c4df8ae66d4bc5 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Thu, 6 Nov 2025 22:26:45 -0500 Subject: [PATCH 5/9] Update PromptInput Story --- stories/components/PromptInput.stories.ts | 51 ++++++++++++ stories/components/TextArea.stories.ts | 98 ----------------------- 2 files changed, 51 insertions(+), 98 deletions(-) create mode 100644 stories/components/PromptInput.stories.ts delete mode 100644 stories/components/TextArea.stories.ts diff --git a/stories/components/PromptInput.stories.ts b/stories/components/PromptInput.stories.ts new file mode 100644 index 0000000..6bc3df2 --- /dev/null +++ b/stories/components/PromptInput.stories.ts @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { fn } from "storybook/test"; +import { PromptInput } from "../../src/components/PromptInput"; + +// Updated story to reflect the new PromptInput component, replacing legacy Textarea. +const meta = { + title: "components/PromptInput", + component: PromptInput, + tags: ["autodocs"], + args: { onChange: fn(), placeholder: "What would you like to know?" }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// Basic default state. +export const Default: Story = { + args: {}, +}; + +// Custom placeholder text. +export const CustomPlaceholder: Story = { + name: "Placeholder / Custom", + args: { + placeholder: "Ask me anything...", + }, +}; + +// Pre-filled (uncontrolled) content using defaultValue. +export const PreFilled: Story = { + name: "State / Pre-filled", + args: { + defaultValue: "Hello model, explain quantum entanglement simply.", + }, +}; + +// Error state rendering the error message. +export const WithError: Story = { + name: "State / With Error", + args: { + error: "This field is required", + }, +}; + +// Shows children slot (e.g., an action button area). +export const WithChildren: Story = { + name: "Slot / With Children", + args: { + children: "👍 Send", + }, +}; diff --git a/stories/components/TextArea.stories.ts b/stories/components/TextArea.stories.ts deleted file mode 100644 index 48e47d9..0000000 --- a/stories/components/TextArea.stories.ts +++ /dev/null @@ -1,98 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react-vite"; -import { fn } from "storybook/test"; -import { Textarea } from "../../src/components/TextArea"; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta = { - title: "components/Textarea", - component: Textarea, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ["autodocs"], - // Use `fn` to spy on the onChange arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - args: { onChange: fn(), label: "A label" }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Default: Story = { - args: {}, -}; - -export const DefaultVariant: Story = { - name: "Variant / Default", - args: { - variant: "default", - }, -}; - -export const BorderedVariant: Story = { - name: "Variant / Bordered", - args: { - variant: "bordered", - }, -}; - -export const FilledVariant: Story = { - name: "Variant / Filled", - args: { - variant: "filled", - }, -}; - -export const Small: Story = { - name: "Size / Small", - args: { - size: "small", - }, -}; - -export const Medium: Story = { - name: "Size / Medium (Default)", - args: { - size: "medium", - }, -}; - -export const Large: Story = { - name: "Size / Large", - args: { - size: "large", - }, -}; - -export const VisibleLabel: Story = { - name: "Label Display / Visible (Default)", - args: { - labelDisplay: "visible", - }, -}; - -export const HiddenLabel: Story = { - name: "Label Display / Hidden", - args: { - labelDisplay: "hidden", - label: "When label is hidden, the placeholder is used", - }, -}; - -export const WithHelperText: Story = { - name: "State / With Helper Text", - args: { - helperText: "This is helpful information about the field", - }, -}; - -export const WithError: Story = { - name: "State / With Error", - args: { - error: "This field is required", - }, -}; - -export const WithChildren: Story = { - args: { - children: "👍 Send", - }, -}; From cece10501cc64f746a690e8677930d147d8bfb2b Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Fri, 7 Nov 2025 23:57:54 -0500 Subject: [PATCH 6/9] Update figcaption sizing --- src/components/Figure/style.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Figure/style.module.css b/src/components/Figure/style.module.css index 2664afd..5065712 100644 --- a/src/components/Figure/style.module.css +++ b/src/components/Figure/style.module.css @@ -2,6 +2,10 @@ margin: 0; display: grid; + &:has(img) { + width: min-content; + } + /* configurable styles */ --figure-border-radius: var(--clover-ai-radii-2); --figure-caption-color: var(--clover-ai-colors-primaryMuted); From f01f570111a22718e8a68405f844d670f98dfd91 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Sat, 8 Nov 2025 00:12:09 -0500 Subject: [PATCH 7/9] Standardize input border colors --- src/components/Input/style.module.css | 7 ++++--- src/components/PromptInput/style.module.css | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Input/style.module.css b/src/components/Input/style.module.css index 65d4fcb..2debb7d 100644 --- a/src/components/Input/style.module.css +++ b/src/components/Input/style.module.css @@ -19,8 +19,7 @@ --input-border-radius: var(--clover-ai-sizes-2); border-radius: var(--input-border-radius); - --input-border-width: 1px; - border-width: var(--input-border-width); + border-width: calc(var(--clover-ai-sizes-1) / calc(var(--golden-ratio) * 2)); --input-border-style: solid; border-style: var(--input-border-style); @@ -37,10 +36,12 @@ &:focus { --input-box-shadow-color: color-mix(in srgb, var(--input-border-color) 10%, transparent); --input-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--input-box-shadow-color); + --input-border-color: var(--clover-ai-colors-accent); box-shadow: var(--input-box-shadow); } - &:user-invalid { + &:user-invalid, + &[aria-invalid="true"] { --input-border-color: var(--clover-ai-colors-error); } } diff --git a/src/components/PromptInput/style.module.css b/src/components/PromptInput/style.module.css index 30ef1b4..dd7d2e5 100644 --- a/src/components/PromptInput/style.module.css +++ b/src/components/PromptInput/style.module.css @@ -32,7 +32,7 @@ margin-block-end: var(--clover-ai-sizes-1); /* configurable styles */ - --textarea-border-color: var(--clover-ai-colors-accent); + --textarea-border-color: var(--clover-ai-colors-accentMuted); border-color: var(--textarea-border-color); --textarea-box-shadow-color: color-mix( @@ -43,6 +43,7 @@ --textarea-box-shadow: 0 0 0 var(--clover-ai-sizes-1) var(--textarea-box-shadow-color); &:has(textarea:focus) { + --textarea-border-color: var(--clover-ai-colors-accent); box-shadow: var(--textarea-box-shadow); } } @@ -50,6 +51,7 @@ .promptInput[data-error="true"] { --textarea-border-color: var(--clover-ai-colors-error); &:has(textarea:focus) { + --textarea-border-color: var(--clover-ai-colors-error); --textarea-box-shadow-color: color-mix(in srgb, var(--clover-ai-colors-error) 10%, transparent); } } From c60c38838bfeb4d11ecb7a697c83036f38286cf0 Mon Sep 17 00:00:00 2001 From: charlesLoder Date: Sat, 8 Nov 2025 00:17:45 -0500 Subject: [PATCH 8/9] Update PromptInput test --- src/plugin/Panel/index.test.tsx | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/plugin/Panel/index.test.tsx b/src/plugin/Panel/index.test.tsx index 388caa5..09f2b4c 100644 --- a/src/plugin/Panel/index.test.tsx +++ b/src/plugin/Panel/index.test.tsx @@ -13,26 +13,29 @@ vi.mock("@components", async (importOriginal) => { const original = (await importOriginal()) as Record; return { ...original, - Textarea: ({ + PromptInput: ({ onChange, + value, + error, children, }: { + value?: string; + error?: string; children: React.ReactNode; - onChange: (value: string) => void; + onChange: React.ChangeEventHandler; }) => { - const [value, setValue] = React.useState(""); return (
- { - setValue(e.target.value); - onChange(e.target.value); - }} - /> - {children} + {error &&
{error}
} +
+