@depict-ai/js-ui - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

@@ -1,1 +0,56 @@
-export const test = "Can you see this?";
+import { category_i18n, DepictAPI, DepictCategory as _DepictCategory1, DepictBaseConfig, DepictSearchConfig, search_i18n, BasePLPConfig, BaseSearchPageConfig } from "@depict-ai/ui";
+import { Display } from "@depict-ai/utilishared";
+export const version = "0.0.2";
+type JSDepictCategoryConstructorOptions = {
+    market: string;
+    merchant: string;
+    localization: category_i18n;
+    api?: DepictAPI;
+};
+export interface DepictCategory extends _DepictCategory1 {
+}
+export class DepictCategory extends _DepictCategory1 {
+    #private;
+    get category_id(): _DepictCategory1["category_id"];
+    set category_id(id: _DepictCategory1["category_id"]);
+    constructor(options: JSDepictCategoryConstructorOptions);
+}
+interface JSDepictBaseConfig extends DepictBaseConfig {
+}
+interface JSDepictSearchConfig extends DepictSearchConfig {
+    locale?: search_i18n;
+}
+export class DepictSearch<T extends Display> {
+    #private;
+    openModal(alignerElement?: HTMLElement): void;
+    constructor(options: JSDepictBaseConfig & JSDepictSearchConfig);
+}
+interface PLPConfig<T extends Display> extends BasePLPConfig {
+    /**
+     * The product card function to use for rendering products.
+     */
+    productCard: DepictProductCard<T>;
+}
+/**
+ * Depict product card function to use for rendering products.
+ */
+type DepictProductCard<T extends Display> = (display: T | null) => HTMLElement | HTMLElement[];
+interface JSDepictSearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
+    depictSearch: DepictSearch<T>;
+}
+export function DepictSearchPage<T extends Display>({ depictSearch, includeInputField, gridSpacing, columnsAtSize, productCard, }: JSDepictSearchPageConfig<T>): HTMLElement;
+interface JSDepictSearchFieldConfig<T extends Display> {
+    depictSearch: DepictSearch<T>;
+    /**
+     * A DOM element that the modal should be aligned to.
+     *
+     * The top of the modal will be aligned to the top of the element.
+     *
+     * The height of the search field in the modal will be the same as the height of the element.
+     * If not provided, the modal will be aligned to the search field itself.
+     */
+    alignerRef?: HTMLElement;
+}
+export function DepictSearchField<T extends Display>({ depictSearch, alignerRef, }: JSDepictSearchFieldConfig<T>): HTMLElement;
+export { QuickLinks, BreadCrumbs, CategoryPage as DepictCategoryPage, CategoryTitle, embedded_num_products as EmbeddedNumProducts, PageReplacer, } from "@depict-ai/ui";
+export type { SDKGridSpacing, SDKColsAtSize } from "@depict-ai/ui";

dist/main.js

