@depict-ai/react-ui 0.0.2 → 0.0.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Display } from "@depict-ai/ui";
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 export interface SearchConfig {
     merchant: string;
     market: string;
@@ -7,6 +7,5 @@ export interface SearchConfig {
 export interface SearchPageConfig {
     productCardFactory: (display: Display) => ReactNode;
 }
-export function DepictProvider(opts: SearchConfig): void;
+export function DepictProvider({ children, merchant, market }: PropsWithChildren<SearchConfig>): ReactNode;
 export function DepictSearchPage(opts: SearchPageConfig): any;
-export function openModal(): void;

package/dist/main.js

@@ -1,10 +1,8 @@
-var $lgFzj$reactdom = require("react-dom");
 var $lgFzj$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
-var $lgFzj$depictaiui = require("@depict-ai/ui");
 var $lgFzj$react = require("react");
+var $lgFzj$depictaiui = require("@depict-ai/ui");
 var $lgFzj$reactjsxruntime = require("react/jsx-runtime");
 var $lgFzj$solidjs = require("solid-js");
-var $lgFzj$depictaiutilishared = require("@depict-ai/utilishared");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -12,143 +10,34 @@ function $parcel$export(e, n, v, s) {
 
 $parcel$export(module.exports, "DepictProvider", () => $6abe21f0d440de7c$export$9fac37a9c21c2f3b);
 $parcel$export(module.exports, "DepictSearchPage", () => $6abe21f0d440de7c$export$210723f5a54a7028);
-$parcel$export(module.exports, "openModal", () => $6abe21f0d440de7c$export$a7f6cffb6b8ba11c);
-
-
 
 
 
 
-const $ed09819de7bb86d1$export$99ae278b8f3607a0 = (opts)=>{
-    const path = "/search";
-    const is_page_ = (url)=>url.pathname == path;
-    const api = new (0, $lgFzj$depictaiui.DepictAPI)();
-    const search = new (0, $lgFzj$depictaiui.Search)({
-        depict_api_: api,
-        page_replacer_ref_: ()=>{},
-        url_transformer_: (url)=>{
-            url.pathname = path;
-        },
-        alternative_query_submitter_for_spas_: (param_name, new_query, url_transformer)=>{
-            const url = new URL(location.href);
-            const was_page = is_page_(url);
-            url.searchParams.set(param_name, new_query);
-            url_transformer?.(url);
-            window.next.router.push({
-                "pathname": path,
-                "query": {
-                    [param_name]: new_query
-                }
-            }, url.pathname + url.search + url.hash, {
-                shallow: was_page,
-                scroll: true
-            });
-        },
-        modal_options_: {
-            render_instant_card_: opts.instantCardFactory,
-            render_instant_card_placeholder_: (0, $lgFzj$depictaiui.DefaultInstantCardPlaceholder),
-            disable_scrolling_: false
-        },
-        search_page_: {
-            get_product_id_: ()=>"",
-            search_query_param_name_: "q",
-            is_search_page_: is_page_,
-            include_input_field_: true,
-            make_category_suggestion_card_: false,
-            slider_arrow_button_: (0, $lgFzj$depictaiutilishared.GenericSliderArrowButton)({
-                height_: 12,
-                width_: 6.46
-            }),
-            page_title_: "Search page",
-            layout_options_: {
-                cols_at_size: [
-                    [
-                        4,
-                        "1024px"
-                    ],
-                    [
-                        3,
-                        "901px",
-                        "1023px"
-                    ],
-                    [
-                        2,
-                        "",
-                        "900px"
-                    ]
-                ],
-                grid_spacing: "10px"
-            },
-            rr_options_: {
-                template: opts.productCardFactory
-            }
-        }
-    });
-    search.tenant_ = opts.merchant;
-    search.market_ = opts.market;
-    search.locale_ = {
-        ...(0, $lgFzj$depictaiui.swedish_search_translation),
-        price_formatting_: {
-            pre_: "€ ",
-            post_: "",
-            decimal_places_delimiter_: ",",
-            thousands_delimiter_: " ",
-            places_after_comma_: 2
-        }
-    };
-    return {
-        search: search,
-        controls: search.boot_()
-    };
-};
-
-
-
 
-let $6abe21f0d440de7c$var$search;
-let $6abe21f0d440de7c$var$controls;
-let $6abe21f0d440de7c$var$active_render_card;
-const $6abe21f0d440de7c$var$wrapped_render_card = (d)=>$6abe21f0d440de7c$var$active_render_card(d);
-function $6abe21f0d440de7c$export$9fac37a9c21c2f3b(opts) {
-    console.log("DEPICTPROVIDER CLIENT");
-    if (!$6abe21f0d440de7c$var$search) {
-        const init = (0, $ed09819de7bb86d1$export$99ae278b8f3607a0)({
-            merchant: opts.merchant,
-            market: opts.market,
-            productCardFactory: $6abe21f0d440de7c$var$wrapped_render_card,
-            instantCardFactory: (0, $lgFzj$depictaiui.UniversalInstantCard)
-        });
-        $6abe21f0d440de7c$var$search = init.search;
-        $6abe21f0d440de7c$var$controls = init.controls;
-    }
+function $6abe21f0d440de7c$export$9fac37a9c21c2f3b({ children: children , merchant: merchant , market: market  }) {
+    return children;
 }
 function $6abe21f0d440de7c$var$DepictSearchPageContent(opts) {
     const [bridge, setBridge] = (0, $lgFzj$react.useState)(null);
-    const [portals, set_portals] = (0, $lgFzj$react.useState)([]);
     (0, $lgFzj$react.useEffect)(()=>{
-        const component_portals = [];
-        $6abe21f0d440de7c$var$active_render_card = (display)=>{
-            const solid_container = (0, $lgFzj$depictaiui.SolidCardContainer)();
-            const reactProductCard = opts.productCardFactory(display);
-            const portal = $lgFzj$reactdom.createPortal(reactProductCard, solid_container.ref);
-            component_portals.push(portal);
-            set_portals([
-                ...component_portals
-            ]);
-            return [
-                solid_container.el
-            ];
-        };
-        const el = $6abe21f0d440de7c$var$search.render_;
-        const solidBridge = (0, $lgFzj$reactjsxruntime.jsx)((0, $lgFzj$depictaireactsolidbridge.ReactToSolidBridge), {
-            solidComponent: ()=>el,
-            key: Math.random()
-        });
-        setBridge(solidBridge);
+        if (!bridge) {
+            const [title] = (0, $lgFzj$solidjs.createSignal)("Category");
+            const solid_element = (0, $lgFzj$depictaiui.CategoryTitle)({
+                category_title_: title,
+                product_count_: 0
+            });
+            const solid_bridge = (0, $lgFzj$reactjsxruntime.jsx)((0, $lgFzj$depictaireactsolidbridge.ReactToSolidBridge), {
+                solidComponent: ()=>solid_element,
+                key: Math.random()
+            });
+            setBridge(solid_bridge);
+        }
     }, []);
-    return bridge ? (0, $lgFzj$react.createElement)("div", {}, [
-        bridge,
-        ...portals
+    return bridge ? (0, $lgFzj$react.createElement)("div", {
+        className: "solid_bridge"
+    }, [
+        bridge
     ]) : "";
 }
 function $6abe21f0d440de7c$export$210723f5a54a7028(opts) {
@@ -156,33 +45,5 @@ function $6abe21f0d440de7c$export$210723f5a54a7028(opts) {
         children: (0, $lgFzj$reactjsxruntime.jsx)($6abe21f0d440de7c$var$DepictSearchPageContent, opts)
     });
 }
-let $6abe21f0d440de7c$var$sheet;
-function $6abe21f0d440de7c$export$a7f6cffb6b8ba11c() {
-    if (!$6abe21f0d440de7c$var$controls) {
-        console.error("No active search header component on the page!");
-        return;
-    }
-    $6abe21f0d440de7c$var$controls.then((c)=>{
-        const style_props_ = (0, $lgFzj$solidjs.createSignal)({
-            position: "fixed",
-            top: 0
-        });
-        /*if (header?.clientHeight) {
-      let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${header?.clientHeight}px; }`;
-      styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${header?.clientHeight}px; }`;
-       if (!sheet) {
-        const style = document.createElement("style");
-        style.append(styles);
-        document.head.appendChild(style);
-      }
-    }*/ const class_list_ = (0, $lgFzj$solidjs.createMemo)(()=>({
-                in_header: true
-            }));
-        c.open_modal_({
-            style_props_: style_props_,
-            class_list_: class_list_
-        });
-    });
-}
 
 

package/dist/module.js

@@ -1 +1,44 @@
-import{createPortal as e}from"react-dom";import{ReactToSolidBridge as a,ReactToSolidBridgeProvider as r}from"@depict-ai/react-solid-bridge";import{UniversalInstantCard as t,SolidCardContainer as o,DepictAPI as s,Search as n,DefaultInstantCardPlaceholder as i,swedish_search_translation as c}from"@depict-ai/ui";import{useState as _,useEffect as d,createElement as p}from"react";import{jsx as l}from"react/jsx-runtime";import{createSignal as m,createMemo as h}from"solid-js";import{GenericSliderArrowButton as u}from"@depict-ai/utilishared";const f=e=>{const a="/search",r=e=>e.pathname==a,t=new s,o=new n({depict_api_:t,page_replacer_ref_:()=>{},url_transformer_:e=>{e.pathname=a},alternative_query_submitter_for_spas_:(e,t,o)=>{const s=new URL(location.href),n=r(s);s.searchParams.set(e,t),o?.(s),window.next.router.push({pathname:a,query:{[e]:t}},s.pathname+s.search+s.hash,{shallow:n,scroll:!0})},modal_options_:{render_instant_card_:e.instantCardFactory,render_instant_card_placeholder_:i,disable_scrolling_:!1},search_page_:{get_product_id_:()=>"",search_query_param_name_:"q",is_search_page_:r,include_input_field_:!0,make_category_suggestion_card_:!1,slider_arrow_button_:u({height_:12,width_:6.46}),page_title_:"Search page",layout_options_:{cols_at_size:[[4,"1024px"],[3,"901px","1023px"],[2,"","900px"]],grid_spacing:"10px"},rr_options_:{template:e.productCardFactory}}});return o.tenant_=e.merchant,o.market_=e.market,o.locale_={...c,price_formatting_:{pre_:"€ ",post_:"",decimal_places_delimiter_:",",thousands_delimiter_:" ",places_after_comma_:2}},{search:o,controls:o.boot_()}};let g,y,C;const w=e=>C(e);function x(e){if(console.log("DEPICTPROVIDER CLIENT"),!g){const a=f({merchant:e.merchant,market:e.market,productCardFactory:w,instantCardFactory:t});g=a.search,y=a.controls}}function P(r){const[t,s]=_(null),[n,i]=_([]);return d((()=>{const t=[];C=a=>{const s=o(),n=r.productCardFactory(a),c=e(n,s.ref);return t.push(c),i([...t]),[s.el]};const n=g.render_,c=l(a,{solidComponent:()=>n,key:Math.random()});s(c)}),[]),t?p("div",{},[t,...n]):""}function S(e){return l(r,{children:l(P,e)})}function k(){y?y.then((e=>{const a=m({position:"fixed",top:0}),r=h((()=>({in_header:!0})));e.open_modal_({style_props_:a,class_list_:r})})):console.error("No active search header component on the page!")}export{x as DepictProvider,S as DepictSearchPage,k as openModal};
+import {ReactToSolidBridge as $5DrVA$ReactToSolidBridge, ReactToSolidBridgeProvider as $5DrVA$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
+import {useState as $5DrVA$useState, useEffect as $5DrVA$useEffect, createElement as $5DrVA$createElement} from "react";
+import {CategoryTitle as $5DrVA$CategoryTitle} from "@depict-ai/ui";
+import {jsx as $5DrVA$jsx} from "react/jsx-runtime";
+import {createSignal as $5DrVA$createSignal} from "solid-js";
+
+
+
+
+
+
+function $ea53d4d38ca71150$export$9fac37a9c21c2f3b({ children: children , merchant: merchant , market: market  }) {
+    return children;
+}
+function $ea53d4d38ca71150$var$DepictSearchPageContent(opts) {
+    const [bridge, setBridge] = (0, $5DrVA$useState)(null);
+    (0, $5DrVA$useEffect)(()=>{
+        if (!bridge) {
+            const [title] = (0, $5DrVA$createSignal)("Category");
+            const solid_element = (0, $5DrVA$CategoryTitle)({
+                category_title_: title,
+                product_count_: 0
+            });
+            const solid_bridge = (0, $5DrVA$jsx)((0, $5DrVA$ReactToSolidBridge), {
+                solidComponent: ()=>solid_element,
+                key: Math.random()
+            });
+            setBridge(solid_bridge);
+        }
+    }, []);
+    return bridge ? (0, $5DrVA$createElement)("div", {
+        className: "solid_bridge"
+    }, [
+        bridge
+    ]) : "";
+}
+function $ea53d4d38ca71150$export$210723f5a54a7028(opts) {
+    return (0, $5DrVA$jsx)((0, $5DrVA$ReactToSolidBridgeProvider), {
+        children: (0, $5DrVA$jsx)($ea53d4d38ca71150$var$DepictSearchPageContent, opts)
+    });
+}
+
+
+export {$ea53d4d38ca71150$export$9fac37a9c21c2f3b as DepictProvider, $ea53d4d38ca71150$export$210723f5a54a7028 as DepictSearchPage};

package/dist-server/main.js

@@ -11,13 +11,10 @@ $parcel$export(module.exports, "openModal", () => $5767ac9f6fd2be28$export$a7f6c
 
 
 function $5767ac9f6fd2be28$export$9fac37a9c21c2f3b(props) {
-    console.log("DEPICTPROVIDER SERVER");
-    return (0, $4yCyN$reactjsxruntime.jsx)((0, $4yCyN$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
-        children: props.children
-    });
+    return props.children;
 }
 function $5767ac9f6fd2be28$export$210723f5a54a7028() {
-    return (0, $4yCyN$reactjsxruntime.jsx)($5767ac9f6fd2be28$export$9fac37a9c21c2f3b, {
+    return (0, $4yCyN$reactjsxruntime.jsx)((0, $4yCyN$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
         children: ""
     });
 }

package/dist-server/module.js

@@ -1 +1,17 @@
-import{ReactToSolidBridgeProvider as r}from"@depict-ai/react-solid-bridge";import{jsx as e}from"react/jsx-runtime";function i(i){return console.log("DEPICTPROVIDER SERVER"),e(r,{children:i.children})}function o(){return e(i,{children:""})}function t(){}export{i as DepictProvider,o as DepictSearchPage,t as openModal};
+import {ReactToSolidBridgeProvider as $8UQZK$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
+import {jsx as $8UQZK$jsx} from "react/jsx-runtime";
+
+
+
+function $7def0b56bbffc00f$export$9fac37a9c21c2f3b(props) {
+    return props.children;
+}
+function $7def0b56bbffc00f$export$210723f5a54a7028() {
+    return (0, $8UQZK$jsx)((0, $8UQZK$ReactToSolidBridgeProvider), {
+        children: ""
+    });
+}
+function $7def0b56bbffc00f$export$a7f6cffb6b8ba11c() {}
+
+
+export {$7def0b56bbffc00f$export$9fac37a9c21c2f3b as DepictProvider, $7def0b56bbffc00f$export$210723f5a54a7028 as DepictSearchPage, $7def0b56bbffc00f$export$a7f6cffb6b8ba11c as openModal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "packageManager": "yarn@3.2.2",
   "source": "src/main.ts",
   "main": "dist/main.js",
@@ -29,17 +29,43 @@
       "engines": {
         "browsers": "last 1 chrome version"
       },
-      "optimize": true
+      "optimize": false
     }
   },
   "exports": {
     ".": {
+      "browser": {
+        "development": {
+          "import": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/module.js"
+          },
+          "require": "./dist/main.js"
+        },
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/module.js"
+        },
+        "require": "./dist/main.js"
+      },
       "node": {
-        "import": "./dist-server/main.js"
+        "import": {
+          "default": "./dist-server/module.js"
+        },
+        "require": "./dist-server/main.js"
+      },
+      "development": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/module.js"
+        },
+        "require": "./dist/main.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/module.js"
       },
-      "default": {
-        "import": "./dist/main.js"
-      }
+      "require": "./dist/main.js"
     }
   },
   "files": [