@zappie/theme-base 0.0.0-stage → 0.1.1

package/dist/item.js

@@ -0,0 +1,153 @@
+"use client";
+import { ItemFrame, ItemEscapeContext } from './chunk-VIAJ27YC.js';
+import { ItemImage, Description } from './chunk-USSLDBDY.js';
+import { ItemConfigurator } from './chunk-2MV6KU3R.js';
+import './chunk-QWST2TA2.js';
+import './chunk-JFEI2OUZ.js';
+import { Overlay } from '@zappie/foundations';
+import { useState, useContext, useEffect, Fragment } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ItemDetail(props) {
+  return /* @__PURE__ */ jsx(
+    ItemFrame,
+    {
+      id: props.item.id,
+      name: props.item.name,
+      hasImages: props.item.images.length > 0,
+      navigation: props.navigation,
+      themeClass: props.themeClass,
+      children: /* @__PURE__ */ jsx(ItemContent, { ...props }, props.item.id)
+    }
+  );
+}
+function ItemContent({
+  item,
+  menuId,
+  scope,
+  href,
+  navigation
+}) {
+  const [image, setImage] = useState(0);
+  const [lightbox, setLightbox] = useState(false);
+  const [shareMessage, setShareMessage] = useState("");
+  const escape = useContext(ItemEscapeContext);
+  useEffect(() => {
+    if (!escape) {
+      return;
+    }
+    escape.current = lightbox ? () => setLightbox(false) : void 0;
+    return () => {
+      escape.current = void 0;
+    };
+  }, [escape, lightbox]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `z-base-item-layout ${lightbox ? "z-base-item-lightbox" : ""}`,
+      children: [
+        item.images.length > 0 && /* @__PURE__ */ jsxs("section", { className: "z-base-item-media", "aria-label": "Product images", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "z-base-item-photo",
+              "aria-label": lightbox ? "Close enlarged image" : "Enlarge product image",
+              onClick: () => setLightbox(!lightbox),
+              children: /* @__PURE__ */ jsx(
+                ItemImage,
+                {
+                  src: item.images[image] ?? item.images[0] ?? "",
+                  sizes: "(min-width: 768px) 450px, 100vw",
+                  priority: true
+                },
+                image
+              )
+            }
+          ),
+          item.images.length > 1 && /* @__PURE__ */ jsxs("nav", { "aria-label": "Image gallery", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setImage(
+                  (image + item.images.length - 1) % item.images.length
+                ),
+                "aria-label": "Previous image",
+                children: "\u2190"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              image + 1,
+              " / ",
+              item.images.length
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setImage((image + 1) % item.images.length),
+                "aria-label": "Next image",
+                children: "\u2192"
+              }
+            )
+          ] }),
+          lightbox && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "z-base-button-secondary",
+              onClick: () => setLightbox(false),
+              children: "Back to product"
+            }
+          )
+        ] }),
+        !lightbox && /* @__PURE__ */ jsxs("div", { className: "z-base-item-details", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "z-base-button-secondary",
+              "aria-label": "Share product",
+              onClick: () => {
+                const url = new URL(href, window.location.origin).href;
+                void Promise.resolve().then(
+                  () => navigator.share ? navigator.share({ title: item.name, url }) : navigator.clipboard.writeText(url).then(() => setShareMessage("Link copied"))
+                ).catch((failure) => {
+                  if (failure?.name !== "AbortError") {
+                    setShareMessage(
+                      "Could not share the link. Please try again."
+                    );
+                  }
+                });
+              },
+              children: "Share"
+            }
+          ),
+          /* @__PURE__ */ jsx(Overlay.Title, { children: item.name }),
+          !item.isAvailable && /* @__PURE__ */ jsx("p", { role: "status", children: item.stockLabel ?? "Unavailable" }),
+          shareMessage && /* @__PURE__ */ jsx("p", { role: "status", children: shareMessage }),
+          /* @__PURE__ */ jsx(
+            ItemConfigurator,
+            {
+              showPrice: true,
+              introduction: /* @__PURE__ */ jsxs(Fragment, { children: [
+                item.promo && /* @__PURE__ */ jsx("p", { children: item.promo.name }),
+                item.description && /* @__PURE__ */ jsx(Description, { value: item.description })
+              ] }),
+              item,
+              menuId,
+              scope,
+              onComplete: navigation.close
+            },
+            `${scope}:${item.id}:${menuId}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ItemContent, ItemDetail };
+//# sourceMappingURL=item.js.map
+//# sourceMappingURL=item.js.map

package/dist/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/item/item-detail.tsx"],"names":[],"mappings":"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","file":"item.js","sourcesContent":["\"use client\";\nimport { Overlay } from \"@zappie/foundations\";\nimport type { Item } from \"@zappie/sdk\";\nimport { Fragment, useContext, useEffect, useState } from \"react\";\nimport { Description, ItemImage } from \"../catalogue/presentation\";\nimport { ItemConfigurator } from \"./configurator\";\nimport { ItemEscapeContext, ItemFrame } from \"./frame\";\n\nexport type ItemDetailProps = {\n  item: Item;\n  menuId: string;\n  scope: string;\n  href: string;\n  themeClass?: string;\n  navigation: { isOpen: boolean; open(): void; close(): void };\n};\n/** Framework-independent SDK item screen, reusable through themeClass. */\nexport function ItemDetail(props: ItemDetailProps) {\n  return (\n    <ItemFrame\n      id={props.item.id}\n      name={props.item.name}\n      hasImages={props.item.images.length > 0}\n      navigation={props.navigation}\n      themeClass={props.themeClass}\n    >\n      <ItemContent key={props.item.id} {...props} />\n    </ItemFrame>\n  );\n}\nexport function ItemContent({\n  item,\n  menuId,\n  scope,\n  href,\n  navigation,\n}: ItemDetailProps) {\n  const [image, setImage] = useState(0);\n  const [lightbox, setLightbox] = useState(false);\n  const [shareMessage, setShareMessage] = useState(\"\");\n  const escape = useContext(ItemEscapeContext);\n  useEffect(() => {\n    if (!escape) {\n      return;\n    }\n    escape.current = lightbox ? () => setLightbox(false) : undefined;\n    return () => {\n      escape.current = undefined;\n    };\n  }, [escape, lightbox]);\n  return (\n    <div\n      className={`z-base-item-layout ${lightbox ? \"z-base-item-lightbox\" : \"\"}`}\n    >\n      {item.images.length > 0 && (\n        <section className=\"z-base-item-media\" aria-label=\"Product images\">\n          <button\n            type=\"button\"\n            className=\"z-base-item-photo\"\n            aria-label={\n              lightbox ? \"Close enlarged image\" : \"Enlarge product image\"\n            }\n            onClick={() => setLightbox(!lightbox)}\n          >\n            <ItemImage\n              key={image}\n              src={item.images[image] ?? item.images[0] ?? \"\"}\n              sizes=\"(min-width: 768px) 450px, 100vw\"\n              priority\n            />\n          </button>\n          {item.images.length > 1 && (\n            <nav aria-label=\"Image gallery\">\n              <button\n                type=\"button\"\n                onClick={() =>\n                  setImage(\n                    (image + item.images.length - 1) % item.images.length,\n                  )\n                }\n                aria-label=\"Previous image\"\n              >\n                ←\n              </button>\n              <span>\n                {image + 1} / {item.images.length}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setImage((image + 1) % item.images.length)}\n                aria-label=\"Next image\"\n              >\n                →\n              </button>\n            </nav>\n          )}\n          {lightbox && (\n            <button\n              type=\"button\"\n              className=\"z-base-button-secondary\"\n              onClick={() => setLightbox(false)}\n            >\n              Back to product\n            </button>\n          )}\n        </section>\n      )}\n      {!lightbox && (\n        <div className=\"z-base-item-details\">\n          <button\n            type=\"button\"\n            className=\"z-base-button-secondary\"\n            aria-label=\"Share product\"\n            onClick={() => {\n              const url = new URL(href, window.location.origin).href;\n              void Promise.resolve()\n                .then(() =>\n                  navigator.share\n                    ? navigator.share({ title: item.name, url })\n                    : navigator.clipboard\n                        .writeText(url)\n                        .then(() => setShareMessage(\"Link copied\")),\n                )\n                .catch((failure) => {\n                  if (failure?.name !== \"AbortError\") {\n                    setShareMessage(\n                      \"Could not share the link. Please try again.\",\n                    );\n                  }\n                });\n            }}\n          >\n            Share\n          </button>\n          <Overlay.Title>{item.name}</Overlay.Title>\n          {!item.isAvailable && (\n            <p role=\"status\">{item.stockLabel ?? \"Unavailable\"}</p>\n          )}\n          {shareMessage && <p role=\"status\">{shareMessage}</p>}\n          <ItemConfigurator\n            showPrice\n            introduction={\n              <Fragment>\n                {item.promo && <p>{item.promo.name}</p>}\n                {item.description && <Description value={item.description} />}\n              </Fragment>\n            }\n            key={`${scope}:${item.id}:${menuId}`}\n            item={item}\n            menuId={menuId}\n            scope={scope}\n            onComplete={navigation.close}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/navigation.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Item } from '@zappie/sdk';
+import { StorefrontUrlOptions } from '@zappie/sdk/url';
+import { ReactNode } from 'react';
+
+declare function createUrlNavigation(options?: UrlNavigationOptions): CatalogueNavigation;
+
+/** URL-owned selection, shared by template routers and reusable base screens. */
+type CatalogueLocation = {
+    pathname: string;
+    menuId?: string;
+    categoryId?: string;
+    menuLayout?: "GRID" | "LIST" | "CARD";
+    item?: {
+        id: string;
+        path: string;
+        presentation: "path" | "query";
+    };
+};
+/** Stable identities, not host selectors or retained DOM nodes. */
+type CatalogueFocusTarget = {
+    itemId?: string;
+    fallback: "catalogue";
+};
+type CatalogueNavigationTarget = {
+    type: "item";
+    itemId: string;
+    menuId?: string;
+    categoryId?: string;
+};
+type CatalogueNavigation = {
+    /** Fresh URL snapshot on every read; providers re-render on history changes. */
+    readonly location: CatalogueLocation;
+    hrefFor(target: CatalogueNavigationTarget): string;
+    selectMenu(menuId: string): void;
+    selectCategory(categoryId: string): void;
+    setLayout(layout: NonNullable<CatalogueLocation["menuLayout"]>): void;
+    openItem(input: {
+        itemId: string;
+        /** Already normalized catalogue/search item; opening it must not fetch it again. */
+        item?: Item;
+        menuId: string;
+        categoryId?: string;
+    }): Promise<void>;
+    /** Resolves after history changes and the item releases its modal/focus lock. */
+    closeItem(): Promise<void>;
+    /** Close the active item/base overlay before opening another surface. */
+    openCart(): Promise<void>;
+    openBranchFinder(): Promise<void>;
+    openBranchDetails?(): Promise<void>;
+    switchFulfilment(mode: "delivery" | "pickup"): Promise<boolean>;
+    /** Called after close settles; use a registered trigger, or the catalogue heading. */
+    restoreFocus(target: CatalogueFocusTarget): void;
+};
+type UrlNavigationOptions = StorefrontUrlOptions & {
+    window?: Window & typeof globalThis;
+};
+declare function CatalogueNavigationProvider({ navigation, children, }: {
+    navigation: CatalogueNavigation;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useCatalogueNavigation(): CatalogueNavigation;
+
+export { type CatalogueFocusTarget, type CatalogueLocation, type CatalogueNavigation, CatalogueNavigationProvider, type CatalogueNavigationTarget, type UrlNavigationOptions, createUrlNavigation, useCatalogueNavigation };

package/dist/navigation.js

@@ -0,0 +1,4 @@
+"use client";
+export { CatalogueNavigationProvider, createUrlNavigation, useCatalogueNavigation } from './chunk-ILOCSCZL.js';
+//# sourceMappingURL=navigation.js.map
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation.js"}