@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,139 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Button } from '../../Atoms/Button/Button';
+import { defined, LightenDarkenColor } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { ErrorType } from '@searchspring/snap-store-mobx';
+const CSS = {
+    errorHandler: ({ theme }) => css({
+        borderRadius: '2px',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderLeft: '4px solid',
+        '.ss__error-handler__message': {
+            padding: '10px',
+            display: 'flex',
+            alignItems: 'center',
+            '.ss__icon': {
+                marginRight: '5px',
+            },
+        },
+        '& .ss__error-handler__button': {
+            backgroundColor: 'white',
+            color: 'inherit',
+            borderColor: theme.colors?.primary,
+            width: ['150px', 'fit-content'],
+            margin: '5px 10px',
+            '.ss__icon': {
+                marginRight: '5px',
+            },
+        },
+        '&.ss__error-handler--error': {
+            backgroundColor: LightenDarkenColor(theme.colors?.message?.error || 'red', 180),
+            borderLeftColor: theme.colors?.message?.error || '#ff0000',
+            '.ss__error-handler__message': {
+                '.ss__icon': {
+                    fill: theme.colors?.message?.error || '#ff0000',
+                },
+            },
+        },
+        '&.ss__error-handler--warning': {
+            backgroundColor: LightenDarkenColor(theme.colors?.message?.warning || 'yellow', 180),
+            borderLeftColor: theme.colors?.message?.warning || '#ffff00',
+            '.ss__icon': {
+                fill: theme.colors?.message?.warning || '#ffff00',
+            },
+            '.ss__error-handler__button': {
+                borderColor: theme.colors?.message?.warning || '#ffff00',
+            },
+        },
+        '&.ss__error-handler--info': {
+            backgroundColor: LightenDarkenColor(theme.colors?.message?.info || 'blue', 180),
+            borderLeftColor: theme.colors?.message?.info || '#0000ff',
+            '.ss__error-handler__message': {
+                '.ss__icon': {
+                    fill: theme.colors?.message?.info || '#0000ff',
+                },
+            },
+        },
+    }),
+};
+export const ErrorHandler = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // global theme
+        ...globalTheme?.components?.carousel,
+        //props
+        ...properties,
+        ...properties.theme?.components?.carousel,
+    };
+    const { controller, error, disableStyles, style, onRetryClick, className } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__error-handler__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        button: {
+            // default props
+            className: 'ss__error-handler__button',
+            // global theme
+            ...globalTheme?.components?.button,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    const errorObject = controller?.store?.error || error;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.errorHandler({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (Object.values(ErrorType).includes(errorObject?.type) &&
+        errorObject?.message && (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__error-handler', `ss__error-handler--${errorObject.type}`, className), ...styling }, (() => {
+            switch (errorObject.type) {
+                case ErrorType.WARNING:
+                    return (jsx(Fragment, null,
+                        jsx("div", { className: "ss__error-handler__message" },
+                            jsx(Icon, { ...subProps.icon, icon: 'warn' }),
+                            jsx("b", null, "Warning:\u00A0"),
+                            errorObject.message),
+                        errorObject?.code == 429 ? (jsx(Button, { ...subProps.button, onClick: (e) => {
+                                onRetryClick ? onRetryClick(e) : controller?.search();
+                            } },
+                            jsx(Icon, { ...subProps.icon, icon: 'rotate-right' }),
+                            "Reload")) : null));
+                case ErrorType.ERROR:
+                    return (jsx("div", { className: "ss__error-handler__message" },
+                        jsx(Icon, { ...subProps.icon, icon: 'error' }),
+                        jsx("b", null, "Error:\u00A0"),
+                        errorObject.message));
+                case ErrorType.INFO:
+                    return (jsx("div", { className: "ss__error-handler__message" },
+                        jsx(Icon, { ...subProps.icon, icon: 'info' }),
+                        jsx("b", null, "Info:\u00A0"),
+                        errorObject.message));
+            }
+        })()))));
+});

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

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./ErrorHandler").ErrorHandlerProps) => 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;
+            };
+        };
+        controller: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        error: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onRetryClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Warning: any;
+export declare const Error: any;
+export declare const Info: any;
+export declare const CustomError: any;
+//# sourceMappingURL=ErrorHandler.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorHandler.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/ErrorHandler/ErrorHandler.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAyDE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAavC,eAAO,MAAM,IAAI,KAAoB,CAAC;AAatC,eAAO,MAAM,WAAW,KAAoB,CAAC"}

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

