Merge pull request #46 from charlesLoder/issue-44/clover-v3

Updates to Clover-IIIF v3 and React v19

Author: charlesLoder

package-lock.json

@@ -57,9 +57,9 @@
   "peerDependencies": {
     "@iiif/parser": "^2.2.0",
     "@iiif/presentation-3": "^2.2.3",
-    "@samvera/clover-iiif": "^2.19.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@samvera/clover-iiif": "^3.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
     "@ai-sdk/anthropic": "^2.0.35",
@@ -69,13 +69,12 @@
     "@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": {
     "@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",
@@ -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",

package.json

@@ -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);

src/components/Figure/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);
     }
   }

src/components/Input/style.module.css

@@ -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<HTMLTextAreaElement> {
+  error?: string;
+  placeholder?: string;
+  children?: React.ReactNode;
+}
+
+export const PromptInput: FC<PromptInputProps> = ({
+  error,
+  placeholder = "What would you like to know?",
+  children,
+  ...rest
+}) => {
+  return (
+    <div className={styles.promptInputContainer} data-role="prompt-input">
+      {error && <div className={styles.errorMessage}>{error}</div>}
+      <div className={styles.promptInput} data-error={!!error}>
+        <textarea
+          aria-label="Write your prompt to chat with a model"
+          placeholder={placeholder}
+          {...rest}
+        ></textarea>
+        {children && <div className={styles.childrenContainer}>{children}</div>}
+      </div>
+    </div>
+  );
+};

src/components/PromptInput/index.tsx

@@ -0,0 +1,88 @@
+.promptInputContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--clover-ai-sizes-1);
+}
+
+.errorMessage {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--clover-ai-colors-error);
+}
+
+.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:
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  font-family: inherit;
+  font-size: inherit;
+  resize: none;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  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-accentMuted);
+  border-color: var(--textarea-border-color);
+
+  --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) {
+    --textarea-border-color: var(--clover-ai-colors-accent);
+    box-shadow: var(--textarea-box-shadow);
+  }
+}
+
+.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);
+  }
+}
+
+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;
+}
+
+textarea:focus {
+  outline: none;
+}
+
+.childrenContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  > * {
+    display: flex;
+    gap: 0.5rem;
+  }
+}