@levi-gemcommerce/analytics 2.0.5-dev.1 → 2.1.0-test.0

package/dist/esm/hooks/publish/useStickyDetectById.mjs

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+function isBrowser() {
+    return typeof window !== 'undefined';
+}
+const useIsStickyById = ({ id, stickyTop, threshold = 0, enabled = true, }) => {
+    const [isSticky, setIsSticky] = useState(false);
+    useEffect(() => {
+        if (!enabled || !isBrowser())
+            return;
+        const el = document.getElementById(id);
+        if (!el)
+            return;
+        const checkSticky = () => {
+            const rect = el.getBoundingClientRect();
+            setIsSticky(rect.top <= stickyTop + threshold);
+        };
+        checkSticky();
+        window.addEventListener('scroll', checkSticky, { passive: true });
+        window.addEventListener('resize', checkSticky);
+        return () => {
+            window.removeEventListener('scroll', checkSticky);
+            window.removeEventListener('resize', checkSticky);
+        };
+    }, [id, stickyTop, threshold, enabled]);
+    return isSticky;
+};
+
+export { useIsStickyById };

package/dist/esm/hooks/publish/useStickyFilterBoxProps.d.ts

@@ -2,5 +2,5 @@ import type { BoxProps } from '@shopify/polaris';
 type IUseStickyFilterBoxPropsArgs = {
     id: string;
 };
-export declare const useStickyFilterBoxProps: ({ id }: IUseStickyFilterBoxPropsArgs) => Partial<BoxProps>;
+export declare const useStickyFilterBoxProps: ({ id, }: IUseStickyFilterBoxPropsArgs) => Partial<BoxProps>;
 export {};

package/dist/esm/hooks/publish/useStickyFilterBoxProps.js

@@ -0,0 +1,21 @@
+import { useIsStickyById } from './useStickyDetectById.js';
+import { useWindowSize } from './useWindowSize.js';
+
+// Border is deferred until the row is actually stuck so it doesn't flash on initial render.
+const useStickyFilterBoxProps = ({ id, }) => {
+    const { isMobileView } = useWindowSize();
+    const enabled = isMobileView && Boolean(id);
+    const isStuck = useIsStickyById({ id, stickyTop: 0, enabled });
+    if (!enabled)
+        return {};
+    return {
+        position: 'sticky',
+        insetBlockStart: '0',
+        zIndex: '10',
+        background: 'bg',
+        paddingBlock: '200',
+        ...(isStuck && { borderBlockEndWidth: '025', borderColor: 'border' }),
+    };
+};
+
+export { useStickyFilterBoxProps };

package/dist/esm/hooks/publish/useStickyFilterBoxProps.mjs

@@ -0,0 +1,21 @@
+import { useIsStickyById } from './useStickyDetectById.mjs';
+import { useWindowSize } from './useWindowSize.mjs';
+
+// Border is deferred until the row is actually stuck so it doesn't flash on initial render.
+const useStickyFilterBoxProps = ({ id, }) => {
+    const { isMobileView } = useWindowSize();
+    const enabled = isMobileView && Boolean(id);
+    const isStuck = useIsStickyById({ id, stickyTop: 0, enabled });
+    if (!enabled)
+        return {};
+    return {
+        position: 'sticky',
+        insetBlockStart: '0',
+        zIndex: '10',
+        background: 'bg',
+        paddingBlock: '200',
+        ...(isStuck && { borderBlockEndWidth: '025', borderColor: 'border' }),
+    };
+};
+
+export { useStickyFilterBoxProps };

package/dist/esm/hooks/publish/useWindowSize.js

