@discuss-ds/ui 0.8.2 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @discuss-ds/ui
 
+## 0.9.1
+
+### Patch Changes
+
+- [#49](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/49) [`1931730`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/19317303f60cfe751925bdb7e84747f8a68b78b3) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `ImagePreview`: with an image, the preview area now hugs it (full width, the image's own height, at most 336px) instead of a fixed 336px area with bars above and below. The empty placeholder keeps the fixed height.
+
+## 0.9.0
+
+### Minor Changes
+
+- [#47](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/47) [`d3b3a44`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/d3b3a442602a7c398972449ebb23db7229b92573) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `StimulusCard`: follows the updated Figma for responsiveness. The card has a minimum height of 86px, the thumbnail is square and as tall as the text beside it (so it grows when the caption wraps onto more lines, from 80px up to 240px), and the text column is centred with 8px of vertical padding. New `maxLength` and `showCounter` props add the same live "n/2000 characters" counter the question text has, under an editable caption. A one-line caption looks the same as before. The thumbnail is sized from the measured text height because that is circular in plain CSS.
+
 ## 0.8.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -2403,7 +2403,17 @@ function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...
 }
 var ImagePreview = React37.forwardRef(
   ({ className, children, name, details, onRemove, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex h-84 w-full items-center justify-center bg-accent-soft [&>img]:size-full [&>img]:object-contain", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center justify-center bg-accent-soft",
+          // With an image the area hugs it (full width, its own height, at most 336px tall); the empty placeholder keeps the fixed height.
+          children ? "[&>img]:block [&>img]:h-auto [&>img]:max-h-84 [&>img]:w-full [&>img]:object-contain" : "h-84"
+        ),
+        children
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MediaInfo, { name, details, onRemove, large: true })
   ] })
 );
@@ -3198,7 +3208,12 @@ RatingScale.displayName = "RatingScale";
 // src/components/Question Types/StimulusCard.tsx
 var React47 = __toESM(require("react"), 1);
 var import_react25 = require("@phosphor-icons/react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime48 = (
+  // Out of flow, so the image's own size never sets the thumbnail's size.
+  require("react/jsx-runtime")
+);
+var MIN_THUMBNAIL = 80;
+var MAX_THUMBNAIL = 240;
 var StimulusCard = React47.forwardRef(
   ({
     className,
@@ -3210,6 +3225,8 @@ var StimulusCard = React47.forwardRef(
     caption,
     onCaptionChange,
     captionPlaceholder = "Click to write what the AI moderator says",
+    maxLength,
+    showCounter = true,
     onRemove,
     removeLabel = "Remove stimulus",
     ...props
@@ -3217,27 +3234,41 @@ var StimulusCard = React47.forwardRef(
     const [failedSrc, setFailedSrc] = React47.useState();
     const error = status === "error" || thumbnail !== void 0 && failedSrc === thumbnail;
     const showImage = thumbnail !== void 0 && !error;
+    const [draft, setDraft] = React47.useState(null);
+    const count = (draft ?? caption ?? "").length;
+    const textRef = React47.useRef(null);
+    const [thumbnailSize, setThumbnailSize] = React47.useState(MIN_THUMBNAIL);
+    React47.useEffect(() => {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        setThumbnailSize(Math.min(MAX_THUMBNAIL, Math.max(MIN_THUMBNAIL, Math.ceil(el.getBoundingClientRect().height))));
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         ref,
         "data-status": error ? "error" : "default",
-        className: cn("flex w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
+        className: cn("flex min-h-21.5 w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "span",
               {
+                style: { width: thumbnailSize, height: thumbnailSize },
                 className: cn(
-                  "flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-sm border",
+                  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm border",
                   error ? "border-destructive-soft-border bg-destructive-soft bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-destructive" : "border-border bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
                   showImage && "bg-none"
                 ),
-                children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: thumbnail, alt: thumbnailAlt, className: "size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Image, { size: 24, "aria-hidden": true })
+                children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: thumbnail, alt: thumbnailAlt, className: "absolute inset-0 size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Image, { size: 24, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-surface-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: textRef, className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-2 text-surface-foreground", children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-ui-label", children: label }),
               onCaptionChange ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 InlineEdit,
@@ -3248,10 +3279,21 @@ var StimulusCard = React47.forwardRef(
                   "aria-label": "Stimulus caption",
                   value: caption ?? "",
                   placeholder: captionPlaceholder,
+                  maxLength,
                   onValueChange: onCaptionChange,
+                  onDraftChange: setDraft,
+                  onEditingChange: (editing) => {
+                    if (!editing) setDraft(null);
+                  },
                   textClassName: "text-body-base"
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-body-base [word-break:break-word]", children: caption })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-body-base [word-break:break-word]", children: caption }),
+              onCaptionChange && showCounter && maxLength !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
+                count,
+                "/",
+                maxLength,
+                " characters"
+              ] })
             ] })
           ] }),
           onRemove && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Trash, { size: 16, "aria-hidden": true }) })