@depict-ai/react-ui 0.0.44 → 0.0.45

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 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 { Locale } from "@depict-ai/ui/locales";
 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"
+     * The merchant to use for the search.
+     * @example "YOUR_MERCHANT", "stronger"
      */
     merchant: string;
     /**
-     * The merchant to use for the search.
-     * @example "se", "no", "dk"
+     * The market to use for the search.
+     * @example "YOUR_MARKET", "no", "en-de"
      */
     market: string;
     /**
@@ -27,10 +28,11 @@ 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;
+    locale: Locale;
 };
 /**
  * You can pass the function you use to navigate to a new page.
@@ -38,8 +40,7 @@ type BaseSearchConfig = {
  * 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";
+ * import { useNavigate } from "react-router-dom";
  *
  * const App = () => {
  *   return (
@@ -47,7 +48,7 @@ import { useNavigate } from "react-router";
  *       merchant="YOUR_MERCHANT"
  *       market="YOUR_MARKET"
  *       searchPagePath="/search"
- *       navigateFunction={useNavigate}
+ *       reactRouterUseNavigate={useNavigate}
  *     >
  *       <App />
  *     </DepictProvider>
@@ -56,11 +57,15 @@ import { useNavigate } from "react-router";
  * ```
  */
 type DepictConfigInReactRouterContext = {
+    /** Expects useNavigate hook from react-router */
     reactRouterUseNavigate: ReactRouterUseNavigate;
+    /** Not to be used in this context */
     onNavigation?: undefined;
 } & BaseSearchConfig;
 type DepictConfigInOtherContext = {
+    /** Expects a function that takes a url and navigates to it */
     onNavigation: (href: string, shallow?: boolean) => unknown;
+    /** Not to be used in this context */
     reactRouterUseNavigate?: undefined;
 } & BaseSearchConfig;
 type DepictConfig = BaseSearchConfig | DepictConfigInReactRouterContext | DepictConfigInOtherContext;