@@ -0,0 +1,32 @@
+import { useState, useMemo, useEffect } from 'react';
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(() => ({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    }));
+    const windowWidth = useMemo(() => {
+        return {
+            xs: windowSize.width <= 768,
+            md: 768 < windowSize.width && windowSize.width <= 1024,
+            lg: windowSize.width > 1024,
+            xsDown: windowSize.width < 768,
+            '1200Down': windowSize.width < 1200,
+            '1040Down': windowSize.width < 1040,
+        };
+    }, [windowSize.width]);
+    const isMobileTabletView = !windowWidth.lg;
+    const isMobileView = windowWidth.xs;
+    useEffect(() => {
+        const windowSizeHandler = () => {
+            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        };
+        window.addEventListener('resize', windowSizeHandler);
+        return () => {
+            window.removeEventListener('resize', windowSizeHandler);
+        };
+    }, []);
+    return { windowSize, windowWidth, isMobileTabletView, isMobileView };
+};
+
+export { useWindowSize };

package/dist/esm/hooks/publish/useWindowSize.mjs

@@ -0,0 +1,32 @@
+import { useState, useMemo, useEffect } from 'react';
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(() => ({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    }));
+    const windowWidth = useMemo(() => {
+        return {
+            xs: windowSize.width <= 768,
+            md: 768 < windowSize.width && windowSize.width <= 1024,
+            lg: windowSize.width > 1024,
+            xsDown: windowSize.width < 768,
+            '1200Down': windowSize.width < 1200,
+            '1040Down': windowSize.width < 1040,
+        };
+    }, [windowSize.width]);
+    const isMobileTabletView = !windowWidth.lg;
+    const isMobileView = windowWidth.xs;
+    useEffect(() => {
+        const windowSizeHandler = () => {
+            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        };
+        window.addEventListener('resize', windowSizeHandler);
+        return () => {
+            window.removeEventListener('resize', windowSizeHandler);
+        };
+    }, []);
+    return { windowSize, windowWidth, isMobileTabletView, isMobileView };
+};
+
+export { useWindowSize };

package/dist/esm/hooks/useEnhancedEffect.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export { useEnhancedEffect };

package/dist/esm/hooks/useEnhancedEffect.mjs

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export { useEnhancedEffect };

package/dist/esm/hooks/useFetchCurrencyRates.d.ts

@@ -1 +1,4 @@
-export declare const useFetchCurrencyRates: () => void;
+export declare const useFetchCurrencyRates: () => {
+    isError: boolean;
+    error: Error | null;
+};

package/dist/esm/hooks/useFetchCurrencyRates.js

@@ -0,0 +1,47 @@
+import { useCurrencyRatesStore } from '../stores/currencyRatesStore.js';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+const SHOPIFY_CURRENCIES_URL = 'https://cdn.shopify.com/s/javascripts/currencies.js';
+const parseCurrencyRates = (scriptText) => {
+    const rates = {};
+    const match = /var Currency=\{rates:\{(.*?)\}\};/s.exec(scriptText);
+    const ratesStr = match?.[1];
+    if (!ratesStr)
+        return rates;
+    const ratePattern = /([A-Z]+):\s*([\d.e+-]+),/g;
+    let m;
+    while ((m = ratePattern.exec(ratesStr)) !== null) {
+        const [, code, value] = m;
+        if (code && value)
+            rates[code] = parseFloat(value);
+    }
+    return rates;
+};
+const fetchCurrencyRates = async () => {
+    const res = await fetch(SHOPIFY_CURRENCIES_URL);
+    if (!res.ok)
+        throw new Error('Failed to fetch currency rates');
+    const text = await res.text();
+    return parseCurrencyRates(text);
+};
+const useFetchCurrencyRates = () => {
+    const setCurrencyRates = useCurrencyRatesStore((state) => state.setCurrencyRates);
+    const { data, error, isError } = useQuery({
+        queryKey: ['sdk-currency-rates'],
+        queryFn: fetchCurrencyRates,
+        staleTime: 1000 * 60 * 60, // 1 hour — rates don't change often
+    });
+    useEffect(() => {
+        if (data)
+            setCurrencyRates(data);
+    }, [data, setCurrencyRates]);
+    // Surface fetch failures: without rates, money renders in the base currency unconverted.
+    useEffect(() => {
+        if (isError)
+            console.error('[gem-sdk/analytics] Failed to fetch currency rates:', error);
+    }, [isError, error]);
+    return { isError, error };
+};
+
+export { useFetchCurrencyRates };

