@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,203 @@
+import { useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useRanger } from 'react-ranger';
+import { useTheme, CacheProvider } from '../../../providers';
+import { sprintf } from '../../../utilities';
+const CSS = {
+    facetSlider: ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme }) => css({
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '5px',
+        marginBottom: showTicks && stickyHandleLabel ? '20px' : showTicks || stickyHandleLabel ? '10px' : '5px',
+        '& .ss__facet-slider__slider': {
+            position: 'relative',
+            display: 'inline-block',
+            height: '8px',
+            width: 'calc(100% - 2rem)',
+            margin: stickyHandleLabel ? '1rem' : '0 1rem',
+            top: '10px',
+        },
+        '& .ss__facet-slider__tick': {
+            '&:before': {
+                content: "''",
+                position: 'absolute',
+                left: '0',
+                background: 'rgba(0, 0, 0, 0.2)',
+                height: '5px',
+                width: '2px',
+                transform: 'translate(-50%, 0.7rem)',
+            },
+            '& .ss__facet-slider__tick__label': {
+                position: 'absolute',
+                fontSize: '0.6rem',
+                color: tickTextColor,
+                top: '100%',
+                transform: 'translate(-50%, 1.2rem)',
+                whiteSpace: 'nowrap',
+            },
+        },
+        '& .ss__facet-slider__rail': {
+            background: railColor || theme.colors?.primary || '#333',
+            height: '100%',
+        },
+        '& .ss__facet-slider__segment': {
+            background: trackColor || theme.colors?.secondary || '#ccc',
+            height: '100%',
+        },
+        '& .ss__facet-slider__handles': {
+            textAlign: 'center',
+            '& button': {
+                '& .ss__facet-slider__handle': {
+                    background: handleColor || theme.colors?.primary || '#333',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '1.6rem',
+                    height: '1.6rem',
+                    borderRadius: '100%',
+                    fontSize: '0.7rem',
+                    whiteSpace: 'nowrap',
+                    color: valueTextColor || 'initial',
+                    fontWeight: 'normal',
+                    transform: 'translateY(0) scale(0.9)',
+                    transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                    position: 'relative',
+                    cursor: 'pointer',
+                    '&:after': {
+                        backgroundColor: '#ffffff',
+                        width: '30%',
+                        height: '30%',
+                        top: '0',
+                        bottom: '0',
+                        left: '0',
+                        content: '""',
+                        position: 'absolute',
+                        right: '0',
+                        borderRadius: '12px',
+                        margin: 'auto',
+                        cursor: 'pointer',
+                    },
+                    '&.ss__facet-slider__handle--active': {
+                        background: handleDraggingColor || handleColor || theme.colors?.primary || '#000',
+                        '& label.ss__facet-slider__handle__label': {
+                            background: '#fff',
+                            padding: '0 5px',
+                        },
+                    },
+                    '& label.ss__facet-slider__handle__label': {
+                        display: 'inline-block',
+                        marginTop: showTicks && !stickyHandleLabel ? '35px' : '20px',
+                        '&.ss__facet-slider__handle__label--pinleft': {
+                            left: '0px',
+                        },
+                        '&.ss__facet-slider__handle__label--pinright': {
+                            right: '0px',
+                        },
+                        '&.ss__facet-slider__handle__label--sticky': {
+                            position: 'absolute',
+                            top: '-20px',
+                            fontFamily: 'Roboto, Helvetica, Arial',
+                            fontSize: '14px',
+                            marginTop: '0px',
+                        },
+                    },
+                },
+            },
+        },
+        '& .ss__facet-slider__labels': {
+            textAlign: 'center',
+            marginTop: showTicks && !stickyHandleLabel ? '40px' : '20px',
+            color: valueTextColor,
+            '& .ss__facet-slider__label--0': {
+                '&:after': {
+                    content: '"-"',
+                    padding: '5px',
+                },
+            },
+        },
+    }),
+};
+export const FacetSlider = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        tickSize: properties.facet?.step * 10 || 20,
+        // global theme
+        ...globalTheme?.components?.facetSlider,
+        // props
+        ...properties,
+        ...properties.theme?.components?.facetSlider,
+    };
+    const { tickTextColor, trackColor, valueTextColor, railColor, handleColor, handleDraggingColor, showTicks, tickSize, facet, stickyHandleLabel, onChange, onDrag, disableStyles, className, style, } = props;
+    const [values, setValues] = useState([facet.active?.low, facet.active?.high]);
+    const [active, setActive] = useState([facet.active?.low, facet.active?.high]);
+    if (values[0] != facet.active?.low || values[1] != facet.active?.high) {
+        setActive([facet.active?.low, facet.active?.high]);
+        setValues([facet.active?.low, facet.active?.high]);
+    }
+    const { getTrackProps, ticks, segments, handles } = useRanger({
+        values: active,
+        onChange: (val) => {
+            setActive(val);
+            if (facet?.services?.urlManager) {
+                if (val[0] == facet.range.low && val[1] == facet.range.high) {
+                    facet.services.urlManager.remove('page').remove(`filter.${facet.field}`).go();
+                }
+                else {
+                    facet.services.urlManager.remove('page').set(`filter.${facet.field}`, { low: val[0], high: val[1] }).go();
+                }
+            }
+            onChange && onChange(val);
+        },
+        onDrag: (val) => {
+            setActive(val);
+            onDrag && onDrag(val);
+        },
+        min: facet.range?.low,
+        max: facet.range?.high,
+        stepSize: facet.step,
+        tickSize: tickSize,
+    });
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [
+            CSS.facetSlider({
+                railColor,
+                trackColor,
+                handleColor,
+                valueTextColor,
+                handleDraggingColor,
+                showTicks,
+                stickyHandleLabel,
+                tickTextColor,
+                theme,
+            }),
+            style,
+        ];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (facet.range &&
+        facet.active &&
+        facet.step && (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__facet-slider', className), ...getTrackProps(), ...styling },
+            jsx("div", { className: "ss__facet-slider__slider" },
+                showTicks &&
+                    ticks.map(({ value, getTickProps }) => (jsx("div", { className: "ss__facet-slider__tick", ...getTickProps() },
+                        jsx("div", { className: "ss__facet-slider__tick__label" }, value)))),
+                segments.map(({ getSegmentProps }, index) => (jsx("div", { className: `${index === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment'}`, ...getSegmentProps(), index: index }))),
+                jsx("div", { className: 'ss__facet-slider__handles' }, handles.map(({ value, active, getHandleProps }, idx) => (jsx("button", { type: "button", ...getHandleProps({
+                        style: {
+                            appearance: 'none',
+                            border: 'none',
+                            background: 'transparent',
+                            outline: 'none',
+                        },
+                    }) },
+                    jsx("div", { className: classnames('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }) }, stickyHandleLabel && (jsx("label", { className: classnames('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${idx}`, { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet.range.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet.range.high }) }, sprintf(facet.formatValue, value))))))))),
+            !stickyHandleLabel && (jsx("div", { className: 'ss__facet-slider__labels' }, handles.map(({ value }, idx) => (jsx("label", { className: classnames('ss__facet-slider__label', `ss__facet-slider__label--${idx}`) }, sprintf(facet.formatValue, value))))))))));
+});

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

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetSliderProps } from './FacetSlider';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetSliderProps) => 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;
+            };
+        };
+        showTicks: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        tickSize: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        tickTextColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        trackColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        railColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        valueTextColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        handleColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        stickyHandleLabel: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        handleDraggingColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onDrag: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onChange: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Price: any;
+//# sourceMappingURL=FacetSlider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAuIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}

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

@@ -0,0 +1,138 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { FacetSlider } from './FacetSlider';
+import { componentArgs } from '../../../utilities';
+import { sliderFacetMock } from '../../../mocks/searchResponse';
+import Readme from '../FacetSlider/readme.md';
+export default {
+    title: `Molecules/FacetSlider`,
+    component: FacetSlider,
+    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: {
+        facet: {
+            description: 'Facet store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'facet store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        showTicks: {
+            description: 'enables/disables ticks',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        tickSize: {
+            description: 'distance between ticks',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 20 },
+            },
+            control: { type: 'number' },
+        },
+        tickTextColor: {
+            description: 'ticks color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        trackColor: {
+            description: 'Slider track color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        railColor: {
+            description: 'Slider rail Color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        valueTextColor: {
+            description: 'Slider value Text Color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        handleColor: {
+            description: 'Slider handle color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        stickyHandleLabel: {
+            description: 'enables/disables sticky handle labels',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        handleDraggingColor: {
+            description: 'Slider handle color when dragging',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        onDrag: {
+            description: 'Slider onDrag event handler - fires as the slider is dragged (should not be used to trigger searches)',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onDrag',
+        },
+        onChange: {
+            description: 'Slider onChange event handler - fires after touchEnd (used to trigger search)',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onChange',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(FacetSlider, { ...args, facet: sliderFacetMock });
+export const Price = Template.bind({});

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { ComponentProps } from '../../../types';
+export declare const Filter: ((properties: FilterProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface FilterProps extends ComponentProps {
+    facetLabel?: string;
+    valueLabel: string;
+    url?: any;
+    hideFacetLabel?: boolean;
+    onClick?: (e: Event) => void;
+    icon?: string;
+    separator?: string;
+}
+//# sourceMappingURL=Filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAuBhD,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAoEnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB"}

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

@@ -0,0 +1,80 @@
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+const CSS = {
+    filter: () => css({
+        textDecoration: 'none',
+        display: 'inline-flex',
+        '& .ss__filter__button': {
+            alignItems: 'center',
+            '& .ss__filter__button__icon': {
+                marginRight: '5px',
+            },
+        },
+        '& .ss__filter__label': {
+            marginRight: '5px',
+            fontWeight: 'bold',
+        },
+    }),
+};
+// TODO: look into urlManager and how it connects in this case, left the href out for the time being
+export const Filter = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.filter,
+        //props
+        ...properties,
+        ...properties.theme?.components?.filter,
+    };
+    const { facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, style } = props;
+    const subProps = {
+        button: {
+            // default props
+            className: 'ss__filter__button',
+            // global theme
+            ...globalTheme?.components?.button,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        icon: {
+            // default props
+            icon: 'close-thin',
+            className: 'ss__filter__button__icon',
+            size: '10px',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+                icon,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.filter(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (valueLabel && (jsx(CacheProvider, null,
+        jsx("a", { ...styling, className: classnames('ss__filter', className), onClick: (e) => onClick && onClick(e), ...url?.link },
+            jsx(Button, { ...subProps.button },
+                jsx(Icon, { ...subProps.icon }),
+                !hideFacetLabel && (jsx("span", { className: "ss__filter__label" },
+                    facetLabel,
+                    separator && jsx("span", { className: "ss__filter__label__separator" }, separator))),
+                jsx("span", { className: "ss__filter__value" }, valueLabel))))));
+});