@gem-sdk/core 1.30.18 → 1.31.0

package/dist/esm/components/ComponentWrapper.js

@@ -3,25 +3,32 @@ import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
+import AnimationWrapper from './animation/AnimationWrapper.js';
 
 const ComponentWrapper = ({ children, ...props })=>{
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
+    const { animation } = advanced ?? {};
+    const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
+    let dynamicChildren = /*#__PURE__*/ jsx("div", {
+        style: style,
+        className: `${props.uid} ${advanced?.cssClass}`,
+        children: children
+    });
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
-        return /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                /*#__PURE__*/ jsx(RenderCustomCode, {
-                    uid: props.uid,
-                    advanced: advanced
-                }),
-                /*#__PURE__*/ jsx(children.type, {
-                    className: advanced?.cssClass,
-                    ...children.props,
-                    style,
-                    advanced
-                })
-            ]
+        dynamicChildren = /*#__PURE__*/ jsx(children.type, {
+            className: advanced?.cssClass,
+            ...children.props,
+            style,
+            advanced
+        });
+    }
+    if (enableAnimation) {
+        dynamicChildren = /*#__PURE__*/ jsx(AnimationWrapper, {
+            children: dynamicChildren,
+            settings: animation,
+            tag: props.tag
         });
     }
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -30,11 +37,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            /*#__PURE__*/ jsx("div", {
-                style: style,
-                className: `${props.uid} ${advanced?.cssClass}`,
-                children: children
-            })
+            dynamicChildren
         ]
     });
 };

package/dist/esm/components/Render.js

@@ -10,50 +10,47 @@ const Render = ({ uid, ...passProps })=>{
     const item = useBuilderStore((s)=>s.getItem(uid));
     const Component = useBuilderComponent(item?.tag);
     if (!item) return null;
-    if (item?.type === 'section') {
-        return /*#__PURE__*/ jsx(RenderSectionMemo, {
-            sectionId: item.uid
-        });
-    } else {
-        return /*#__PURE__*/ jsx(ErrorBoundary, {
-            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        /*#__PURE__*/ jsx("span", {
-                            "aria-label": "Error message",
-                            children: error.message
-                        }),
-                        /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            onClick: resetErrorBoundary,
-                            children: "Try again"
-                        })
-                    ]
-                }),
-            children: /*#__PURE__*/ jsx(ComponentWrapper, {
-                ...item,
-                children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps,
-                    children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
-                            uid: id
-                        }, id))
-                }) : /*#__PURE__*/ jsx(Component, {
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps
-                })
+    if (item?.type === 'section') return /*#__PURE__*/ jsx(RenderSectionMemo, {
+        sectionId: item.uid
+    });
+    return /*#__PURE__*/ jsx(ErrorBoundary, {
+        fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "aria-label": "Error message",
+                        children: error.message
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: resetErrorBoundary,
+                        children: "Try again"
+                    })
+                ]
+            }),
+        children: /*#__PURE__*/ jsx(ComponentWrapper, {
+            ...item,
+            children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
+                builderProps: {
+                    uid,
+                    builderData: item
+                },
+                styles: item.styles,
+                setting: item.settings,
+                ...passProps,
+                children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
+                        uid: id
+                    }, id))
+            }) : /*#__PURE__*/ jsx(Component, {
+                builderProps: {
+                    uid,
+                    builderData: item
+                },
+                styles: item.styles,
+                setting: item.settings,
+                ...passProps
             })
-        }, item.uid);
-    }
+        })
+    }, item.uid);
 };
 const RenderMemo = /*#__PURE__*/ memo(Render);
 RenderMemo.displayName = 'RenderMemo';

package/dist/esm/components/Render.liquid.js