package/dist/esm/hooks/useFetchCurrencyRates.mjs

@@ -0,0 +1,47 @@
+import { useCurrencyRatesStore } from '../stores/currencyRatesStore.mjs';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+const SHOPIFY_CURRENCIES_URL = 'https://cdn.shopify.com/s/javascripts/currencies.js';
+const parseCurrencyRates = (scriptText) => {
+    const rates = {};
+    const match = /var Currency=\{rates:\{(.*?)\}\};/s.exec(scriptText);
+    const ratesStr = match?.[1];
+    if (!ratesStr)
+        return rates;
+    const ratePattern = /([A-Z]+):\s*([\d.e+-]+),/g;
+    let m;
+    while ((m = ratePattern.exec(ratesStr)) !== null) {
+        const [, code, value] = m;
+        if (code && value)
+            rates[code] = parseFloat(value);
+    }
+    return rates;
+};
+const fetchCurrencyRates = async () => {
+    const res = await fetch(SHOPIFY_CURRENCIES_URL);
+    if (!res.ok)
+        throw new Error('Failed to fetch currency rates');
+    const text = await res.text();
+    return parseCurrencyRates(text);
+};
+const useFetchCurrencyRates = () => {
+    const setCurrencyRates = useCurrencyRatesStore((state) => state.setCurrencyRates);
+    const { data, error, isError } = useQuery({
+        queryKey: ['sdk-currency-rates'],
+        queryFn: fetchCurrencyRates,
+        staleTime: 1000 * 60 * 60, // 1 hour — rates don't change often
+    });
+    useEffect(() => {
+        if (data)
+            setCurrencyRates(data);
+    }, [data, setCurrencyRates]);
+    // Surface fetch failures: without rates, money renders in the base currency unconverted.
+    useEffect(() => {
+        if (isError)
+            console.error('[gem-sdk/analytics] Failed to fetch currency rates:', error);
+    }, [isError, error]);
+    return { isError, error };
+};
+
+export { useFetchCurrencyRates };

package/dist/esm/hooks/useFormatLineChartData.d.ts

@@ -1,5 +1,5 @@
-import type { EMetricKey } from '@/types/metric';
-import type { ColumnTypesMap } from '@/core/gemxql';
+import type { ColumnTypesMap } from '../core/gemxql';
+import type { EMetricKey } from '../types/metric';
 interface IProps {
     metricKey?: EMetricKey;
     columnTypes: ColumnTypesMap;

package/dist/esm/hooks/useFormatLineChartData.js

@@ -0,0 +1,19 @@
+import { useAnalyticData } from '../core/gemxql/hooks/useAnalyticData.js';
+import '../shared/components/GPagination/GPagination.js';
+import 'react';
+
+const useFormatLineChartData = ({ metricKey, columnTypes }) => {
+    const { formatData } = useAnalyticData();
+    const formatter = metricKey ? columnTypes?.[metricKey] : undefined;
+    const formatValue = (value) => {
+        return String(formatData({ value, formatter }));
+    };
+    const yAxisOptions = {
+        labelFormatter: (value) => {
+            return formatValue(Number(value) || 0);
+        },
+    };
+    return { formatValue, yAxisOptions };
+};
+
+export { useFormatLineChartData };

package/dist/esm/hooks/useFormatLineChartData.mjs

@@ -0,0 +1,19 @@
+import { useAnalyticData } from '../core/gemxql/hooks/useAnalyticData.mjs';
+import '../shared/components/GPagination/GPagination.mjs';
+import 'react';
+
+const useFormatLineChartData = ({ metricKey, columnTypes }) => {
+    const { formatData } = useAnalyticData();
+    const formatter = metricKey ? columnTypes?.[metricKey] : undefined;
+    const formatValue = (value) => {
+        return String(formatData({ value, formatter }));
+    };
+    const yAxisOptions = {
+        labelFormatter: (value) => {
+            return formatValue(Number(value) || 0);
+        },
+    };
+    return { formatValue, yAxisOptions };
+};
+
+export { useFormatLineChartData };

package/dist/esm/hooks/usePopoverResizeObserver.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+const usePopoverResizeObserver = ({ active, onHeightChange, selector = '.Polaris-Popover__Content--fluidContent', }) => {
+    useEffect(() => {
+        if (!active)
+            return;
+        let resizeObserver = null;
+        const setupResizeObserver = () => {
+            const popoverContent = document.querySelector(selector);
+            if (popoverContent && !resizeObserver) {
+                resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { height } = entry.contentRect;
+                        onHeightChange?.(height);
+                    }
+                });
+                resizeObserver.observe(popoverContent);
+            }
+        };
+        const timer = setTimeout(() => {
+            setupResizeObserver();
+        }, 200);
+        return () => {
+            clearTimeout(timer);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+        };
+    }, [active, selector]);
+};
+
+export { usePopoverResizeObserver };

