@gem-sdk/core 1.31.0 → 1.31.7

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

@@ -1,230 +0,0 @@
-'use strict';
-
-var react = require('react');
-var animations = require('./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.animations();
-    const [isAppearLoop, setIsAppearLoop] = react.useState(false);
-    const observer = react.useRef(undefined);
-    const appearAfterHoverTimer = react.useRef(undefined);
-    const animationElement = react.useRef(null);
-    const animationAppearType = react.useRef('none');
-    const animationHoverType = react.useRef('none');
-    const animationAppearInstance = react.useRef(null);
-    const animationHoverInstance = react.useRef(null);
-    const currentDevice = react.useRef(null);
-    const wrapperId = react.useRef('animation-wrapper-');
-    const appearPlay = react.useCallback((rate)=>{
-        if (!animationAppearInstance.current) return;
-        animationAppearInstance.current.playbackRate = rate ?? 1;
-        animationAppearInstance.current.play();
-    }, [
-        animationAppearInstance
-    ]);
-    const hoverPlay = react.useCallback((rate)=>{
-        if (!animationHoverInstance.current) return;
-        animationHoverInstance.current.playbackRate = rate ?? 1;
-        animationHoverInstance.current.play();
-    }, [
-        animationHoverInstance
-    ]);
-    const removeZeroOpacity = react.useCallback(()=>{
-        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
-        if (animationElement.current) animationElement.current.style.opacity = '1';
-    }, [
-        wrapperRef
-    ]);
-    const applyInitOpacity = react.useCallback(()=>{
-        if (wrapperRef.current) wrapperRef.current.style.opacity = '1';
-        if (animationElement.current) animationElement.current.style.opacity = '0';
-    }, [
-        wrapperRef
-    ]);
-    const playAppear = react.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 = react.useCallback(()=>{
-        if (!animationAppearInstance.current) return;
-        animationAppearInstance.current.cancel();
-    }, [
-        animationAppearInstance
-    ]);
-    const playHover = react.useCallback((e)=>{
-        e && e.stopPropagation();
-        if (!animationHoverInstance.current) return;
-        cancelAppear();
-        hoverPlay();
-    }, [
-        animationHoverInstance,
-        cancelAppear,
-        hoverPlay
-    ]);
-    const cancelHover = react.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 = react.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 = react.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 = react.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 = react.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 = react.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 = react.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
-    ]);
-    react.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
-    };
-};
-
-exports.useLivePageAnimation = useLivePageAnimation;

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

@@ -1,46 +0,0 @@
-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/hooks/animation/animations.js

@@ -1,225 +0,0 @@
-// 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 };