@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,315 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { SelectProps } from './Select';
+declare const _default: {
+    title: string;
+    component: ((properties: SelectProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => 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;
+            };
+        };
+        options: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        selected: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        label: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        clearSelection: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideLabelOnSelection: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        separator: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        borderColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        backgroundColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconColor: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        iconOpen: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconClose: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        stayOpenOnSelection: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        startOpen: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        native: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableClickOutside: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onSelect: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Native: any;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAK3B,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM/C,wBA4ME;AAqBF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAazC,eAAO,MAAM,MAAM,KAAoB,CAAC"}

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

@@ -0,0 +1,244 @@
+import { h } from 'preact';
+import { observer } from 'mobx-react';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Select } from './Select';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import { iconPaths } from '../../Atoms/Icon';
+import Readme from '../Select/readme.md';
+export default {
+    title: `Molecules/Select`,
+    component: Select,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        options: {
+            description: 'Select options from store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'Array of Option objects',
+                },
+            },
+            control: { type: 'none' },
+        },
+        selected: {
+            description: 'Current selected options from store reference',
+            table: {
+                type: {
+                    summary: 'Option object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        disabled: {
+            description: 'Disable select',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        label: {
+            description: 'Header label',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        clearSelection: {
+            description: 'Unselect label',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        hideLabelOnSelection: {
+            description: 'Hide label when selection has been made (non-native only)',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        separator: {
+            defaultValue: ': ',
+            description: 'Select delimiter',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: ': ' },
+            },
+            control: { type: 'text' },
+        },
+        color: {
+            description: 'Select color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'color' },
+        },
+        borderColor: {
+            description: 'Select border color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '#333' },
+            },
+            control: { type: 'color' },
+        },
+        backgroundColor: {
+            description: 'Select background color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '#FFF' },
+            },
+            control: { type: 'color' },
+        },
+        iconColor: {
+            description: 'Select icon color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '#333' },
+            },
+            control: { type: 'color' },
+        },
+        iconOpen: {
+            defaultValue: 'angle-down',
+            description: 'Icon for when select is closed',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'angle-down' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        iconClose: {
+            defaultValue: 'angle-up',
+            description: 'Icon for when select is open',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'angle-up' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        stayOpenOnSelection: {
+            defaultValue: false,
+            description: 'Keep dropdown open when an option is selected',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        startOpen: {
+            defaultValue: false,
+            description: 'Open on initial render',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        native: {
+            defaultValue: false,
+            description: 'Use native select element',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        disableClickOutside: {
+            defaultValue: false,
+            description: 'Ignore clicks outside of element',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        onSelect: {
+            description: 'Select onSelect event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onSelect',
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Select', globals: { siteId: '8uyt2m' } });
+const ObservableSelect = observer(({ args, controller }) => {
+    return (h(Select, { ...args, options: controller?.store?.sorting?.options, selected: controller?.store?.sorting?.current, onSelect: (e, selectedOption) => {
+            selectedOption && selectedOption.url.go();
+        } }));
+});
+const Template = (args, { loaded: { controller } }) => {
+    return h(ObservableSelect, { args: args, controller: controller });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Default.args = {
+    label: 'Sort By',
+};
+export const Native = Template.bind({});
+Native.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Native.args = {
+    label: 'Sort By',
+    native: true,
+};

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare function Slideout(properties: SlideoutProps): JSX.Element;
+export interface SlideoutProps extends ComponentProps {
+    children?: JSX.Element;
+    active: boolean;
+    buttonContent?: string | JSX.Element;
+    width?: string;
+    displayAt?: string;
+    transitionSpeed?: string;
+    overlayColor?: string;
+    slideDirection?: SlideDirectionType;
+}
+declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
+export {};
+//# sourceMappingURL=Slideout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0BhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,aAAK,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,84 @@
+import { useState } from 'preact/hooks';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { defined, cloneWithProps } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useMediaQuery } from '../../../hooks';
+import { Overlay } from '../../Atoms/Overlay';
+const CSS = {
+    slideout: ({ isActive, width, transitionSpeed, slideDirection }) => 
+    //@ts-ignore
+    css({
+        display: 'block',
+        position: 'fixed',
+        transition: `${slideDirection ? slideDirection : 'left'} ${transitionSpeed}`,
+        left: slideDirection == 'left' ? (isActive ? '0' : `-${width}`) : slideDirection != 'right' ? '0' : 'initial',
+        right: slideDirection == 'right' ? (isActive ? '0' : `-${width}`) : 'initial',
+        bottom: slideDirection == 'bottom' ? (isActive ? '0' : `-100vh`) : 'initial',
+        top: slideDirection == 'top' ? (isActive ? '0' : `-100vh`) : slideDirection == 'bottom' ? 'initial' : '0',
+        height: '100%',
+        zIndex: '10004',
+        width: '90%',
+        maxWidth: width,
+        padding: '10px',
+        background: '#fff',
+        boxSizing: 'border-box',
+        overflowY: 'auto',
+    }),
+};
+export function Slideout(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        active: false,
+        displayAt: '',
+        slideDirection: 'left',
+        width: '300px',
+        buttonContent: 'click me',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        transitionSpeed: '0.25s',
+        // global theme
+        ...globalTheme?.components?.slideout,
+        // props
+        ...properties,
+        ...properties.theme?.components?.slideout,
+    };
+    const { children, active, buttonContent, width, displayAt, transitionSpeed, overlayColor, slideDirection, disableStyles, className, style } = props;
+    const subProps = {
+        overlay: {
+            // default props
+            className: 'ss__slideout__overlay',
+            // global theme
+            ...globalTheme?.components?.overlay,
+            // inherited props
+            ...defined({
+                disableStyles,
+                color: overlayColor,
+                transitionSpeed,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    // state
+    const [isActive, setActive] = useState(active);
+    const toggleActive = () => {
+        setActive(!isActive);
+        document.body.style.overflow = isActive ? 'hidden' : '';
+    };
+    const isVisible = useMediaQuery(displayAt, () => {
+        document.body.style.overflow = '';
+    });
+    document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.slideout({ isActive, width, transitionSpeed, slideDirection }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (isVisible && (jsx(CacheProvider, null,
+        buttonContent && (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, buttonContent)),
+        jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
+        jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))));
+}