@depict-ai/react-ui 0.0.37 → 0.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +174 -11
- package/dist/main.js +7 -10
- package/dist/module.js +7 -10
- package/dist-server/index.d.ts +1 -1
- package/dist-server/main.js +1 -1
- package/dist-server/module.js +1 -1
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -4,47 +4,210 @@ import { useNavigate } from "react-router";
|
|
|
4
4
|
import { Display } from "@depict-ai/utilishared";
|
|
5
5
|
import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
|
|
6
6
|
export function DepictSearchField(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
7
|
-
type
|
|
7
|
+
type BaseDepictConfig = {
|
|
8
|
+
/**
|
|
9
|
+
* The market to use for the search.
|
|
10
|
+
* @example "se", "no", "dk"
|
|
11
|
+
*/
|
|
8
12
|
merchant: string;
|
|
13
|
+
/**
|
|
14
|
+
* The merchant to use for the search.
|
|
15
|
+
* @example "se", "no", "dk"
|
|
16
|
+
*/
|
|
9
17
|
market: string;
|
|
18
|
+
/**
|
|
19
|
+
* The path to the search page.
|
|
20
|
+
* @example "/search", "/sok"
|
|
21
|
+
*/
|
|
10
22
|
searchPagePath: string;
|
|
23
|
+
/**
|
|
24
|
+
* The name of the url parameter that will be used for the search query.
|
|
25
|
+
* @example "q", "search_query"
|
|
26
|
+
* @default "search_query"
|
|
27
|
+
*/
|
|
11
28
|
urlParamName?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Whether or not to enable category suggestions.
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
12
33
|
enableCategorySuggestions?: boolean;
|
|
13
34
|
};
|
|
35
|
+
/**
|
|
36
|
+
*
|
|
37
|
+
If react-router does not exist, useNavigate will fall back to "any".
|
|
38
|
+
In that case, the ReactRouterUseNavigate type becomes "never" and cannot be used.
|
|
39
|
+
*/
|
|
14
40
|
type ReactRouterUseNavigate = any extends typeof useNavigate ? never : typeof useNavigate;
|
|
15
|
-
type
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
41
|
+
type OnNavigation = (href: string, shallow?: boolean) => unknown;
|
|
42
|
+
/**
|
|
43
|
+
* The config for Depict
|
|
44
|
+
*/
|
|
45
|
+
type DepictConfig = BaseDepictConfig & {
|
|
46
|
+
/**
|
|
47
|
+
* The function that will be called when the user navigates to a new page.
|
|
48
|
+
* @param href - The href of the new page.
|
|
49
|
+
* @param shallow - Whether or not the navigation should be shallow.
|
|
50
|
+
* @returns {unknown}
|
|
51
|
+
*/
|
|
52
|
+
onNavigation?: OnNavigation;
|
|
53
|
+
/**
|
|
54
|
+
* You can pass the function you use to navigate to a new page.
|
|
55
|
+
*
|
|
56
|
+
* Currently only works with react-router's useNavigate hook.
|
|
57
|
+
* @example
|
|
58
|
+
* ```tsx
|
|
59
|
+
* // @ts-ignore -- react-router is optional and only used for typing the reactRouterUseNavigate property
|
|
60
|
+
import { useNavigate } from "react-router";
|
|
61
|
+
*
|
|
62
|
+
* const App = () => {
|
|
63
|
+
* const navigate = useNavigate();
|
|
64
|
+
*
|
|
65
|
+
* return (
|
|
66
|
+
* <DepictProvider
|
|
67
|
+
* merchant="se"
|
|
68
|
+
* market="se"
|
|
69
|
+
* searchPagePath="/search"
|
|
70
|
+
* navigateFunction={navigate}
|
|
71
|
+
* >
|
|
72
|
+
* <App />
|
|
73
|
+
* </DepictProvider>
|
|
74
|
+
* );
|
|
75
|
+
* };
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
navigateFunction?: ReactRouterUseNavigate;
|
|
79
|
+
};
|
|
80
|
+
/**
|
|
81
|
+
* The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
|
|
82
|
+
*
|
|
83
|
+
* Make sure it's mounted on every page where the search modal should be available.
|
|
84
|
+
*
|
|
85
|
+
* @param props - The props for the DepictProvider.
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* const App = () => {
|
|
90
|
+
* const navigate = useNavigate();
|
|
91
|
+
*
|
|
92
|
+
* return (
|
|
93
|
+
* <DepictProvider
|
|
94
|
+
* merchant="se"
|
|
95
|
+
* market="se"
|
|
96
|
+
* searchPagePath="/search"
|
|
97
|
+
* >
|
|
98
|
+
* <App />
|
|
99
|
+
* </DepictProvider>
|
|
100
|
+
* );
|
|
101
|
+
* };
|
|
102
|
+
* ```
|
|
103
|
+
* @returns {JSX.Element} The DepictProvider.
|
|
104
|
+
*/
|
|
105
|
+
export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("react").FunctionComponentElement<{
|
|
23
106
|
children?: import("react").ReactNode;
|
|
24
107
|
}>;
|
|
108
|
+
/**
|
|
109
|
+
* A search header alignment component.
|
|
110
|
+
* @returns {JSX.Element}
|
|
111
|
+
*/
|
|
25
112
|
export function DepictSearchHeader(): import("react").DetailedReactHTMLElement<{
|
|
26
113
|
className: string;
|
|
27
114
|
ref: (e: HTMLElement | null) => HTMLElement | null;
|
|
28
115
|
}, HTMLElement>;
|
|
116
|
+
/**
|
|
117
|
+
* Opens the search modal.
|
|
118
|
+
* @returns {void}
|
|
119
|
+
*/
|
|
29
120
|
export function openModal(): void;
|
|
121
|
+
/**
|
|
122
|
+
* The Depict product card props.
|
|
123
|
+
*/
|
|
30
124
|
export interface DepictProductCardProps<T extends Display> {
|
|
31
125
|
display: T | null;
|
|
32
126
|
}
|
|
127
|
+
/**
|
|
128
|
+
* Depict product card
|
|
129
|
+
*/
|
|
33
130
|
export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
|
|
34
131
|
interface SearchPageConfig<T extends Display> {
|
|
132
|
+
/**
|
|
133
|
+
* The product card to use for rendering products.
|
|
134
|
+
*/
|
|
35
135
|
productCard: DepictProductCard<T>;
|
|
136
|
+
/**
|
|
137
|
+
* How many columns to show at each media size.
|
|
138
|
+
* @default { [[4], [3, 1024], [2, 901]] }
|
|
139
|
+
*/
|
|
36
140
|
columnsAtSize?: SDKColsAtSize;
|
|
141
|
+
/**
|
|
142
|
+
* The spacing between products.
|
|
143
|
+
*/
|
|
37
144
|
gridSpacing?: SDKGridSpacing;
|
|
145
|
+
/**
|
|
146
|
+
* Whether or not to show the search input field.
|
|
147
|
+
* @default true
|
|
148
|
+
*/
|
|
38
149
|
includeInputField?: boolean;
|
|
39
150
|
}
|
|
40
|
-
|
|
151
|
+
/**
|
|
152
|
+
* DepictSearchPage is a component that renders a search page.
|
|
153
|
+
* @param props - The props for the search page.
|
|
154
|
+
*
|
|
155
|
+
* @example
|
|
156
|
+
* ```tsx
|
|
157
|
+
* import { DepictProductCard, ImagePlaceholder, Display } from '@depict-ai/react-ui'
|
|
158
|
+
*
|
|
159
|
+
* interface MyCustomDisplay extends Display {}
|
|
160
|
+
*
|
|
161
|
+
* export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
|
|
162
|
+
* display,
|
|
163
|
+
* }) => {
|
|
164
|
+
* if (!display) {
|
|
165
|
+
* return <ImagePlaceholder aspectRatio={3 / 4} />
|
|
166
|
+
* }
|
|
167
|
+
*
|
|
168
|
+
* return (
|
|
169
|
+
* <>
|
|
170
|
+
* <MyCustomProductCard
|
|
171
|
+
* product={{
|
|
172
|
+
* id: display.product_id,
|
|
173
|
+
* name: display.title,
|
|
174
|
+
* description: display.title,
|
|
175
|
+
* variants: [],
|
|
176
|
+
* options: [],
|
|
177
|
+
* images: [{ url: display.image_url }],
|
|
178
|
+
* price: {
|
|
179
|
+
* value: display.sale_price,
|
|
180
|
+
* },
|
|
181
|
+
* }}
|
|
182
|
+
* />
|
|
183
|
+
* </>
|
|
184
|
+
* )
|
|
185
|
+
* }
|
|
186
|
+
* ```
|
|
187
|
+
*/
|
|
188
|
+
export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
189
|
+
/**
|
|
190
|
+
* Props for the ImagePlaceholder component
|
|
191
|
+
*/
|
|
41
192
|
interface ImagePlaceholderProps {
|
|
193
|
+
/** The aspect ratio of the image */
|
|
42
194
|
aspectRatio: number;
|
|
43
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* A placeholder image that can be used in place of an image that is loading
|
|
198
|
+
* @param props
|
|
199
|
+
* @returns
|
|
200
|
+
*/
|
|
44
201
|
export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
|
|
202
|
+
/**
|
|
203
|
+
* Props for the TextPlaceholder component
|
|
204
|
+
*/
|
|
45
205
|
interface TextPlaceholderProps {
|
|
206
|
+
/** The height of the text */
|
|
46
207
|
height: string;
|
|
208
|
+
/** The width of the text */
|
|
47
209
|
width: string;
|
|
48
210
|
}
|
|
211
|
+
/** A placeholder text that can be used in place of a text that is loading */
|
|
49
212
|
export const TextPlaceholder: React.FC<TextPlaceholderProps>;
|
|
50
|
-
export const version = "0.0.
|
|
213
|
+
export const version = "0.0.39";
|
package/dist/main.js
CHANGED
|
@@ -145,11 +145,8 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
|
|
|
145
145
|
const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
|
|
146
146
|
set_search_page_path(searchPagePath);
|
|
147
147
|
if (!search) {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
const { reactRouterUseNavigate: reactRouterUseNavigate } = props;
|
|
151
|
-
if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
|
|
152
|
-
}
|
|
148
|
+
const { navigateFunction: originalNavigateFunction } = props;
|
|
149
|
+
const navigateFunction = typeof originalNavigateFunction === "function" ? originalNavigateFunction : undefined;
|
|
153
150
|
(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
|
|
154
151
|
search_query_url_param_name: urlParamName,
|
|
155
152
|
market: market,
|
|
@@ -172,9 +169,9 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
|
|
|
172
169
|
const { onNavigation: onNavigation } = props;
|
|
173
170
|
if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
|
|
174
171
|
}
|
|
175
|
-
if (
|
|
172
|
+
if (navigateFunction) {
|
|
176
173
|
const url_object = new URL(new_href);
|
|
177
|
-
return
|
|
174
|
+
return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
|
|
178
175
|
}
|
|
179
176
|
if (window.next) window.next.router.push(new_href, undefined, {
|
|
180
177
|
shallow: shallow,
|
|
@@ -253,8 +250,8 @@ function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
|
|
|
253
250
|
|
|
254
251
|
|
|
255
252
|
|
|
256
|
-
function $a6bedbe4b4d6d027$export$210723f5a54a7028(
|
|
257
|
-
return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage),
|
|
253
|
+
function $a6bedbe4b4d6d027$export$210723f5a54a7028(props) {
|
|
254
|
+
return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), props);
|
|
258
255
|
}
|
|
259
256
|
function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
|
|
260
257
|
const depict_search = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search;
|
|
@@ -351,7 +348,7 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
|
|
|
351
348
|
};
|
|
352
349
|
|
|
353
350
|
|
|
354
|
-
const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.
|
|
351
|
+
const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.39";
|
|
355
352
|
|
|
356
353
|
|
|
357
354
|
|
package/dist/module.js
CHANGED
|
@@ -133,11 +133,8 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
|
|
|
133
133
|
const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
|
|
134
134
|
set_search_page_path(searchPagePath);
|
|
135
135
|
if (!search) {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
const { reactRouterUseNavigate: reactRouterUseNavigate } = props;
|
|
139
|
-
if (typeof reactRouterUseNavigate === "function") react_router_navigate = reactRouterUseNavigate();
|
|
140
|
-
}
|
|
136
|
+
const { navigateFunction: originalNavigateFunction } = props;
|
|
137
|
+
const navigateFunction = typeof originalNavigateFunction === "function" ? originalNavigateFunction : undefined;
|
|
141
138
|
(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
|
|
142
139
|
search_query_url_param_name: urlParamName,
|
|
143
140
|
market: market,
|
|
@@ -160,9 +157,9 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
|
|
|
160
157
|
const { onNavigation: onNavigation } = props;
|
|
161
158
|
if (typeof onNavigation === "function") return onNavigation(new_href, shallow);
|
|
162
159
|
}
|
|
163
|
-
if (
|
|
160
|
+
if (navigateFunction) {
|
|
164
161
|
const url_object = new URL(new_href);
|
|
165
|
-
return
|
|
162
|
+
return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
|
|
166
163
|
}
|
|
167
164
|
if (window.next) window.next.router.push(new_href, undefined, {
|
|
168
165
|
shallow: shallow,
|
|
@@ -241,8 +238,8 @@ function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
|
|
|
241
238
|
|
|
242
239
|
|
|
243
240
|
|
|
244
|
-
function $9f8d5ef3c016c493$export$210723f5a54a7028(
|
|
245
|
-
return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage),
|
|
241
|
+
function $9f8d5ef3c016c493$export$210723f5a54a7028(props) {
|
|
242
|
+
return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), props);
|
|
246
243
|
}
|
|
247
244
|
function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
|
|
248
245
|
const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
|
|
@@ -339,7 +336,7 @@ const $8aa3ab31237c8dc9$export$89c6019e4baa40b1 = ({ width: width , height: heig
|
|
|
339
336
|
};
|
|
340
337
|
|
|
341
338
|
|
|
342
|
-
const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.
|
|
339
|
+
const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.39";
|
|
343
340
|
|
|
344
341
|
|
|
345
342
|
|
package/dist-server/index.d.ts
CHANGED
package/dist-server/main.js
CHANGED
|
@@ -15,7 +15,7 @@ $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6c
|
|
|
15
15
|
$parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.
|
|
18
|
+
const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.39";
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
|
package/dist-server/module.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@depict-ai/react-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.39",
|
|
4
4
|
"packageManager": "yarn@3.2.2",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
"/dist-server"
|
|
84
84
|
],
|
|
85
85
|
"dependencies": {
|
|
86
|
-
"@depict-ai/ui": "^0.0.
|
|
87
|
-
"@depict-ai/utilishared": "^0.0.
|
|
86
|
+
"@depict-ai/ui": "^0.0.17",
|
|
87
|
+
"@depict-ai/utilishared": "^0.0.15",
|
|
88
88
|
"solid-js": "^1.6.2"
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|