@btst/stack 5.0.0 → 5.2.0

package/dist/packages/stack/src/plugins/ecommerce/client/components/product-images-field.cjs

@@ -0,0 +1,166 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const button = require('../../../../../../ui/src/components/button.cjs');
+const input = require('../../../../../../ui/src/components/input.cjs');
+const form = require('../../../../../../ui/src/components/form.cjs');
+
+const MediaPicker = React.lazy(
+  () => import('@btst/stack/plugins/media/client/components').then((module) => ({
+    default: module.MediaPicker
+  }))
+);
+function ProductImagesField({
+  field,
+  label,
+  isRequired
+}) {
+  const { plugins } = context.useStack();
+  const [url, setUrl] = React.useState("");
+  const [error, setError] = React.useState("");
+  const images = Array.isArray(field.value) ? field.value : [];
+  const disabled = Boolean(field.disabled);
+  const add = (values) => {
+    field.onChange([.../* @__PURE__ */ new Set([...images, ...values])].slice(0, 20));
+    field.onBlur();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
+      label,
+      isRequired ? " *" : ""
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-2", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex flex-wrap items-center gap-2 rounded-md border p-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 break-all", children: [
+              index + 1,
+              ". ",
+              image
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: disabled || index === 0,
+                "aria-label": `Move image ${index + 1} earlier`,
+                onClick: () => {
+                  const next = [...images];
+                  [next[index - 1], next[index]] = [
+                    next[index],
+                    next[index - 1]
+                  ];
+                  field.onChange(next);
+                },
+                children: "Move up"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: disabled || index === images.length - 1,
+                "aria-label": `Move image ${index + 1} later`,
+                onClick: () => {
+                  const next = [...images];
+                  [next[index], next[index + 1]] = [
+                    next[index + 1],
+                    next[index]
+                  ];
+                  field.onChange(next);
+                },
+                children: "Move down"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled,
+                "aria-label": `Remove image ${index + 1}`,
+                onClick: () => field.onChange(
+                  images.filter((_, position) => position !== index)
+                ),
+                children: "Remove"
+              }
+            )
+          ]
+        },
+        `${image}:${index}`
+      )) }),
+      plugins?.media ? /* @__PURE__ */ jsxRuntime.jsx(
+        React.Suspense,
+        {
+          fallback: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Loading media picker\u2026" }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            MediaPicker,
+            {
+              multiple: true,
+              accept: ["image/*"],
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  disabled: disabled || images.length >= 20,
+                  children: "Browse product images"
+                }
+              ),
+              onSelect: (assets) => add(assets.map((asset) => asset.id))
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            "aria-label": "Product image URL",
+            type: "url",
+            placeholder: "https://example.com/product.jpg",
+            value: url,
+            disabled: disabled || images.length >= 20,
+            onChange: (event) => setUrl(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: disabled || !url.trim() || images.length >= 20,
+            onClick: () => {
+              try {
+                const parsed = new URL(url);
+                if (!["http:", "https:"].includes(parsed.protocol))
+                  throw new Error();
+                add([parsed.href]);
+                setUrl("");
+                setError("");
+              } catch {
+                setError("Enter an http or https image URL.");
+              }
+            },
+            children: "Add URL"
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "The first image is the product cover. Add up to 20 images." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+exports.ProductImagesField = ProductImagesField;

package/dist/packages/stack/src/plugins/ecommerce/client/components/product-images-field.mjs

@@ -0,0 +1,164 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, Suspense, lazy } from 'react';
+import { useStack } from '@btst/stack/context';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../ui/src/components/input.mjs';
+import { FormItem, FormLabel, FormMessage } from '../../../../../../ui/src/components/form.mjs';
+
+const MediaPicker = lazy(
+  () => import('@btst/stack/plugins/media/client/components').then((module) => ({
+    default: module.MediaPicker
+  }))
+);
+function ProductImagesField({
+  field,
+  label,
+  isRequired
+}) {
+  const { plugins } = useStack();
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState("");
+  const images = Array.isArray(field.value) ? field.value : [];
+  const disabled = Boolean(field.disabled);
+  const add = (values) => {
+    field.onChange([.../* @__PURE__ */ new Set([...images, ...values])].slice(0, 20));
+    field.onBlur();
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsxs(FormLabel, { children: [
+      label,
+      isRequired ? " *" : ""
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: images.map((image, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex flex-wrap items-center gap-2 rounded-md border p-2 text-sm",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 break-all", children: [
+              index + 1,
+              ". ",
+              image
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: disabled || index === 0,
+                "aria-label": `Move image ${index + 1} earlier`,
+                onClick: () => {
+                  const next = [...images];
+                  [next[index - 1], next[index]] = [
+                    next[index],
+                    next[index - 1]
+                  ];
+                  field.onChange(next);
+                },
+                children: "Move up"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                disabled: disabled || index === images.length - 1,
+                "aria-label": `Move image ${index + 1} later`,
+                onClick: () => {
+                  const next = [...images];
+                  [next[index], next[index + 1]] = [
+                    next[index + 1],
+                    next[index]
+                  ];
+                  field.onChange(next);
+                },
+                children: "Move down"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled,
+                "aria-label": `Remove image ${index + 1}`,
+                onClick: () => field.onChange(
+                  images.filter((_, position) => position !== index)
+                ),
+                children: "Remove"
+              }
+            )
+          ]
+        },
+        `${image}:${index}`
+      )) }),
+      plugins?.media ? /* @__PURE__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading media picker\u2026" }),
+          children: /* @__PURE__ */ jsx(
+            MediaPicker,
+            {
+              multiple: true,
+              accept: ["image/*"],
+              trigger: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  disabled: disabled || images.length >= 20,
+                  children: "Browse product images"
+                }
+              ),
+              onSelect: (assets) => add(assets.map((asset) => asset.id))
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": "Product image URL",
+            type: "url",
+            placeholder: "https://example.com/product.jpg",
+            value: url,
+            disabled: disabled || images.length >= 20,
+            onChange: (event) => setUrl(event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: disabled || !url.trim() || images.length >= 20,
+            onClick: () => {
+              try {
+                const parsed = new URL(url);
+                if (!["http:", "https:"].includes(parsed.protocol))
+                  throw new Error();
+                add([parsed.href]);
+                setUrl("");
+                setError("");
+              } catch {
+                setError("Enter an http or https image URL.");
+              }
+            },
+            children: "Add URL"
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }) : null,
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "The first image is the product cover. Add up to 20 images." })
+    ] }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { ProductImagesField };

