@btst/stack 5.0.0 → 5.2.0

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/product-list-page.internal.mjs

@@ -0,0 +1,232 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useDeferredValue } from 'react';
+import { useStack, usePluginSiteNavigation } from '@btst/stack/context';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { ECOMMERCE_PLUGIN_ID } from '../../constants.mjs';
+import { useProducts } from '../../hooks/use-products.mjs';
+import { ProductImage } from '../product-image.mjs';
+import { currencyScale, Storefront, ErrorMessage, formatMoney } from '../storefront.mjs';
+
+function ProductListPage() {
+  const { plugins } = useStack();
+  const configuredCurrency = plugins?.[ECOMMERCE_PLUGIN_ID]?.config?.currency;
+  const priceScale = currencyScale(
+    typeof configuredCurrency === "string" ? configuredCurrency : "USD"
+  );
+  const [search, setSearch] = useState("");
+  const [category, setCategory] = useState("");
+  const [collection, setCollection] = useState("");
+  const [minPrice, setMinPrice] = useState("");
+  const [maxPrice, setMaxPrice] = useState("");
+  const [inStock, setInStock] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const filters = {
+    search: useDeferredValue(search) || void 0,
+    category: category || void 0,
+    collection: collection || void 0,
+    minPrice: minPrice ? Math.round(Number(minPrice) * priceScale) : void 0,
+    maxPrice: maxPrice ? Math.round(Number(maxPrice) * priceScale) : void 0,
+    inStock: inStock || void 0,
+    limit: 24,
+    offset
+  };
+  const products = useProducts(filters);
+  const { Link, resolve } = usePluginSiteNavigation(ECOMMERCE_PLUGIN_ID);
+  const resetPage = () => setOffset(0);
+  return /* @__PURE__ */ jsxs(Storefront, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-8 flex items-end justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: "Products" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Browse the catalog and choose what works for you." })
+      ] }),
+      products.data ? /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        products.data.total,
+        " ",
+        products.data.total === 1 ? "product" : "products"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        "aria-label": "Filter products",
+        className: "mb-8 grid gap-4 rounded-lg bg-muted/40 p-4 sm:grid-cols-2 lg:grid-cols-6",
+        onSubmit: (event) => event.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+            "Search",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "search",
+                value: search,
+                onChange: (event) => {
+                  setSearch(event.target.value);
+                  resetPage();
+                },
+                className: "mt-1",
+                placeholder: "Product name"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+            "Category",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: "mt-1 h-9 w-full rounded-md border bg-background px-2",
+                value: category,
+                onChange: (event) => {
+                  setCategory(event.target.value);
+                  resetPage();
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "All categories" }),
+                  products.data?.categories.map((value) => /* @__PURE__ */ jsx("option", { children: value }, value))
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+            "Collection",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: "mt-1 h-9 w-full rounded-md border bg-background px-2",
+                value: collection,
+                onChange: (event) => {
+                  setCollection(event.target.value);
+                  resetPage();
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: "All collections" }),
+                  products.data?.collections.map((value) => /* @__PURE__ */ jsx("option", { children: value }, value))
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+            "Minimum price",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "mt-1",
+                type: "number",
+                min: 0,
+                step: 1 / priceScale,
+                value: minPrice,
+                onChange: (event) => {
+                  setMinPrice(event.target.value);
+                  resetPage();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "text-sm", children: [
+            "Maximum price",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "mt-1",
+                type: "number",
+                min: 0,
+                step: 1 / priceScale,
+                value: maxPrice,
+                onChange: (event) => {
+                  setMaxPrice(event.target.value);
+                  resetPage();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 self-end py-2 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: inStock,
+                onChange: (event) => {
+                  setInStock(event.target.checked);
+                  resetPage();
+                }
+              }
+            ),
+            "In stock only"
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ErrorMessage, { error: products.error }),
+    products.isPending ? /* @__PURE__ */ jsx("p", { role: "status", className: "py-12 text-muted-foreground", children: "Loading products\u2026" }) : null,
+    products.data?.items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-16 text-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium", children: "No products match your filters" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Try another category or a wider price range." })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3", children: products.data?.items.map((product) => {
+      const available = product.variants.length ? product.variants.some((variant) => variant.stock > 0) : product.stock > 0;
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: resolve(`/shop/products/${encodeURIComponent(product.slug)}`).href,
+          className: "group block rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "aspect-square overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(ProductImage, { image: product.images[0], alt: product.name }) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "font-medium group-hover:underline", children: product.name }),
+                product.category ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: product.category }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-medium tabular-nums", children: [
+                product.variants.length ? "From " : "",
+                formatMoney(
+                  product.variants.length ? Math.min(
+                    ...product.variants.map(
+                      (variant) => variant.price ?? product.price
+                    )
+                  ) : product.price,
+                  product.currency
+                )
+              ] })
+            ] }),
+            !available ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Out of stock" }) : null
+          ]
+        },
+        product.id
+      );
+    }) }),
+    products.data && products.data.total > 24 ? /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "Product pages",
+        className: "mt-10 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled: offset === 0,
+              onClick: () => setOffset(Math.max(0, offset - 24)),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+            "Page ",
+            Math.floor(offset / 24) + 1
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled: offset + 24 >= products.data.total,
+              onClick: () => setOffset(offset + 24),
+              children: "Next"
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+
+export { ProductListPage };

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/route-page.cjs

