@depict-ai/react-ui 0.0.1

package/dist/index.d.ts

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

package/dist/main.js

@@ -0,0 +1,187 @@
+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$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});
+}
+
+$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) {
+    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$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);
+    }, []);
+    return bridge ? (0, $lgFzj$react.createElement)("div", {}, [
+        bridge,
+        ...portals
+    ]) : "";
+}
+function $6abe21f0d440de7c$export$210723f5a54a7028(opts) {
+    return (0, $lgFzj$reactjsxruntime.jsx)((0, $lgFzj$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
+        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

@@ -0,0 +1 @@
+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,w;const x=e=>w(e);function C(e){if(!g){const a=f({merchant:e.merchant,market:e.market,productCardFactory:x,instantCardFactory:t});g=a.search,y=a.controls}}function S(r){const[t,s]=_(null),[n,i]=_([]);return d((()=>{const t=[];w=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 P(e){return l(r,{children:l(S,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{C as DepictProvider,P as DepictSearchPage,k as openModal};

package/dist-server/index.d.ts

@@ -0,0 +1,3 @@
+export function DepictProvider(props: any): any;
+export function DepictSearchPage(): any;
+export function openModal(): void;

package/dist-server/main.js

@@ -0,0 +1,25 @@
+var $4yCyN$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
+var $4yCyN$reactjsxruntime = require("react/jsx-runtime");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "DepictProvider", () => $5767ac9f6fd2be28$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "DepictSearchPage", () => $5767ac9f6fd2be28$export$210723f5a54a7028);
+$parcel$export(module.exports, "openModal", () => $5767ac9f6fd2be28$export$a7f6cffb6b8ba11c);
+
+
+function $5767ac9f6fd2be28$export$9fac37a9c21c2f3b(props) {
+    return (0, $4yCyN$reactjsxruntime.jsx)((0, $4yCyN$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
+        children: props.children
+    });
+}
+function $5767ac9f6fd2be28$export$210723f5a54a7028() {
+    return (0, $4yCyN$reactjsxruntime.jsx)($5767ac9f6fd2be28$export$9fac37a9c21c2f3b, {
+        children: ""
+    });
+}
+function $5767ac9f6fd2be28$export$a7f6cffb6b8ba11c() {}
+
+

package/dist-server/module.js

@@ -0,0 +1 @@
+import{ReactToSolidBridgeProvider as r}from"@depict-ai/react-solid-bridge";import{jsx as e}from"react/jsx-runtime";function i(i){return e(r,{children:i.children})}function o(){return e(i,{children:""})}function t(){}export{i as DepictProvider,o as DepictSearchPage,t as openModal};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@depict-ai/react-ui",
+  "version": "0.0.1",
+  "packageManager": "yarn@3.2.2",
+  "source": "src/main.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "clear-dist": "rm -r -f ./dist",
+    "build": "yarn build-server && parcel build --no-source-maps",
+    "build-server": "yarn clear-dist && parcel build --no-source-maps ./src-server/main.ts && cp -r ./dist/ ./dist-server && yarn clear-dist",
+    "print-included-package-files": "yarn pack --dry-run",
+    "typecheck": "yarn g:tsc --build tsconfig.json"
+  },
+  "targets": {
+    "main": {
+      "isLibrary": true,
+      "context": "browser",
+      "engines": {
+        "browsers": "last 1 chrome version"
+      },
+      "optimize": false
+    },
+    "module": {
+      "isLibrary": true,
+      "context": "browser",
+      "engines": {
+        "browsers": "last 1 chrome version"
+      },
+      "optimize": true
+    }
+  },
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist-server/main.js"
+      },
+      "default": {
+        "import": "./dist/main.js"
+      }
+    }
+  },
+  "files": [
+    "/dist",
+    "/dist-server"
+  ],
+  "dependencies": {
+    "@depict-ai/react-solid-bridge": "^1.0.25",
+    "@depict-ai/ui": "^0.0.0",
+    "@depict-ai/utilishared": "^0.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "solid-js": "^1.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "latest",
+    "@babel/preset-env": "latest",
+    "@babel/preset-typescript": "latest",
+    "@babel/runtime": "latest",
+    "@babel/runtime-corejs3": "latest",
+    "@parcel/babel-preset-env": "latest",
+    "@parcel/resolver-default": "^2.8.0",
+    "@types/node": "^18.11.11",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "babel-preset-solid": "latest",
+    "parcel": "latest"
+  }
+}