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

Comparing version 0.0.14 to 0.0.15

dist/index.d.ts

 import { BaseProviderConfig, BaseSearchProviderConfig, search_i18n, category_i18n, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
-export const version = "0.0.14";
+export const version = "0.0.15";
 interface SearchProviderConfig extends BaseProviderConfig, BaseSearchProviderConfig {
@@ -28,2 +28,9 @@ locale?: search_i18n;
 }
+interface RecommendationRenderingConfig<T extends Display> extends BaseProductListingConfig {
+    recommendations: Promise<T[]>;
+    /**
+     * The product card function to use for rendering products.
+     */
+    productCard: DepictProductCard<T>;
+}
 /**
@@ -74,7 +81,7 @@ * Depict product card function to use for rendering products.
 export function SetupPageReplacer({ isPageToReplace, selectorToReplace, renderContent, renderMode, documentTitle, }: PageReplacerConfig): void;
-interface RecommendationSliderConfig<T extends Display> extends BaseProductListingConfig {
-    recommendations: Promise<T[]>;
-    productCard: DepictProductCard<T>;
+export function RecommendationSlider<T extends Display>({ recommendations, productCard, columnsAtSize, gridSpacing, }: RecommendationRenderingConfig<T>): Promise<HTMLElement>;
+interface RecommendationGridConfig<T extends Display> extends RecommendationRenderingConfig<T> {
+    maxRows?: number;
 }
-export function RecommendationSlider<T extends Display>({ recommendations, productCard, columnsAtSize, gridSpacing, }: RecommendationSliderConfig<T>): Promise<HTMLElement>;
+export function RecommendationGrid<T extends Display>({ recommendations, productCard, columnsAtSize, gridSpacing, maxRows, }: RecommendationGridConfig<T>): Promise<HTMLElement>;
 /** A placeholder text that can be used in place of a text that is loading. */
@@ -81,0 +88,0 @@ export function TextPlaceholder({ width, height }: TextPlaceholderProps): HTMLElement;

dist/main.js

@@ -18,2 +18,3 @@ var $kJ2V0$depictaiutilishared = require("@depict-ai/utilishared");
 $parcel$export(module.exports, "RecommendationSlider", () => $ecd5f9114a690359$export$82cfdc85a4d15688);
+$parcel$export(module.exports, "RecommendationGrid", () => $51540102ff67e854$export$b0a773486c1c2312);
 $parcel$export(module.exports, "TextPlaceholder", () => $d6ec044bac6efb39$export$89c6019e4baa40b1);
@@ -23,3 +24,3 @@ $parcel$export(module.exports, "ImagePlaceholder", () => $d6ec044bac6efb39$export$3f37af283f8fb843);
 $parcel$export(module.exports, "version", () => $98b48f9e57507434$export$83d89fbfd8236492);
-const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.14";
+const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.15";
 
@@ -154,6 +155,10 @@
                 product_card_template: (display)=>{
-                    const card = productCard(display);
-                    return Array.isArray(card) ? card : [
-                        card
-                    ];
+                    try {
+                        const card = productCard(display);
+                        return Array.isArray(card) ? card : [
+                            card
+                        ];
+                    } catch (e) {
+                        throw new (0, $kJ2V0$depictaiui.ProductCardError)(e);
+                    }
                 }
@@ -213,6 +218,10 @@ }));
                 product_card_template: (display)=>{
-                    const card = productCard(display);
-                    return Array.isArray(card) ? card : [
-                        card
-                    ];
+                    try {
+                        const card = productCard(display);
+                        return Array.isArray(card) ? card : [
+                            card
+                        ];
+                    } catch (e) {
+                        throw new (0, $kJ2V0$depictaiui.ProductCardError)(e);
+                    }
                 }
@@ -341,2 +350,82 @@ }));
 
