@depict-ai/react-ui 0.0.44 → 0.0.46

package/dist/index.d.ts

@@ -1,20 +1,9 @@
 import React, { PropsWithChildren, ReactNode } from "react";
-// @ts-ignore -- react-router is optional and only used for typing the reactRouterUseNavigate property
-import { useNavigate } from "react-router";
 import { Display } from "@depict-ai/utilishared";
 import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
 export function DepictSearchField(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-type BaseSearchConfig = {
-    /**
-     * The market to use for the search.
-     * @example "se", "no", "dk"
-     */
-    merchant: string;
-    /**
-     * The merchant to use for the search.
-     * @example "se", "no", "dk"
-     */
-    market: string;
+type NavigateFunction = (href: string) => void;
+type DepictSearchConfig = {
     /**
      * The path to the search page.
      * @example "/search", "/sok"
@@ -27,49 +16,65 @@ type BaseSearchConfig = {
      */
     urlParamName?: string;
     /**
-     * Whether or not to enable category suggestions.
+     * Whether or not to enable category suggestions in the search modal and search page.
      * @default false
      */
     enableCategorySuggestions?: boolean;
 };
+type DepictBaseConfig = {
+    /**
+     * The merchant to use for the search.
+     * @example "YOUR_MERCHANT", "stronger"
+     */
+    merchant: string;
+    /**
+     * The market to use for the search.
+     * @example "YOUR_MARKET", "no", "en-de"
+     */
+    market: string;
+    /**
+     * The function to use for navigating to a new page.
+     * This function will be used internally by our components to navigate.
+     *
+     * You don't need to provide any in a Next.js context.
+     *
+     * @example
+     * Here is how you would use it with react-router, using our helper function.
+     * ```tsx
+     * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
+     *
+     * function Router() {
+     *   const navigate = useNavigate();
+     *   return (
+     *     <DepictProvider
+     *       merchant="houdini"
+     *       market="en-de"
+     *       navigateFunction={Navigation.reactRouterNavigation(navigate)}
+     *       search={{
+     *         searchPagePath: "/search",
+     *       }}
+     *     >
+     *       <Routes>[...]</Routes>
+     *     </DepictProvider>
+     *   );
+     * }
+     * ```
+     * @example
+     * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
+     * ```tsx
+     * const navigateFunction = (href: string) => {
+     *  router.push(href);
+     * };
+     * ```
+     */
+    navigateFunction?: NavigateFunction;
+};
 /**
- * You can pass the function you use to navigate to a new page.
- *
- * Currently only works with react-router's useNavigate hook.
- * @example
- * ```tsx
- * // @ts-ignore -- react-router is optional and only used for typing the reactRouterUseNavigate property
-import { useNavigate } from "react-router";
- *
- * const App = () => {
- *   return (
- *     <DepictProvider
- *       merchant="YOUR_MERCHANT"
- *       market="YOUR_MARKET"
- *       searchPagePath="/search"
- *       navigateFunction={useNavigate}
- *     >
- *       <App />
- *     </DepictProvider>
- *   );
- * };
- * ```
- */
-type DepictConfigInReactRouterContext = {
-    reactRouterUseNavigate: ReactRouterUseNavigate;
-    onNavigation?: undefined;
-} & BaseSearchConfig;
-type DepictConfigInOtherContext = {
-    onNavigation: (href: string, shallow?: boolean) => unknown;
-    reactRouterUseNavigate?: undefined;
-} & BaseSearchConfig;
-type DepictConfig = BaseSearchConfig | DepictConfigInReactRouterContext | DepictConfigInOtherContext;
-/**
- *
-  If react-router does not exist, useNavigate will fall back to "any".
-  In that case, the ReactRouterUseNavigate type becomes "never" and cannot be used.
+ * The config for the DepictProvider.
  */
-type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof useNavigate;
+type DepictConfig = DepictBaseConfig & {
+    search: DepictSearchConfig;
+};
 /**
  * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
  *
@@ -79,14 +84,14 @@ type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof us
  *
  * @example
  * ```tsx
- *  const App = () => {
- *    const navigate = useNavigate();
- *
+ *  const App = () => { *
  *    return (
  *      <DepictProvider
  *        merchant="YOUR_MERCHANT"
  *        market="YOUR_MARKET"
- *        searchPagePath="/search"
+ *        search={{
+ *          searchPagePath: "/search",
+ *        }}
  *      >
  *        <App />
  *      </DepictProvider>
@@ -99,7 +104,9 @@ export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("
     children?: import("react").ReactNode;
 }>;
 /**
- * A search header alignment component.
+ * A search header alignment component,
+ * which should be placed in the header of the page and
+ * will be used to align the search modal input.
  * @returns {JSX.Element}
  */
 export function DepictSearchHeader(): import("react").DetailedReactHTMLElement<{
@@ -115,10 +122,11 @@ 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
+ * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 interface SearchPageConfig<T extends Display> {
@@ -128,15 +136,22 @@ interface SearchPageConfig<T extends Display> {
     productCard: DepictProductCard<T>;
     /**
      * How many columns to show at each media size.
-     * @default { [[4], [3, 1024], [2, 901]] }
+     * @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;
     /**
-     * Whether or not to show the search input field.
+     * Whether or not to show the search input field in the search page.
      * @default true
      */
     includeInputField?: boolean;
@@ -169,8 +184,6 @@ interface SearchPageConfig<T extends Display> {
  *           id: display.product_id,
  *           name: display.title,
  *           description: display.title,
- *           variants: [],
- *           options: [],
  *           images: [{ url: display.image_url }],
  *           price: {
  *             value: display.sale_price,
@@ -188,7 +201,7 @@ export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>):
  * Props for the ImagePlaceholder component.
  */
 interface ImagePlaceholderProps {
-    /** The aspect ratio of the image. */
+    /** The aspect ratio of the image that will be displayed. */
     aspectRatio: number;
 }
 /**
@@ -201,11 +214,24 @@ export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
  * Props for the TextPlaceholder component.
  */
 interface TextPlaceholderProps {
-    /** The height of the text. */
+    /**
+     * The height of the text, including a unit.
+     * @example "1em"
+     */
     height: string;
-    /** The width of the text. */
+    /**
+     * The width of the text.
+     * @example "60px", "10em"
+     */
     width: string;
 }
 /** 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.44";
+export const version = "0.0.46";
+/**
+ * Helper function to navigate to a new page depending on the navigation library used.
+ */
+export const Navigation: {
+    nextRouterNavigation: (router: import("next/router").NextRouter) => (href: string) => void;
+    reactRouterNavigation: (navigateFunction: import("react-router").NavigateFunction) => (href: string) => void;
+};

package/dist/main.js

@@ -18,6 +18,7 @@ $parcel$export(module.exports, "DepictSearchPage", () => $a6bedbe4b4d6d027$expor
 $parcel$export(module.exports, "ImagePlaceholder", () => $308b2c6db21be2eb$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $afce04c26b0c4208$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
+$parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
 
@@ -134,8 +135,20 @@ function $6319748b4f0426f0$var$removeLotsOfPadding() {
 
 
 
+
+const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
+    const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+    if (window.next) window.next.router.push(href, undefined, {
+        shallow: shallow,
+        scroll: true
+    });
+    else location.href = href;
+};
+
+
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant  } = props;
+    const { children: children , market: market , merchant: merchant , navigateFunction: navigateFunction  } = props;
+    const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
@@ -145,11 +158,6 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
         const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path(searchPagePath);
         if (!search) {
-            let react_router_navigate;
-            if ("reactRouterUseNavigate" in props) {
-                const { reactRouterUseNavigate: reactRouterUseNavigate  } = props;
-                if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
-            }
             (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -167,20 +175,8 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                     }
                 },
                 on_navigation: (new_href)=>{
-                    const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
-                    if ("onNavigation" in props) {
-                        const { onNavigation: onNavigation  } = props;
-                        if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
-                    }
-                    if (react_router_navigate) {
-                        const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
-                    }
-                    if (window.next) window.next.router.push(new_href, undefined, {
-                        shallow: shallow,
-                        scroll: true
-                    });
-                    else location.href = 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)
             });
@@ -351,9 +347,40 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.44";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.46";
+
+
 
 
+const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
+        const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+        router.push(href, undefined, {
+            shallow: shallow,
+            scroll: true
+        });
+    };
+
+
+/**
+ * Helper function that creates a function that can be used as the
+ * navigateFunction callback for DepictProvider when using react-router.
+ *
+ * React-router expect relative URLs, so this function will strip the
+ * protocol, hostname and port from the URL.
+ *
+ * @param navigateFunction what useNavigate() returns
+ * @returns a function that can be used as the navigateFunction callback for DepictProvider
+ */ const $201a023b63de7d2f$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
+        const url_object = new URL(href);
+        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
+    };
+
+
+const $b742053c966024b4$export$b8a61e5c71402559 = {
+    nextRouterNavigation: $e387bd534de10acd$export$804fac5697cfbe35,
+    reactRouterNavigation: $201a023b63de7d2f$export$d53481656a62aebe
+};
+
 
 const $b03e4eee8610ebbe$var$package_name = "@depict-ai/react-ui";
 (0, $4GYXz$depictaiutilishared.dlog)($b03e4eee8610ebbe$var$package_name + " version", (0, $db7b67857900028b$export$83d89fbfd8236492));

package/dist/module.js

@@ -122,8 +122,20 @@ function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
 
 
 
+
+const $7216ca4c8308a0f9$export$599d4515591ef232 = (href)=>{
+    const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+    if (window.next) window.next.router.push(href, undefined, {
+        shallow: shallow,
+        scroll: true
+    });
+    else location.href = href;
+};
+
+
 function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant  } = props;
+    const { children: children , market: market , merchant: merchant , navigateFunction: navigateFunction  } = props;
+    const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
@@ -133,11 +145,6 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
         const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path(searchPagePath);
         if (!search) {
-            let react_router_navigate;
-            if ("reactRouterUseNavigate" in props) {
-                const { reactRouterUseNavigate: reactRouterUseNavigate  } = props;
-                if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
-            }
             (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -155,20 +162,8 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
                     }
                 },
                 on_navigation: (new_href)=>{
-                    const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
-                    if ("onNavigation" in props) {
-                        const { onNavigation: onNavigation  } = props;
-                        if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
-                    }
-                    if (react_router_navigate) {
-                        const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
-                    }
-                    if (window.next) window.next.router.push(new_href, undefined, {
-                        shallow: shallow,
-                        scroll: true
-                    });
-                    else location.href = new_href;
+                    if (navigateFunction) navigateFunction(new_href);
+                    else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_href);
                 },
                 url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path)
             });