@@ -0,0 +1,140 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components = require('@btst/stack/client/components');
+const plugins_ecommerce_permissions = require('../../../../../../../../plugins/ecommerce/permissions.cjs');
+
+const ProductList = React.lazy(
+  () => import('./product-list-page.internal.cjs').then((module) => ({
+    default: module.ProductListPage
+  }))
+);
+const ProductDetail = React.lazy(
+  () => import('./product-detail-page.internal.cjs').then((module) => ({
+    default: module.ProductDetailPage
+  }))
+);
+const Cart = React.lazy(
+  () => import('./cart-page.internal.cjs').then((module) => ({
+    default: module.CartPage
+  }))
+);
+const Checkout = React.lazy(
+  () => import('./checkout-page.internal.cjs').then((module) => ({
+    default: module.CheckoutPage
+  }))
+);
+const Confirmation = React.lazy(
+  () => import('./order-confirmation-page.internal.cjs').then((module) => ({
+    default: module.OrderConfirmationPage
+  }))
+);
+const Orders = React.lazy(
+  () => import('./orders-admin-page.internal.cjs').then((module) => ({
+    default: module.OrdersAdminPage
+  }))
+);
+const OrderDetail = React.lazy(
+  () => import('./order-detail-page.internal.cjs').then((module) => ({
+    default: module.OrderDetailPage
+  }))
+);
+const MyOrders = React.lazy(
+  () => import('./orders-admin-page.internal.cjs').then((module) => ({
+    default: module.MyOrdersPage
+  }))
+);
+function Loading() {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-8 text-sm text-muted-foreground", role: "status", children: "Loading shop\u2026" });
+}
+function RouteError({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl p-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: "Unable to load this page" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-destructive", role: "alert", children: error instanceof Error ? error.message : "Please try again." })
+  ] });
+}
+function NotFound() {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-8", children: "This product or order could not be found." });
+}
+const common = {
+  ErrorComponent: RouteError,
+  LoadingComponent: Loading,
+  NotFoundComponent: NotFound,
+  onError: (error) => console.error("[btst/ecommerce] Page error", error)
+};
+function ProductListPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(components.ComposedRoute, { ...common, path: "/shop", PageComponent: ProductList });
+}
+function ProductDetailPageComponent({ slug }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      ...common,
+      path: `/shop/products/${slug}`,
+      PageComponent: ProductDetail,
+      props: { slug }
+    }
+  );
+}
+function CartPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(components.ComposedRoute, { ...common, path: "/shop/cart", PageComponent: Cart });
+}
+function CheckoutPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(components.ComposedRoute, { ...common, path: "/shop/checkout", PageComponent: Checkout });
+}
+function OrderConfirmationPageComponent({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      ...common,
+      path: `/shop/orders/${id}/confirmation`,
+      PageComponent: Confirmation,
+      props: { id }
+    }
+  );
+}
+function OrdersAdminPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      ...common,
+      path: "/shop/admin/orders",
+      permission: plugins_ecommerce_permissions.ecommercePermissions.order.read({}),
+      PageComponent: Orders
+    }
+  );
+}
+function OrderDetailPageComponent({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      ...common,
+      path: `/shop/admin/orders/${id}`,
+      permission: plugins_ecommerce_permissions.ecommercePermissions.order.read({ id }),
+      PageComponent: OrderDetail,
+      props: { id }
+    }
+  );
+}
+function MyOrdersPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      ...common,
+      path: "/shop/orders",
+      permission: plugins_ecommerce_permissions.ecommercePermissions.order.own({ customerId: "self" }),
+      PageComponent: MyOrders
+    }
+  );
+}
+
+exports.CartPageComponent = CartPageComponent;
+exports.CheckoutPageComponent = CheckoutPageComponent;
+exports.MyOrdersPageComponent = MyOrdersPageComponent;
+exports.OrderConfirmationPageComponent = OrderConfirmationPageComponent;
+exports.OrderDetailPageComponent = OrderDetailPageComponent;
+exports.OrdersAdminPageComponent = OrdersAdminPageComponent;
+exports.ProductDetailPageComponent = ProductDetailPageComponent;
+exports.ProductListPageComponent = ProductListPageComponent;

