@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import deepmerge from 'deepmerge';
+import { Facet } from '../Facet';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { MobileSidebar } from '../MobileSidebar';
+import { useClickOutside, useLang } from '../../../hooks';
+import { Dropdown } from '../../Atoms/Dropdown';
+import { Icon } from '../../Atoms/Icon';
+import { Button } from '../../Atoms/Button';
+const defaultStyles = ({ theme }) => {
+    return css({
+        margin: '10px 0px',
+        '& .ss__facets-horizontal__header': {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '10px',
+            '& .ss__mobile-sidebar': {
+                margin: '0 10px',
+            },
+            '& .ss__facet__header__inner': {
+                display: 'flex',
+            },
+            '& .ss__facet__header__selected-count': {
+                margin: '0px 5px',
+            },
+            '& .ss__facet__header__clear-all': {
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                marginLeft: '10px',
+                border: 'none',
+                padding: '0',
+                color: theme?.variables?.colors?.primary,
+                '&:hover': {
+                    cursor: 'pointer',
+                    textDecoration: 'underline',
+                    background: 'none',
+                },
+                '& .ss__icon': {
+                    marginLeft: '5px',
+                },
+            },
+            '& .ss__facets-horizontal__header__dropdown': {
+                margin: '0 0 10px 0',
+                '.ss__dropdown__button': {
+                    display: 'flex',
+                },
+                '& .ss__dropdown__button__heading': {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '5px 10px',
+                    flexShrink: '0',
+                    gap: '10px',
+                },
+                '&.ss__dropdown--open': {
+                    '& .ss__dropdown__button__heading': {
+                        '& .ss__icon': {},
+                    },
+                    '& .ss__dropdown__content': {
+                        padding: '10px',
+                        minWidth: '160px',
+                        width: 'max-content',
+                        maxHeight: '500px',
+                        overflowY: 'auto',
+                        zIndex: 1000,
+                    },
+                },
+            },
+        },
+        '& .ss__facet__show-more-less': {
+            display: 'block',
+            margin: '8px 8px 0 8px',
+            cursor: 'pointer',
+            '& .ss__icon': {
+                marginRight: '8px',
+            },
+        },
+    });
+};
+export const FacetsHorizontal = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        limit: 6,
+        iconCollapse: 'angle-up',
+        iconExpand: 'angle-down',
+        clearAllText: 'Clear All',
+        facets: properties.controller?.store?.facets,
+        treePath: globalTreePath,
+    };
+    let props = mergeProps('facetsHorizontal', globalTheme, defaultProps, properties);
+    const { facets, limit, alwaysShowFiltersButton, hideFiltersButton, onFacetOptionClick, showSelectedCount, hideSelectedCountParenthesis, clearAllIcon, showClearAllText, iconExpand, clearAllText, iconCollapse, disableStyles, className, internalClassName, controller, treePath, } = props;
+    const facetClickEvent = (e) => {
+        onFacetOptionClick && onFacetOptionClick(e);
+    };
+    const themeDefaults = {
+        components: {
+            facetGridOptions: {
+                onClick: facetClickEvent,
+            },
+            facetHierarchyOptions: {
+                onClick: facetClickEvent,
+            },
+            facetListOptions: {
+                onClick: facetClickEvent,
+            },
+            facetPaletteOptions: {
+                onClick: facetClickEvent,
+            },
+        },
+    };
+    // merge deeply the themeDefaults with the theme prop
+    const theme = deepmerge(themeDefaults, props?.theme || {});
+    props = {
+        ...props,
+        theme,
+    };
+    let facetsToShow = facets;
+    let isOverflowing = false;
+    if (typeof limit != 'undefined' && Number.isInteger(limit) && facets) {
+        isOverflowing = facets.length > +limit;
+        if (limit > 0) {
+            facetsToShow = facets.slice(0, +limit);
+        }
+        else if (limit == 0) {
+            facetsToShow = [];
+        }
+    }
+    const subProps = {
+        dropdown: {
+            // default props
+            internalClassName: 'ss__facets-horizontal__header__dropdown',
+            disableClickOutside: true,
+            disableOverlay: true,
+            focusTrapContent: true,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        button: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
+            // default props
+            internalClassName: 'ss__dropdown__button__heading__icon',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: `${treePath} dropdown button`,
+        },
+        facet: {
+            // default props
+            internalClassName: `ss__facets-horizontal__content__facet`,
+            justContent: true,
+            // this should be turned on if there is ever a filters button rendering.
+            statefulOverflow: !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) ? true : undefined,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: `${treePath} dropdown`,
+        },
+        MobileSidebar: {
+            // default props
+            internalClassName: 'ss__facets-horizontal__header__mobile-sidebar',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const [selectedFacet, setSelectedFacet] = useState(undefined);
+    const innerRef = useClickOutside(() => {
+        selectedFacet && setSelectedFacet(undefined);
+    });
+    //todo investigate keyboard navigation here when overlay prop is true/false
+    return (facetsToShow && facetsToShow?.length > 0) || isOverflowing ? (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__facets-horizontal', className, internalClassName), ref: innerRef, ...styling, children: _jsxs("div", { className: "ss__facets-horizontal__header", children: [facetsToShow?.map((facet) => {
+                        const selectedCount = facet?.values?.filter((value) => value?.filtered).length ||
+                            facet?.active?.high !== facet?.range?.high ||
+                            facet?.active?.low !== facet?.range?.low;
+                        //initialize lang
+                        const defaultLang = {
+                            dropdownButton: {
+                                attributes: {
+                                    'aria-label': `currently ${selectedFacet?.field === facet.field ? 'open' : 'collapsed'} ${facet.label} facet dropdown ${facet.values?.length ? facet.values?.length + ' options' : ''}`,
+                                },
+                            },
+                            clearAllText: {
+                                value: clearAllText,
+                            },
+                        };
+                        //deep merge with props.lang
+                        const lang = deepmerge(defaultLang, props.lang || {});
+                        const mergedLang = useLang(lang, {
+                            selectedFacet,
+                            facet,
+                        });
+                        return (_jsx(Dropdown, { ...subProps.dropdown, internalClassName: classnames(subProps.dropdown.internalClassName, `ss__facets-horizontal__header__dropdown--${facet.display}`, `ss__facets-horizontal__header__dropdown--${facet.field}`), open: selectedFacet?.field === facet.field, onClick: (e) => {
+                                // @ts-ignore - this is a workaround for the fact that selectedFacet is not defined when the onclick is triggered by the escape key.
+                                if (selectedFacet !== facet && e.code !== 'Escape') {
+                                    setSelectedFacet(facet);
+                                }
+                                else {
+                                    setSelectedFacet(undefined);
+                                }
+                            }, button: _jsxs("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [_jsxs("div", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    facet?.clear.url.link.onClick();
+                                                }, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
+                                            ? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
+                                            : { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
+                    }), !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) && (_jsx(MobileSidebar, { controller: controller, ...subProps.MobileSidebar }))] }) }) })) : null;
+});

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/index.d.ts

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

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/FacetsHorizontal/index.js

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

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