package/dist/packages/stack/src/plugins/ecommerce/client/components/storefront.cjs

@@ -0,0 +1,86 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const constants = require('../constants.cjs');
+const useCart = require('../hooks/use-cart.cjs');
+const cartDrawer = require('./cart-drawer.cjs');
+
+function currencyScale(currency) {
+  return 10 ** (new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency
+  }).resolvedOptions().maximumFractionDigits ?? 2);
+}
+function formatMoney(amount, currency) {
+  const formatter = new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency
+  });
+  return formatter.format(amount / currencyScale(currency));
+}
+function Storefront({ children }) {
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  const { identity } = context.useIdentity();
+  const cart = useCart.useCart();
+  return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "mx-auto w-full max-w-6xl px-4 py-6 text-foreground sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        "aria-label": "Shop navigation",
+        className: "mb-10 flex flex-wrap items-center gap-5 border-b pb-5 text-sm",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Link,
+            {
+              href: resolve("/shop").href,
+              className: "mr-auto text-lg font-semibold tracking-tight",
+              children: "Shop"
+            }
+          ),
+          identity ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: resolve("/shop/orders").href, className: "hover:underline", children: "My orders" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: resolve("/shop/cart").href, className: "hover:underline", children: [
+            "Review cart (",
+            cart.count,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(cartDrawer.CartDrawer, {})
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function ErrorMessage({ error }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      role: "alert",
+      className: "rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
+      children: error instanceof Error ? error.message : "The request failed. Please try again."
+    }
+  );
+}
+function EmptyCart() {
+  const { Link, resolve } = context.usePluginSiteNavigation(constants.ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-16 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold", children: "Your cart is empty" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-muted-foreground", children: "Choose a product to start your order." }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        className: "mt-6 inline-block underline underline-offset-4",
+        href: resolve("/shop").href,
+        children: "Browse products"
+      }
+    )
+  ] });
+}
+
+exports.EmptyCart = EmptyCart;
+exports.ErrorMessage = ErrorMessage;
+exports.Storefront = Storefront;
+exports.currencyScale = currencyScale;
+exports.formatMoney = formatMoney;