@@ -0,0 +1,100 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { ErrorType } from '@searchspring/snap-store-mobx';
+import { ErrorHandler } from './ErrorHandler';
+import { componentArgs } from '../../../utilities';
+import Readme from './readme.md';
+export default {
+    title: `Molecules/ErrorHandler`,
+    component: ErrorHandler,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                maxWidth: '900px',
+                height: '300px',
+            } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        controller: {
+            description: 'Controller reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'Controller object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        error: {
+            description: 'Error object containing message and type',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'Error object',
+                },
+            },
+            control: { type: 'object' },
+        },
+        onRetryClick: {
+            description: 'Retry button click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onRetryClick',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(ErrorHandler, { ...args });
+export const Warning = Template.bind({});
+Warning.args = {
+    controller: {
+        store: {
+            error: {
+                code: 429,
+                type: ErrorType.WARNING,
+                message: 'Too many requests try again later',
+            },
+        },
+    },
+};
+export const Error = Template.bind({});
+Error.args = {
+    controller: {
+        store: {
+            error: {
+                code: 500,
+                type: ErrorType.ERROR,
+                message: 'Invalid Search Request or Service Unavailable',
+            },
+        },
+    },
+};
+export const Info = Template.bind({});
+Info.args = {
+    controller: {
+        store: {
+            error: {
+                code: 200,
+                type: ErrorType.INFO,
+                message: 'Something important happened',
+            },
+        },
+    },
+};
+export const CustomError = Template.bind({});
+CustomError.args = {
+    error: {
+        type: ErrorType.INFO,
+        message: 'Custom error using info type',
+    },
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetGridOptions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAiEjE,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB,KAAG,WAAW;;CAiDvF,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC5D,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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/FacetGridOptions/FacetGridOptions.js

@@ -0,0 +1,88 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    grid: ({ columns, gapSize, theme }) => css({
+        display: 'flex',
+        flexFlow: 'row wrap',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: gapSize,
+        gridAutoRows: `1fr`,
+        '& .ss__facet-grid-options__option': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: '0 1 auto',
+            border: `1px solid ${theme.colors?.primary || '#333'}`,
+            textAlign: 'center',
+            wordBreak: 'break-all',
+            boxSizing: 'border-box',
+            padding: '1em 0',
+            width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+            margin: `0 ${gapSize} ${gapSize} 0`,
+            [`:nth-of-type(${columns}n)`]: {
+                marginRight: '0',
+            },
+            '&.ss__facet-grid-options__option--filtered': {
+                background: theme.colors?.primary || '#ccc',
+                color: theme.colors?.text?.secondary,
+            },
+            '&:hover:not(.ss__facet-grid-options__option--filtered)': {
+                cursor: 'pointer',
+                background: theme.colors?.hover || '#f8f8f8',
+            },
+            '& .ss__facet-grid-options__option__value': {
+                '&.ss__facet-grid-options__option__value--smaller': {
+                    fontSize: '70%',
+                },
+            },
+        },
+        '@supports (display: grid)': {
+            display: 'grid',
+            '& .ss__facet-grid-options__option': {
+                padding: '0',
+                margin: '0',
+                width: 'initial',
+            },
+            '&::before': {
+                content: '""',
+                width: 0,
+                paddingBottom: '100%',
+                gridRow: '1 / 1',
+                gridColumn: '1 / 1',
+            },
+            '&> *:first-of-type': {
+                gridRow: '1 / 1',
+                gridColumn: '1 / 1',
+            },
+        },
+    }),
+};
+export const FacetGridOptions = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        columns: 4,
+        gapSize: '8px',
+        // global theme
+        ...globalTheme?.components?.facetGridOptions,
+        // props
+        ...properties,
+        ...properties.theme?.components?.facetGridOptions,
+    };
+    const { values, columns, gapSize, onClick, previewOnFocus, valueProps, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.grid({ columns, gapSize, theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (values?.length && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__facet-grid-options', className) }, values.map((value) => (jsx("a", { className: classnames('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), onClick: onClick, onFocus: () => previewOnFocus && value.preview && value.preview(), ...valueProps, ...value.url?.link },
+            jsx("span", { className: classnames('ss__facet-grid-options__option__value', {
+                    'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
+                }) }, value.label))))))));
+});

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

@@ -0,0 +1,152 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { FacetGridOptionsProps } from './FacetGridOptions';
+declare const _default: {
+    title: string;
+    component: ((properties: FacetGridOptionsProps) => 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;
+            };
+        };
+        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=FacetGridOptions.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FacetGridOptions.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetGridOptions/FacetGridOptions.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK7E,wBAoFE;AAcF,eAAO,MAAM,OAAO,KAAoB,CAAC"}