@@ -339,9 +334,40 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.44";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.46";
+
+
 
 
+const $a92aa2beb560b8af$export$804fac5697cfbe35 = (router)=>(href)=>{
+        const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+        router.push(href, undefined, {
+            shallow: shallow,
+            scroll: true
+        });
+    };
+
+
+/**
+ * Helper function that creates a function that can be used as the
+ * navigateFunction callback for DepictProvider when using react-router.
+ *
+ * React-router expect relative URLs, so this function will strip the
+ * protocol, hostname and port from the URL.
+ *
+ * @param navigateFunction what useNavigate() returns
+ * @returns a function that can be used as the navigateFunction callback for DepictProvider
+ */ const $01e1970add53d62a$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
+        const url_object = new URL(href);
+        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
+    };
+
+
+const $97603d19204ec48d$export$b8a61e5c71402559 = {
+    nextRouterNavigation: $a92aa2beb560b8af$export$804fac5697cfbe35,
+    reactRouterNavigation: $01e1970add53d62a$export$d53481656a62aebe
+};
+
 
 const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 (0, $TZSbU$dlog)($43099132aad1ceb6$var$package_name + " version", (0, $c9c4d066f9a5b51b$export$83d89fbfd8236492));
@@ -350,4 +376,4 @@ const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 });
 
 
-export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage, $c95f83f01e99fc18$export$3f37af283f8fb843 as ImagePlaceholder, $8aa3ab31237c8dc9$export$89c6019e4baa40b1 as TextPlaceholder, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage, $c95f83f01e99fc18$export$3f37af283f8fb843 as ImagePlaceholder, $8aa3ab31237c8dc9$export$89c6019e4baa40b1 as TextPlaceholder, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

package/dist-server/index.d.ts

@@ -1,4 +1,4 @@
-export const version = "0.0.44";
+export const version = "0.0.46";
 export function DepictProvider(props: any): any;
 export function DepictSearchField(): any;
 export function DepictSearchPage(): any;

package/dist-server/main.js

@@ -15,7 +15,7 @@ $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6c
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.44";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.46";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.44";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.46";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -83,8 +83,8 @@
     "/dist-server"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.22",
-    "@depict-ai/utilishared": "^0.0.20",
+    "@depict-ai/ui": "^0.0.24",
+    "@depict-ai/utilishared": "^0.0.22",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -109,6 +109,7 @@
     "jest": "^29.3.1",
     "jest-haste-map": "^29.3.1",
     "jest-resolve": "^29.3.1",
+    "next": "^13.1.1",
     "parcel": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",