@@ -0,0 +1,36 @@
+import { ComponentProps } from '../../../types';
+import type { SearchController, AutocompleteController } from '@athoscommerce/snap-controller';
+import type { Filter as FilterType } from '@athoscommerce/snap-store-mobx';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import { Lang } from '../../../hooks';
+export declare const FilterSummary: ((properties: FilterSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type FilterSummaryProps = {
+    filters?: FilterType[];
+    controller?: SearchController | AutocompleteController;
+    lang?: Partial<FilterSummaryLang>;
+} & FilterSummaryTemplatesLegalProps & ComponentProps<FilterSummaryProps>;
+export type FilterSummaryTemplatesLegalProps = {
+    type?: 'inline' | 'list';
+    title?: string;
+    hideTitle?: boolean;
+    filterIcon?: IconType | Partial<IconProps>;
+    clearAllIcon?: IconType | Partial<IconProps>;
+    separator?: string;
+    hideFacetLabel?: boolean;
+    clearAllLabel?: string;
+    hideClearAll?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, filterFilter: FilterType) => void;
+    onClearAllClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+};
+export interface FilterSummaryLang {
+    title: Lang<{
+        filters: FilterType[];
+    }>;
+    clearAllLabel: Lang<{
+        label?: string;
+        value?: string;
+    }>;
+}
+//# sourceMappingURL=FilterSummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSummary.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/FilterSummary/FilterSummary.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC/F,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AA0D/C,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CAgHnE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAChC,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,CAAC;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAClC,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC7C,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,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,UAAU,KAAK,IAAI,CAAC;IACjG,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;KACtB,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Filter } from '../../Molecules/Filter';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useLang } from '../../../hooks';
+import deepmerge from 'deepmerge';
+const defaultStyles = (props) => {
+    const variables = props.theme?.variables;
+    return css({
+        '.ss__filter-summary__title': {
+            fontSize: '1.2em',
+            padding: '6px 0',
+        },
+        '.ss__filter-summary__filters': {
+            margin: '5px 0',
+            display: 'flex',
+            gap: '10px',
+            flexWrap: 'wrap',
+        },
+        '&.ss__filter-summary--list': {
+            '& .ss__filter-summary__clear-all .ss__filter__value': {
+                marginLeft: '5px',
+            },
+            '&, .ss__filter-summary__filters': {
+                display: 'block',
+            },
+            '.ss__filter-summary__filters': {
+                '.ss__filter': {
+                    display: 'block',
+                    margin: `0 5px 5px 5px`,
+                    '.ss__filter__button': {
+                        padding: `0 0 0 0`,
+                        border: 0,
+                        '&, &:hover, &:not(.ss__button--disabled):hover, &.ss__button--disabled': {
+                            backgroundColor: 'transparent',
+                        },
+                        '.ss__button__content': {
+                            display: 'flex',
+                            alignItems: 'center',
+                            '.ss__icon': {
+                                padding: '4px',
+                                backgroundColor: '#f8f8f8',
+                                border: `1px solid black`,
+                                width: `8px`,
+                                height: `8px`,
+                                fill: variables?.colors?.primary,
+                                stroke: variables?.colors?.primary,
+                                marginRight: '0px',
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+export const FilterSummary = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        title: 'Current Filters',
+        type: 'inline',
+        clearAllLabel: 'Clear All',
+        clearAllIcon: 'close-thin',
+        filterIcon: 'close-thin',
+        filters: properties.controller?.store?.filters,
+        separator: ':',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('filterSummary', globalTheme, defaultProps, properties);
+    const { filters, title, type, filterIcon, clearAllIcon, separator, hideFacetLabel, hideTitle, clearAllLabel, hideClearAll, onClick, onClearAllClick, disableStyles, className, internalClassName, treePath, } = props;
+    const subProps = {
+        filter: {
+            name: 'filter',
+            // default props
+            internalClassName: 'ss__filter-summary__filter',
+            // inherited props
+            ...defined({
+                disableStyles,
+                separator,
+                hideFacetLabel,
+                icon: filterIcon,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        title: {
+            value: title,
+        },
+        clearAllLabel: {
+            value: clearAllLabel,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        filters,
+    });
+    return filters?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__filter-summary', { 'ss__filter-summary--list': type === 'list' }, { 'ss__filter-summary--inline': type === 'inline' }, className, internalClassName), children: [!hideTitle && _jsx("div", { className: "ss__filter-summary__title", ...mergedLang.title?.all }), _jsxs("div", { className: "ss__filter-summary__filters", children: [filters.map((filter) => (_jsx(Filter, { ...subProps.filter, filter: filter, onClick: (e) => onClick && onClick(e, filter) }))), !hideClearAll && (_jsx(Filter, { ...subProps.filter, name: 'clear-all', icon: clearAllIcon, internalClassName: `${subProps?.filter?.internalClassName} ss__filter-summary__clear-all`, hideFacetLabel: true, valueLabel: clearAllLabel, onClick: (e) => {
+                                onClearAllClick && onClearAllClick(e);
+                                properties.controller?.urlManager.remove('filter').remove('page').go();
+                            }, lang: {
+                                filter: { attributes: { 'aria-label': clearAllLabel } },
+                            } }))] })] }) })) : null;
+});

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

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

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

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

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

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

package/dist/esm/components/src/components/Organisms/Layout/Layout.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from '../../../types';
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { ButtonProps } from '../../Atoms/Button';
+export declare const Layout: ((properties: LayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export interface LayoutProps extends ComponentProps {
+    controller: SearchController;
+    layout: (ModuleNames | ModuleNames[])[];
+    toggleSideBarButton?: Partial<ButtonProps>;
+}
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'mobileSidebar' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facets' | 'facetsHorizontal' | 'banner.left';
+//# sourceMappingURL=Layout.d.ts.map

package/dist/esm/components/src/components/Organisms/Layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Layout/Layout.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAKlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAOvE,OAAO,EAAU,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAiCzD,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAkSrD,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,WAAW,GAEpB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GAEf,QAAQ,GACR,kBAAkB,GAClB,aAAa,CAAC"}