@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,230 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { FacetListOptions } from '../../Molecules/FacetListOptions';
+import { FacetGridOptions } from '../../Molecules/FacetGridOptions';
+import { FacetPaletteOptions } from '../../Molecules/FacetPaletteOptions';
+import { FacetHierarchyOptions } from '../../Molecules/FacetHierarchyOptions';
+import { FacetSlider } from '../../Molecules/FacetSlider';
+import { Icon } from '../../Atoms/Icon';
+import { Dropdown } from '../../Atoms/Dropdown';
+import { FacetDisplay } from '../../../types';
+import { defined, cloneWithProps } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    facet: ({ color, theme }) => css({
+        width: '100%',
+        margin: '0 0 20px 0',
+        '& .ss__facet__header': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            color: color,
+            border: 'none',
+            borderBottom: `2px solid ${theme.colors?.primary || '#ccc'}`,
+            padding: '6px 0',
+        },
+        '& .ss__facet__options': {
+            marginTop: '8px',
+            maxHeight: '300px',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+        },
+        '& .ss__facet__show-more-less': {
+            display: 'block',
+            margin: '8px',
+            cursor: 'pointer',
+            '& .ss__icon': {
+                marginRight: '8px',
+            },
+        },
+    }),
+};
+export const Facet = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    let props = {
+        // default props
+        limit: 12,
+        disableOverflow: false,
+        iconCollapse: 'angle-up',
+        iconExpand: 'angle-down',
+        showMoreText: 'Show More',
+        showLessText: 'Show Less',
+        iconOverflowMore: 'plus',
+        iconOverflowLess: 'minus',
+        // global theme
+        ...globalTheme?.components?.facet,
+        // props
+        ...properties,
+        ...properties.theme?.components?.facet,
+    };
+    //manual props override on a per facet level using the fields prop
+    if (props.fields && props.fields[props.facet?.field]) {
+        props = {
+            ...props,
+            ...props.fields[props.facet?.field],
+        };
+    }
+    const { disableCollapse, facet, iconCollapse, iconExpand, limit, disableOverflow, iconColor, color, previewOnFocus, valueProps, showMoreText, showLessText, iconOverflowMore, iconOverflowLess, overflowSlot, optionsSlot, disableStyles, className, style, } = props;
+    const subProps = {
+        dropdown: {
+            // default props
+            className: 'ss__facet__dropdown',
+            disableClickOutside: true,
+            disableOverlay: true,
+            // global theme
+            ...globalTheme?.components?.dropdown,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        icon: {
+            // default props
+            className: 'ss__facet__dropdown__icon',
+            size: '12px',
+            color: iconColor || color,
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        showMoreLessIcon: {
+            // default props
+            className: 'ss__facet__show-more-less__icon',
+            size: '10px',
+            color: iconColor || color,
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        facetHierarchyOptions: {
+            // default props
+            className: 'ss__facet__facet-hierarchy-options',
+            // global theme
+            ...globalTheme?.components?.facetHierarchyOptions,
+            // inherited props
+            ...defined({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        facetListOptions: {
+            // default props
+            className: 'ss__facet__facet-list-options',
+            // global theme
+            ...globalTheme?.components?.facetListOptions,
+            // inherited props
+            ...defined({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        facetGridOptions: {
+            // default props
+            className: 'ss__facet__facet-grid-options',
+            // global theme
+            ...globalTheme?.components?.facetGridOptions,
+            // inherited props
+            ...defined({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        facetPaletteOptions: {
+            // default props
+            className: 'ss__facet__facet-palette-options',
+            // global theme
+            ...globalTheme?.components?.facetPaletteOptions,
+            // inherited props
+            ...defined({
+                disableStyles,
+                previewOnFocus,
+                valueProps,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        facetSlider: {
+            // default props
+            className: 'ss__facet__facet-slider',
+            // global theme
+            ...globalTheme?.components?.facetSlider,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    let limitedValues;
+    if (facet?.overflow && Number.isInteger(limit) && !disableOverflow) {
+        facet.overflow.setLimit(limit);
+        limitedValues = facet?.refinedValues;
+    }
+    else if (facet?.overflow && Number.isInteger(limit)) {
+        limitedValues = facet?.values.slice(0, limit);
+    }
+    else {
+        limitedValues = facet?.values;
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.facet({ color, theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (facet && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet', `ss__facet--${facet.display}`, `ss__facet--${facet.field}`, className) },
+            jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: (e) => !disableCollapse && facet?.toggleCollapse(), button: jsx("div", { className: "ss__facet__header" },
+                    facet?.label,
+                    !disableCollapse && jsx(Icon, { ...subProps.icon, icon: facet?.collapsed ? iconExpand : iconCollapse })) },
+                jsx("div", { className: classnames('ss__facet__options', className) }, (() => {
+                    //manual options component
+                    if (optionsSlot) {
+                        return cloneWithProps(optionsSlot, { facet, valueProps, limit, previewOnFocus });
+                    }
+                    else {
+                        switch (facet?.display) {
+                            case FacetDisplay.SLIDER:
+                                return jsx(FacetSlider, { ...subProps.facetSlider, facet: facet });
+                            case FacetDisplay.GRID:
+                                return jsx(FacetGridOptions, { ...subProps.facetGridOptions, values: limitedValues });
+                            case FacetDisplay.PALETTE:
+                                return jsx(FacetPaletteOptions, { ...subProps.facetPaletteOptions, values: limitedValues });
+                            case FacetDisplay.HIERARCHY:
+                                return jsx(FacetHierarchyOptions, { ...subProps.facetHierarchyOptions, values: limitedValues });
+                            default:
+                                return jsx(FacetListOptions, { ...subProps.facetListOptions, values: limitedValues });
+                        }
+                    }
+                })()),
+                !disableOverflow && facet?.overflow && facet.overflow.enabled && (jsx("div", { className: "ss__facet__show-more-less", onClick: () => facet.overflow.toggle() }, overflowSlot ? (cloneWithProps(overflowSlot, { facet })) : (jsx(Fragment, null,
+                    jsx(Icon, { ...subProps.showMoreLessIcon, icon: facet.overflow.remaining > 0 ? iconOverflowMore : iconOverflowLess }),
+                    jsx("span", null, facet.overflow.remaining > 0 ? showMoreText : showLessText))))))))));
+});

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

@@ -0,0 +1,280 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetProps } from './Facet';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetProps) => 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;
+            };
+        };
+        facet: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        limit: {
+            defaultValue: number;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableOverflow: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableCollapse: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconExpand: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconCollapse: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        showMoreText: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        showLessText: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconOverflowMore: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconOverflowLess: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        overflowSlot: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        optionsSlot: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        fields: {
+            defaultValue: {};
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const List: any;
+export declare const Slider: any;
+export declare const Palette: any;
+export declare const Grid: any;
+export declare const Hierarchy: any;
+//# sourceMappingURL=Facet.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Facet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Facet/Facet.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO5C,wBA8LE;AAYF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,MAAM,KAA0B,CAAC;AAoB9C,eAAO,MAAM,OAAO,KAA2B,CAAC;AAiBhD,eAAO,MAAM,IAAI,KAAwB,CAAC;AAkB1C,eAAO,MAAM,SAAS,KAA6B,CAAC"}