@@ -0,1 +1,6 @@
+var $kJ2V0$depictaiutilishared = require("@depict-ai/utilishared");
+var $kJ2V0$depictaiui = require("@depict-ai/ui");
+var $kJ2V0$depictaiuilocales = require("@depict-ai/ui/locales");
+var $kJ2V0$solidjsweb = require("solid-js/web");
+
 function $parcel$export(e, n, v, s) {
@@ -5,5 +10,166 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 
-$parcel$export(module.exports, "test", () => $05c934aa8b1a01c6$export$e0969da9b8fb378d);
-const $05c934aa8b1a01c6$export$e0969da9b8fb378d = "Can you see this?";
+$parcel$export(module.exports, "DepictCategory", () => $5d73daadc1ecf2eb$export$a37bc0da76a8b4a3);
+$parcel$export(module.exports, "DepictSearch", () => $ec6586e193d9e04c$export$3c9b3f63af0b0eda);
+$parcel$export(module.exports, "DepictSearchPage", () => $845246e31bc6ced7$export$96f2e505ff09cc14);
+$parcel$export(module.exports, "DepictSearchField", () => $d67bcb30c03ff910$export$92c234cce2fb32b0);
+$parcel$export(module.exports, "QuickLinks", () => $05c934aa8b1a01c6$re_export$QuickLinks);
+$parcel$export(module.exports, "BreadCrumbs", () => $05c934aa8b1a01c6$re_export$BreadCrumbs);
+$parcel$export(module.exports, "DepictCategoryPage", () => $05c934aa8b1a01c6$re_export$DepictCategoryPage);
+$parcel$export(module.exports, "CategoryTitle", () => $05c934aa8b1a01c6$re_export$CategoryTitle);
+$parcel$export(module.exports, "EmbeddedNumProducts", () => $05c934aa8b1a01c6$re_export$EmbeddedNumProducts);
+$parcel$export(module.exports, "PageReplacer", () => $05c934aa8b1a01c6$re_export$PageReplacer);
+$parcel$export(module.exports, "version", () => $98b48f9e57507434$export$83d89fbfd8236492);
+const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.2";
 
 
+
+
+
+class $5d73daadc1ecf2eb$export$a37bc0da76a8b4a3 extends (0, $kJ2V0$depictaiui.DepictCategory) {
+    #original_category_id_descriptor = Object.getOwnPropertyDescriptor((0, $kJ2V0$depictaiui.DepictCategory).prototype, "category_id");
+    get category_id() {
+        return this.#original_category_id_descriptor.get.call(this);
+    }
+    set category_id(id) {
+        // When they set a category id, save it in the state, so we can restore it on back/forward
+        const old_state = history.state;
+        if (old_state.category_current_query_id !== id) history.replaceState({
+            ...old_state,
+            category_current_query_id: id
+        }, "", location.href);
+        this.#original_category_id_descriptor.set.call(this, id);
+    }
+    constructor(options){
+        super({
+            // Navigate between different categories using `history.pushState` by default, to avoid costly full page loads on server side rendered sites
+            on_navigation: (url, _event, _ref)=>{
+                let { query_id: query_id , page_url: page_url  } = _ref;
+                if (!query_id) {
+                    location.href = page_url;
+                    return;
+                }
+                // When we push an url, also save the category id in the state, so we can restore it on back/forward
+                history.pushState({
+                    ...history.state,
+                    category_current_query_id: query_id
+                }, "", url);
+            },
+            ...options
+        });
+        (0, $kJ2V0$depictaiutilishared.catchify)(async ()=>{
+            for await (const _ of (0, $kJ2V0$depictaiutilishared.href_change_ipns)){
+                // If someone pushes a new page with a new id, or we go back/forward, update the category id
+                const id_in_state = history.state.category_current_query_id;
+                if (id_in_state && id_in_state !== this.category_id) // Don't actually call the setter on (this), because we don't want to update the state
+                this.#original_category_id_descriptor.set.call(this, id_in_state);
+            }
+        })();
+    }
+}
+
+
+
+
+// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
+// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
+// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
+const $54abd1d4301187ef$export$981972f5b84bc3cb = new WeakMap();
+
+
+class $ec6586e193d9e04c$export$3c9b3f63af0b0eda {
+    #search;
+    openModal(alignerElement) {
+        if (alignerElement) (0, $kJ2V0$depictaiui.open_modal_with_alignment)({
+            location: "aligned",
+            element: alignerElement,
+            search: this.#search
+        });
+        else (0, $kJ2V0$depictaiui.open_modal_with_alignment)({
+            location: "centered",
+            search: this.#search
+        });
+    }
+    // Todo: Expose changing merchant and market etc, same as react-ui.
+    constructor(options){
+        const { market: market , merchant: merchant , locale: locale , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , searchPagePath: searchPagePath  } = options;
+        const usedLocale = locale ?? (0, $kJ2V0$depictaiuilocales.en);
+        this.#search = new (0, $kJ2V0$depictaiui.DepictSearch)({
+            market: market,
+            merchant: merchant,
+            search_query_url_param_name: urlParamName,
+            enable_category_suggestions: enableCategorySuggestions ?? false,
+            // default false
+            url_transformer: (url)=>url.pathname = searchPagePath,
+            localization: usedLocale
+        });
+        (0, $54abd1d4301187ef$export$981972f5b84bc3cb).set(this, this.#search);
+    }
+}
+
+
+
+
+
+
+const $845246e31bc6ced7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
+function $845246e31bc6ced7$export$96f2e505ff09cc14(_ref) {
+    let { depictSearch: depictSearch , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
+    // Todo: get rid of wrapper div by making Searchpage just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $845246e31bc6ced7$var$_tmpl$.cloneNode(true);
+        (0, $kJ2V0$solidjsweb.insert)(_el$, ()=>(0, $kJ2V0$depictaiui.SearchPage)({
+                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(depictSearch),
+                include_input_field: includeInputField,
+                // Todo: shared defaults with react-ui
+                cols_at_size: columnsAtSize ?? [
+                    [
+                        4
+                    ],
+                    [
+                        3,
+                        1024
+                    ],
+                    [
+                        2,
+                        901
+                    ]
+                ],
+                grid_spacing: gridSpacing ?? "2%",
+                // Todo: Do we need this?
+                get_product_id: ()=>"",
+                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+                product_card_template: (display)=>{
+                    const card = productCard(display);
+                    return Array.isArray(card) ? card : [
+                        card
+                    ];
+                }
+            }));
+        return _el$;
+    })();
+}
+
+
+
+
+
+
+const $d67bcb30c03ff910$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
+function $d67bcb30c03ff910$export$92c234cce2fb32b0(_ref) {
+    let { depictSearch: depictSearch , alignerRef: alignerRef  } = _ref;
+    // Todo: get rid of wrapper div by making SearchField just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $d67bcb30c03ff910$var$_tmpl$.cloneNode(true);
+        (0, $kJ2V0$solidjsweb.insert)(_el$, ()=>(0, $kJ2V0$depictaiui.SearchField)({
+                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(depictSearch),
+                aligner_ref: alignerRef
+            }));
+        return _el$;
+    })();
+}
+
+
+
+(0, $kJ2V0$depictaiutilishared.add_to_version_info)("js-ui", (0, $98b48f9e57507434$export$83d89fbfd8236492));
+
+