@@ -79,9 +84,7 @@ type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof us
  *
  * @example
  * ```tsx
- *  const App = () => {
- *    const navigate = useNavigate();
- *
+ *  const App = () => { *
  *    return (
  *      <DepictProvider
  *        merchant="YOUR_MERCHANT"
@@ -99,7 +102,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 +120,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 +134,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 +182,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 +199,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 +212,18 @@ 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.45";
+export type { Locale } from "@depict-ai/ui";

package/dist/main.js

@@ -3,6 +3,7 @@ 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");
 
@@ -82,6 +83,7 @@ function $a48f3b1a4abf2e0c$export$d2c02478244f91f7() {
 
 
 
+
 let $6319748b4f0426f0$var$set = false;
 let $6319748b4f0426f0$var$padding_animation;
 function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
@@ -135,7 +137,8 @@ function $6319748b4f0426f0$var$removeLotsOfPadding() {
 
 
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant  } = props;
+    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant , locale: locale  } = props;
+    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
@@ -156,16 +159,7 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                 merchant: merchant,
                 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: {
-                    ...(0, $4GYXz$depictaiui.swedish_search_translation),
-                    price_formatting_: {
-                        pre_: "kr ",
-                        post_: "",
-                        decimal_places_delimiter_: ",",
-                        thousands_delimiter_: " ",
-                        places_after_comma_: 2
-                    }
-                },
+                localization: usedLocale,
                 on_navigation: (new_href)=>{
                     const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
                     if ("onNavigation" in props) {
@@ -188,6 +182,7 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
         } else {
             search.market = market;
             search.merchant = merchant;
+            search.localization = usedLocale;
         }
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
@@ -351,7 +346,7 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.44";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.45";
 
 
 

package/dist/module.js

@@ -1,8 +1,9 @@
 import {dlog as $TZSbU$dlog, href_change_ipns as $TZSbU$href_change_ipns, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {add_to_version_info as $TZSbU$add_to_version_info, SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, swedish_search_translation as $TZSbU$swedish_search_translation, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage} from "@depict-ai/ui";
+import {add_to_version_info as $TZSbU$add_to_version_info, SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage} from "@depict-ai/ui";
 import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, createSignal as $TZSbU$createSignal, createMemo as $TZSbU$createMemo, createComputed as $TZSbU$createComputed, onCleanup as $TZSbU$onCleanup} from "solid-js";
 import {render as $TZSbU$render} from "solid-js/web";
 import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment} from "react";
+import {en as $TZSbU$en} from "@depict-ai/ui/locales";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 
@@ -70,6 +71,7 @@ function $54b0d21b77e719c4$export$d2c02478244f91f7() {
 
 
 
+
 let $8071251ee4e9ffa1$var$set = false;
 let $8071251ee4e9ffa1$var$padding_animation;
 function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
@@ -123,7 +125,8 @@ function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
 
 
 function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant  } = props;
+    const { children: children , searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , market: market , merchant: merchant , locale: locale  } = props;
+    const usedLocale = locale ?? (0, $TZSbU$en);
     if (!market || !merchant) {
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
         return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
@@ -144,16 +147,7 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
                 merchant: merchant,
                 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: {
-                    ...(0, $TZSbU$swedish_search_translation),
-                    price_formatting_: {
-                        pre_: "kr ",
-                        post_: "",
-                        decimal_places_delimiter_: ",",
-                        thousands_delimiter_: " ",
-                        places_after_comma_: 2
-                    }
-                },
+                localization: usedLocale,
                 on_navigation: (new_href)=>{
                     const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
                     if ("onNavigation" in props) {
@@ -176,6 +170,7 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
         } else {
             search.market = market;
             search.merchant = merchant;
+            search.localization = usedLocale;
         }
         (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
@@ -339,7 +334,7 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.44";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.45";
 
 
 

package/dist-server/index.d.ts

@@ -1,4 +1,4 @@
-export const version = "0.0.44";
+export const version = "0.0.45";
 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.45";
 
 
 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.45";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {

package/locales/index.d.ts

@@ -0,0 +1,88 @@
+import { Elem } from "@depict-ai/utilishared";
+/**
+ * PLP internationalisation shared between search and category listing
+ */
+type plp_shared_i18n = {
+    scroll_to_top_: string;
+    back_: string;
+    open_sorting_: string;
+    close_sorting_: string;
+    open_filters_: string;
+    close_filters_: string;
+    close_: string;
+    ok_: string;
+    filters_cleared_: string;
+    we_cleared_your_filters_: string;
+    restore_: string;
+    sorting_text_: string;
+    filter_text_: string;
+    selected_filters_title_: string;
+    filters_: string;
+    view_less_: string;
+    view_more_: string;
+    clear_all_from_filter_crumbs_: string;
+    clear_individual_filter_: string;
+    of_: string;
+    clear_all_filters_from_big_button_: string;
+    try_without_filters_: string;
+    range_filter_low_point_aria_label_: string;
+    range_filter_high_point_aria_label_: string;
+    morphing_sign_expanded_aria_label_: string;
+    morphing_sign_collapsed_aria_label_: string;
+    price_formatting_: {
+        pre_: string;
+        post_: string;
+        decimal_places_delimiter_: string;
+        thousands_delimiter_: string;
+        places_after_comma_: number | "auto";
+    };
+};
+/**
+ * Search internationalisation
+ */
+interface search_i18n extends plp_shared_i18n {
+    placeholder_text_: string;
+    show_n_results_: (number_of_results: HTMLElement) => Elem[];
+    no_results_text_: string;
+    search_recs_title_: string;
+    clear_filters_query_sorting_after_submit_: string;
+    modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
+    modal_discover_more_: string;
+    get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
+    previous_searches_text_: string;
+    category_: string;
+    suggestions_: string;
+    search_submit_button_aria_label_: string;
+    query_input_field_aria_label_: string;
+    previous_searches_delete_entry_from_history_: string;
+}
+/**
+ * Category internationalisation
+ */
+interface category_i18n extends plp_shared_i18n {
+    show_n_products_: (number_of_results: HTMLElement) => Elem[];
+    no_products_text_: string;
+    product_: string;
+    products_: string;
+    breadcrumbs_aria_label_: string;
+    quicklinks_aria_label_: string;
+    breadcrumbs_separator_: string;
+}
+/**
+ * Depict UI internationalisation
+ */
+interface Locale extends category_i18n, search_i18n {
+}
+export const cz: Locale;
+export const da: Locale;
+export const nl: Locale;
+export const en: Locale;
+export const fi: Locale;
+export const fr: Locale;
+export const de: Locale;
+export const it: Locale;
+export const no: Locale;
+export const pl: Locale;
+export const pt: Locale;
+export const es: Locale;
+export const sv: Locale;