@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/commerce/ui/context.cjs

@@ -0,0 +1,280 @@
+'use strict';
+
+var react = require('react');
+var mobxReactLite = require('mobx-react-lite');
+var navigation = require('next/navigation');
+var usehooksTs = require('usehooks-ts');
+var commerce = require('@hanzo/commerce');
+var mobx = require('mobx');
+var jsxRuntime = require('react/jsx-runtime');
+
+var log = (s) => {
+  {
+    console.log("COMMERCE_UI " + s);
+  }
+};
+var CommerceUIStore = class {
+  // points to either this._pointsConfig.md or this._pointsConfig.dt 
+  constructor(s, conf) {
+    this._vHeight = 0;
+    this._routeChangedTime = 0;
+    this._currentSkuPath = void 0;
+    this._closedByUser = false;
+    this._checkingOut = void 0;
+    this._ignoreStateChange = false;
+    this._activePoint = null;
+    this._reactionDisposers = [];
+    this.initialize = () => {
+      this._reactionDisposers.push(mobx.reaction(
+        () => this.state,
+        (s) => {
+          if (this.ignoreStateChange) {
+            log(`STATE CHANGE to "${s}" (IGNORED)`);
+            this.setIgnoreStateChange(false);
+            return;
+          } else {
+            log(`STATE CHANGE to "${s}" (UI REACTED)`);
+            this._syncUIToState(s);
+          }
+        }
+      ));
+    };
+    this.newRoute = () => {
+      this.setRouteChangedTime((/* @__PURE__ */ new Date()).getTime());
+      this.hideVariants();
+      this.setClosedByUser(false);
+    };
+    this.onActivePointChanged = (newPoint) => {
+      log("ON onActivePointChanged: " + newPoint);
+      if (newPoint === this._points.micro && this.activePoint === this._points.full) {
+        log("ON onActivePointChanged: to MICRO");
+        this.setIgnoreStateChange(true);
+        this.hideVariants();
+      } else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
+        log("ON onActivePointChanged: to FULL");
+        this.setIgnoreStateChange(true);
+        this.showRecentVariants();
+      }
+      this.setActivePoint(newPoint);
+    };
+    this.showVariants = (skuPath) => {
+      this._service.setCurrentItem(void 0);
+      this._currentSkuPath = skuPath;
+      this._closedByUser = false;
+    };
+    this.showRecentVariants = () => {
+      const recentItemInfo = this._service.recentItem;
+      if (recentItemInfo) {
+        this._service.setCurrentItem(void 0);
+        this._currentSkuPath = recentItemInfo.item.sku;
+        this._closedByUser = false;
+      }
+    };
+    this.hideVariants = () => {
+      this._currentSkuPath = void 0;
+    };
+    this.setClosedByUser = (b) => {
+      this._closedByUser = b;
+    };
+    this.setIgnoreStateChange = (b) => {
+      this._ignoreStateChange = b;
+    };
+    this.setCheckingOut = (b) => {
+      this._checkingOut = b;
+    };
+    this.setActivePoint = (pt) => {
+      this._activePoint = pt;
+    };
+    this.setRouteChangedTime = (t) => {
+      this._routeChangedTime = t;
+    };
+    this._syncUIToState = (s) => {
+      log("_syncUIToState: " + s);
+      if (s === "micro") {
+        this.setActivePoint(this.points[0]);
+      } else if (s === "full") {
+        this.setActivePoint(this.points[this.points.length - 1]);
+      } else {
+        this.setActivePoint(null);
+      }
+    };
+    this.setMobile = (b) => {
+      log("setMobile: " + b);
+      this._points = b ? this._pointsConfig.mb : this._pointsConfig.dt;
+    };
+    this.setViewportHeight = (v) => {
+      this._vHeight = v;
+    };
+    this.dispose = () => {
+      this._reactionDisposers.forEach((d) => {
+        d();
+      });
+    };
+    this._service = s;
+    this._pointsConfig = conf;
+    this._points = this._pointsConfig.dt;
+    mobx.makeObservable(this, {
+      _currentSkuPath: mobx.observable,
+      _closedByUser: mobx.observable,
+      _checkingOut: mobx.observable,
+      _activePoint: mobx.observable,
+      _points: mobx.observableRef,
+      _vHeight: mobx.observable,
+      _routeChangedTime: mobx.observable,
+      showVariants: mobx.action,
+      showRecentVariants: mobx.action,
+      hideVariants: mobx.action,
+      setClosedByUser: mobx.action,
+      setCheckingOut: mobx.action,
+      setActivePoint: mobx.action,
+      setMobile: mobx.action,
+      setViewportHeight: mobx.action,
+      setRouteChangedTime: mobx.action,
+      activePoint: mobx.computed,
+      checkingOut: mobx.computed,
+      closedByUser: mobx.computed,
+      currentSkuPath: mobx.computed,
+      microHeight: mobx.computed,
+      modal: mobx.computed,
+      points: mobx.computed,
+      showRecent: mobx.computed,
+      showBuy: mobx.computed,
+      showCheckout: mobx.computed,
+      snapPointPx: mobx.computed,
+      state: mobx.computed,
+      open: mobx.computed
+    });
+  }
+  get currentSkuPath() {
+    return this._currentSkuPath;
+  }
+  get closedByUser() {
+    return this._closedByUser;
+  }
+  get ignoreStateChange() {
+    return this._ignoreStateChange;
+  }
+  get checkingOut() {
+    return this._checkingOut;
+  }
+  get activePoint() {
+    return this._activePoint;
+  }
+  get points() {
+    return [this._points.micro, this._points.full];
+  }
+  get open() {
+    log(
+      "open(): showCheckout: " + this.showCheckout + " showRecent: " + this.showRecent + " showBuy: " + this.showBuy
+    );
+    return this._checkingOut !== void 0 && !this._checkingOut && !this.closedByUser && (this.showCheckout || this.showRecent || this.showBuy);
+  }
+  get state() {
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return "full";
+      } else if (this.showRecent || this.showCheckout) {
+        return "micro";
+      }
+    }
+    return "closed";
+  }
+  get showRecent() {
+    const recentInfo = this._service.recentItem;
+    return !!recentInfo && recentInfo.modified > this._routeChangedTime;
+  }
+  get showBuy() {
+    return !!this.currentSkuPath;
+  }
+  get showCheckout() {
+    return !this._service.cartEmpty;
+  }
+  get modal() {
+    return this.state !== "micro";
+  }
+  get microHeight() {
+    return this._points.micro;
+  }
+  get isMobile() {
+    return this._pointsConfig.mb === this._points;
+  }
+  get snapPointPx() {
+    if (!this._activePoint || this._vHeight === 0) return 0;
+    if (typeof this._activePoint === "string") {
+      return parseInt(this._activePoint);
+    }
+    return this._vHeight * this._activePoint;
+  }
+};
+
+// src/site/commerce/ui/conf.ts
+var conf_default = {
+  mb: {
+    micro: "72px",
+    full: "600px"
+  },
+  dt: {
+    micro: "90px",
+    full: "620px"
+  }
+};
+var DESKTOP_MIN = 768;
+var log2 = (s) => {
+};
+mobxReactLite.enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = react.createContext(void 0);
+var useCommerceDrawer = () => {
+  return react.useContext(CommerceUIContext);
+};
+var useSelectAndBuy = () => {
+  return react.useContext(CommerceUIContext);
+};
+var CommerceUIProvider = ({
+  children
+}) => {
+  const cmmc = commerce.useCommerce();
+  const pathname = navigation.usePathname();
+  const storeRef = react.useRef(new CommerceUIStore(cmmc, conf_default));
+  const prevPathRef = react.useRef("initial");
+  const onResize = () => {
+    const width = window.innerWidth;
+    if (width < DESKTOP_MIN) {
+      if (!storeRef.current.isMobile) {
+        storeRef.current.setMobile(true);
+      }
+    } else if (storeRef.current.isMobile) {
+      storeRef.current.setMobile(false);
+    }
+    storeRef.current.setViewportHeight(window.innerHeight);
+  };
+  const onResize_debounced = usehooksTs.useDebounceCallback(onResize, 500);
+  react.useLayoutEffect(() => {
+    storeRef.current.initialize();
+    onResize();
+    window.addEventListener("resize", onResize_debounced);
+    return () => {
+      window.removeEventListener("resize", onResize_debounced);
+      storeRef.current.dispose();
+    };
+  }, []);
+  react.useEffect(() => {
+    const checkingOut = pathname === "/checkout";
+    log2("useEffect: prev pathname: " + prevPathRef.current);
+    if (storeRef.current.checkingOut === void 0 || storeRef.current._checkingOut !== checkingOut) {
+      storeRef.current.setCheckingOut(checkingOut);
+    }
+    if (prevPathRef.current === "initial") {
+      prevPathRef.current = pathname;
+      storeRef.current.newRoute();
+    } else if (!checkingOut && prevPathRef.current !== pathname) {
+      storeRef.current.newRoute();
+      prevPathRef.current = pathname;
+      log2("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime);
+    }
+  }, [pathname]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CommerceUIContext.Provider, { value: storeRef.current, children });
+};
+
+exports.CommerceUIProvider = CommerceUIProvider;
+exports.useCommerceDrawer = useCommerceDrawer;
+exports.useSelectAndBuy = useSelectAndBuy;

package/dist/site/commerce/ui/context.d.ts

@@ -0,0 +1,7 @@
+import React, { type PropsWithChildren } from 'react';
+import type { CommerceDrawer, SelectAndBuy } from './store';
+declare const useCommerceDrawer: () => CommerceDrawer;
+declare const useSelectAndBuy: () => SelectAndBuy;
+declare const CommerceUIProvider: React.FC<PropsWithChildren>;
+export { useCommerceDrawer, useSelectAndBuy, CommerceUIProvider };
+//# sourceMappingURL=context.d.ts.map

package/dist/site/commerce/ui/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/site/commerce/ui/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIZ,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAqB3D,QAAA,MAAM,iBAAiB,QAAO,cAE7B,CAAA;AAED,QAAA,MAAM,eAAe,QAAO,YAE3B,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmEnD,CAAA;AAED,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EACnB,CAAA"}

package/dist/site/commerce/ui/context.js

@@ -0,0 +1,276 @@
+import { createContext, useContext, useRef, useLayoutEffect, useEffect } from 'react';
+import { enableStaticRendering } from 'mobx-react-lite';
+import { usePathname } from 'next/navigation';
+import { useDebounceCallback } from 'usehooks-ts';
+import { useCommerce } from '@hanzo/commerce';
+import { reaction, makeObservable, computed, action, observable, observableRef } from 'mobx';
+import { jsx } from 'react/jsx-runtime';
+
+var log = (s) => {
+  {
+    console.log("COMMERCE_UI " + s);
+  }
+};
+var CommerceUIStore = class {
+  // points to either this._pointsConfig.md or this._pointsConfig.dt 
+  constructor(s, conf) {
+    this._vHeight = 0;
+    this._routeChangedTime = 0;
+    this._currentSkuPath = void 0;
+    this._closedByUser = false;
+    this._checkingOut = void 0;
+    this._ignoreStateChange = false;
+    this._activePoint = null;
+    this._reactionDisposers = [];
+    this.initialize = () => {
+      this._reactionDisposers.push(reaction(
+        () => this.state,
+        (s) => {
+          if (this.ignoreStateChange) {
+            log(`STATE CHANGE to "${s}" (IGNORED)`);
+            this.setIgnoreStateChange(false);
+            return;
+          } else {
+            log(`STATE CHANGE to "${s}" (UI REACTED)`);
+            this._syncUIToState(s);
+          }
+        }
+      ));
+    };
+    this.newRoute = () => {
+      this.setRouteChangedTime((/* @__PURE__ */ new Date()).getTime());
+      this.hideVariants();
+      this.setClosedByUser(false);
+    };
+    this.onActivePointChanged = (newPoint) => {
+      log("ON onActivePointChanged: " + newPoint);
+      if (newPoint === this._points.micro && this.activePoint === this._points.full) {
+        log("ON onActivePointChanged: to MICRO");
+        this.setIgnoreStateChange(true);
+        this.hideVariants();
+      } else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
+        log("ON onActivePointChanged: to FULL");
+        this.setIgnoreStateChange(true);
+        this.showRecentVariants();
+      }
+      this.setActivePoint(newPoint);
+    };
+    this.showVariants = (skuPath) => {
+      this._service.setCurrentItem(void 0);
+      this._currentSkuPath = skuPath;
+      this._closedByUser = false;
+    };
+    this.showRecentVariants = () => {
+      const recentItemInfo = this._service.recentItem;
+      if (recentItemInfo) {
+        this._service.setCurrentItem(void 0);
+        this._currentSkuPath = recentItemInfo.item.sku;
+        this._closedByUser = false;
+      }
+    };
+    this.hideVariants = () => {
+      this._currentSkuPath = void 0;
+    };
+    this.setClosedByUser = (b) => {
+      this._closedByUser = b;
+    };
+    this.setIgnoreStateChange = (b) => {
+      this._ignoreStateChange = b;
+    };
+    this.setCheckingOut = (b) => {
+      this._checkingOut = b;
+    };
+    this.setActivePoint = (pt) => {
+      this._activePoint = pt;
+    };
+    this.setRouteChangedTime = (t) => {
+      this._routeChangedTime = t;
+    };
+    this._syncUIToState = (s) => {
+      log("_syncUIToState: " + s);
+      if (s === "micro") {
+        this.setActivePoint(this.points[0]);
+      } else if (s === "full") {
+        this.setActivePoint(this.points[this.points.length - 1]);
+      } else {
+        this.setActivePoint(null);
+      }
+    };
+    this.setMobile = (b) => {
+      log("setMobile: " + b);
+      this._points = b ? this._pointsConfig.mb : this._pointsConfig.dt;
+    };
+    this.setViewportHeight = (v) => {
+      this._vHeight = v;
+    };
+    this.dispose = () => {
+      this._reactionDisposers.forEach((d) => {
+        d();
+      });
+    };
+    this._service = s;
+    this._pointsConfig = conf;
+    this._points = this._pointsConfig.dt;
+    makeObservable(this, {
+      _currentSkuPath: observable,
+      _closedByUser: observable,
+      _checkingOut: observable,
+      _activePoint: observable,
+      _points: observableRef,
+      _vHeight: observable,
+      _routeChangedTime: observable,
+      showVariants: action,
+      showRecentVariants: action,
+      hideVariants: action,
+      setClosedByUser: action,
+      setCheckingOut: action,
+      setActivePoint: action,
+      setMobile: action,
+      setViewportHeight: action,
+      setRouteChangedTime: action,
+      activePoint: computed,
+      checkingOut: computed,
+      closedByUser: computed,
+      currentSkuPath: computed,
+      microHeight: computed,
+      modal: computed,
+      points: computed,
+      showRecent: computed,
+      showBuy: computed,
+      showCheckout: computed,
+      snapPointPx: computed,
+      state: computed,
+      open: computed
+    });
+  }
+  get currentSkuPath() {
+    return this._currentSkuPath;
+  }
+  get closedByUser() {
+    return this._closedByUser;
+  }
+  get ignoreStateChange() {
+    return this._ignoreStateChange;
+  }
+  get checkingOut() {
+    return this._checkingOut;
+  }
+  get activePoint() {
+    return this._activePoint;
+  }
+  get points() {
+    return [this._points.micro, this._points.full];
+  }
+  get open() {
+    log(
+      "open(): showCheckout: " + this.showCheckout + " showRecent: " + this.showRecent + " showBuy: " + this.showBuy
+    );
+    return this._checkingOut !== void 0 && !this._checkingOut && !this.closedByUser && (this.showCheckout || this.showRecent || this.showBuy);
+  }
+  get state() {
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return "full";
+      } else if (this.showRecent || this.showCheckout) {
+        return "micro";
+      }
+    }
+    return "closed";
+  }
+  get showRecent() {
+    const recentInfo = this._service.recentItem;
+    return !!recentInfo && recentInfo.modified > this._routeChangedTime;
+  }
+  get showBuy() {
+    return !!this.currentSkuPath;
+  }
+  get showCheckout() {
+    return !this._service.cartEmpty;
+  }
+  get modal() {
+    return this.state !== "micro";
+  }
+  get microHeight() {
+    return this._points.micro;
+  }
+  get isMobile() {
+    return this._pointsConfig.mb === this._points;
+  }
+  get snapPointPx() {
+    if (!this._activePoint || this._vHeight === 0) return 0;
+    if (typeof this._activePoint === "string") {
+      return parseInt(this._activePoint);
+    }
+    return this._vHeight * this._activePoint;
+  }
+};
+
+// src/site/commerce/ui/conf.ts
+var conf_default = {
+  mb: {
+    micro: "72px",
+    full: "600px"
+  },
+  dt: {
+    micro: "90px",
+    full: "620px"
+  }
+};
+var DESKTOP_MIN = 768;
+var log2 = (s) => {
+};
+enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = createContext(void 0);
+var useCommerceDrawer = () => {
+  return useContext(CommerceUIContext);
+};
+var useSelectAndBuy = () => {
+  return useContext(CommerceUIContext);
+};
+var CommerceUIProvider = ({
+  children
+}) => {
+  const cmmc = useCommerce();
+  const pathname = usePathname();
+  const storeRef = useRef(new CommerceUIStore(cmmc, conf_default));
+  const prevPathRef = useRef("initial");
+  const onResize = () => {
+    const width = window.innerWidth;
+    if (width < DESKTOP_MIN) {
+      if (!storeRef.current.isMobile) {
+        storeRef.current.setMobile(true);
+      }
+    } else if (storeRef.current.isMobile) {
+      storeRef.current.setMobile(false);
+    }
+    storeRef.current.setViewportHeight(window.innerHeight);
+  };
+  const onResize_debounced = useDebounceCallback(onResize, 500);
+  useLayoutEffect(() => {
+    storeRef.current.initialize();
+    onResize();
+    window.addEventListener("resize", onResize_debounced);
+    return () => {
+      window.removeEventListener("resize", onResize_debounced);
+      storeRef.current.dispose();
+    };
+  }, []);
+  useEffect(() => {
+    const checkingOut = pathname === "/checkout";
+    log2("useEffect: prev pathname: " + prevPathRef.current);
+    if (storeRef.current.checkingOut === void 0 || storeRef.current._checkingOut !== checkingOut) {
+      storeRef.current.setCheckingOut(checkingOut);
+    }
+    if (prevPathRef.current === "initial") {
+      prevPathRef.current = pathname;
+      storeRef.current.newRoute();
+    } else if (!checkingOut && prevPathRef.current !== pathname) {
+      storeRef.current.newRoute();
+      prevPathRef.current = pathname;
+      log2("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime);
+    }
+  }, [pathname]);
+  return /* @__PURE__ */ jsx(CommerceUIContext.Provider, { value: storeRef.current, children });
+};
+
+export { CommerceUIProvider, useCommerceDrawer, useSelectAndBuy };