@depict-ai/react-ui 0.0.52 → 0.0.54

package/dist/index.d.ts

@@ -1,7 +1,41 @@
-import React, { PropsWithChildren, ReactNode } from "react";
+import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui/dist";
+import { Display } from "../../../lib/displays/Display";
+import React, { ReactNode, PropsWithChildren } from "react";
 import { Locale } from "@depict-ai/ui/locales";
-import { Display } from "@depict-ai/utilishared";
-import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
+import { DisplayWithVariants, Display as _Display1 } from "@depict-ai/utilishared";
+interface PLPPageConfig<T extends Display> {
+    /**
+     * The product card to use for rendering products.
+     */
+    productCard: DepictProductCard<T>;
+    /**
+     * How many columns to show at each media size.
+     * @default
+     * [[2, 901], [3, 1024], [4]]
+     * @example
+     * [[2, 901], [3, 1024], [4]]
+     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any size.
+     */
+    columnsAtSize?: SDKColsAtSize;
+    /**
+     * The spacing between products.
+     * @default "2%"
+     * @example
+     * "2%", "10px", "1rem"
+     */
+    gridSpacing?: SDKGridSpacing;
+}
+/**
+ * The Depict product card props.
+ */
+export interface DepictProductCardProps<T extends Display> {
+    /** The display data to render. */
+    display: T | null;
+}
+/**
+ * Depict product card to use for rendering products.
+ */
+export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 export function DepictSearchField(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 type NavigateFunction = (href: string) => void;
 type DepictSearchConfig = {
@@ -73,7 +107,7 @@ type DepictBaseConfig = {
      * The locale to use for the Depict components.
      * @default en
      */
-    locale: Locale;
+    locale?: Locale;
 };
 /**
  * The config for the DepictProvider.
@@ -124,40 +158,9 @@ export function DepictSearchHeader(): import("react").DetailedReactHTMLElement<{
  * @returns {void}
  */
 export function openModal(): void;
-/**
- * The Depict product card props.
- */
-export interface DepictProductCardProps<T extends Display> {
-    /** The display data to render. */
-    display: T | null;
-}
-/**
- * Depict product card to use for rendering products.
- */
-export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
-interface SearchPageConfig<T extends Display> {
-    /**
-     * The product card to use for rendering products.
-     */
-    productCard: DepictProductCard<T>;
-    /**
-     * How many columns to show at each media size.
-     * @default
-     * [[2, 901], [3, 1024], [4]]
-     * @example
-     * [[2, 901], [3, 1024], [4]]
-     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any size.
-     */
-    columnsAtSize?: SDKColsAtSize;
-    /**
-     * The spacing between products.
-     * @default "2%"
-     * @example
-     * "2%", "10px", "1rem"
-     */
-    gridSpacing?: SDKGridSpacing;
+interface SearchPageConfig<T extends DisplayWithVariants> extends PLPPageConfig<T> {
     /**
-     * Whether or not to show the search input field in the search page.
+     * Whether to show the search input field in the search page.
      * @default true
      */
     includeInputField?: boolean;
@@ -168,7 +171,7 @@ interface SearchPageConfig<T extends Display> {
  *
  * @example
  * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display } from '@depict-ai/react-ui'
+ * import { DepictProductCard, ImagePlaceholder, Display, DepictSearchPage } from '@depict-ai/react-ui'
  *
  * function Search() {
  *    return <DepictSearchPage productCard={MyCustomSearchProductCard} />
@@ -202,7 +205,55 @@ interface SearchPageConfig<T extends Display> {
  *
  * ```
  */
-export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function DepictSearchPage<T extends DisplayWithVariants>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CategoryPageConfig<T extends _Display1> extends PLPPageConfig<T> {
+    /**
+     * The category id to show.
+     */
+    categoryId: string;
+    showBreadcrumbs?: boolean;
+    showQuicklinks?: boolean;
+}
+/**
+ * DepictCategoryPage is a component that renders a category page.
+ * @param props the props for the category page.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display, DepictCategoryPage } from '@depict-ai/react-ui'
+ *
+ * function Category() {
+ *  return <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ * }
+ *
+ * interface MyCustomDisplay extends Display {}
+ *
+ * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
+ *   display,
+ * }) => {
+ *   if (!display) {
+ *     return <ImagePlaceholder aspectRatio={3 / 4} />
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <MyCustomProductCard
+ *         product={{
+ *           id: display.product_id,
+ *           name: display.title,
+ *           description: display.title,
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function DepictCategoryPage<T extends _Display1>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * Props for the ImagePlaceholder component.
  */
@@ -233,7 +284,7 @@ interface TextPlaceholderProps {
 }
 /** A placeholder text that can be used in place of a text that is loading. */
 export const TextPlaceholder: React.FC<TextPlaceholderProps>;
-export const version = "0.0.52";
+export const version = "0.0.54";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -3,9 +3,9 @@ var $4GYXz$depictaiui = require("@depict-ai/ui");
 var $4GYXz$solidjs = require("solid-js");
 var $4GYXz$solidjsweb = require("solid-js/web");
 var $4GYXz$react = require("react");
-var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
-var $4GYXz$reactdom = require("react-dom");
 var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
+var $4GYXz$reactdom = require("react-dom");
+var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -16,6 +16,7 @@ $parcel$export(module.exports, "DepictProvider", () => $18b830ef84ac138a$export$
 $parcel$export(module.exports, "openModal", () => $20bf907adee775ba$export$a7f6cffb6b8ba11c);
 $parcel$export(module.exports, "DepictSearchHeader", () => $20bf907adee775ba$export$cbcd1ecdb41b1d0a);
 $parcel$export(module.exports, "DepictSearchPage", () => $a6bedbe4b4d6d027$export$210723f5a54a7028);
+$parcel$export(module.exports, "DepictCategoryPage", () => $a7b03ed69305c219$export$d87c61cecb2edf0d);
 $parcel$export(module.exports, "ImagePlaceholder", () => $308b2c6db21be2eb$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $afce04c26b0c4208$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
@@ -27,6 +28,7 @@ $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a6
 
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
     search: null,
+    category: null,
     header_alignment: null,
     search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
     required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
@@ -36,6 +38,8 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
 
 
 
+
+
 let $b4d0d98857ed9934$var$run_on_href_change;
 function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
     $b4d0d98857ed9934$var$run_on_href_change = cb;
@@ -44,7 +48,7 @@ function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
     for await (const href of (0, $4GYXz$depictaiutilishared.href_change_ipns))$b4d0d98857ed9934$var$run_on_href_change?.(href);
 })();
 const $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43 = (url)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}) {
+function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, render_cb) {
     const [portals, set_portals] = (0, $4GYXz$react.useState)([]);
     const wrapper_element_ref = (0, $4GYXz$react.useRef)();
     (0, $4GYXz$react.useEffect)(()=>{
@@ -52,6 +56,7 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapp
         const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(props, set_portals), wrapper_element);
         return dispose;
     }, []);
+    render_cb?.(props);
     return (0, $4GYXz$react.createElement)(wrapper_type, {
         ref: wrapper_element_ref,
         style: wrapper_style
@@ -69,6 +74,38 @@ function $b4d0d98857ed9934$export$e5139bbbb9a05035(component) {
         });
     };
 }
+async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , info: info , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+    const solid_container = document.createElement("div");
+    const react_has_rendered = new Promise((r)=>{
+        const m_o = new MutationObserver(()=>{
+            m_o.disconnect();
+            r();
+        });
+        m_o.observe(solid_container, {
+            childList: true
+        });
+    });
+    const is_placeholder = info.rendering_options.type === "placeholder";
+    const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(react_template, {
+        display: is_placeholder ? null : display
+    });
+    const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
+    component_portals.add(portal);
+    set_portals([
+        ...component_portals
+    ]);
+    (0, $4GYXz$solidjs.onCleanup)(()=>{
+        // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+        component_portals.delete(portal);
+        set_portals([
+            ...component_portals
+        ]);
+    });
+    await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
+    return [
+        solid_container
+    ];
+}
 
 
 
@@ -148,7 +185,7 @@ const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
 
 
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , market: market , merchant: merchant , navigateFunction: navigateFunction , locale: locale  } = props;
+    const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale  } = props;
     const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
@@ -156,9 +193,13 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
         return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
     }
     try {
-        const { search: search  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
+        const { search: search , category: category  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
         const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path(searchPagePath);
+        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_href)=>{
+            if (navigateFunction) navigateFunction(new_href);
+            else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
+        } : undefined;
         if (!search) {
             (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
@@ -167,13 +208,8 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                 enable_category_suggestions: enableCategorySuggestions ?? false,
                 // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
                 localization: usedLocale,
-                ...typeof window?.next?.router !== "undefined" || navigateFunction ? {
-                    on_navigation: (new_href)=>{
-                        if (navigateFunction) navigateFunction(new_href);
-                        else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
-                    }
-                } : {},
-                url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path)
+                url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path),
+                on_navigation: on_navigation
             });
             (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43));
         } else {
@@ -181,6 +217,17 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
             search.merchant = merchant;
             search.localization = usedLocale;
         }
+        if (!category) (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $18b830ef84ac138a$import$5090e60c224b3b76$f34314aa9505732e)({
+            market: market,
+            merchant: merchant,
+            localization: usedLocale,
+            on_navigation: on_navigation
+        });
+        else {
+            category.market = market;
+            category.merchant = merchant;
+            category.localization = usedLocale;
+        }
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
         // Make sure to not break the users app if we throw
@@ -197,7 +244,6 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
 // and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
 
 
-
 function $20bf907adee775ba$export$cbcd1ecdb41b1d0a() {
     return (0, $4GYXz$react.createElement)("div", {
         className: "depict aligner",
@@ -210,32 +256,7 @@ function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
         console.error("No active search in the app!");
         return;
     }
-    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment) {
-        console.error("No active search header aligner on the page!");
-        return;
-    }
-    const style_props_ = (0, $4GYXz$solidjs.createSignal)({
-        position: "fixed",
-        top: 0
-    });
-    if ((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in-header .depict-search-modal .query-input { height: ${(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in-header .depict-search-modal-backdrop { top: ${(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        if (!$20bf907adee775ba$var$sheet) {
-            const style = document.createElement("style");
-            style.append(styles);
-            document.head.appendChild(style);
-        }
-    }
-    const class_list_ = (0, $4GYXz$solidjs.createMemo)(()=>({
-            "in-header": true
-        }));
-    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search.modal_open = [
-        {
-            style_props_: style_props_,
-            class_list_: class_list_
-        }
-    ];
+    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search.modal_open = true;
 }
 
 
@@ -243,8 +264,6 @@ function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
 
 
 
-
-
 function $a6bedbe4b4d6d027$export$210723f5a54a7028(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), props);
 }
@@ -284,38 +303,58 @@ function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
         // Todo: Do we need this?
         get_product_id: ()=>"",
         depict_search: depict_search,
-        product_card_template: async (display, info)=>{
-            const solid_container = document.createElement("div");
-            const react_has_rendered = new Promise((r)=>{
-                const m_o = new MutationObserver(()=>{
-                    m_o.disconnect();
-                    r();
-                });
-                m_o.observe(solid_container, {
-                    childList: true
-                });
-            });
-            const is_placeholder = info.rendering_options.type === "placeholder";
-            const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(props.productCard, {
-                display: is_placeholder ? null : display
-            });
-            const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
-            component_portals.add(portal);
-            set_portals([
-                ...component_portals
-            ]);
-            (0, $4GYXz$solidjs.onCleanup)(()=>{
-                // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
-                component_portals.delete(portal);
-                set_portals([
-                    ...component_portals
-                ]);
-            });
-            await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
-            return [
-                solid_container
-            ];
-        }
+        product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+                display: display,
+                info: info,
+                react_template: props.productCard,
+                component_portals: component_portals,
+                set_portals: set_portals
+            })
+    });
+}
+
+
+
+
+
+let $a7b03ed69305c219$var$render_cb;
+function $a7b03ed69305c219$export$d87c61cecb2edf0d(props) {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a7b03ed69305c219$var$SolidCategoryPage), props, "div", {}, (props)=>$a7b03ed69305c219$var$render_cb?.(props));
+}
+function $a7b03ed69305c219$var$SolidCategoryPage(props, set_portals) {
+    const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
+    $a7b03ed69305c219$var$render_cb = (props)=>depict_category.category_id = props.categoryId;
+    $a7b03ed69305c219$var$render_cb(props);
+    const component_portals = new Set();
+    return (0, $4GYXz$depictaiui.CategoryPage)({
+        depict_category: depict_category,
+        cols_at_size: props.columnsAtSize ?? [
+            [
+                4
+            ],
+            [
+                3,
+                1024
+            ],
+            [
+                2,
+                901
+            ]
+        ],
+        grid_spacing: props.gridSpacing ?? "2%",
+        // Todo: Do we need this?
+        get_product_id: ()=>"",
+        category_title: (0, $4GYXz$depictaiui.embedded_num_products),
+        show_breadcrumbs: props.showBreadcrumbs || false,
+        show_quicklinks: props.showQuicklinks || false,
+        product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+                display: display,
+                info: info,
+                react_template: props.productCard,
+                component_portals: component_portals,
+                set_portals: set_portals
+            })
     });
 }
 
@@ -343,7 +382,7 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.52";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.54";