package/dist/packages/stack/src/plugins/ecommerce/client/components/pages/route-page.mjs

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { ecommercePermissions } from '../../../../../../../../plugins/ecommerce/permissions.mjs';
+
+const ProductList = lazy(
+  () => import('./product-list-page.internal.mjs').then((module) => ({
+    default: module.ProductListPage
+  }))
+);
+const ProductDetail = lazy(
+  () => import('./product-detail-page.internal.mjs').then((module) => ({
+    default: module.ProductDetailPage
+  }))
+);
+const Cart = lazy(
+  () => import('./cart-page.internal.mjs').then((module) => ({
+    default: module.CartPage
+  }))
+);
+const Checkout = lazy(
+  () => import('./checkout-page.internal.mjs').then((module) => ({
+    default: module.CheckoutPage
+  }))
+);
+const Confirmation = lazy(
+  () => import('./order-confirmation-page.internal.mjs').then((module) => ({
+    default: module.OrderConfirmationPage
+  }))
+);
+const Orders = lazy(
+  () => import('./orders-admin-page.internal.mjs').then((module) => ({
+    default: module.OrdersAdminPage
+  }))
+);
+const OrderDetail = lazy(
+  () => import('./order-detail-page.internal.mjs').then((module) => ({
+    default: module.OrderDetailPage
+  }))
+);
+const MyOrders = lazy(
+  () => import('./orders-admin-page.internal.mjs').then((module) => ({
+    default: module.MyOrdersPage
+  }))
+);
+function Loading() {
+  return /* @__PURE__ */ jsx("p", { className: "p-8 text-sm text-muted-foreground", role: "status", children: "Loading shop\u2026" });
+}
+function RouteError({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl p-8", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: "Unable to load this page" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-destructive", role: "alert", children: error instanceof Error ? error.message : "Please try again." })
+  ] });
+}
+function NotFound() {
+  return /* @__PURE__ */ jsx("p", { className: "p-8", children: "This product or order could not be found." });
+}
+const common = {
+  ErrorComponent: RouteError,
+  LoadingComponent: Loading,
+  NotFoundComponent: NotFound,
+  onError: (error) => console.error("[btst/ecommerce] Page error", error)
+};
+function ProductListPageComponent() {
+  return /* @__PURE__ */ jsx(ComposedRoute, { ...common, path: "/shop", PageComponent: ProductList });
+}
+function ProductDetailPageComponent({ slug }) {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      ...common,
+      path: `/shop/products/${slug}`,
+      PageComponent: ProductDetail,
+      props: { slug }
+    }
+  );
+}
+function CartPageComponent() {
+  return /* @__PURE__ */ jsx(ComposedRoute, { ...common, path: "/shop/cart", PageComponent: Cart });
+}
+function CheckoutPageComponent() {
+  return /* @__PURE__ */ jsx(ComposedRoute, { ...common, path: "/shop/checkout", PageComponent: Checkout });
+}
+function OrderConfirmationPageComponent({ id }) {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      ...common,
+      path: `/shop/orders/${id}/confirmation`,
+      PageComponent: Confirmation,
+      props: { id }
+    }
+  );
+}
+function OrdersAdminPageComponent() {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      ...common,
+      path: "/shop/admin/orders",
+      permission: ecommercePermissions.order.read({}),
+      PageComponent: Orders
+    }
+  );
+}
+function OrderDetailPageComponent({ id }) {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      ...common,
+      path: `/shop/admin/orders/${id}`,
+      permission: ecommercePermissions.order.read({ id }),
+      PageComponent: OrderDetail,
+      props: { id }
+    }
+  );
+}
+function MyOrdersPageComponent() {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      ...common,
+      path: "/shop/orders",
+      permission: ecommercePermissions.order.own({ customerId: "self" }),
+      PageComponent: MyOrders
+    }
+  );
+}
+
+export { CartPageComponent, CheckoutPageComponent, MyOrdersPageComponent, OrderConfirmationPageComponent, OrderDetailPageComponent, OrdersAdminPageComponent, ProductDetailPageComponent, ProductListPageComponent };

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

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const constants = require('../constants.cjs');
+const useProducts = require('../hooks/use-products.cjs');
+
+function ProductImage({
+  image,
+  alt,
+  className = "",
+  priority = false
+}) {
+  const { resolveImage } = context.usePluginOverrides(constants.ECOMMERCE_PLUGIN_ID, {});
+  const endpoint = useProducts.useEcommerceEndpoint();
+  const resolvedImage = image ? resolveImage?.(image) : void 0;
+  let source = resolvedImage ?? image;
+  if (!resolvedImage && source && /^\/(?!\/)/.test(source) && endpoint.baseURL) {
+    try {
+      source = new URL(source, endpoint.baseURL).href;
+    } catch {
+      source = void 0;
+    }
+  }
+  const safeSource = source && (/^https?:\/\//i.test(source) || /^\/(?!\/)/.test(source)) ? source : void 0;
+  return safeSource ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: safeSource,
+      alt,
+      loading: priority ? "eager" : "lazy",
+      className: `h-full w-full object-cover ${className}`
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `flex h-full w-full items-center justify-center bg-muted text-sm text-muted-foreground ${className}`,
+      role: "img",
+      "aria-label": `${alt}: no image`,
+      children: "No image"
+    }
+  );
+}
+
+exports.ProductImage = ProductImage;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ECOMMERCE_PLUGIN_ID } from '../constants.mjs';
+import { useEcommerceEndpoint } from '../hooks/use-products.mjs';
+
+function ProductImage({
+  image,
+  alt,
+  className = "",
+  priority = false
+}) {
+  const { resolveImage } = usePluginOverrides(ECOMMERCE_PLUGIN_ID, {});
+  const endpoint = useEcommerceEndpoint();
+  const resolvedImage = image ? resolveImage?.(image) : void 0;
+  let source = resolvedImage ?? image;
+  if (!resolvedImage && source && /^\/(?!\/)/.test(source) && endpoint.baseURL) {
+    try {
+      source = new URL(source, endpoint.baseURL).href;
+    } catch {
+      source = void 0;
+    }
+  }
+  const safeSource = source && (/^https?:\/\//i.test(source) || /^\/(?!\/)/.test(source)) ? source : void 0;
+  return safeSource ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: safeSource,
+      alt,
+      loading: priority ? "eager" : "lazy",
+      className: `h-full w-full object-cover ${className}`
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex h-full w-full items-center justify-center bg-muted text-sm text-muted-foreground ${className}`,
+      role: "img",
+      "aria-label": `${alt}: no image`,
+      children: "No image"
+    }
+  );
+}
+
+export { ProductImage };