@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,190 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Facet = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var FacetListOptions_1 = require("../../Molecules/FacetListOptions");
+var FacetGridOptions_1 = require("../../Molecules/FacetGridOptions");
+var FacetPaletteOptions_1 = require("../../Molecules/FacetPaletteOptions");
+var FacetHierarchyOptions_1 = require("../../Molecules/FacetHierarchyOptions");
+var FacetSlider_1 = require("../../Molecules/FacetSlider");
+var Icon_1 = require("../../Atoms/Icon");
+var Dropdown_1 = require("../../Atoms/Dropdown");
+var types_1 = require("../../../types");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var CSS = {
+    facet: function (_a) {
+        var _b;
+        var color = _a.color, theme = _a.theme;
+        return (0, react_1.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 ".concat(((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.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',
+                },
+            },
+        });
+    },
+};
+exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        limit: 12, disableOverflow: false, iconCollapse: 'angle-up', iconExpand: 'angle-down', showMoreText: 'Show More', showLessText: 'Show Less', iconOverflowMore: 'plus', iconOverflowLess: 'minus' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.facet), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.facet);
+    //manual props override on a per facet level using the fields prop
+    if (props.fields && props.fields[(_d = props.facet) === null || _d === void 0 ? void 0 : _d.field]) {
+        props = __assign(__assign({}, props), props.fields[(_e = props.facet) === null || _e === void 0 ? void 0 : _e.field]);
+    }
+    var disableCollapse = props.disableCollapse, facet = props.facet, iconCollapse = props.iconCollapse, iconExpand = props.iconExpand, limit = props.limit, disableOverflow = props.disableOverflow, iconColor = props.iconColor, color = props.color, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, showMoreText = props.showMoreText, showLessText = props.showLessText, iconOverflowMore = props.iconOverflowMore, iconOverflowLess = props.iconOverflowLess, overflowSlot = props.overflowSlot, optionsSlot = props.optionsSlot, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var subProps = {
+        dropdown: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__dropdown', disableClickOutside: true, disableOverlay: true }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.dropdown), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__dropdown__icon', size: '12px', color: iconColor || color }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        showMoreLessIcon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__show-more-less__icon', size: '10px', color: iconColor || color }, (_h = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _h === void 0 ? void 0 : _h.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        facetHierarchyOptions: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__facet-hierarchy-options' }, (_j = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _j === void 0 ? void 0 : _j.facetHierarchyOptions), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        facetListOptions: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__facet-list-options' }, (_k = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _k === void 0 ? void 0 : _k.facetListOptions), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        facetGridOptions: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__facet-grid-options' }, (_l = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _l === void 0 ? void 0 : _l.facetGridOptions), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        facetPaletteOptions: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__facet-palette-options' }, (_m = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _m === void 0 ? void 0 : _m.facetPaletteOptions), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            previewOnFocus: previewOnFocus,
+            valueProps: valueProps,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        facetSlider: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__facet__facet-slider' }, (_o = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _o === void 0 ? void 0 : _o.facetSlider), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+    };
+    var limitedValues;
+    if (((_p = facet) === null || _p === void 0 ? void 0 : _p.overflow) && Number.isInteger(limit) && !disableOverflow) {
+        facet.overflow.setLimit(limit);
+        limitedValues = (_q = facet) === null || _q === void 0 ? void 0 : _q.refinedValues;
+    }
+    else if (((_r = facet) === null || _r === void 0 ? void 0 : _r.overflow) && Number.isInteger(limit)) {
+        limitedValues = (_s = facet) === null || _s === void 0 ? void 0 : _s.values.slice(0, limit);
+    }
+    else {
+        limitedValues = (_t = facet) === null || _t === void 0 ? void 0 : _t.values;
+    }
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.facet({ color: color, theme: theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (facet && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.display), "ss__facet--".concat(facet.field), className) }),
+            (0, react_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function (e) { return !disableCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, button: (0, react_1.jsx)("div", { className: "ss__facet__header" }, facet === null || facet === void 0 ? void 0 :
+                    facet.label,
+                    !disableCollapse && (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? iconExpand : iconCollapse }))) }),
+                (0, react_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet__options', className) }, (function () {
+                    //manual options component
+                    if (optionsSlot) {
+                        return (0, utilities_1.cloneWithProps)(optionsSlot, { facet: facet, valueProps: valueProps, limit: limit, previewOnFocus: previewOnFocus });
+                    }
+                    else {
+                        switch (facet === null || facet === void 0 ? void 0 : facet.display) {
+                            case types_1.FacetDisplay.SLIDER:
+                                return (0, react_1.jsx)(FacetSlider_1.FacetSlider, __assign({}, subProps.facetSlider, { facet: facet }));
+                            case types_1.FacetDisplay.GRID:
+                                return (0, react_1.jsx)(FacetGridOptions_1.FacetGridOptions, __assign({}, subProps.facetGridOptions, { values: limitedValues }));
+                            case types_1.FacetDisplay.PALETTE:
+                                return (0, react_1.jsx)(FacetPaletteOptions_1.FacetPaletteOptions, __assign({}, subProps.facetPaletteOptions, { values: limitedValues }));
+                            case types_1.FacetDisplay.HIERARCHY:
+                                return (0, react_1.jsx)(FacetHierarchyOptions_1.FacetHierarchyOptions, __assign({}, subProps.facetHierarchyOptions, { values: limitedValues }));
+                            default:
+                                return (0, react_1.jsx)(FacetListOptions_1.FacetListOptions, __assign({}, subProps.facetListOptions, { values: limitedValues }));
+                        }
+                    }
+                })()),
+                !disableOverflow && ((_u = facet) === null || _u === void 0 ? void 0 : _u.overflow) && facet.overflow.enabled && ((0, react_1.jsx)("div", { className: "ss__facet__show-more-less", onClick: function () { return facet.overflow.toggle(); } }, overflowSlot ? ((0, utilities_1.cloneWithProps)(overflowSlot, { facet: facet })) : ((0, react_1.jsx)(preact_1.Fragment, null,
+                    (0, react_1.jsx)(Icon_1.Icon, __assign({}, subProps.showMoreLessIcon, { icon: facet.overflow.remaining > 0 ? iconOverflowMore : iconOverflowLess })),
+                    (0, react_1.jsx)("span", null, facet.overflow.remaining > 0 ? showMoreText : showLessText))))))))));
+});

package/dist/cjs/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/cjs/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"}