@searchspring/snap-preact-components 0.20.0

package/dist/esm/components/Organisms/Results/Results.stories.js

@@ -0,0 +1,126 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Results } from './Results';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import { Layout } from '../../../types';
+import Readme from './readme.md';
+export default {
+    title: `Organisms/Results`,
+    component: Results,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                maxWidth: '900px',
+            } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        results: {
+            description: 'Results store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'Results store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        layout: {
+            description: 'Results layout',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: {
+                type: 'select',
+                options: [Layout.GRID, Layout.LIST],
+            },
+        },
+        columns: {
+            defaultValue: 4,
+            description: 'Number of columns in results grid',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 4 },
+            },
+            control: { type: 'number' },
+        },
+        rows: {
+            description: 'Number of rows in results grid - adding this will put a hard limit on the results',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        },
+        gapSize: {
+            defaultValue: '20px',
+            description: 'Gap size between rows and columns',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '20px' },
+            },
+            control: { type: 'text' },
+        },
+        breakpoints: {
+            defaultValue: {},
+            description: 'Breakpoints options object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: {
+                type: 'object',
+            },
+        },
+        controller: {
+            description: 'Controller reference',
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Results', globals: { siteId: '8uyt2m' } });
+const GridTemplate = (args, { loaded: { controller } }) => {
+    return h(Results, { ...args, controller: controller, results: controller?.store?.results });
+};
+export const Grid = GridTemplate.bind({});
+Grid.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+const ListTemplate = (args, { loaded: { controller } }) => {
+    return h(Results, { ...args, controller: controller, results: controller?.store?.results, layout: Layout.LIST });
+};
+export const List = ListTemplate.bind({});
+List.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

package/dist/esm/components/Organisms/Results/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Results';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Organisms/Results/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/esm/components/Organisms/Results/index.js

@@ -0,0 +1 @@
+export * from './Results';

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

@@ -0,0 +1,5 @@
+export * from './useClickOutside';
+export * from './useMediaQuery';
+export * from './useIntersection';
+export * from './useDisplaySettings';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC"}

package/dist/esm/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useClickOutside';
+export * from './useMediaQuery';
+export * from './useIntersection';
+export * from './useDisplaySettings';

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

@@ -0,0 +1,2 @@
+export declare function useClickOutside<T extends HTMLElement>(callback: (e: Event) => void): preact.RefObject<T>;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/esm/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAGA,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAmBxG"}

package/dist/esm/hooks/useClickOutside.js

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from 'preact/hooks';
+export function useClickOutside(callback) {
+    const callbackRef = useRef();
+    const innerRef = useRef();
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    useEffect(() => {
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+        function handleClick(e) {
+            if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target))
+                callbackRef.current(e);
+        }
+    }, []);
+    return innerRef;
+}

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

@@ -0,0 +1,3 @@
+import { BreakpointsProps, BreakpointsEntry } from '../components/Organisms/Results/Results';
+export declare function useDisplaySettings(breakpointsObj: BreakpointsProps): BreakpointsEntry;
+//# sourceMappingURL=useDisplaySettings.d.ts.map

package/dist/esm/hooks/useDisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE7F,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,CAoBrF"}

package/dist/esm/hooks/useDisplaySettings.js

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'preact/hooks';
+export function useDisplaySettings(breakpointsObj) {
+    if (!breakpointsObj || !Object.keys(breakpointsObj).length)
+        return;
+    // Call getDisplaySettings right away to prevent flashing
+    const [displaySettings, setDisplaySettings] = useState(getDisplaySettings(breakpointsObj));
+    useEffect(() => {
+        function handleResize() {
+            // Set display settings to state
+            setDisplaySettings(getDisplaySettings(breakpointsObj));
+        }
+        // Add event listener
+        const debouncedHandleResize = debounce(() => handleResize());
+        window.addEventListener('resize', debouncedHandleResize);
+        // Remove event listener on cleanup
+        return () => window.removeEventListener('resize', debouncedHandleResize);
+    }, []);
+    return displaySettings;
+}
+const getDisplaySettings = (breakpoints) => {
+    let breakpointsSettings;
+    const currentScreenWidth = window.innerWidth;
+    const sortedList = Object.keys(breakpoints)
+        ?.sort((a, b) => parseInt(a) - parseInt(b))
+        .map((vp) => ({ [vp]: breakpoints[vp] }));
+    if (sortedList.length) {
+        //loop through and find the desired breakpoints setting
+        for (let i = 0; i < sortedList.length; i++) {
+            const entry = sortedList[i];
+            const breakpoint = parseInt(Object.keys(entry)[0]);
+            const isLastEntry = i + 1 === sortedList.length;
+            const isFirstEntry = i === 0;
+            if (isLastEntry || (isFirstEntry && currentScreenWidth < breakpoint)) {
+                // last entry or a '0' value breakpoint was not provided
+                breakpointsSettings = sortedList[i][breakpoint];
+                break;
+            }
+            else {
+                const nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
+                if (currentScreenWidth >= breakpoint && currentScreenWidth < nextBreakpoint) {
+                    breakpointsSettings = sortedList[i][breakpoint];
+                    break;
+                }
+            }
+        }
+        return breakpointsSettings;
+    }
+};
+const debounce = (func, timeout = 200) => {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(this, args);
+        }, timeout);
+    };
+};

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