package/dist/packages/stack/src/plugins/ecommerce/client/components/storefront.mjs

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePluginSiteNavigation, useIdentity } from '@btst/stack/context';
+import { ECOMMERCE_PLUGIN_ID } from '../constants.mjs';
+import { useCart } from '../hooks/use-cart.mjs';
+import { CartDrawer } from './cart-drawer.mjs';
+
+function currencyScale(currency) {
+  return 10 ** (new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency
+  }).resolvedOptions().maximumFractionDigits ?? 2);
+}
+function formatMoney(amount, currency) {
+  const formatter = new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency
+  });
+  return formatter.format(amount / currencyScale(currency));
+}
+function Storefront({ children }) {
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  const { identity } = useIdentity();
+  const cart = useCart();
+  return /* @__PURE__ */ jsxs("main", { className: "mx-auto w-full max-w-6xl px-4 py-6 text-foreground sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "Shop navigation",
+        className: "mb-10 flex flex-wrap items-center gap-5 border-b pb-5 text-sm",
+        children: [
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: resolve("/shop").href,
+              className: "mr-auto text-lg font-semibold tracking-tight",
+              children: "Shop"
+            }
+          ),
+          identity ? /* @__PURE__ */ jsx(Link, { href: resolve("/shop/orders").href, className: "hover:underline", children: "My orders" }) : null,
+          /* @__PURE__ */ jsxs(Link, { href: resolve("/shop/cart").href, className: "hover:underline", children: [
+            "Review cart (",
+            cart.count,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx(CartDrawer, {})
+        ]
+      }
+    ),
+    children
+  ] });
+}
+function ErrorMessage({ error }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      role: "alert",
+      className: "rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
+      children: error instanceof Error ? error.message : "The request failed. Please try again."
+    }
+  );
+}
+function EmptyCart() {
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  return /* @__PURE__ */ jsxs("section", { className: "py-16 text-center", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Your cart is empty" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-muted-foreground", children: "Choose a product to start your order." }),
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: "mt-6 inline-block underline underline-offset-4",
+        href: resolve("/shop").href,
+        children: "Browse products"
+      }
+    )
+  ] });
+}
+
+export { EmptyCart, ErrorMessage, Storefront, currencyScale, formatMoney };

package/dist/packages/stack/src/plugins/ecommerce/client/constants.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const ECOMMERCE_PLUGIN_ID = "ecommerce";
+
+exports.ECOMMERCE_PLUGIN_ID = ECOMMERCE_PLUGIN_ID;

package/dist/packages/stack/src/plugins/ecommerce/client/constants.mjs

@@ -0,0 +1,3 @@
+const ECOMMERCE_PLUGIN_ID = "ecommerce";
+
+export { ECOMMERCE_PLUGIN_ID };

package/dist/packages/stack/src/plugins/ecommerce/client/hooks/use-cart.cjs