dist/module.js

@@ -1,4 +0,160 @@
-const $b9ade2e31ecd6301$export$e0969da9b8fb378d = "Can you see this?";
+import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns} from "@depict-ai/utilishared";
+import {QuickLinks as $b9ade2e31ecd6301$re_export$QuickLinks, BreadCrumbs as $b9ade2e31ecd6301$re_export$BreadCrumbs, CategoryPage as $b9ade2e31ecd6301$re_export$DepictCategoryPage, CategoryTitle as $b9ade2e31ecd6301$re_export$CategoryTitle, embedded_num_products as $b9ade2e31ecd6301$re_export$EmbeddedNumProducts, PageReplacer as $b9ade2e31ecd6301$re_export$PageReplacer, DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, SearchField as $gXbnb$SearchField} from "@depict-ai/ui";
+import {en as $gXbnb$en} from "@depict-ai/ui/locales";
+import {template as $gXbnb$template, insert as $gXbnb$insert} from "solid-js/web";
 
+const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.2";
 
-export {$b9ade2e31ecd6301$export$e0969da9b8fb378d as test};
+
+
+
+
+class $c5a45273c059819b$export$a37bc0da76a8b4a3 extends (0, $gXbnb$DepictCategory) {
+    #original_category_id_descriptor = Object.getOwnPropertyDescriptor((0, $gXbnb$DepictCategory).prototype, "category_id");
+    get category_id() {
+        return this.#original_category_id_descriptor.get.call(this);
+    }
+    set category_id(id) {
+        // When they set a category id, save it in the state, so we can restore it on back/forward
+        const old_state = history.state;
+        if (old_state.category_current_query_id !== id) history.replaceState({
+            ...old_state,
+            category_current_query_id: id
+        }, "", location.href);
+        this.#original_category_id_descriptor.set.call(this, id);
+    }
+    constructor(options){
+        super({
+            // Navigate between different categories using `history.pushState` by default, to avoid costly full page loads on server side rendered sites
+            on_navigation: (url, _event, _ref)=>{
+                let { query_id: query_id , page_url: page_url  } = _ref;
+                if (!query_id) {
+                    location.href = page_url;
+                    return;
+                }
+                // When we push an url, also save the category id in the state, so we can restore it on back/forward
+                history.pushState({
+                    ...history.state,
+                    category_current_query_id: query_id
+                }, "", url);
+            },
+            ...options
+        });
+        (0, $gXbnb$catchify)(async ()=>{
+            for await (const _ of (0, $gXbnb$href_change_ipns)){
+                // If someone pushes a new page with a new id, or we go back/forward, update the category id
+                const id_in_state = history.state.category_current_query_id;
+                if (id_in_state && id_in_state !== this.category_id) // Don't actually call the setter on (this), because we don't want to update the state
+                this.#original_category_id_descriptor.set.call(this, id_in_state);
+            }
+        })();
+    }
+}
+
+
+
+
+// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
+// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
+// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
+const $d240dc94bec9dea4$export$981972f5b84bc3cb = new WeakMap();
+
+
+class $1bb8e3facdfd455e$export$3c9b3f63af0b0eda {
+    #search;
+    openModal(alignerElement) {
+        if (alignerElement) (0, $gXbnb$open_modal_with_alignment)({
+            location: "aligned",
+            element: alignerElement,
+            search: this.#search
+        });
+        else (0, $gXbnb$open_modal_with_alignment)({
+            location: "centered",
+            search: this.#search
+        });
+    }
+    // Todo: Expose changing merchant and market etc, same as react-ui.
+    constructor(options){
+        const { market: market , merchant: merchant , locale: locale , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions , searchPagePath: searchPagePath  } = options;
+        const usedLocale = locale ?? (0, $gXbnb$en);
+        this.#search = new (0, $gXbnb$DepictSearch)({
+            market: market,
+            merchant: merchant,
+            search_query_url_param_name: urlParamName,
+            enable_category_suggestions: enableCategorySuggestions ?? false,
+            // default false
+            url_transformer: (url)=>url.pathname = searchPagePath,
+            localization: usedLocale
+        });
+        (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).set(this, this.#search);
+    }
+}
+
+
+
+
+
+
+const $2bf495ce71b25c5f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
+function $2bf495ce71b25c5f$export$96f2e505ff09cc14(_ref) {
+    let { depictSearch: depictSearch , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
+    // Todo: get rid of wrapper div by making Searchpage just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $2bf495ce71b25c5f$var$_tmpl$.cloneNode(true);
+        (0, $gXbnb$insert)(_el$, ()=>(0, $gXbnb$SearchPage)({
+                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(depictSearch),
+                include_input_field: includeInputField,
+                // Todo: shared defaults with react-ui
+                cols_at_size: columnsAtSize ?? [
+                    [
+                        4
+                    ],
+                    [
+                        3,
+                        1024
+                    ],
+                    [
+                        2,
+                        901
+                    ]
+                ],
+                grid_spacing: gridSpacing ?? "2%",
+                // Todo: Do we need this?
+                get_product_id: ()=>"",
+                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+                product_card_template: (display)=>{
+                    const card = productCard(display);
+                    return Array.isArray(card) ? card : [
+                        card
+                    ];
+                }
+            }));
+        return _el$;
+    })();
+}
+
+
+
+
+
+
+const $e4c829b9296b4ae5$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
+function $e4c829b9296b4ae5$export$92c234cce2fb32b0(_ref) {
+    let { depictSearch: depictSearch , alignerRef: alignerRef  } = _ref;
+    // Todo: get rid of wrapper div by making SearchField just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $e4c829b9296b4ae5$var$_tmpl$.cloneNode(true);
+        (0, $gXbnb$insert)(_el$, ()=>(0, $gXbnb$SearchField)({
+                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(depictSearch),
+                aligner_ref: alignerRef
+            }));
+        return _el$;
+    })();
+}
+
+
+
+(0, $gXbnb$add_to_version_info)("js-ui", (0, $384f36a64c74679e$export$83d89fbfd8236492));
+
+
+export {$c5a45273c059819b$export$a37bc0da76a8b4a3 as DepictCategory, $1bb8e3facdfd455e$export$3c9b3f63af0b0eda as DepictSearch, $2bf495ce71b25c5f$export$96f2e505ff09cc14 as DepictSearchPage, $e4c829b9296b4ae5$export$92c234cce2fb32b0 as DepictSearchField, $b9ade2e31ecd6301$re_export$QuickLinks as QuickLinks, $b9ade2e31ecd6301$re_export$BreadCrumbs as BreadCrumbs, $b9ade2e31ecd6301$re_export$DepictCategoryPage as DepictCategoryPage, $b9ade2e31ecd6301$re_export$CategoryTitle as CategoryTitle, $b9ade2e31ecd6301$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $b9ade2e31ecd6301$re_export$PageReplacer as PageReplacer, $384f36a64c74679e$export$83d89fbfd8236492 as version};

package.json

 {
   "name": "@depict-ai/js-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "yarn@3.2.2",
@@ -40,7 +40,13 @@ "source": [
       "default": "./dist/module.js"
+    },
+    "./locales": {
+      "types": "./locales/index.d.ts",
+      "import": "./locales/index.js",
+      "require": "./locales/require.js",
+      "default": "./locales/index.js"
     }
   },
   "dependencies": {
-    "@depict-ai/types": "^0.0.3",
-    "@depict-ai/utilishared": "^0.0.48",
+    "@depict-ai/ui": "^0.0.54",
+    "@depict-ai/utilishared": "^0.0.51",
     "solid-js": "^1.6.2"
@@ -47,0 +53,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20462

increased by883.75%

Number of package files

8

increased by60%

Lines of code

347

increased by2068.75%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@depict-ai/ui@^0.0.54

• + Added@depict-ai/types@0.0.6(transitive)

• + Added@depict-ai/ui@0.0.54(transitive)

• + Added@depict-ai/utilishared@0.0.51(transitive)

• - Removed@depict-ai/types@^0.0.3

• - Removed@depict-ai/types@0.0.3(transitive)

• - Removed@depict-ai/utilishared@0.0.48(transitive)

• Updated@depict-ai/utilishared@^0.0.51