@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "2.0.0-dev.896",
+  "version": "2.0.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -27,12 +27,14 @@
     "type-check": "yarn tsc --noEmit"
   },
   "devDependencies": {
-    "@gem-sdk/adapter-shopify": "1.14.0-dev.619",
-    "@gem-sdk/styles": "2.0.0-dev.895",
+    "@gem-sdk/adapter-shopify": "1.63.0",
+    "@gem-sdk/styles": "2.0.0",
     "@types/classnames": "^2.3.1"
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "cssjson": "2.1.3",
+    "dayjs": "^1.11.11",
     "react-error-boundary": "4.0.10",
     "swr": "2.1.2",
     "vanilla-lazyload": "17.8.3",

package/dist/cjs/components/animation/AnimationWrapper.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),makeStyle=require("../../helpers/make-style.js"),react=require("react");require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation"),require("vanilla-lazyload"),require("../../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core"),require("classnames"),require("../../helpers/convert.js");var useLivePageAnimation=require("../../hooks/animation/useLivePageAnimation.js");const AnimationWrapper=({children:e,settings:r,tag:t})=>{let i=react.useRef(null),a=(e,r)=>e?.triggerConfig?.[r]?.animation??"none",s=e=>{if("desktop"===e);else if("tablet"===e)return r?.tablet??r?.desktop;else if("mobile"===e)return r?.mobile??r?.tablet??r?.desktop;return r?.desktop},n=e=>+!(s(e)?.enabled&&!["shake","none"].includes(a(s(e),"appear"))),o={desktop:n("desktop"),tablet:n("tablet"),mobile:n("mobile")};return useLivePageAnimation.useLivePageAnimation(i,r,t),jsxRuntime.jsx("div",{ref:i,style:{...makeStyle.makeStyleResponsive("op",o)},children:e})};exports.default=AnimationWrapper;

package/dist/cjs/hooks/animation/animations.js

