@searchspring/snap-preact-components 0.20.0

package/dist/esm/components/Molecules/Pagination/Pagination.stories.js

@@ -0,0 +1,162 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Pagination } from './Pagination';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Pagination/readme.md';
+export default {
+    title: `Molecules/Pagination`,
+    component: Pagination,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        pagination: {
+            description: 'Pagination store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'pagination store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        pages: {
+            description: 'Number of pages shown - recommend using an odd number as it includes the current page with an even spread to the left and right (excluding first and last)',
+            defaultValue: 5,
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 5 },
+            },
+            control: { type: 'number' },
+        },
+        pagesLeft: {
+            description: 'Number of pages shown to the left (excluding first) - must be used with pagesRight',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        },
+        pagesRight: {
+            description: 'Number of pages shown to the right (excluding last) - must be used with pagesLeft',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        },
+        nextButton: {
+            description: 'Pagination next button content',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        prevButton: {
+            description: 'Pagination prev button content',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        firstButton: {
+            description: 'Pagination first button content',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        lastButton: {
+            description: 'Pagination last button content',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        hideFirst: {
+            description: 'Hide first button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideLast: {
+            description: 'Hide last button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideEllipsis: {
+            description: 'Hide ellipsis',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideNext: {
+            description: 'Hide next button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hidePrev: {
+            description: 'Hide previous button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Pagination', globals: { siteId: '8uyt2m' } });
+const ObservablePagination = observer(({ args, controller }) => {
+    return h(Pagination, { ...args, pagination: controller?.store?.pagination });
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservablePagination, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

package/dist/esm/components/Molecules/Pagination/index.d.ts

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

package/dist/esm/components/Molecules/Pagination/index.d.ts.map

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

package/dist/esm/components/Molecules/Pagination/index.js

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

package/dist/esm/components/Molecules/Result/Result.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ComponentProps, LayoutType, Result as ResultType } from '../../../types';
+import type { SearchController, AutocompleteController, RecommendationController } from '@searchspring/snap-controller';
+export declare const Result: ((properties: ResultProps) => JSX.Element) & {
+    displayName: string;
+};
+interface TruncateTitleProps {
+    limit: number;
+    append?: string;
+}
+export interface ResultProps extends ComponentProps {
+    result: ResultType;
+    hideBadge?: boolean;
+    hideTitle?: boolean;
+    hideImage?: boolean;
+    hidePricing?: boolean;
+    detailSlot?: JSX.Element;
+    fallback?: string;
+    layout?: LayoutType;
+    truncateTitle?: TruncateTitleProps;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+}
+export {};
+//# sourceMappingURL=Result.d.ts.map

package/dist/esm/components/Molecules/Result/Result.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Result.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAU,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AA4DxH,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAwHnE,CAAC;AAOH,UAAU,kBAAkB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}

package/dist/esm/components/Molecules/Result/Result.js

@@ -0,0 +1,151 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { Image } from '../../Atoms/Image';
+import { Badge } from '../../Atoms/Badge';
+import { Price } from '../../Atoms/Price';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined, cloneWithProps } from '../../../utilities';
+import { filters } from '@searchspring/snap-toolbox';
+import { Layout } from '../../../types';
+const CSS = {
+    result: () => css({
+        '&.ss__result--grid': {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            '& .ss__result__image-wrapper': {
+                flex: '1 0 auto',
+                minHeight: '0%',
+            },
+        },
+        '&.ss__result--list': {
+            display: 'flex',
+            flexDirection: 'row',
+            '& .ss__result__image-wrapper': {
+                flex: '0 0 33%',
+            },
+            '& .ss__result__details': {
+                flex: '1 1 auto',
+                textAlign: 'left',
+                marginLeft: '20px',
+                padding: 0,
+            },
+        },
+        '& .ss__result__image-wrapper': {
+            position: 'relative',
+            '& .ss__result__badge': {
+                background: 'rgba(255, 255, 255, 0.5)',
+                padding: '10px',
+            },
+        },
+        '& .ss__result__details': {
+            padding: '10px',
+            textAlign: 'center',
+            '& .ss__result__details__title': {
+                marginBottom: '10px',
+            },
+            '& .ss__result__details__pricing': {
+                marginBottom: '10px',
+                '& .ss__result__price': {
+                    fontSize: '1.2em',
+                },
+                '& .ss__price--strike': {
+                    fontSize: '80%',
+                },
+            },
+            '& .ss__result__details__button': {
+                marginBottom: '10px',
+            },
+        },
+    }),
+};
+export const Result = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        layout: Layout.GRID,
+        // global theme
+        ...globalTheme?.components?.result,
+        // props
+        ...properties,
+        ...properties.theme?.components?.result,
+    };
+    const { result, hideBadge, hideTitle, hidePricing, hideImage, detailSlot, fallback, disableStyles, className, layout, style, controller } = props;
+    const core = result?.mappings?.core;
+    const subProps = {
+        price: {
+            // global theme
+            className: 'ss__result__price',
+            ...globalTheme?.components?.price,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        badge: {
+            // default props
+            className: 'ss__result__badge',
+            content: 'Sale',
+            // global theme
+            ...globalTheme?.components?.badge,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        image: {
+            // default props
+            className: 'ss__result__image',
+            alt: core?.name,
+            src: core?.imageUrl,
+            // global theme
+            ...globalTheme?.components?.image,
+            // inherited props
+            ...defined({
+                disableStyles,
+                fallback: fallback,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const onSale = Boolean(core?.msrp && core?.msrp * 1 > core?.price * 1);
+    let displayName = core.name;
+    if (props.truncateTitle) {
+        displayName = filters.truncate(core.name, props.truncateTitle.limit, props.truncateTitle.append);
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.result(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (core && (jsx(CacheProvider, null,
+        jsx("article", { ...styling, className: classnames('ss__result', `ss__result--${layout}`, className) },
+            jsx("div", { className: "ss__result__image-wrapper" },
+                jsx("a", { href: core.url, onMouseDown: (e) => {
+                        controller?.track?.product?.click(e, result);
+                    } },
+                    !hideBadge && onSale && jsx(Badge, { ...subProps.badge }),
+                    !hideImage && jsx(Image, { ...subProps.image }))),
+            jsx("div", { className: "ss__result__details" },
+                !hideTitle && (jsx("div", { className: "ss__result__details__title" },
+                    jsx("a", { href: core.url, onMouseDown: (e) => {
+                            controller?.track?.product?.click(e, result);
+                        }, dangerouslySetInnerHTML: {
+                            __html: displayName,
+                        } }))),
+                !hidePricing && (jsx("div", { className: "ss__result__details__pricing" }, core.price < core.msrp ? (jsx(Fragment, null,
+                    jsx(Price, { ...subProps.price, value: core.msrp, lineThrough: true }),
+                    "\u00A0",
+                    jsx(Price, { ...subProps.price, value: core.price }))) : (jsx(Price, { ...subProps.price, value: core.price })))),
+                cloneWithProps(detailSlot, { result }))))));
+});

package/dist/esm/components/Molecules/Result/Result.stories.d.ts

@@ -0,0 +1,206 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { ResultProps } from './Result';
+import { Layout } from '../../../types';
+declare const _default: {
+    title: string;
+    component: ((properties: ResultProps) => 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;
+            };
+        };
+        result: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideBadge: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideTitle: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hidePricing: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideImage: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        detailSlot: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        fallback: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        truncateTitle: {
+            defaultValue: {};
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        layout: {
+            description: string;
+            defaultValue: Layout;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: Layout[];
+            };
+        };
+        controller: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const hideSections: any;
+export declare const truncateTitle: any;
+//# sourceMappingURL=Result.stories.d.ts.map

package/dist/esm/components/Molecules/Result/Result.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Result.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Result/Result.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAK/C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBA+HE;AAKF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC;AAe9C,eAAO,MAAM,aAAa,KAAoB,CAAC"}