@@ -0,0 +1,156 @@
+"use client";
+'use strict';
+
+const React = require('react');
+const context = require('@btst/stack/context');
+const z = require('zod');
+const constants = require('../constants.cjs');
+
+const CartItemSchema = z.z.object({
+  productId: z.z.string().min(1),
+  variantId: z.z.string().optional(),
+  name: z.z.string(),
+  variantName: z.z.string().optional(),
+  price: z.z.number().int().nonnegative(),
+  currency: z.z.string().length(3),
+  image: z.z.string().optional(),
+  quantity: z.z.number().int().min(1).max(99)
+});
+const CartSchema = z.z.object({
+  version: z.z.literal(1),
+  items: z.z.array(CartItemSchema).max(50)
+});
+const EMPTY_CART = [];
+const stores = /* @__PURE__ */ new Map();
+function getStore(key) {
+  let store = stores.get(key);
+  if (!store) {
+    store = {
+      items: EMPTY_CART,
+      listeners: /* @__PURE__ */ new Set(),
+      loaded: false,
+      storageAvailable: true
+    };
+    stores.set(key, store);
+  }
+  return store;
+}
+function readCart(value) {
+  if (!value) return EMPTY_CART;
+  try {
+    const result = CartSchema.safeParse(JSON.parse(value));
+    return result.success ? result.data.items : EMPTY_CART;
+  } catch {
+    return EMPTY_CART;
+  }
+}
+function publish(key, items) {
+  const store = getStore(key);
+  store.items = items;
+  try {
+    localStorage.setItem(key, JSON.stringify({ version: 1, items }));
+  } catch {
+    store.storageAvailable = false;
+  }
+  for (const listener of store.listeners) listener();
+}
+function useCart() {
+  const { api, plugins, site, basePath } = context.useStack();
+  const runtime = plugins?.[constants.ECOMMERCE_PLUGIN_ID];
+  const key = `btst:ecommerce:cart:v1:${JSON.stringify([
+    runtime?.api.baseURL ?? api?.baseURL ?? "",
+    runtime?.api.basePath ?? api?.basePath ?? "",
+    runtime?.site.baseURL ?? site?.baseURL ?? "",
+    runtime?.site.basePath ?? basePath
+  ])}`;
+  const [hydratedKey, setHydratedKey] = React.useState(null);
+  const items = React.useSyncExternalStore(
+    (listener) => {
+      const store = getStore(key);
+      store.listeners.add(listener);
+      return () => store.listeners.delete(listener);
+    },
+    () => getStore(key).items,
+    () => EMPTY_CART
+  );
+  React.useEffect(() => {
+    const store = getStore(key);
+    if (!store.loaded) {
+      store.loaded = true;
+      try {
+        store.items = readCart(localStorage.getItem(key));
+      } catch {
+        store.storageAvailable = false;
+      }
+      for (const listener of store.listeners) listener();
+    }
+    setHydratedKey(key);
+    const onStorage = (event) => {
+      if (event.key !== key && event.key !== null) return;
+      store.items = readCart(event.newValue);
+      for (const listener of store.listeners) listener();
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [key]);
+  return {
+    items,
+    isHydrated: hydratedKey === key,
+    count: items.reduce((sum, item) => sum + item.quantity, 0),
+    subtotal: items.reduce((sum, item) => sum + item.price * item.quantity, 0),
+    storageAvailable: typeof window === "undefined" || getStore(key).storageAvailable,
+    storeKey: key,
+    addItem(input) {
+      const item = CartItemSchema.parse({
+        ...input,
+        quantity: input.quantity ?? 1
+      });
+      const current = getStore(key).items;
+      if (current.length && current[0]?.currency !== item.currency) {
+        throw new Error(
+          "Choose products in the same currency before checking out."
+        );
+      }
+      const existing = current.find(
+        (entry) => entry.productId === item.productId && entry.variantId === item.variantId
+      );
+      if (existing) {
+        publish(
+          key,
+          current.map(
+            (entry) => entry === existing ? {
+              ...item,
+              quantity: Math.min(99, entry.quantity + item.quantity)
+            } : entry
+          )
+        );
+      } else {
+        if (current.length >= 50)
+          throw new Error("Your cart can contain up to 50 different items.");
+        publish(key, [...current, item]);
+      }
+    },
+    removeItem(productId, variantId) {
+      publish(
+        key,
+        getStore(key).items.filter(
+          (item) => item.productId !== productId || item.variantId !== variantId
+        )
+      );
+    },
+    updateQuantity(productId, variantId, quantity) {
+      if (!Number.isInteger(quantity) || quantity < 1 || quantity > 99) return;
+      publish(
+        key,
+        getStore(key).items.map(
+          (item) => item.productId === productId && item.variantId === variantId ? { ...item, quantity } : item
+        )
+      );
+    },
+    clear() {
+      publish(key, EMPTY_CART);
+    }
+  };
+}
+
+exports.useCart = useCart;