@searchspring/snap-preact-components 0.20.0

package/dist/esm/components/Organisms/FilterSummary/FilterSummary.stories.d.ts

@@ -0,0 +1,200 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FilterSummaryProps } from './FilterSummary';
+declare const _default: {
+    title: string;
+    component: ((properties: FilterSummaryProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        filters: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        title: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideFacetLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: string;
+        };
+        separator: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideClearAll: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: string;
+        };
+        clearAllLabel: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: string;
+        };
+        clearAllIcon: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        filterIcon: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onClearAllClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Regular: any;
+export declare const noFacetLabel: any;
+export declare const customTitle: any;
+//# sourceMappingURL=FilterSummary.stories.d.ts.map

package/dist/esm/components/Organisms/FilterSummary/FilterSummary.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSummary.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAiB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpE,wBA4HE;AAsBF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAa9C,eAAO,MAAM,WAAW,KAAoB,CAAC"}

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

@@ -0,0 +1,181 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { iconPaths } from '../../Atoms/Icon';
+import { FilterSummary } from './FilterSummary';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../FilterSummary/readme.md';
+export default {
+    title: `Organisms/FilterSummary`,
+    component: FilterSummary,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        filters: {
+            description: 'Filters object',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        },
+        title: {
+            defaultValue: 'Current Filters',
+            description: 'Filters object',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Current Filters' },
+            },
+            control: { type: 'text' },
+        },
+        hideFacetLabel: {
+            description: 'Hide filter facet label',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: 'boolean',
+        },
+        separator: {
+            defaultValue: ':',
+            description: 'Filter delimiter',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        hideClearAll: {
+            description: 'Hide filter clear all button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: 'boolean',
+        },
+        clearAllLabel: {
+            defaultValue: 'Clear All',
+            description: 'Text to show on clear all filters',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Clear All' },
+            },
+            control: 'text',
+        },
+        clearAllIcon: {
+            defaultValue: 'close-thin',
+            description: 'Icon name',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'close-thin' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        filterIcon: {
+            defaultValue: 'close-thin',
+            description: 'Icon name',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'close-thin' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        onClick: {
+            description: 'Filter click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        onClearAllClick: {
+            description: 'Filter clear click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClearAllClick',
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({
+    id: 'FilterSummary',
+    globals: {
+        siteId: '8uyt2m',
+        filters: [
+            {
+                type: 'value',
+                field: 'color_family',
+                value: 'Blue',
+            },
+            {
+                type: 'value',
+                field: 'size',
+                value: 'Small',
+            },
+        ],
+    },
+});
+const Template = (args, { loaded: { controller } }) => h(FilterSummary, { ...args, controller: controller });
+export const Regular = Template.bind({});
+Regular.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+export const noFacetLabel = Template.bind({});
+noFacetLabel.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+noFacetLabel.args = {
+    hideFacetLabel: true,
+};
+export const customTitle = Template.bind({});
+customTitle.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+customTitle.args = {
+    title: 'Selected Filters',
+};

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

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

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

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

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

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

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { RecommendationController } from '@searchspring/snap-controller';
+import { ComponentProps } from '../../../types';
+export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface RecommendationProps extends ComponentProps {
+    title?: JSX.Element | string;
+    breakpoints?: any;
+    prevButton?: JSX.Element | string;
+    nextButton?: JSX.Element | string;
+    hideButtons?: boolean;
+    loop?: boolean;
+    pagination?: boolean;
+    controller: RecommendationController;
+    children?: JSX.Element[];
+    vertical?: boolean;
+}
+//# sourceMappingURL=Recommendation.d.ts.map

package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiDhD,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAyJnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/esm/components/Organisms/Recommendation/Recommendation.js

@@ -0,0 +1,154 @@
+import { useState, useRef } from 'preact/hooks';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Carousel } from '../../Molecules/Carousel';
+import { Result } from '../../Molecules/Result';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useIntersection } from '../../../hooks';
+const CSS = {
+    recommendation: ({ vertical }) => css({
+        height: vertical ? '100%' : null,
+        '.ss__result__image-wrapper': {
+            height: vertical ? '85%' : null,
+        },
+    }),
+};
+const defaultRecommendationBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+    480: {
+        slidesPerView: 2,
+        slidesPerGroup: 2,
+        spaceBetween: 10,
+    },
+    768: {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 10,
+    },
+    1024: {
+        slidesPerView: 4,
+        slidesPerGroup: 4,
+        spaceBetween: 10,
+    },
+    1200: {
+        slidesPerView: 5,
+        slidesPerGroup: 5,
+        spaceBetween: 10,
+    },
+};
+const defaultVerticalRecommendationBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+};
+export const Recommendation = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        breakpoints: properties.vertical ? defaultVerticalRecommendationBreakpoints : defaultRecommendationBreakpoints,
+        pagination: false,
+        loop: true,
+        // global theme
+        ...globalTheme?.components?.recommendation,
+        ...properties,
+        // props
+        ...properties.theme?.components?.recommendation,
+    };
+    const { title, controller, children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
+    if (!controller || controller.type !== 'recommendation') {
+        throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
+    }
+    if (children && children.length !== controller.store.results.length) {
+        controller.log.error(`<Recommendation> Component received invalid number of children`);
+        return;
+    }
+    const results = controller.store?.results;
+    const subProps = {
+        carousel: {
+            // default props
+            className: 'ss__recommendation__Carousel',
+            // global theme
+            ...globalTheme?.components?.carousel,
+            // inherited props
+            ...defined({
+                disableStyles,
+                vertical,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        result: {
+            // default props
+            className: 'ss__recommendation__result',
+            // global theme
+            ...globalTheme?.components?.result,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const rootComponentRef = useRef(null);
+    const [initialIndexes, setInitialIndexes] = useState([0, 0]);
+    const inViewport = useIntersection(rootComponentRef, '0px', true);
+    const sendProductImpression = (index, count) => {
+        if (!inViewport)
+            return;
+        let resultLoopCount = [index, index + count];
+        let resultLoopOverCount;
+        if (index + count > results.length - 1) {
+            resultLoopCount = [index];
+            resultLoopOverCount = [0, index + count - results.length];
+        }
+        let resultsImpressions = results.slice(...resultLoopCount);
+        if (resultLoopOverCount) {
+            resultsImpressions = resultsImpressions.concat(results.slice(...resultLoopOverCount));
+        }
+        resultsImpressions.map((result) => {
+            controller.track.product.impression(result);
+        });
+    };
+    if (inViewport) {
+        controller.track.impression();
+        sendProductImpression(initialIndexes[0], initialIndexes[1]);
+    }
+    (children || results.length) && controller?.track?.render();
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.recommendation({ vertical }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return ((children || results?.length) && (jsx(CacheProvider, null,
+        jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__recommendation', className) },
+            title && jsx("h3", { className: "ss__recommendation__title" }, title),
+            jsx(Carousel, { onInit: (swiper) => {
+                    //@ts-ignore
+                    setInitialIndexes([swiper.realIndex, swiper.loopedSlides]);
+                }, onBreakpoint: (swiper) => {
+                    //@ts-ignore
+                    sendProductImpression(swiper.realIndex, swiper.loopedSlides);
+                }, onSlideChange: (swiper) => {
+                    //@ts-ignore
+                    sendProductImpression(swiper.realIndex, swiper.loopedSlides);
+                }, prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, onNextButtonClick: (e) => controller.track.click(e), onPrevButtonClick: (e) => controller.track.click(e), onClick: (swiper, e) => {
+                    const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
+                    controller.track.click(e);
+                    if (!Number.isNaN(clickedIndex)) {
+                        controller.track.product.click(e, results[clickedIndex]);
+                    }
+                }, loop: loop, breakpoints: breakpoints, pagination: pagination, ...subProps.carousel, ...additionalProps }, children
+                ? children.map((child) => child)
+                : results.map((result) => jsx(Result, { controller: controller, result: result, ...subProps.result })))))));
+});