@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,269 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Facet } from './Facet';
+import { iconPaths } from '../../Atoms/Icon';
+import { FacetDisplay } from '../../../types';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Facet/readme.md';
+export default {
+    title: `Organisms/Facet`,
+    component: Facet,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: { maxWidth: '300px' } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        facet: {
+            description: 'Facet store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        limit: {
+            defaultValue: 12,
+            description: 'Number of facet options to display',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 12 },
+            },
+            control: { type: 'number' },
+        },
+        disableOverflow: {
+            defaultValue: false,
+            description: 'Enable the use of an overflow (show more/less)',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        color: {
+            description: 'Select color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        iconColor: {
+            description: 'Select icon color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '#333' },
+            },
+            control: { type: 'color' },
+        },
+        disableCollapse: {
+            description: 'Disable collapse - used with internal state only',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        iconExpand: {
+            defaultValue: 'angle-down',
+            description: 'Icon for when facet is collapsed',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'angle-down' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        iconCollapse: {
+            defaultValue: 'angle-up',
+            description: 'Icon for when facet is expanded',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'angle-up' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        showMoreText: {
+            defaultValue: 'Show More',
+            description: "Change 'Show More' button text",
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Show More' },
+            },
+            control: { type: 'text' },
+        },
+        showLessText: {
+            defaultValue: 'Show Less',
+            description: "Change 'Show Less' button text",
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'Show Less' },
+            },
+            control: { type: 'text' },
+        },
+        iconOverflowMore: {
+            defaultValue: 'plus',
+            description: 'Icon for when facet can show more',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'plus' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        iconOverflowLess: {
+            defaultValue: 'minus',
+            description: 'Icon for when facet can show less',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'minus' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        overflowSlot: {
+            description: 'Slot for custom overflow (show more/less) button',
+            table: {
+                type: {
+                    summary: 'component',
+                },
+            },
+        },
+        optionsSlot: {
+            description: 'Slot for custom facet option components',
+            table: {
+                type: {
+                    summary: 'component',
+                },
+            },
+        },
+        fields: {
+            defaultValue: {},
+            description: 'Change props per facet',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: {
+                type: 'object',
+            },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Facet', globals: { siteId: '8uyt2m' } });
+// List Facet
+const ObservableListFacet = observer(({ args, controller }) => {
+    return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.LIST).shift() });
+});
+const ListTemplate = (args, { loaded: { controller } }) => h(ObservableListFacet, { args: args, controller: controller });
+export const List = ListTemplate.bind({});
+List.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+// Slider Facet
+const ObservableSliderFacet = observer(({ args, controller }) => {
+    return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.SLIDER).shift() });
+});
+const SliderTemplate = (args, { loaded: { controller } }) => h(ObservableSliderFacet, { args: args, controller: controller });
+export const Slider = SliderTemplate.bind({});
+Slider.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+// Palette Facet
+const ObservablePaletteFacet = observer(({ args, facet }) => {
+    return h(Facet, { ...args, facet: facet });
+});
+const PaletteTemplate = (args, { loaded: { controller } }) => {
+    const facet = controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.PALETTE).shift();
+    return h(ObservablePaletteFacet, { args: args, facet: facet });
+};
+export const Palette = PaletteTemplate.bind({});
+Palette.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+// Grid Facet
+const ObservableGridFacet = observer(({ args, controller }) => {
+    return h(Facet, { ...args, facet: controller?.store?.facets.filter((facet) => facet.field === 'size_dress').pop() });
+});
+const GridTemplate = (args, { loaded: { controller } }) => h(ObservableGridFacet, { args: args, controller: controller });
+export const Grid = GridTemplate.bind({});
+Grid.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+// HIERARCHY Facet
+const ObservableHierarchyFacet = observer(({ args, controller }) => {
+    const facet = controller?.store?.facets.filter((facet) => facet.display === FacetDisplay.HIERARCHY).shift();
+    return h(Facet, { ...args, facet: facet });
+});
+const HierarchyTemplate = (args, { loaded: { controller } }) => h(ObservableHierarchyFacet, { args: args, controller: controller });
+export const Hierarchy = HierarchyTemplate.bind({});
+Hierarchy.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from '../../../types';
+import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+export declare const Facets: ((properties: FacetsProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetsProps extends ComponentProps {
+    facets?: any;
+    limit?: number;
+    controller?: SearchController | AutocompleteController;
+}
+//# sourceMappingURL=Facets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Facets.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAM9F,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAmDnE,CAAC;AAMH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

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

@@ -0,0 +1,49 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Facet } from '../Facet';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+const CSS = {
+    facets: () => css({}),
+};
+export const Facets = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        facets: properties.controller?.store?.facets,
+        // global theme
+        ...globalTheme?.components?.facets,
+        // props
+        ...properties,
+        ...properties.theme?.components?.facets,
+    };
+    const { limit, disableStyles, className, style } = props;
+    let { facets } = props;
+    if (limit > 0) {
+        facets = facets.slice(0, +limit);
+    }
+    const subProps = {
+        facet: {
+            // default props
+            className: 'ss__facets__facet',
+            // global theme
+            ...globalTheme?.components?.facet,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.facets(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (facets?.length > 0 && (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__facets', className), ...styling }, facets.map((facet) => (jsx(Facet, { ...subProps.facet, facet: facet })))))));
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Facets.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facets/Facets.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA2CE;AAQF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

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

@@ -0,0 +1,57 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Facets } from './Facets';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Facets/readme.md';
+export default {
+    title: `Organisms/Facets`,
+    component: Facets,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: { maxWidth: '300px' } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        facets: {
+            description: 'Facets store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'Facets store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        limit: {
+            description: 'Maximum number of facets to display',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Facets', globals: { siteId: '8uyt2m' } });
+const Template = (args, { loaded: { controller } }) => {
+    return h(Facets, { ...args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { ComponentProps, Filter as FilterType } from '../../../types';
+import type { SearchController, AutocompleteController } from '@searchspring/snap-controller';
+export declare const FilterSummary: ((properties: FilterSummaryProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FilterSummaryProps extends ComponentProps {
+    filters?: FilterType[];
+    title?: string;
+    filterIcon?: string;
+    clearAllIcon?: string;
+    separator?: string;
+    hideFacetLabel?: boolean;
+    clearAllLabel?: string;
+    hideClearAll?: boolean;
+    onClick?: (e: Event, filterFilter: any) => void;
+    onClearAllClick?: (e: Event) => void;
+    controller?: SearchController | AutocompleteController;
+}
+//# sourceMappingURL=FilterSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAc9F,eAAO,MAAM,aAAa,gBAAyB,kBAAkB,KAAG,WAAW;;CAwFjF,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACzD,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,KAAA,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;CACvD"}

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

@@ -0,0 +1,64 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Filter } from '../../Molecules/Filter';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    filterSummary: () => css({
+        '& .ss__filter-summary__filter': {
+            margin: '5px 10px 5px 0',
+        },
+        '& .ss__filter-summary__title': {
+            fontSize: '1.2em',
+        },
+    }),
+};
+export const FilterSummary = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        title: 'Current Filters',
+        clearAllLabel: 'Clear All',
+        clearAllIcon: 'close-thin',
+        filterIcon: 'close-thin',
+        filters: properties.controller?.store?.filters,
+        onClearAllClick: () => properties.controller?.urlManager.remove('filter').remove('page').go(),
+        separator: ':',
+        // global theme
+        ...globalTheme?.components?.filterSummary,
+        // props
+        ...properties,
+        ...properties.theme?.components?.filterSummary,
+    };
+    const { filters, title, filterIcon, clearAllIcon, separator, hideFacetLabel, clearAllLabel, hideClearAll, onClick, onClearAllClick, disableStyles, className, style, } = props;
+    const subProps = {
+        filter: {
+            // default props
+            className: 'ss__filter-summary__filter',
+            // global theme
+            ...globalTheme?.components?.filter,
+            // inherited props
+            ...defined({
+                disableStyles,
+                separator,
+                hideFacetLabel,
+                icon: filterIcon,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.filterSummary(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return filters?.length ? (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__filter-summary', className) },
+            jsx("div", { className: "ss__filter-summary__title" }, title),
+            filters.map((filter) => (jsx(Filter, { ...subProps.filter, url: filter?.url, facetLabel: filter?.facet?.label, valueLabel: filter?.value?.label, onClick: (e) => onClick && onClick(e, filter) }))),
+            !hideClearAll && (jsx(Filter, { ...subProps.filter, icon: clearAllIcon, className: `${subProps?.filter?.className} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => onClearAllClick && onClearAllClick(e) }))))) : null;
+});