@@ -221,7 +221,8 @@ const appendAnimation = (props, liquid)=>{
         mobile: getInitOpacity('mobile')
     };
     const inheritParentStyle = {
-        all: tag === 'Section' ? '' : 'inherit'
+        all: tag === 'Section' ? '' : 'inherit',
+        position: 'static'
     };
     return template`
   ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}

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

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '../../helpers/make-style.js';
+import { useRef } 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 '../../helpers/convert.js';
+import { useLivePageAnimation } from '../../hooks/animation/useLivePageAnimation.js';
+
+const AnimationWrapper = ({ children, settings, tag })=>{
+    const wrapperRef = useRef(null);
+    const getAnimationType = (settings, type)=>{
+        return settings?.triggerConfig?.[type]?.animation ?? 'none';
+    };
+    const getSettingsByDevice = (device)=>{
+        if (device === 'desktop') return settings?.desktop;
+        else if (device === 'tablet') return settings?.tablet ?? settings?.desktop;
+        else if (device === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
+        return settings?.desktop;
+    };
+    const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && ![
+            'shake',
+            'none'
+        ].includes(getAnimationType(getSettingsByDevice(device), 'appear')));
+    const opacityObject = {
+        desktop: getInitOpacity('desktop'),
+        tablet: getInitOpacity('tablet'),
+        mobile: getInitOpacity('mobile')
+    };
+    // const inheritParentStyle = { all: tag === 'Section' ? '' : 'inherit' };
+    useLivePageAnimation(wrapperRef, settings, tag);
+    return /*#__PURE__*/ jsx("div", {
+        ref: wrapperRef,
+        style: {
+            ...makeStyleResponsive('op', opacityObject)
+        },
+        children: children
+    });
+};
+
+export { AnimationWrapper as default };

package/dist/esm/helpers/typography.js

@@ -59,7 +59,7 @@ const composeTypographyV2 = (value, attrs)=>{
     return removeNullUndefined({
         ...makeStyle({
             fs: !attrs?.italic ? value?.fontStyle : undefined,
-            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, ${value.fontFamily})` : undefined,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}')` : undefined,
             weight: !attrs?.bold ? value?.fontWeight : undefined,
             ls: value?.letterSpacing,
             lh: value?.lineHeight

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