@@ -0,0 +1,2 @@
+export declare const useIntersection: (ref: any, rootMargin?: string, fireOnce?: boolean) => boolean;
+//# sourceMappingURL=useIntersection.d.ts.map

package/dist/esm/hooks/useIntersection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersection.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,gEAyB3B,CAAC"}

package/dist/esm/hooks/useIntersection.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'preact/hooks';
+export const useIntersection = (ref, rootMargin = '0px', fireOnce = false) => {
+    // State and setter for storing whether element is visible
+    const [isIntersecting, setIntersecting] = useState(false);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            // Update our state when observer callback fires
+            setIntersecting(entry.isIntersecting);
+            if (fireOnce && entry.isIntersecting) {
+                observer.unobserve(ref.current);
+            }
+        }, {
+            rootMargin,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.unobserve(ref.current);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+    return isIntersecting;
+};

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

@@ -0,0 +1,2 @@
+export declare function useMediaQuery(query: string, runOnCleanup?: () => void): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/esm/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAgB/E"}

package/dist/esm/hooks/useMediaQuery.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'preact/hooks';
+export function useMediaQuery(query, runOnCleanup) {
+    if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+        return false;
+    const mediaQuery = window.matchMedia(query);
+    const [match, setMatch] = useState(!!mediaQuery.matches);
+    useEffect(() => {
+        const handler = () => setMatch(!!mediaQuery.matches);
+        mediaQuery.addListener(handler);
+        return () => {
+            runOnCleanup instanceof Function && runOnCleanup();
+            mediaQuery.removeListener(handler);
+        };
+    }, []);
+    return match;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,34 @@
+export * from './components/Atoms/Badge';
+export * from './components/Atoms/Breadcrumbs';
+export * from './components/Atoms/Button';
+export * from './components/Atoms/Dropdown';
+export * from './components/Atoms/FormattedNumber';
+export * from './components/Atoms/Icon';
+export * from './components/Atoms/Image';
+export * from './components/Atoms/Loading';
+export * from './components/Atoms/Merchandising';
+export * from './components/Atoms/Overlay';
+export * from './components/Atoms/Price';
+export * from './components/Atoms/Skeleton';
+export * from './components/Molecules/Carousel';
+export * from './components/Molecules/Checkbox';
+export * from './components/Molecules/ErrorHandler';
+export * from './components/Molecules/FacetGridOptions';
+export * from './components/Molecules/FacetHierarchyOptions';
+export * from './components/Molecules/FacetListOptions';
+export * from './components/Molecules/FacetPaletteOptions';
+export * from './components/Molecules/Filter';
+export * from './components/Molecules/Pagination';
+export * from './components/Molecules/Result';
+export * from './components/Molecules/Select';
+export * from './components/Molecules/Slideout';
+export * from './components/Molecules/FacetSlider';
+export * from './components/Organisms/Autocomplete';
+export * from './components/Organisms/Facet';
+export * from './components/Organisms/Facets';
+export * from './components/Organisms/FilterSummary';
+export * from './components/Organisms/Recommendation';
+export * from './components/Organisms/Results';
+export * from './hooks';
+export * from './providers';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,38 @@
+// ATOMS
+export * from './components/Atoms/Badge';
+export * from './components/Atoms/Breadcrumbs';
+export * from './components/Atoms/Button';
+export * from './components/Atoms/Dropdown';
+export * from './components/Atoms/FormattedNumber';
+export * from './components/Atoms/Icon';
+export * from './components/Atoms/Image';
+export * from './components/Atoms/Loading';
+export * from './components/Atoms/Merchandising';
+export * from './components/Atoms/Overlay';
+export * from './components/Atoms/Price';
+export * from './components/Atoms/Skeleton';
+// MOLECULES
+export * from './components/Molecules/Carousel';
+export * from './components/Molecules/Checkbox';
+export * from './components/Molecules/ErrorHandler';
+export * from './components/Molecules/FacetGridOptions';
+export * from './components/Molecules/FacetHierarchyOptions';
+export * from './components/Molecules/FacetListOptions';
+export * from './components/Molecules/FacetPaletteOptions';
+export * from './components/Molecules/Filter';
+export * from './components/Molecules/Pagination';
+export * from './components/Molecules/Result';
+export * from './components/Molecules/Select';
+export * from './components/Molecules/Slideout';
+export * from './components/Molecules/FacetSlider';
+// ORGANISMS
+export * from './components/Organisms/Autocomplete';
+export * from './components/Organisms/Facet';
+export * from './components/Organisms/Facets';
+export * from './components/Organisms/FilterSummary';
+export * from './components/Organisms/Recommendation';
+export * from './components/Organisms/Results';
+// HOOKS
+export * from './hooks';
+// PROVIDERS
+export * from './providers';