@searchspring/snap-preact-components 0.20.0

package/dist/esm/components/Molecules/FacetListOptions/FacetListOptions.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 { FacetListOptions } from './FacetListOptions';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../FacetListOptions/readme.md';
+export default {
+    title: `Molecules/FacetListOptions`,
+    component: FacetListOptions,
+    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' },
+        },
+        hideCheckbox: {
+            defaultValue: false,
+            description: 'Hide facet option checkbox',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideCount: {
+            defaultValue: false,
+            description: 'Hide facet option count',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        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: 'FacetListOptions', globals: { siteId: '8uyt2m' } });
+const ObservableFacetListOptions = observer(({ args, controller }) => {
+    const brandFacet = controller?.store?.facets.filter((facet) => facet.field == 'brand').pop();
+    return h(FacetListOptions, { ...args, values: brandFacet.values });
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservableFacetListOptions, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { ValueFacetValue, ComponentProps } from '../../../types';
+export declare const FacetPaletteOptions: ((properties: FacetPaletteOptionsProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetPaletteOptionsProps extends ComponentProps {
+    values: ValueFacetValue[];
+    hideLabel?: boolean;
+    columns?: number;
+    gapSize?: string;
+    hideIcon?: boolean;
+    onClick?: (e: Event) => void;
+    previewOnFocus?: boolean;
+    valueProps?: any;
+}
+//# sourceMappingURL=FacetPaletteOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetPaletteOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAiFjE,eAAO,MAAM,mBAAmB,gBAAyB,wBAAwB,KAAG,WAAW;;CA0E7F,CAAC;AAEH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC/D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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/FacetPaletteOptions/FacetPaletteOptions.js

@@ -0,0 +1,124 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { filters } from '@searchspring/snap-toolbox';
+import { defined } from '../../../utilities';
+import { Icon } from '../../Atoms/Icon';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    palette: ({ columns, gapSize, theme }) => css({
+        display: 'flex',
+        flexFlow: 'row wrap',
+        gridTemplateColumns: `repeat(${columns}, calc((100% - (${columns - 1} * ${gapSize}))/ ${columns}))`,
+        gap: gapSize,
+        '& .ss__facet-palette-options__option': {
+            width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px )`,
+            marginRight: gapSize,
+            marginBottom: gapSize,
+            [`:nth-of-type(${columns}n)`]: {
+                marginRight: '0',
+            },
+            '&:hover': {
+                cursor: 'pointer',
+                '.ss__facet-palette-options__option__wrapper': {
+                    borderColor: '#EBEBEB',
+                },
+                '& .ss__facet-palette-options__option__palette': {
+                    '& .ss__facet-palette-options__icon': {
+                        opacity: 1,
+                    },
+                },
+            },
+            '& .ss__facet-palette-options__option__wrapper': {
+                border: `2px solid transparent`,
+                borderRadius: '100%',
+                padding: '2px',
+            },
+            '&.ss__facet-palette-options__option--filtered': {
+                '& .ss__facet-palette-options__option__wrapper': {
+                    borderColor: theme.colors?.primary || '#333',
+                    padding: '0px',
+                    borderWidth: '4px',
+                },
+            },
+            '& .ss__facet-palette-options__option__palette': {
+                paddingTop: 'calc(100% - 2px)',
+                border: '1px solid #EBEBEB',
+                borderRadius: '100%',
+                position: 'relative',
+                '& .ss__facet-palette-options__icon': {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    left: 0,
+                    margin: 'auto',
+                    bottom: 0,
+                    textAlign: 'center',
+                    stroke: 'black',
+                    strokeWidth: '3px',
+                    strokeLinejoin: 'round',
+                    opacity: 0,
+                },
+            },
+            '& .ss__facet-palette-options__option__value': {
+                display: 'block',
+                textAlign: 'center',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            },
+        },
+        '@supports (display: grid)': {
+            display: 'grid',
+            '& .ss__facet-palette-options__option': {
+                margin: '0',
+                width: 'initial',
+            },
+        },
+    }),
+};
+export const FacetPaletteOptions = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        values: [],
+        columns: 4,
+        gapSize: '8px',
+        // global theme
+        ...globalTheme?.components?.facetPaletteOptions,
+        // props
+        ...properties,
+        ...properties.theme?.components?.facetPaletteOptions,
+    };
+    const { values, hideLabel, columns, gapSize, hideIcon, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__facet-palette-options__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+                icon: 'close-thin',
+                color: 'white',
+                size: '40%',
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.palette({ columns, gapSize, theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (values?.length && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-palette-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }), onClick: onClick, "aria-label": value.value, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+            jsx("div", { className: "ss__facet-palette-options__option__wrapper" },
+                jsx("div", { className: classnames('ss__facet-palette-options__option__palette', `ss__facet-palette-options__option__palette--${filters.handleize(value.value)}`), css: { background: value.value } }, !hideIcon && value.filtered && jsx(Icon, { ...subProps.icon }))),
+            !hideLabel && jsx("span", { className: "ss__facet-palette-options__option__value" }, value.label))))))));
+});

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

@@ -0,0 +1,180 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetPaletteOptionsProps } from './FacetPaletteOptions';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetPaletteOptionsProps) => 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;
+            };
+        };
+        columns: {
+            defaultValue: number;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        gapSize: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideIcon: {
+            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=FacetPaletteOptions.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetPaletteOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKtF,wBAwGE;AAcF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

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

@@ -0,0 +1,123 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { FacetPaletteOptions } from './FacetPaletteOptions';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../FacetPaletteOptions/readme.md';
+export default {
+    title: `Molecules/FacetPaletteOptions`,
+    component: FacetPaletteOptions,
+    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 palette',
+            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' },
+        },
+        hideLabel: {
+            description: 'Hide facet option label',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideIcon: {
+            description: 'Hide facet option icon',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        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: 'FacetPaletteOptions', globals: { siteId: '8uyt2m' } });
+const ObservableFacetPaletteOptions = observer(({ args, controller }) => {
+    const sizeFacet = controller?.store?.facets.filter((facet) => facet.field == 'color_family').pop();
+    return h(FacetPaletteOptions, { ...args, values: sizeFacet.values });
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservableFacetPaletteOptions, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { ComponentProps, RangeFacet } from '../../../types';
+export declare const FacetSlider: ((properties: FacetSliderProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FacetSliderProps extends ComponentProps {
+    trackColor?: string;
+    railColor?: string;
+    handleColor?: string;
+    handleDraggingColor?: string;
+    valueTextColor?: string;
+    showTicks?: boolean;
+    tickSize?: number;
+    tickTextColor?: string;
+    stickyHandleLabel?: boolean;
+    facet: RangeFacet;
+    onChange?: (values: number[]) => void;
+    onDrag?: (values: number[]) => void;
+}
+//# sourceMappingURL=FacetSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA+H5D,eAAO,MAAM,WAAW,gBAAyB,gBAAgB,KAAG,WAAW;;CAgJ7E,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC"}