package/dist/esm/hooks/usePopoverResizeObserver.mjs

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+const usePopoverResizeObserver = ({ active, onHeightChange, selector = '.Polaris-Popover__Content--fluidContent', }) => {
+    useEffect(() => {
+        if (!active)
+            return;
+        let resizeObserver = null;
+        const setupResizeObserver = () => {
+            const popoverContent = document.querySelector(selector);
+            if (popoverContent && !resizeObserver) {
+                resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { height } = entry.contentRect;
+                        onHeightChange?.(height);
+                    }
+                });
+                resizeObserver.observe(popoverContent);
+            }
+        };
+        const timer = setTimeout(() => {
+            setupResizeObserver();
+        }, 200);
+        return () => {
+            clearTimeout(timer);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+        };
+    }, [active, selector]);
+};
+
+export { usePopoverResizeObserver };

package/dist/esm/hooks/usePreventBodyScroll.d.ts

@@ -0,0 +1,3 @@
+export declare const usePreventBodyScroll: ({ enable }: {
+    enable: boolean;
+}) => void;

package/dist/esm/hooks/usePreventBodyScroll.js

@@ -0,0 +1,19 @@
+import '../utils/dayjs.js';
+import '../utils/analytics.js';
+import '../types/template.js';
+import { isBrowser } from '../utils/is-browser.js';
+import { useEffect } from 'react';
+
+const usePreventBodyScroll = ({ enable }) => {
+    useEffect(() => {
+        if (!enable || !isBrowser())
+            return;
+        // Prevent layout shift from scrollbar removal
+        document.body.style.overflowY = 'hidden';
+        return () => {
+            document.body.style.overflowY = 'unset';
+        };
+    }, [enable]);
+};
+
+export { usePreventBodyScroll };

package/dist/esm/hooks/usePreventBodyScroll.mjs

@@ -0,0 +1,19 @@
+import '../utils/dayjs.mjs';
+import '../utils/analytics.mjs';
+import '../types/template.mjs';
+import { isBrowser } from '../utils/is-browser.mjs';
+import { useEffect } from 'react';
+
+const usePreventBodyScroll = ({ enable }) => {
+    useEffect(() => {
+        if (!enable || !isBrowser())
+            return;
+        // Prevent layout shift from scrollbar removal
+        document.body.style.overflowY = 'hidden';
+        return () => {
+            document.body.style.overflowY = 'unset';
+        };
+    }, [enable]);
+};
+
+export { usePreventBodyScroll };

package/dist/esm/hooks/useToggle.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
+    };
+}
+
+export { useToggle };

package/dist/esm/hooks/useToggle.mjs

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
+    };
+}
+
+export { useToggle };