@snowcone-app/ui 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.9.0
+
+### Minor Changes
+
+- [#2936](https://github.com/snowcone-app/snowcone-monorepo/pull/2936) [`3c37e27`](https://github.com/snowcone-app/snowcone-monorepo/commit/3c37e27da40c8865b4c4bd71ec9454ec7e64bc4c) Thanks [@kevinsproles](https://github.com/kevinsproles)! - `AddToCart` waits for your add and never reports a failure as success. An async `onClick` is awaited: the button shows
+  "Added!" only after it resolves, and a rejection (or throw) shows `errorText` (new prop, default
+  "Couldn't add — try again"), announces the error's message in a `role="alert"`, calls `onError`, and leaves the button
+  enabled to retry. Previously `onClick` was called without awaiting after a fixed simulated delay, so a failed add still
+  said "Added!". The button exposes `data-add-to-cart="idle | adding | added | error"` (type `AddToCartStatus`) for tests.
+  `simulateDelay` now applies only when there is no `onClick` (demos).
+
+## 0.8.3
+
+### Patch Changes
+
+- [#3131](https://github.com/snowcone-app/snowcone-monorepo/pull/3131) [`84f6ac3`](https://github.com/snowcone-app/snowcone-monorepo/commit/84f6ac38e54c57c483ff49c18548cd9ba832d30e) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Realtime `spreadCrops` pieces can carry `part: { index, count }`: a placement cut into strips that sit on different spread artboards is assembled server-side once every strip has arrived.
+
+- Updated dependencies [[`84f6ac3`](https://github.com/snowcone-app/snowcone-monorepo/commit/84f6ac38e54c57c483ff49c18548cd9ba832d30e)]:
+  - @snowcone-app/sdk@0.24.2
+
 ## 0.8.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -342,6 +342,7 @@ __export(src_exports, {
   isWideMonitor: () => isWideMonitor,
   kbdVariants: () => kbdVariants,
   linkVariants: () => linkVariants,
+  linkedPlacementsLabel: () => linkedPlacementsLabel,
   listProducts: () => import_sdk11.listProducts,
   normalizeHex: () => normalizeHex,
   observe: () => observe,
@@ -4920,6 +4921,7 @@ function AddToCart({
   text = "Add to Bag",
   loadingText = "Adding...",
   successText = "Added!",
+  errorText = "Couldn't add \u2014 try again",
   disabled = false,
   className = "",
   quantity = 1,
@@ -4929,8 +4931,10 @@ function AddToCart({
 }) {
   const context = useProduct();
   const shopContext = useShopOptional();
-  const [loading, setLoading] = (0, import_react15.useState)(false);
-  const [success, setSuccess] = (0, import_react15.useState)(false);
+  const [status, setStatus] = (0, import_react15.useState)("idle");
+  const [errorMessage, setErrorMessage] = (0, import_react15.useState)(null);
+  const loading = status === "adding";
+  const success = status === "added";
   (0, import_react15.useEffect)(() => {
     checkProviders(
       "AddToCart",
@@ -4953,7 +4957,8 @@ function AddToCart({
   const handleClick = async () => {
     if (isDisabled || !product) return;
     try {
-      setLoading(true);
+      setStatus("adding");
+      setErrorMessage(null);
       const cartDetail = (0, import_sdk7.createCartDetail)({
         productId: product.id,
         quantity,
@@ -4964,20 +4969,23 @@ function AddToCart({
       if (!cartDetail) {
         throw new Error("Invalid selection - unable to create cart detail");
       }
-      await (0, import_sdk7.simulateCartOperation)(simulateDelay);
-      onClick?.(cartDetail);
-      setSuccess(true);
+      if (onClick) {
+        await onClick(cartDetail);
+      } else {
+        await (0, import_sdk7.simulateCartOperation)(simulateDelay);
+      }
+      setStatus("added");
       setTimeout(() => {
-        setSuccess(false);
+        setStatus((s) => s === "added" ? "idle" : s);
       }, 2e3);
     } catch (error) {
-      onError?.(error);
-      console.error("Add to cart failed:", error);
-    } finally {
-      setLoading(false);
+      const err = error instanceof Error ? error : new Error(String(error));
+      setStatus("error");
+      setErrorMessage(err.message);
+      onError?.(err);
     }
   };
-  const buttonText = loading ? loadingText : success ? successText : text;
+  const buttonText = loading ? loadingText : success ? successText : status === "error" ? errorText : text;
   const defaultStyles = "w-full bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-button font-medium transition-colors";
   const buttonClasses = `
     ${defaultStyles}
@@ -4988,6 +4996,7 @@ function AddToCart({
   const getAriaLabel = () => {
     if (loading) return loadingText;
     if (success) return successText;
+    if (status === "error") return `${errorText} - ${product?.name || "product"}`;
     if (!product) return text;
     return `${text} - ${product.name || "product"}`;
   };
@@ -5001,9 +5010,11 @@ function AddToCart({
         onClick: handleClick,
         "aria-label": getAriaLabel(),
         "aria-busy": loading,
+        "data-add-to-cart": status,
         children: buttonText
       }
-    )
+    ),
+    status === "error" && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { role: "alert", className: "mt-2 text-sm text-destructive", children: errorMessage })
   ] });
 }
 
@@ -5750,6 +5761,11 @@ function PlacementClipShapeSelector() {
 // src/composed/PlacementTabs.tsx
 var import_react21 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
+function linkedPlacementsLabel(count) {
+  return count === 2 ? "Both sides" : `All ${count} areas`;
+}
+var ACTION_CLASS = "transition-colors duration-200 cursor-pointer text-muted-foreground hover:text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground";
+var PILL_CLASS = "inline-flex items-center rounded-full bg-foreground/[0.08] px-3 py-1 font-medium text-foreground";
 function PlacementTabs({
   placements,
   selectedPlacement,
@@ -5757,7 +5773,13 @@ function PlacementTabs({
   isDesktop = false,
   toolbarPlaceholderId = "toolbar-placeholder",
   toolbarSize = 120,
-  className = ""
+  className = "",
+  linked,
+  onSplitAll,
+  onLinkAll,
+  linkedLabel,
+  splitAllLabel = "Customize separately",
+  linkAllLabel = "Use one design for all"
 }) {
   const containerRef = (0, import_react21.useRef)(null);
   const [lineHeight, setLineHeight] = (0, import_react21.useState)(24);
@@ -5774,7 +5796,7 @@ function PlacementTabs({
     if (isDesktop) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex justify-end w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex justify-end w-full ${className}`, "data-placement-tabs": true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "span",
       {
         id: toolbarPlaceholderId,
@@ -5783,16 +5805,68 @@ function PlacementTabs({
       }
     ) });
   }
+  const dataLinked = linked === void 0 ? void 0 : linked ? "true" : "false";
+  const labels = placements.map((p) => p.label);
+  const renderItems = (tabClass) => {
+    if (linked === true) {
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "span",
+          {
+            className: `${tabClass} ${PILL_CLASS}`,
+            "data-placement-pill": true,
+            title: labels.join(" \xB7 "),
+            "aria-label": `One design on ${labels.join(", ")}`,
+            children: linkedLabel ?? linkedPlacementsLabel(placements.length)
+          }
+        ),
+        onSplitAll && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSplitAll,
+            className: `${tabClass} ${ACTION_CLASS}`,
+            "data-action": "split-all",
+            children: splitAllLabel
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPlacementChange(p.label),
+          "data-placement-tab": p.label,
+          "aria-pressed": selectedPlacement === p.label,
+          className: `${tabClass} transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
+          children: p.label
+        },
+        p.label
+      )),
+      linked === false && onLinkAll && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onLinkAll,
+          className: `${tabClass} ${ACTION_CLASS}`,
+          "data-action": "link-all",
+          children: linkAllLabel
+        }
+      )
+    ] });
+  };
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex flex-wrap gap-x-3 text-sm leading-relaxed w-full ${className}`, children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "div",
       {
-        onClick: () => onPlacementChange(p.label),
-        className: `transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-        children: p.label
-      },
-      p.label
-    )) });
+        className: `flex flex-wrap items-center gap-x-3 gap-y-1 text-sm leading-relaxed w-full ${className}`,
+        "data-placement-tabs": true,
+        "data-linked": dataLinked,
+        children: renderItems("")
+      }
+    );
   }
   const linesForToolbar = Math.ceil(toolbarSize / lineHeight);
   const shapeInsetPx = linesForToolbar * lineHeight;
@@ -5801,6 +5875,8 @@ function PlacementTabs({
     {
       ref: containerRef,
       className: `flex overflow-hidden text-sm leading-relaxed w-full ${className}`,
+      "data-placement-tabs": true,
+      "data-linked": dataLinked,
       children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "m-0 w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
@@ -5819,15 +5895,7 @@ function PlacementTabs({
             )
           }
         ),
-        placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          "button",
-          {
-            onClick: () => onPlacementChange(p.label),
-            className: `inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-            children: p.label
-          },
-          p.label
-        ))
+        renderItems("inline mr-3")
       ] })
     }
   );
@@ -16554,6 +16622,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   isWideMonitor,
   kbdVariants,
   linkVariants,
+  linkedPlacementsLabel,
   listProducts,
   normalizeHex,
   observe,