@@ -1 +0,0 @@
-"use strict";const EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let r=JSON.parse(JSON.stringify(t)),e=["delay","speed","scale","intensity"];return e.forEach(t=>{if(!r?.[t])return;if("scale"===t){if(!r?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[e,a]=r?.scale?.in??[1,1],[n,o]=r?.scale?.out??[1,1];r[t]={in:[Number(e)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let e=Number(r?.[t]);if("delay"===t?r[t]=1e3*e:r[t]=e,!isFinite(e))throw TypeError(`${t} must be a number`)}),r},r=(r,e)=>{let n=t(e),{direction:s,distance:l}=n,p=["left","right"].includes(s??"")?"X":"Y",u=["left","down"].includes(s??"")?"-":"",f=o(r),m=[{display:f,opacity:0,transform:`translate${p}(${u}${l??50}%)`},{display:f,opacity:i(r),transform:`translate${p}(0)`}];return c(r,m,{...a(n,500),fill:"forwards"})},e=(r,e)=>{let n=t(e),o=[{opacity:0},{opacity:i(r)}];return c(r,o,{...a(n,500)})},a=(t,r)=>{let e=t=>t?1.5/t*1e3:r,{loop:a,delay:n,speed:o,easing:i}=t??{},s=e(o),l=n??0,c=a?s+l:s;return{iterations:a?1/0:1,duration:c,delay:l,easing:EASING[i??"linear"]}},n=(r,e)=>{let n=t(e),{scale:s,zoomDirection:l,isFade:p}=n,[u,f]=s.in,[m,y]=s.out,d=o(r),b=i(r),$=[{display:d,transform:`scale(${u}, ${u})`,opacity:p?0:1},{display:d,transform:`scale(${f??1.2}, ${f??1.2})`,opacity:b}],w=[{display:d,transform:`scale(${m}, ${m})`,opacity:p?0:1},{display:d,transform:`scale(${y??.8}, ${y??.8})`,opacity:b}],x="in"===l?$:w;return c(r,x,{...a(n,700),fill:"forwards"})},o=t=>{let r="inline"===window.getComputedStyle(t,null).getPropertyValue("display");return r?"block":void 0},i=t=>window.getComputedStyle(t,null).getPropertyValue("opacity"),s=(t,r,e)=>{if(!r)return t;let a=r/e,n=[...t].pop();return[...t,{...n,offset:1-a}]},l=(r,e)=>{let n=t(e),{intensity:s}=n??{},l=o(r),p=i(r),u=[{transform:"translate3d(0, 0, 0)",opacity:p,display:l}],f=[{transform:"translate3d(4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(4px, 0, 0)",opacity:p,display:l}],m=[];Array.from(Array(s??1).keys()).forEach(()=>{m=[...m,...f]});let y=[{transform:"translate3d(-1px, 0, 0)",opacity:p,display:l},{transform:"translate3d(2px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},...m,{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(2px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-1px, 0, 0)",opacity:p,display:l}];return c(r,s?y:u,{...a(n??{},820)})},c=(t,r,e)=>{let a=new KeyframeEffect(t,e.iterations&&1===e.iterations?r:s(r,e?.delay??0,e?.duration??0),{...e});return new Animation(a,document.timeline)};return{zoom:n,shake:l,fade:e,slide:r}};exports.animations=animations;

package/dist/cjs/hooks/animation/useLivePageAnimation.js

@@ -1 +0,0 @@
-"use strict";var react=require("react"),animations=require("./animations.js");const TAGS_SELECTOR={Button:".gp-button-base",ProductButton:".gp-button-base",Sticky:"gp-sticky",Dialog:"div[role=dialog]",Icon:"div div",ProductTag:"div div div",Product:"product-form form div"},useLivePageAnimation=(e,r,t)=>{let n=animations.animations(),[c,u]=react.useState(!1),a=react.useRef(void 0),i=react.useRef(void 0),o=react.useRef(null),l=react.useRef("none"),s=react.useRef("none"),d=react.useRef(null),b=react.useRef(null),p=react.useRef(null),m=react.useRef("animation-wrapper-"),f=react.useCallback(e=>{d.current&&(d.current.playbackRate=e??1,d.current.play())},[d]),v=react.useCallback(e=>{b.current&&(b.current.playbackRate=e??1,b.current.play())},[b]),g=react.useCallback(()=>{e.current&&(e.current.style.opacity="1"),o.current&&(o.current.style.opacity="1")},[e]),k=react.useCallback(()=>{e.current&&(e.current.style.opacity="1"),o.current&&(o.current.style.opacity="0")},[e]),C=react.useCallback(e=>{e&&e.stopPropagation(),"shake"!==l.current&&k(),d.current&&(b.current?.cancel(),f(),d.current.finished.then(()=>{o.current&&g()}),o.current&&a?.current?.unobserve(o.current))},[k,f,g]),y=react.useCallback(()=>{g(),d.current&&d.current.cancel()},[g,d]),R=react.useCallback(e=>{e&&e.stopPropagation(),b.current&&(y(),v())},[b,y,v]),h=react.useCallback(()=>{if(b.current){if("zoom"===s.current){if(v(-1),!c)return;b.current.finished.then(()=>{clearTimeout(i.current),i.current=setTimeout(()=>{C()},100)});return}b.current.cancel(),c&&C()}},[v,c,C]),E=react.useCallback(()=>{if("desktop"===p.current);else if("tablet"===p.current)return r?.tablet??r?.desktop;else if("mobile"===p.current)return r?.mobile??r?.tablet??r?.desktop;return r?.desktop},[r?.desktop,r?.mobile,r?.tablet]),L=(e,r)=>e?.triggerConfig?.[r]?.animation??"none",S=react.useCallback(e=>{if("none"===l.current)return;let r=e?.triggerConfig?.appear?.setting?.[l.current];u(r.loop),d.current=n?.[l.current]?.(o.current,r)},[n]),P=react.useCallback(e=>{if("none"===s.current)return;let r=e?.triggerConfig?.hover?.setting?.[s.current];b.current=n?.[s.current]?.(o.current,r)},[n]),T=react.useCallback(()=>{d.current&&(d.current=null,o.current&&a.current?.unobserve(o.current)),b&&(b.current=null,o.current&&(o.current.removeEventListener("mouseenter",R),o.current.removeEventListener("mouseleave",h)))},[h,R]),A=react.useCallback(e=>{if(T(),o.current){if(!e?.enabled){g();return}l.current=L(e,"appear"),s.current=L(e,"hover"),"none"===l.current&&g(),"none"!==s.current&&"desktop"===p.current&&(P(e),o.current.addEventListener("mouseenter",R),o.current.addEventListener("mouseleave",h)),"none"!==l.current?(S(e),a.current=new IntersectionObserver(e=>{e.forEach(e=>{e.intersectionRatio>.1&&C()})},{root:null,rootMargin:"0px",threshold:[.1]}),a.current.observe(o.current)):g()}},[h,S,P,C,R,g,T]),w=react.useCallback(()=>{let e=document.querySelector("html");if(!o.current||!e)return;let r=new ResizeObserver(([e])=>{let r;let t=e?.target.getBoundingClientRect().width??0;r=t>=1024?"desktop":t>=768?"tablet":"mobile",p.current!==r&&(p.current=r,A(E()))});return r.observe(e),()=>r.disconnect()},[E,A]);return react.useEffect(()=>{setTimeout(()=>{if(r&&e.current)return m.current=`animation-wrapper-${Math.random().toString(36).substr(2,5)}`,e.current.setAttribute("data-animationid",m.current),o.current=document.querySelector(`[data-animationid='${m.current}'] ${TAGS_SELECTOR?.[t]??""}`),w()},100)},[w,r,t,e]),{initAnimation:A}};exports.useLivePageAnimation=useLivePageAnimation;

package/dist/esm/components/animation/AnimationWrapper.js

@@ -1 +0,0 @@
-import{jsx as e}from"react/jsx-runtime";import{makeStyleResponsive as t}from"../../helpers/make-style.js";import{useRef as r}from"react";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import"classnames";import"../../helpers/convert.js";import{useLivePageAnimation as o}from"../../hooks/animation/useLivePageAnimation.js";let AnimationWrapper=({children:i,settings:a,tag:s})=>{let m=r(null),p=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",n=e=>{if("desktop"===e);else if("tablet"===e)return a?.tablet??a?.desktop;else if("mobile"===e)return a?.mobile??a?.tablet??a?.desktop;return a?.desktop},l=e=>+!(n(e)?.enabled&&!["shake","none"].includes(p(n(e),"appear"))),d={desktop:l("desktop"),tablet:l("tablet"),mobile:l("mobile")};return o(m,a,s),e("div",{ref:m,style:{...t("op",d)},children:i})};export{AnimationWrapper as default};

package/dist/esm/hooks/animation/animations.js

@@ -1 +0,0 @@
-let EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let e=JSON.parse(JSON.stringify(t)),r=["delay","speed","scale","intensity"];return r.forEach(t=>{if(!e?.[t])return;if("scale"===t){if(!e?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[r,a]=e?.scale?.in??[1,1],[n,o]=e?.scale?.out??[1,1];e[t]={in:[Number(r)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let r=Number(e?.[t]);if("delay"===t?e[t]=1e3*r:e[t]=r,!isFinite(r))throw TypeError(`${t} must be a number`)}),e},e=(e,r)=>{let n=t(r),{direction:l,distance:s}=n,p=["left","right"].includes(l??"")?"X":"Y",u=["left","down"].includes(l??"")?"-":"",f=o(e),y=[{display:f,opacity:0,transform:`translate${p}(${u}${s??50}%)`},{display:f,opacity:i(e),transform:`translate${p}(0)`}];return c(e,y,{...a(n,500),fill:"forwards"})},r=(e,r)=>{let n=t(r),o=[{opacity:0},{opacity:i(e)}];return c(e,o,{...a(n,500)})},a=(t,e)=>{let r=t=>t?1.5/t*1e3:e,{loop:a,delay:n,speed:o,easing:i}=t??{},l=r(o),s=n??0,c=a?l+s:l;return{iterations:a?1/0:1,duration:c,delay:s,easing:EASING[i??"linear"]}},n=(e,r)=>{let n=t(r),{scale:l,zoomDirection:s,isFade:p}=n,[u,f]=l.in,[y,m]=l.out,d=o(e),b=i(e),$=[{display:d,transform:`scale(${u}, ${u})`,opacity:p?0:1},{display:d,transform:`scale(${f??1.2}, ${f??1.2})`,opacity:b}],w=[{display:d,transform:`scale(${y}, ${y})`,opacity:p?0:1},{display:d,transform:`scale(${m??.8}, ${m??.8})`,opacity:b}],x="in"===s?$:w;return c(e,x,{...a(n,700),fill:"forwards"})},o=t=>{let e="inline"===window.getComputedStyle(t,null).getPropertyValue("display");return e?"block":void 0},i=t=>window.getComputedStyle(t,null).getPropertyValue("opacity"),l=(t,e,r)=>{if(!e)return t;let a=e/r,n=[...t].pop();return[...t,{...n,offset:1-a}]},s=(e,r)=>{let n=t(r),{intensity:l}=n??{},s=o(e),p=i(e),u=[{transform:"translate3d(0, 0, 0)",opacity:p,display:s}],f=[{transform:"translate3d(4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(4px, 0, 0)",opacity:p,display:s}],y=[];Array.from(Array(l??1).keys()).forEach(()=>{y=[...y,...f]});let m=[{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},...y,{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s}];return c(e,l?m:u,{...a(n??{},820)})},c=(t,e,r)=>{let a=new KeyframeEffect(t,r.iterations&&1===r.iterations?e:l(e,r?.delay??0,r?.duration??0),{...r});return new Animation(a,document.timeline)};return{zoom:n,shake:s,fade:r,slide:e}};export{animations};

package/dist/esm/hooks/animation/useLivePageAnimation.js

@@ -1 +0,0 @@
-import{useState as r,useRef as e,useCallback as t,useEffect as n}from"react";import{animations as u}from"./animations.js";let TAGS_SELECTOR={Button:".gp-button-base",ProductButton:".gp-button-base",Sticky:"gp-sticky",Dialog:"div[role=dialog]",Icon:"div div",ProductTag:"div div div",Product:"product-form form div"},useLivePageAnimation=(c,o,i)=>{let a=u(),[l,s]=r(!1),d=e(void 0),p=e(void 0),m=e(null),v=e("none"),g=e("none"),b=e(null),f=e(null),y=e(null),h=e("animation-wrapper-"),k=t(r=>{b.current&&(b.current.playbackRate=r??1,b.current.play())},[b]),E=t(r=>{f.current&&(f.current.playbackRate=r??1,f.current.play())},[f]),L=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="1")},[c]),S=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="0")},[c]),T=t(r=>{r&&r.stopPropagation(),"shake"!==v.current&&S(),b.current&&(f.current?.cancel(),k(),b.current.finished.then(()=>{m.current&&L()}),m.current&&d?.current?.unobserve(m.current))},[S,k,L]),P=t(()=>{L(),b.current&&b.current.cancel()},[L,b]),R=t(r=>{r&&r.stopPropagation(),f.current&&(P(),E())},[f,P,E]),C=t(()=>{if(f.current){if("zoom"===g.current){if(E(-1),!l)return;f.current.finished.then(()=>{clearTimeout(p.current),p.current=setTimeout(()=>{T()},100)});return}f.current.cancel(),l&&T()}},[E,l,T]),w=t(()=>{if("desktop"===y.current);else if("tablet"===y.current)return o?.tablet??o?.desktop;else if("mobile"===y.current)return o?.mobile??o?.tablet??o?.desktop;return o?.desktop},[o?.desktop,o?.mobile,o?.tablet]),A=(r,e)=>r?.triggerConfig?.[e]?.animation??"none",O=t(r=>{if("none"===v.current)return;let e=r?.triggerConfig?.appear?.setting?.[v.current];s(e.loop),b.current=a?.[v.current]?.(m.current,e)},[a]),B=t(r=>{if("none"===g.current)return;let e=r?.triggerConfig?.hover?.setting?.[g.current];f.current=a?.[g.current]?.(m.current,e)},[a]),$=t(()=>{b.current&&(b.current=null,m.current&&d.current?.unobserve(m.current)),f&&(f.current=null,m.current&&(m.current.removeEventListener("mouseenter",R),m.current.removeEventListener("mouseleave",C)))},[C,R]),q=t(r=>{if($(),m.current){if(!r?.enabled){L();return}v.current=A(r,"appear"),g.current=A(r,"hover"),"none"===v.current&&L(),"none"!==g.current&&"desktop"===y.current&&(B(r),m.current.addEventListener("mouseenter",R),m.current.addEventListener("mouseleave",C)),"none"!==v.current?(O(r),d.current=new IntersectionObserver(r=>{r.forEach(r=>{r.intersectionRatio>.1&&T()})},{root:null,rootMargin:"0px",threshold:[.1]}),d.current.observe(m.current)):L()}},[C,O,B,T,R,L,$]),x=t(()=>{let r=document.querySelector("html");if(!m.current||!r)return;let e=new ResizeObserver(([r])=>{let e;let t=r?.target.getBoundingClientRect().width??0;e=t>=1024?"desktop":t>=768?"tablet":"mobile",y.current!==e&&(y.current=e,q(w()))});return e.observe(r),()=>e.disconnect()},[w,q]);return n(()=>{setTimeout(()=>{if(o&&c.current)return h.current=`animation-wrapper-${Math.random().toString(36).substr(2,5)}`,c.current.setAttribute("data-animationid",h.current),m.current=document.querySelector(`[data-animationid='${h.current}'] ${TAGS_SELECTOR?.[i]??""}`),x()},100)},[x,o,i,c]),{initAnimation:q}};export{useLivePageAnimation};