@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,156 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FilterProps } from './Filter';
+declare const _default: {
+    title: string;
+    component: ((properties: FilterProps) => 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;
+            };
+        };
+        facetLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        valueLabel: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        url: {
+            description: string;
+            table: {
+                type: {
+                    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;
+            };
+        };
+        icon: {
+            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;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const NoFacetLabel: any;
+//# sourceMappingURL=Filter.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO/C,wBAuFE;AA4BF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,YAAY,KAAoB,CAAC"}

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

@@ -0,0 +1,131 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Filter } from './Filter';
+import { iconPaths } from '../../Atoms/Icon/paths';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import { FacetType } from '../../../types';
+import Readme from '../Filter/readme.md';
+export default {
+    title: `Molecules/Filter`,
+    component: Filter,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        facetLabel: {
+            description: 'Filter field',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        valueLabel: {
+            description: 'Filter value',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        url: {
+            description: 'URL translator object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        },
+        hideFacetLabel: {
+            description: 'Hide facet label',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: 'boolean',
+        },
+        separator: {
+            defaultValue: ':',
+            description: 'Filter delimiter',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        icon: {
+            defaultValue: 'close-thin',
+            description: 'Icon name',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'close-thin' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        onClick: {
+            description: 'Facet option click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({
+    id: 'Filter',
+    globals: {
+        siteId: '8uyt2m',
+        filters: [
+            {
+                type: 'value',
+                field: 'color_family',
+                value: 'Blue',
+            },
+        ],
+    },
+});
+const Template = (args, { loaded: { controller } }) => (h(Filter, { ...args, facetLabel: controller?.store?.facets.filter((facet) => facet.type === FacetType.VALUE).shift().label, valueLabel: controller?.store?.facets
+        .filter((facet) => facet.type === FacetType.VALUE)
+        .shift()
+        .values.shift().value }));
+export const Default = Template.bind({});
+Default.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,
+};

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const Pagination: ((properties: PaginationProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface PaginationProps extends ComponentProps {
+    pagination: any;
+    pages?: number;
+    pagesLeft?: number;
+    pagesRight?: number;
+    hideFirst?: boolean;
+    hideLast?: boolean;
+    hideEllipsis?: boolean;
+    hideNext?: boolean;
+    hidePrev?: boolean;
+    nextButton?: string | JSX.Element;
+    prevButton?: string | JSX.Element;
+    firstButton?: string | JSX.Element;
+    lastButton?: string | JSX.Element;
+}
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAsBhD,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,WAAW;;CAwH3E,CAAC;AAOH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAClC"}

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

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+import { Icon } from '../../Atoms/Icon';
+const CSS = {
+    pagination: ({ theme }) => css({
+        '& .ss__pagination__page': {
+            padding: '5px',
+            display: 'inline-block',
+            minHeight: '1em',
+            minWidth: '1em',
+            textAlign: 'center',
+            '&.ss__pagination__page--active': {
+                fontWeight: 'bold',
+            },
+            '&:hover:not(.ss__pagination__page--active)': {
+                backgroundColor: theme.colors?.hover || '#f8f8f8',
+            },
+        },
+    }),
+};
+export const Pagination = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        pages: 5,
+        // global theme
+        ...globalTheme?.components?.pagination,
+        // props
+        ...properties,
+        ...properties.theme?.components?.pagination,
+    };
+    const { pagination, pages, pagesLeft, pagesRight, hideFirst, hideLast, hideEllipsis, hideNext, hidePrev, nextButton, prevButton, firstButton, lastButton, disableStyles, className, style, } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__pagination__icon',
+            size: '10px',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const store = pagination;
+    const getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
+    const _pages = store?.getPages(...getPagesParams);
+    const pageNumbers = _pages?.map((page) => page.number);
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.pagination({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (store?.totalResults && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__pagination', className) },
+            jsx(Fragment, null,
+                store.previous && !hidePrev && (jsx("a", { ...store.previous.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--previous'), "aria-label": 'previous page' }, prevButton ? prevButton : jsx(Icon, { ...subProps.icon, icon: 'angle-left' }))),
+                !pageNumbers.includes(store.first.number) && !hideFirst && (jsx(Fragment, null,
+                    jsx("a", { ...store.first.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--first'), "aria-label": 'first page' }, firstButton ? firstButton : store.first.number),
+                    !pageNumbers.includes(2) && !hideEllipsis && jsx("span", null, "\u2026"))),
+                _pages &&
+                    _pages.map((page) => page.active ? (jsx("span", { className: classnames('ss__pagination__page', 'ss__pagination__page--active') }, page.number)) : (jsx("a", { ...page.url.link, className: "ss__pagination__page", "aria-label": `page ${page.number}` }, page.number))),
+                !pageNumbers.includes(store.last.number) && !hideLast && (jsx(Fragment, null,
+                    !pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && jsx("span", null, "\u2026"),
+                    jsx("a", { ...store.last.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--last'), "aria-label": 'last page' }, lastButton ? lastButton : store.last.number))),
+                store.next && !hideNext && (jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), "aria-label": 'next page' }, nextButton ? nextButton : jsx(Icon, { ...subProps.icon, icon: 'angle-right' }))))))));
+});

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

@@ -0,0 +1,235 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { PaginationProps } from './Pagination';
+declare const _default: {
+    title: string;
+    component: ((properties: PaginationProps) => 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;
+            };
+        };
+        pagination: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        pages: {
+            description: string;
+            defaultValue: number;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        pagesLeft: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        pagesRight: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        nextButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        prevButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        firstButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        lastButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideFirst: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideLast: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideEllipsis: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideNext: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hidePrev: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=Pagination.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK3D,wBA8IE;AAYF,eAAO,MAAM,OAAO,KAAoB,CAAC"}