@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,204 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Recommendation").RecommendationProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => 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;
+            };
+        };
+        controller: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        title: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        loop: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        pagination: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        vertical: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideButtons: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        prevButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        nextButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        breakpoints: {
+            defaultValue: any;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (props: any, { loaded: { controller } }: {
+        loaded: {
+            controller: any;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: import("@searchspring/snap-controller").RecommendationController;
+    }>)[];
+};
+//# sourceMappingURL=Recommendation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAyHE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}

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

@@ -0,0 +1,136 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Recommendation } from './Recommendation';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from './readme.md';
+export default {
+    title: `Organisms/Recommendation`,
+    component: Recommendation,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                maxWidth: '900px',
+                height: '500px',
+            } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        controller: {
+            description: 'Controller reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        },
+        title: {
+            description: 'Recommendation title',
+            table: {
+                type: {
+                    summary: 'string | JSX Element',
+                },
+                defaultValue: { summary: '' },
+            },
+            control: { type: 'text' },
+        },
+        loop: {
+            defaultValue: true,
+            description: 'Recommendation pagination loops',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
+        pagination: {
+            defaultValue: false,
+            description: 'Display pagination dots',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        vertical: {
+            defaultValue: false,
+            description: 'Recommendation carousel direction',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideButtons: {
+            defaultValue: false,
+            description: 'Hide prev/next buttons',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        prevButton: {
+            description: 'Previous button',
+            table: {
+                type: {
+                    summary: 'string | JSX Element',
+                },
+            },
+            control: { type: 'text' },
+        },
+        nextButton: {
+            description: 'Next button',
+            table: {
+                type: {
+                    summary: 'string | JSX Element',
+                },
+            },
+            control: { type: 'text' },
+        },
+        breakpoints: {
+            defaultValue: undefined,
+            description: 'Recommendation title',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+                defaultValue: { summary: 'Breakpoint object' },
+            },
+            control: { type: 'object' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.recommendation({ id: 'Recommendation', tag: 'trending', globals: { siteId: '8uyt2m' } });
+export const Default = (props, { loaded: { controller } }) => {
+    return h(Recommendation, { ...props, controller: controller });
+};
+Default.loaders = [
+    async () => {
+        snapInstance.on('afterStore', async ({ controller }, next) => {
+            controller.store.results.forEach((result) => (result.mappings.core.url = 'javascript:void(0);'));
+            await next();
+        });
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+import { ComponentProps, Result as ResultType, LayoutType, InlineBannerContent } from '../../../types';
+export declare const Results: ((properties: ResultsProp) => JSX.Element) & {
+    displayName: string;
+};
+export interface ResultsProp extends ComponentProps {
+    results?: ResultType[] | InlineBannerContent[];
+    columns?: number;
+    rows?: number;
+    gapSize?: string;
+    layout?: LayoutType;
+    breakpoints?: BreakpointsProps;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+}
+export declare type BreakpointsProps = {
+    [key: number]: BreakpointsEntry;
+};
+export declare type BreakpointsEntry = {
+    [property: string]: any;
+};
+//# sourceMappingURL=Results.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,MAAM,gBAAgB,CAAC;AAsD3H,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAoFpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF;AAED,oBAAY,gBAAgB,GAAG;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CAChC,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACxB,CAAC"}

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

@@ -0,0 +1,125 @@
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { InlineBanner } from '../../Atoms/Merchandising/InlineBanner';
+import { Result } from '../../Molecules/Result';
+import { Layout, BannerType } from '../../../types';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+const CSS = {
+    results: ({ columns, gapSize }) => css({
+        display: 'flex',
+        flexFlow: 'row wrap',
+        gap: gapSize,
+        gridTemplateRows: 'auto',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        '& .ss__result': {
+            boxSizing: 'border-box',
+            flex: '0 1 auto',
+            width: `calc(${100 / columns}% - (${columns - 1} * ${gapSize} / ${columns} ) )`,
+            marginRight: gapSize,
+            marginBottom: gapSize,
+            [`&:nth-of-type(${columns}n)`]: {
+                marginRight: '0',
+            },
+            [`&:nth-last-of-type(-n+${columns})`]: {
+                marginBottom: '0',
+            },
+        },
+        '@supports (display: grid)': {
+            display: 'grid',
+            '& .ss__result': {
+                width: 'initial',
+                margin: 0,
+            },
+        },
+    }),
+};
+const defaultBreakpointsProps = {
+    0: {
+        columns: 1,
+    },
+    540: {
+        columns: 2,
+    },
+    768: {
+        columns: 3,
+    },
+    991: {
+        columns: 4,
+    },
+};
+export const Results = observer((properties) => {
+    const globalTheme = useTheme();
+    let props = {
+        // default props
+        results: properties.controller?.store?.results,
+        columns: 4,
+        gapSize: '20px',
+        layout: Layout.GRID,
+        breakpoints: defaultBreakpointsProps,
+        // global theme
+        ...globalTheme?.components?.results,
+        // props
+        ...properties,
+        ...properties.theme?.components?.results,
+    };
+    const displaySettings = useDisplaySettings(props.breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        props = {
+            ...props,
+            ...displaySettings,
+        };
+    }
+    const { disableStyles, className, layout, style, controller } = props;
+    const subProps = {
+        result: {
+            // default props
+            className: 'ss__results__result',
+            // global theme
+            ...globalTheme?.components?.result,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        inlineBanner: {
+            // default props
+            className: 'ss__results__inline-banner',
+            // global theme
+            ...globalTheme?.components?.inlineBanner,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    let results;
+    if (props?.columns > 0 && props?.rows > 0) {
+        results = props.results.slice(0, props.columns * props.rows);
+    }
+    else {
+        results = props.results;
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.results({ columns: layout == Layout.LIST ? 1 : props.columns, gapSize: props.gapSize }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return results?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__results', className) }, results.map((result) => (() => {
+            switch (result.type) {
+                case BannerType.BANNER:
+                    return jsx(InlineBanner, { key: result.uid, ...subProps.inlineBanner, banner: result, layout: props.layout });
+                default:
+                    return jsx(Result, { key: result.uid, ...subProps.result, result: result, layout: props.layout, controller: controller });
+            }
+        })())))) : null;
+});

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

@@ -0,0 +1,163 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { ResultsProp } from './Results';
+import { Layout } from '../../../types';
+declare const _default: {
+    title: string;
+    component: ((properties: ResultsProp) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => 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;
+            };
+        };
+        results: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        layout: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: Layout[];
+            };
+        };
+        columns: {
+            defaultValue: number;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        rows: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        gapSize: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        breakpoints: {
+            defaultValue: {};
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        controller: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Grid: any;
+export declare const List: any;
+//# sourceMappingURL=Results.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAqGE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}