+
+
+const $51540102ff67e854$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div class="depict recommendations"><div class="grid"></div></div>`, 4);
+async function $51540102ff67e854$export$b0a773486c1c2312(_ref) {
+    let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing , maxRows: maxRows  } = _ref;
+    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
+    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
+    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
+    const void_tenant = new (0, $kJ2V0$depictaiutilishared.Tenant)({
+        TENANT: "depict",
+        MARKET: "se",
+        get_product_id: ()=>"",
+        GA_ID: ""
+    });
+    // Todo: shared defaults with react-ui
+    const cols_at_size = (0, $kJ2V0$depictaiui.convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
+        [
+            4
+        ],
+        [
+            3,
+            1024
+        ],
+        [
+            2,
+            901
+        ]
+    ]);
+    const grid_spacing = gridSpacing ?? "2%";
+    const start_rows = maxRows ?? 2;
+    const grid_spacing_override = typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+    } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+    };
+    const rendered_grid = await (0, $kJ2V0$depictaiutilishared.RecommendationGrid)(void_tenant, {
+        recs: recommendations,
+        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+        template: (display, info)=>{
+            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
+            return Array.isArray(card) ? card : [
+                card
+            ];
+        },
+        type: "grid",
+        view_tracking: [],
+        click_tracking: []
+    }, {
+        container_selector: ".grid",
+        container_elements: [
+            $51540102ff67e854$var$_tmpl$.cloneNode(true)
+        ],
+        cols_at_size: cols_at_size,
+        ...grid_spacing_override,
+        // Todo: This shouldn't need to be async, and shouldn't need to get dimensions (those come from the productCard)
+        // @ts-ignore # Don't care right now
+        override_rec_renderer: await (0, $kJ2V0$depictaiutilishared.make_placeholder_rr)({
+            image_width: 1000,
+            image_height: 1000,
+            num_items: 10
+        }),
+        // Todo: make sure lazyfier does nothing, they will do their own since it's their product cards, right?
+        // Future goals: treeshake it the hell out of here.
+        lazyfier_options: {},
+        // Todo: Expose more as necessary
+        rows: {
+            start_rows: start_rows
+        }
+    }).catch((e)=>{
+        // Todo: The possible errors I see are the recommendations promise returning an empty array,
+        // or the product card template throwing. Those we report back to the developer somehow.
+        console.error(e);
+    });
+    // Todo: avoid all (or at least most) of this casting by making things sync
+    return rendered_grid.elements[0];
+}
+
+
+
 function $d6ec044bac6efb39$export$89c6019e4baa40b1(_ref) {
@@ -343,0 +432,0 @@ let { width: width , height: height  } = _ref;

dist/module.js

@@ -1,7 +0,7 @@
-import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns, Tenant as $gXbnb$Tenant, RecommendationSlider as $gXbnb$RecommendationSlider, make_placeholder_rr as $gXbnb$make_placeholder_rr, GenericSliderArrowButton as $gXbnb$GenericSliderArrowButton, Placeholder as $gXbnb$Placeholder, ContainedPlaceholderImage as $gXbnb$ContainedPlaceholderImage, observer as $gXbnb$observer} from "@depict-ai/utilishared";
-import {fetchDepictRecommendations as $b9ade2e31ecd6301$re_export$fetchDepictRecommendations, 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, CategoryPage as $gXbnb$CategoryPage, CategoryTitle as $gXbnb$CategoryTitle, PageReplacer as $gXbnb$PageReplacer, convert_sdk_cols_at_size_to_layout as $gXbnb$convert_sdk_cols_at_size_to_layout} from "@depict-ai/ui";
+import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns, Tenant as $gXbnb$Tenant, RecommendationSlider as $gXbnb$RecommendationSlider, make_placeholder_rr as $gXbnb$make_placeholder_rr, GenericSliderArrowButton as $gXbnb$GenericSliderArrowButton, RecommendationGrid as $gXbnb$RecommendationGrid, Placeholder as $gXbnb$Placeholder, ContainedPlaceholderImage as $gXbnb$ContainedPlaceholderImage, observer as $gXbnb$observer} from "@depict-ai/utilishared";
+import {fetchDepictRecommendations as $b9ade2e31ecd6301$re_export$fetchDepictRecommendations, DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, ProductCardError as $gXbnb$ProductCardError, SearchField as $gXbnb$SearchField, CategoryPage as $gXbnb$CategoryPage, CategoryTitle as $gXbnb$CategoryTitle, PageReplacer as $gXbnb$PageReplacer, convert_sdk_cols_at_size_to_layout as $gXbnb$convert_sdk_cols_at_size_to_layout} 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.14";
+const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.15";
 
@@ -136,6 +136,10 @@
                 product_card_template: (display)=>{
-                    const card = productCard(display);
-                    return Array.isArray(card) ? card : [
-                        card
-                    ];
+                    try {
+                        const card = productCard(display);
+                        return Array.isArray(card) ? card : [
+                            card
+                        ];
+                    } catch (e) {
+                        throw new (0, $gXbnb$ProductCardError)(e);
+                    }
                 }
@@ -195,6 +199,10 @@ }));
                 product_card_template: (display)=>{
-                    const card = productCard(display);
-                    return Array.isArray(card) ? card : [
-                        card
-                    ];
+                    try {
+                        const card = productCard(display);
+                        return Array.isArray(card) ? card : [
+                            card
+                        ];
+                    } catch (e) {
+                        throw new (0, $gXbnb$ProductCardError)(e);
+                    }
                 }
@@ -323,2 +331,82 @@ }));
 
+
+
+const $4c2205960ebe8b64$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div class="depict recommendations"><div class="grid"></div></div>`, 4);
+async function $4c2205960ebe8b64$export$b0a773486c1c2312(_ref) {
+    let { recommendations: recommendations , productCard: productCard , columnsAtSize: columnsAtSize , gridSpacing: gridSpacing , maxRows: maxRows  } = _ref;
+    // Todo: Avoid setting the tenant and market here. The only thing we really need it for at this point, given that we already have the recommendations promise,
+    // is having the values to send for tracking. What we could do instead is to set the data-recommendation-id attribute on the rendered product cards,
+    // then activate DPC with auto tracking. Because we will need DPC active regardless, to get A2C + purchase tracking. Ping Sverre about the plans for this.
+    const void_tenant = new (0, $gXbnb$Tenant)({
+        TENANT: "depict",
+        MARKET: "se",
+        get_product_id: ()=>"",
+        GA_ID: ""
+    });
+    // Todo: shared defaults with react-ui
+    const cols_at_size = (0, $gXbnb$convert_sdk_cols_at_size_to_layout)(columnsAtSize ?? [
+        [
+            4
+        ],
+        [
+            3,
+            1024
+        ],
+        [
+            2,
+            901
+        ]
+    ]);
+    const grid_spacing = gridSpacing ?? "2%";
+    const start_rows = maxRows ?? 2;
+    const grid_spacing_override = typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+    } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+    };
+    const rendered_grid = await (0, $gXbnb$RecommendationGrid)(void_tenant, {
+        recs: recommendations,
+        // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+        template: (display, info)=>{
+            const card = productCard(info.rendering_options.type == "placeholder" ? null : display);
+            return Array.isArray(card) ? card : [
+                card
+            ];
+        },
+        type: "grid",
+        view_tracking: [],
+        click_tracking: []
+    }, {
+        container_selector: ".grid",
+        container_elements: [
+            $4c2205960ebe8b64$var$_tmpl$.cloneNode(true)
+        ],
+        cols_at_size: cols_at_size,
+        ...grid_spacing_override,
+        // Todo: This shouldn't need to be async, and shouldn't need to get dimensions (those come from the productCard)
+        // @ts-ignore # Don't care right now
+        override_rec_renderer: await (0, $gXbnb$make_placeholder_rr)({
+            image_width: 1000,
+            image_height: 1000,
+            num_items: 10
+        }),
+        // Todo: make sure lazyfier does nothing, they will do their own since it's their product cards, right?
+        // Future goals: treeshake it the hell out of here.
+        lazyfier_options: {},
+        // Todo: Expose more as necessary
+        rows: {
+            start_rows: start_rows
+        }
+    }).catch((e)=>{
+        // Todo: The possible errors I see are the recommendations promise returning an empty array,
+        // or the product card template throwing. Those we report back to the developer somehow.
+        console.error(e);
+    });
+    // Todo: avoid all (or at least most) of this casting by making things sync
+    return rendered_grid.elements[0];
+}
+
+
+
 function $fca29229130cb86d$export$89c6019e4baa40b1(_ref) {
@@ -354,2 +442,2 @@ let { width: width , height: height  } = _ref;
 
-export {$2d74c140fd7068d0$export$5d13af1f32ae532e as DepictCategoryProvider, $140f992baa1081ff$export$9aa84a6b7bde7bae as DepictSearchProvider, $0fcd5f18160cc39d$export$a54ec244c8863715 as SearchPage, $bae8104bbb62fa4a$export$b94867ecbd698f21 as SearchField, $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d as CategoryPage, $0821002aa3b2b433$export$64e18aecaa12222c as SetupPageReplacer, $b9ade2e31ecd6301$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $88e8b83d93cbcc2a$export$82cfdc85a4d15688 as RecommendationSlider, $fca29229130cb86d$export$89c6019e4baa40b1 as TextPlaceholder, $fca29229130cb86d$export$3f37af283f8fb843 as ImagePlaceholder, $ffa68e12dba2c222$export$7278f0e6b349961b as onExistsObserver, $384f36a64c74679e$export$83d89fbfd8236492 as version};
+export {$2d74c140fd7068d0$export$5d13af1f32ae532e as DepictCategoryProvider, $140f992baa1081ff$export$9aa84a6b7bde7bae as DepictSearchProvider, $0fcd5f18160cc39d$export$a54ec244c8863715 as SearchPage, $bae8104bbb62fa4a$export$b94867ecbd698f21 as SearchField, $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d as CategoryPage, $0821002aa3b2b433$export$64e18aecaa12222c as SetupPageReplacer, $b9ade2e31ecd6301$re_export$fetchDepictRecommendations as fetchDepictRecommendations, $88e8b83d93cbcc2a$export$82cfdc85a4d15688 as RecommendationSlider, $4c2205960ebe8b64$export$b0a773486c1c2312 as RecommendationGrid, $fca29229130cb86d$export$89c6019e4baa40b1 as TextPlaceholder, $fca29229130cb86d$export$3f37af283f8fb843 as ImagePlaceholder, $ffa68e12dba2c222$export$7278f0e6b349961b as onExistsObserver, $384f36a64c74679e$export$83d89fbfd8236492 as version};

package.json

 {
   "name": "@depict-ai/js-ui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "packageManager": "yarn@3.2.2",
@@ -12,2 +12,3 @@ "source": "src/index.ts",
   "license": "MIT",
+  "description": "Javascript flavour of the Depict UI library.",
   "publishConfig": {
@@ -60,5 +61,5 @@ "access": "public"
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.26",
-    "@depict-ai/ui": "^0.0.65",
-    "@depict-ai/utilishared": "^0.0.62",
+    "@depict-ai/plp-styling": "^0.0.27",
+    "@depict-ai/ui": "^0.0.66",
+    "@depict-ai/utilishared": "^0.0.63",
     "solid-js": "^1.6.2"
@@ -65,0 +66,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

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

102702

increased by8.02%

Lines of code

939

increased by23.07%

Dependency changes

• + Added@depict-ai/plp-styling@0.0.27(transitive)

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

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

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

• - Removed@depict-ai/plp-styling@0.0.26(transitive)

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

• - Removed@depict-ai/ui@0.0.65(transitive)

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

• Updated@depict-ai/plp-styling@^0.0.27

• Updated@depict-ai/ui@^0.0.66

• Updated@depict-ai/utilishared@^0.0.63