@depict-ai/react-ui 0.0.38 → 0.0.40

package/dist/index.d.ts

@@ -4,33 +4,25 @@ 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>>;
-/**
- * The props for the DepictProvider.
- */
-type BaseSearchConfig = {
+type BaseDepictConfig = {
     /**
      * The market to use for the search.
-     * @example "se"
-     * @example "no"
+     * @example "se", "no", "dk"
      */
     merchant: string;
     /**
      * The merchant to use for the search.
-     * @example "se"
-     * @example "no"
-     * @example "dk"
+     * @example "se", "no", "dk"
      */
     market: string;
     /**
      * The path to the search page.
-     * @example "/search"
-     * @example "/sok"
+     * @example "/search", "/sok"
      */
     searchPagePath: string;
     /**
      * The name of the url parameter that will be used for the search query.
-     * @example "q"
-     * @example "search_query"
+     * @example "q", "search_query"
      * @default "search_query"
      */
     urlParamName?: string;
@@ -46,23 +38,71 @@ type BaseSearchConfig = {
   In that case, the ReactRouterUseNavigate type becomes "never" and cannot be used.
  */
 type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof useNavigate;
+type OnNavigation = (href: string, shallow?: boolean) => unknown;
 /**
- * The function that will be called when the user navigates to a new page.
- * @param href - The href of the new page.
- * @param shallow - Whether or not the navigation should be shallow.
- * @returns {unknown}
+ * The config for Depict
  */
-type OnNavigation = (href: string, shallow?: boolean) => unknown;
-type SearchConfig = BaseSearchConfig & {
+type DepictConfig = BaseDepictConfig & {
+    /**
+     * The function that will be called when the user navigates to a new page.
+     * @param href - The href of the new page.
+     * @param shallow - Whether or not the navigation should be shallow.
+     * @returns {unknown}
+     */
     onNavigation?: OnNavigation;
-    reactRouterUseNavigate?: ReactRouterUseNavigate;
+    /**
+     * 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 = () => {
+     *   const navigate = useNavigate();
+     *
+     *   return (
+     *     <DepictProvider
+     *       merchant="se"
+     *       market="se"
+     *       searchPagePath="/search"
+     *       navigateFunction={navigate}
+     *     >
+     *       <App />
+     *     </DepictProvider>
+     *   );
+     * };
+     * ```
+     */
+    navigateFunction?: ReactRouterUseNavigate;
 };
 /**
- * The DepictProvider is a wrapper component that should be used to wrap your entire application.
- * @param props - The props for the DepictProvider.
- * @returns {JSX.Element}
+ * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
+ *
+ * Make sure it's mounted on every page where the search modal should be available.
+ *
+ * @param props -  The props for the DepictProvider.
+ *
+ * @example
+ * ```tsx
+ *  const App = () => {
+ *    const navigate = useNavigate();
+ *
+ *    return (
+ *      <DepictProvider
+ *        merchant="se"
+ *        market="se"
+ *        searchPagePath="/search"
+ *      >
+ *        <App />
+ *      </DepictProvider>
+ *    );
+ * };
+ * ```
+ * @returns {JSX.Element} The DepictProvider.
  */
-export function DepictProvider(props: PropsWithChildren<SearchConfig>): import("react").FunctionComponentElement<{
+export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("react").FunctionComponentElement<{
     children?: import("react").ReactNode;
 }>;
 /**
@@ -110,10 +150,47 @@ interface SearchPageConfig<T extends Display> {
 }
 /**
  * DepictSearchPage is a component that renders a search page.
- * @param opts
- * @returns {JSX.Element}
+ * @param props - The props for the search page.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display } from '@depict-ai/react-ui'
+ *
+ * function Search() {
+ *    return <DepictSearchPage productCard={MyCustomSearchProductCard} />
+ * }
+ *
+ * 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,
+ *           variants: [],
+ *           options: [],
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ *
+ * ```
  */
-export function DepictSearchPage<T extends Display>(opts: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * Props for the ImagePlaceholder component
  */
@@ -138,4 +215,4 @@ 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.38";
+export const version = "0.0.40";

package/dist/main.js

@@ -145,11 +145,8 @@ 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();
-            }
+            const { navigateFunction: originalNavigateFunction  } = props;
+            const navigateFunction = typeof originalNavigateFunction === "function" ? originalNavigateFunction : undefined;
             (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -172,9 +169,9 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                         const { onNavigation: onNavigation  } = props;
                         if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
                     }
-                    if (react_router_navigate) {
+                    if (navigateFunction) {
                         const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
+                        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
                     }
                     if (window.next) window.next.router.push(new_href, undefined, {
                         shallow: shallow,
@@ -253,8 +250,8 @@ function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
 
 
 
-function $a6bedbe4b4d6d027$export$210723f5a54a7028(opts) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), opts);
+function $a6bedbe4b4d6d027$export$210723f5a54a7028(props) {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), props);
 }
 function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
     const depict_search = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search;
@@ -351,7 +348,7 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.38";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.40";
 
 
 

package/dist/module.js

@@ -133,11 +133,8 @@ 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();
-            }
+            const { navigateFunction: originalNavigateFunction  } = props;
+            const navigateFunction = typeof originalNavigateFunction === "function" ? originalNavigateFunction : undefined;
             (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
@@ -160,9 +157,9 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
                         const { onNavigation: onNavigation  } = props;
                         if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
                     }
-                    if (react_router_navigate) {
+                    if (navigateFunction) {
                         const url_object = new URL(new_href);
-                        return react_router_navigate(url_object.pathname + url_object.search + url_object.hash);
+                        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
                     }
                     if (window.next) window.next.router.push(new_href, undefined, {
                         shallow: shallow,
@@ -241,8 +238,8 @@ function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
 
 
 
-function $9f8d5ef3c016c493$export$210723f5a54a7028(opts) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), opts);
+function $9f8d5ef3c016c493$export$210723f5a54a7028(props) {
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), props);
 }
 function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
     const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
@@ -339,7 +336,7 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.38";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.40";
 
 
 

package/dist-server/index.d.ts

@@ -1,4 +1,4 @@
-export const version = "0.0.38";
+export const version = "0.0.40";
 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.38";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.40";
 
 
 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.38";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.40";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "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.16",
-    "@depict-ai/utilishared": "^0.0.14",
+    "@depict-ai/ui": "^0.0.18",
+    "@depict-ai/utilishared": "^0.0.16",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {