@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,103 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { FacetGridOptions } from './FacetGridOptions';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../FacetGridOptions/readme.md';
+export default {
+    title: `Molecules/FacetGridOptions`,
+    component: FacetGridOptions,
+    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: {
+        values: {
+            description: 'Facet.values store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'facet values store array',
+                },
+            },
+            control: { type: 'none' },
+        },
+        columns: {
+            defaultValue: 4,
+            description: 'Number of columns in grid',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 4 },
+            },
+            control: { type: 'number' },
+        },
+        gapSize: {
+            defaultValue: '8px',
+            description: 'Gap size between rows and columns',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '8px' },
+            },
+            control: { type: 'text' },
+        },
+        previewOnFocus: {
+            description: 'Invoke facet value preview upon focus',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        valueProps: {
+            description: 'Object of facet value props',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+                defaultValue: { summary: '{}' },
+            },
+            control: { type: 'object' },
+        },
+        onClick: {
+            description: 'Facet option click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'FacetGridOptions', globals: { siteId: '8uyt2m' } });
+const ObservableFacetGridOptions = observer(({ args, controller }) => {
+    const sizeFacet = controller?.store?.facets.filter((facet) => facet.field == 'size_dress').pop();
+    return h(FacetGridOptions, { ...args, values: sizeFacet.values });
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservableFacetGridOptions, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { ComponentProps, HierarchyFacetValue } from '../../../types';
+export declare const FacetHierarchyOptions: ((properties: FacetHierarchyOptionsProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetHierarchyOptionsProps extends ComponentProps {
+    values: HierarchyFacetValue[];
+    hideCount?: boolean;
+    onClick?: (e: Event) => void;
+    previewOnFocus?: boolean;
+    valueProps?: any;
+}
+//# sourceMappingURL=FacetHierarchyOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetHierarchyOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2CrE,eAAO,MAAM,qBAAqB,gBAAyB,0BAA0B,KAAG,WAAW;;CAkDjG,CAAC;AACH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IACjE,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -0,0 +1,71 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    hierarchy: ({ theme }) => css({
+        '& .ss__facet-hierarchy-options__option': {
+            display: 'flex',
+            padding: '6px 0',
+            textDecoration: 'none',
+            alignItems: 'center',
+            '&:hover': {
+                cursor: 'pointer',
+                background: theme.colors?.hover,
+            },
+            '&.ss__facet-hierarchy-options__option--filtered': {
+                fontWeight: 'bold',
+                color: theme.colors?.primary,
+                '&:hover': {
+                    cursor: 'default',
+                    background: 'unset',
+                },
+                '& ~ .ss__facet-hierarchy-options__option:not(.ss__facet-hierarchy-options__option--filtered)': {
+                    paddingLeft: '16px',
+                },
+            },
+            '&.ss__facet-hierarchy-options__option--return': {
+                '&:before': {
+                    content: `'\\0000ab'`,
+                    padding: '0 2px 0 0',
+                    color: theme.colors?.primary,
+                },
+            },
+            '& .ss__facet-hierarchy-options__option__value': {
+                marginLeft: '8px',
+                '& .ss__facet-hierarchy-options__option__value__count': {
+                    fontSize: '0.8em',
+                    marginLeft: '6px',
+                },
+            },
+        },
+    }),
+};
+export const FacetHierarchyOptions = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.facetHierarchyOptions,
+        //props
+        ...properties,
+        ...properties.theme?.components?.facetHierarchyOptions,
+    };
+    const { values, hideCount, onClick, disableStyles, previewOnFocus, valueProps, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.hierarchy({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (values?.length && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-hierarchy-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-hierarchy-options__option', { 'ss__facet-hierarchy-options__option--filtered': value.filtered }, { 'ss__facet-hierarchy-options__option--return': value.history && !value.filtered }), onClick: onClick, ...value.url?.link, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps },
+            jsx("span", { className: "ss__facet-hierarchy-options__option__value" },
+                value.label,
+                !hideCount && value.count > 0 && !value.filtered && (jsx("span", { className: "ss__facet-hierarchy-options__option__value__count" },
+                    "(",
+                    value.count,
+                    ")"))))))))));
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetHierarchyOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetHierarchyOptions/FacetHierarchyOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAyB,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM5F,wBAqDE;AAiBF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

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

@@ -0,0 +1,76 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { FacetHierarchyOptions } from './FacetHierarchyOptions';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import { FacetDisplay } from '../../../types';
+import Readme from '../FacetHierarchyOptions/readme.md';
+export default {
+    title: `Molecules/FacetHierarchyOptions`,
+    component: FacetHierarchyOptions,
+    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: {
+        values: {
+            description: 'Facet.values store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        },
+        hideCount: {
+            defaultValue: false,
+            description: 'Hide facet option count',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        onClick: {
+            description: 'Facet option click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'FacetHierarchyOptions', globals: { siteId: '8uyt2m' } });
+const ObservableFacetHierarchyOptions = observer(({ args, controller }) => {
+    const hierarchyValues = controller?.store?.facets
+        .filter((facet) => facet.display === FacetDisplay.HIERARCHY)
+        .shift()
+        .values.slice(0, 12);
+    return h(FacetHierarchyOptions, { ...args, values: hierarchyValues });
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservableFacetHierarchyOptions, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { ComponentProps, ValueFacetValue } from '../../../types';
+export declare const FacetListOptions: ((properties: FacetListOptionsProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetListOptionsProps extends ComponentProps {
+    values: ValueFacetValue[];
+    hideCheckbox?: boolean;
+    hideCount?: boolean;
+    onClick?: (e: any) => void;
+    previewOnFocus?: boolean;
+    valueProps?: any;
+}
+//# sourceMappingURL=FacetListOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetListOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA+BjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CA2DvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;CACjB"}

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

@@ -0,0 +1,74 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+import { Checkbox } from '../../Molecules/Checkbox/Checkbox';
+const CSS = {
+    list: ({ theme, hideCheckbox }) => css({
+        '& .ss__facet-list-options__option': {
+            display: 'flex',
+            padding: '6px',
+            textDecoration: 'none',
+            alignItems: 'center',
+            '&:hover': {
+                cursor: 'pointer',
+                background: theme.colors?.hover,
+            },
+            '&.ss__facet-list-options__option--filtered': {
+                fontWeight: 'bold',
+                color: theme.colors?.primary,
+            },
+            '& .ss__facet-list-options__option__value': {
+                marginLeft: hideCheckbox ? '' : '8px',
+                '& .ss__facet-list-options__option__value__count': {
+                    fontSize: '0.8em',
+                    marginLeft: '6px',
+                },
+            },
+        },
+    }),
+};
+export const FacetListOptions = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.facetListOptions,
+        //props
+        ...properties,
+        ...properties.theme?.components?.facetListOptions,
+    };
+    const { values, hideCheckbox, hideCount, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const subProps = {
+        checkbox: {
+            // default props
+            className: 'ss__facet-list-options__checkbox',
+            // global theme
+            ...globalTheme?.components?.checkbox,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.list({ theme, hideCheckbox }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (values?.length && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-list-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-list-options__option', { 'ss__facet-list-options__option--filtered': value.filtered }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+            !hideCheckbox && jsx(Checkbox, { ...subProps.checkbox, checked: value.filtered }),
+            jsx("span", { className: "ss__facet-list-options__option__value" },
+                value.label,
+                !hideCount && value.count > 0 && jsx("span", { className: "ss__facet-list-options__option__value__count" },
+                    "(",
+                    value.count,
+                    ")")))))))));
+});

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

@@ -0,0 +1,152 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetListOptionsProps } from './FacetListOptions';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetListOptionsProps) => 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;
+            };
+        };
+        values: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideCheckbox: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideCount: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        previewOnFocus: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        valueProps: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=FacetListOptions.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetListOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetListOptions/FacetListOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK7E,wBAoFE;AAcF,eAAO,MAAM,OAAO,KAAoB,CAAC"}