@@ -0,0 +1,225 @@
+// Any logic changes made to this file must also be applied to 
+// packages/web-components/src/helpers/animations.ts, and vice versa.
+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'
+};
+const animations = ()=>{
+    const normalizeOptions = (options)=>{
+        const cloneOptions = JSON.parse(JSON.stringify(options));
+        const numberMember = [
+            'delay',
+            'speed',
+            'scale',
+            'intensity'
+        ];
+        numberMember.forEach((keyName)=>{
+            if (!cloneOptions?.[keyName]) return;
+            if (keyName === 'scale') {
+                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
+                const [i1, i2] = cloneOptions?.scale?.in ?? [
+                    1,
+                    1
+                ];
+                const [o1, o2] = cloneOptions?.scale?.out ?? [
+                    1,
+                    1
+                ];
+                cloneOptions[keyName] = {
+                    in: [
+                        Number(i1) / 100,
+                        Number(i2) / 100
+                    ],
+                    out: [
+                        Number(o1) / 100,
+                        Number(o2) / 100
+                    ]
+                };
+                return;
+            }
+            const num = Number(cloneOptions?.[keyName]);
+            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
+            else cloneOptions[keyName] = num;
+            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
+        });
+        return cloneOptions;
+    };
+    const slide = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { direction, distance } = normalizedOptions;
+        const coordinate = [
+            'left',
+            'right'
+        ].includes(direction ?? '') ? 'X' : 'Y';
+        const isNeg = [
+            'left',
+            'down'
+        ].includes(direction ?? '') ? '-' : '';
+        const preset = [
+            {
+                opacity: 0,
+                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
+            },
+            {
+                opacity: 1,
+                transform: `translate${coordinate}(0)`
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500),
+            fill: 'forwards'
+        });
+    };
+    const fade = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const preset = [
+            {
+                opacity: 0
+            },
+            {
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, preset, {
+            ...generateOptions(normalizedOptions, 500)
+        });
+    };
+    const generateOptions = (options, defaultDuration)=>{
+        const convertSpeedToDuration = (speed)=>{
+            if (!speed) return defaultDuration;
+            return 1.5 / speed * 1000;
+        };
+        const { loop, delay, speed, easing } = options ?? {};
+        const duration = convertSpeedToDuration(speed);
+        const actualDelay = delay ?? 0;
+        const actualDuration = loop ? duration + actualDelay : duration;
+        return {
+            iterations: loop ? Infinity : 1,
+            duration: actualDuration,
+            delay: actualDelay,
+            easing: EASING[easing ?? 'linear']
+        };
+    };
+    const zoom = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { scale, zoomDirection, isFade } = normalizedOptions;
+        const [i1, i2] = scale.in;
+        const [o1, o2] = scale.out;
+        const zoomInPreset = [
+            {
+                transform: `scale(${i1}, ${i1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
+                opacity: 1
+            }
+        ];
+        const zoomOutPreset = [
+            {
+                transform: `scale(${o1}, ${o1})`,
+                opacity: isFade ? 0 : 1
+            },
+            {
+                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
+                opacity: 1
+            }
+        ];
+        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        return generateAnimationInstance(target, zoomPreset, {
+            ...generateOptions(normalizedOptions, 700),
+            fill: 'forwards'
+        });
+    };
+    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
+        if (!delay) return keyframes;
+        const offset = delay / duration;
+        const keyframe = [
+            ...keyframes
+        ].pop();
+        return [
+            ...keyframes,
+            {
+                ...keyframe,
+                offset: 1 - offset
+            }
+        ];
+    };
+    const shake = (target, options)=>{
+        const normalizedOptions = normalizeOptions(options);
+        const { intensity } = normalizedOptions ?? {};
+        const zeroIntensity = [
+            {
+                transform: 'translate3d(0, 0, 0)',
+                opacity: 1
+            }
+        ];
+        const unitIntensity = [
+            {
+                transform: 'translate3d(4px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(4px, 0, 0)',
+                opacity: 1
+            }
+        ];
+        let keyframes = [];
+        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
+            keyframes = [
+                ...keyframes,
+                ...unitIntensity
+            ];
+        });
+        const shakePreset = [
+            {
+                transform: 'translate3d(-1px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(-4px, 0, 0)',
+                opacity: 1
+            },
+            ...keyframes,
+            {
+                transform: 'translate3d(-4px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(2px, 0, 0)',
+                opacity: 1
+            },
+            {
+                transform: 'translate3d(-1px, 0, 0)',
+                opacity: 1
+            }
+        ];
+        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
+            ...generateOptions(normalizedOptions ?? {}, 820)
+        });
+    };
+    const generateAnimationInstance = (target, effectPreset, options)=>{
+        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
+            ...options
+        });
+        return new Animation(effect, document.timeline);
+    };
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+export { animations };

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

@@ -0,0 +1,228 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { animations } from './animations.js';
+
+// Any logic changes made to this file must also be applied to 
+// packages/web-components/src/gp-animation.ts, and vice versa.
+const TAGS_SELECTOR = {
+    Button: '.gp-button-base',
+    Sticky: 'gp-sticky',
+    Dialog: 'div[role=dialog]',
+    Icon: 'div div',
+    ProductTag: 'div div div'
+};
+const useLivePageAnimation = (wrapperRef, settings, tag)=>{
+    const animation = animations();
+    const [isAppearLoop, setIsAppearLoop] = useState(false);
+    const observer = useRef(undefined);
+    const appearAfterHoverTimer = useRef(undefined);
+    const animationElement = useRef(null);
+    const animationAppearType = useRef('none');
+    const animationHoverType = useRef('none');
+    const animationAppearInstance = useRef(null);
+    const animationHoverInstance = useRef(null);
+    const currentDevice = useRef(null);
+    const wrapperId = useRef('animation-wrapper-');
+    const appearPlay = useCallback((rate)=>{
+        if (!animationAppearInstance.current) return;
+        animationAppearInstance.current.playbackRate = rate ?? 1;
+        animationAppearInstance.current.play();
+    }, [
+        animationAppearInstance
+    ]);
+    const hoverPlay = useCallback((rate)=>{
+        if (!animationHoverInstance.current) return;
+        animationHoverInstance.current.playbackRate = rate ?? 1;
+        animationHoverInstance.current.play();
+    }, [
+        animationHoverInstance
+    ]);
+    const removeZeroOpacity = useCallback(()=>{
+        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
+        if (animationElement.current) animationElement.current.style.opacity = '1';
+    }, [
+        wrapperRef
+    ]);
+    const applyInitOpacity = useCallback(()=>{
+        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
+        if (animationElement.current) animationElement.current.style.opacity = '0';
+    }, [
+        wrapperRef
+    ]);
+    const playAppear = useCallback((e)=>{
+        e && e.stopPropagation();
+        applyInitOpacity();
+        if (!animationAppearInstance.current) return;
+        animationHoverInstance.current?.cancel();
+        appearPlay();
+        animationAppearInstance.current.finished.then(()=>{
+            if (!animationElement.current) return;
+            removeZeroOpacity();
+        });
+        animationElement.current && observer?.current?.unobserve(animationElement.current);
+    }, [
+        applyInitOpacity,
+        appearPlay,
+        removeZeroOpacity
+    ]);
+    const cancelAppear = useCallback(()=>{
+        if (!animationAppearInstance.current) return;
+        animationAppearInstance.current.cancel();
+    }, [
+        animationAppearInstance
+    ]);
+    const playHover = useCallback((e)=>{
+        e && e.stopPropagation();
+        if (!animationHoverInstance.current) return;
+        cancelAppear();
+        hoverPlay();
+    }, [
+        animationHoverInstance,
+        cancelAppear,
+        hoverPlay
+    ]);
+    const cancelHover = useCallback(()=>{
+        if (!animationHoverInstance.current) return;
+        if (animationHoverType.current === 'zoom') {
+            hoverPlay(-1);
+            if (!isAppearLoop) return;
+            animationHoverInstance.current.finished.then(()=>{
+                clearTimeout(appearAfterHoverTimer.current);
+                appearAfterHoverTimer.current = setTimeout(()=>{
+                    playAppear();
+                }, 100);
+            });
+            return;
+        }
+        animationHoverInstance.current.cancel();
+        if (isAppearLoop) playAppear();
+        return;
+    }, [
+        hoverPlay,
+        isAppearLoop,
+        playAppear
+    ]);
+    const getSettingByDevice = useCallback(()=>{
+        if (currentDevice.current === 'desktop') return settings?.desktop;
+        else if (currentDevice.current === 'tablet') return settings?.tablet ?? settings?.desktop;
+        else if (currentDevice.current === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
+        return settings?.desktop;
+    }, [
+        settings?.desktop,
+        settings?.mobile,
+        settings?.tablet
+    ]);
+    const getAnimationType = (settings, type)=>{
+        return settings?.triggerConfig?.[type]?.animation ?? 'none';
+    };
+    const initAppearInstance = useCallback((settings)=>{
+        if (animationAppearType.current === 'none') return;
+        const animationConfig = settings?.triggerConfig?.['appear']?.setting?.[animationAppearType.current];
+        setIsAppearLoop(animationConfig.loop);
+        animationAppearInstance.current = animation?.[animationAppearType.current]?.(animationElement.current, animationConfig);
+    }, [
+        animation
+    ]);
+    const initHoverInstance = useCallback((settings)=>{
+        if (animationHoverType.current === 'none') return;
+        const animationConfig = settings?.triggerConfig?.['hover']?.setting?.[animationHoverType.current];
+        animationHoverInstance.current = animation?.[animationHoverType.current]?.(animationElement.current, animationConfig);
+    }, [
+        animation
+    ]);
+    const reset = useCallback(()=>{
+        if (animationAppearInstance.current) {
+            animationAppearInstance.current = null;
+            if (animationElement.current) {
+                observer.current?.unobserve(animationElement.current);
+            }
+        }
+        if (animationHoverInstance) {
+            animationHoverInstance.current = null;
+            if (animationElement.current) {
+                animationElement.current.removeEventListener('mouseenter', playHover);
+                animationElement.current.removeEventListener('mouseleave', cancelHover);
+            }
+        }
+    }, [
+        cancelHover,
+        playHover
+    ]);
+    const initAnimation = useCallback((settings)=>{
+        reset();
+        if (!animationElement.current) return;
+        if (!settings?.enabled) {
+            removeZeroOpacity();
+            return;
+        }
+        animationAppearType.current = getAnimationType(settings, 'appear');
+        animationHoverType.current = getAnimationType(settings, 'hover');
+        if (animationAppearType.current === 'none') removeZeroOpacity();
+        if (animationHoverType.current !== 'none' && currentDevice.current === 'desktop') {
+            initHoverInstance(settings);
+            animationElement.current.addEventListener('mouseenter', playHover);
+            animationElement.current.addEventListener('mouseleave', cancelHover);
+        }
+        if (animationAppearType.current !== 'none') {
+            initAppearInstance(settings);
+            observer.current = new IntersectionObserver((entries)=>{
+                entries.forEach((entry)=>{
+                    if (entry.intersectionRatio > 0.1) playAppear();
+                });
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: [
+                    0.1
+                ]
+            });
+            observer.current.observe(animationElement.current);
+        } else removeZeroOpacity();
+    }, [
+        cancelHover,
+        initAppearInstance,
+        initHoverInstance,
+        playAppear,
+        playHover,
+        removeZeroOpacity,
+        reset
+    ]);
+    const initResizeObserver = useCallback(()=>{
+        const screen = document.querySelector('html');
+        if (!animationElement.current || !screen) return;
+        const resizeObserver = new ResizeObserver(([entry])=>{
+            const deviceWidth = entry?.target.getBoundingClientRect().width ?? 0;
+            let device;
+            if (deviceWidth >= 1024) device = 'desktop';
+            else if (deviceWidth >= 768) device = 'tablet';
+            else device = 'mobile';
+            if (currentDevice.current === device) return;
+            currentDevice.current = device;
+            initAnimation(getSettingByDevice());
+        });
+        resizeObserver.observe(screen);
+        return ()=>resizeObserver.disconnect();
+    }, [
+        getSettingByDevice,
+        initAnimation
+    ]);
+    useEffect(()=>{
+        setTimeout(()=>{
+            if (!settings || !wrapperRef.current) return;
+            wrapperId.current = `animation-wrapper-${Math.random().toString(36).substr(2, 5)}`;
+            wrapperRef.current.setAttribute('data-animationid', wrapperId.current);
+            if (Object.keys(TAGS_SELECTOR).includes(tag)) animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] ${TAGS_SELECTOR?.[tag] ?? ''}`);
+            else animationElement.current = document.querySelector(`[data-animationid='${wrapperId.current}'] > :first-child`);
+            return initResizeObserver();
+        }, 100);
+    }, [
+        initResizeObserver,
+        settings,
+        tag,
+        wrapperRef
+    ]);
+    return {
+        initAnimation
+    };
+};
+
+export { useLivePageAnimation };