@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,167 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Result } from './Result';
+import { FALLBACK_IMAGE_URL } from '../../Atoms/Image';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Result/readme.md';
+import { Layout } from '../../../types';
+export default {
+    title: `Molecules/Result`,
+    component: Result,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: { maxWidth: '250px' } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        result: {
+            description: 'Result store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'result store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        hideBadge: {
+            description: 'Hide badge',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideTitle: {
+            description: 'Hide title',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hidePricing: {
+            description: 'Hide pricing',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideImage: {
+            description: 'Hide image',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        detailSlot: {
+            description: 'Slot for more product details (under price)',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        fallback: {
+            defaultValue: '',
+            description: 'Fallback image url',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: FALLBACK_IMAGE_URL },
+            },
+            control: { type: 'text' },
+        },
+        truncateTitle: {
+            defaultValue: {},
+            description: 'truncate title options object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: {
+                type: 'object',
+            },
+        },
+        layout: {
+            description: 'Results layout',
+            defaultValue: Layout.GRID,
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: {
+                type: 'select',
+                options: [Layout.GRID, Layout.LIST],
+            },
+        },
+        controller: {
+            description: 'Controller reference',
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } });
+const Template = (args, { loaded: { controller } }) => h(Result, { result: controller?.store?.results[0], ...args });
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+export const hideSections = Template.bind({});
+hideSections.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+hideSections.args = {
+    hideBadge: true,
+    hideTitle: true,
+    hidePricing: true,
+};
+export const truncateTitle = Template.bind({});
+truncateTitle.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+truncateTitle.args = {
+    truncateTitle: { limit: 5, append: '...' },
+};

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+import { IconType } from '../../Atoms/Icon';
+export declare const Select: ((properties: SelectProps) => JSX.Element) & {
+    displayName: string;
+};
+export declare type Option = {
+    label: string;
+    value: string | number;
+    [otherOptions: string]: any;
+};
+export interface SelectProps extends ComponentProps {
+    options: Option[];
+    backgroundColor?: string;
+    borderColor?: string;
+    color?: string;
+    clearSelection?: string;
+    disableClickOutside?: boolean;
+    disabled?: boolean;
+    hideLabelOnSelection?: boolean;
+    iconColor?: string;
+    iconClose?: IconType | string;
+    iconOpen?: IconType | string;
+    label?: string | JSX.Element;
+    native?: boolean;
+    onSelect?: (e: Event, option: Option) => void;
+    selected?: Option;
+    separator?: string | JSX.Element;
+    startOpen?: boolean;
+    stayOpenOnSelection?: boolean;
+}
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Select/Select.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAmB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyC7D,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAuNnE,CAAC;AAQH,oBAAY,MAAM,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC,YAAY,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

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

@@ -0,0 +1,183 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { defined } from '../../../utilities';
+import { Dropdown } from '../../Atoms/Dropdown';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+const CSS = {
+    select: ({ color, backgroundColor, borderColor, label, selection, theme }) => 
+    //@ts-ignore
+    css({
+        display: 'inline-flex',
+        color: color,
+        '&.ss__select--disabled': {
+            opacity: 0.7,
+        },
+        '& .ss__select__dropdown__button__icon': {
+            margin: 'auto 0 auto 5px',
+        },
+        '& .ss__select__label': {
+            marginRight: '5px',
+        },
+        '& .ss__select__select': {
+            position: 'relative',
+            zIndex: '10000',
+            backgroundColor: backgroundColor || '#fff',
+            listStyle: 'none',
+            padding: '0',
+            marginTop: '-1px',
+            border: `1px solid ${borderColor || color || theme.colors?.primary || '#333'}`,
+            '& .ss__select__select__option': {
+                cursor: 'pointer',
+                padding: '6px 8px',
+                color: 'initial',
+                '&.ss__select__select__option--selected': {
+                    fontWeight: 'bold',
+                },
+                '&:hover': {
+                    backgroundColor: theme.colors?.hover || '#f8f8f8',
+                },
+            },
+        },
+    }),
+    native: () => css({}),
+};
+export const Select = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        iconOpen: 'angle-down',
+        iconClose: 'angle-up',
+        separator: ': ',
+        startOpen: false,
+        // global theme
+        ...globalTheme?.components?.select,
+        // props
+        ...properties,
+        ...properties.theme?.components?.select,
+    };
+    const { backgroundColor, borderColor, color, clearSelection, disableClickOutside, disabled, hideLabelOnSelection, iconColor, iconClose, iconOpen, label, native, onSelect, selected, separator, startOpen, stayOpenOnSelection, disableStyles, className, style, } = props;
+    let { options } = props;
+    const subProps = {
+        dropdown: {
+            className: 'ss__select__dropdown',
+            // global theme
+            ...globalTheme?.components?.dropdown,
+            // inherited props
+            ...defined({
+                disableStyles,
+                disabled,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        button: {
+            // default props
+            className: 'ss__select__dropdown__button',
+            // global theme
+            ...globalTheme?.components?.button,
+            // inherited props
+            ...defined({
+                disableStyles,
+                disabled,
+                color,
+                backgroundColor,
+                borderColor,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+        icon: {
+            // default props
+            className: 'ss__select__dropdown__button__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+                color: iconColor || color,
+                size: '14px',
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    // only single selection support for now
+    let selection = selected;
+    let setSelection;
+    // open state
+    const [open, setOpen] = useState(startOpen);
+    // selection state
+    const stateful = selection === undefined;
+    if (stateful) {
+        [selection, setSelection] = useState(undefined);
+    }
+    else {
+        selection = Array.isArray(selected) ? selected[0] : selection;
+    }
+    if (selection && clearSelection) {
+        options = [
+            {
+                label: clearSelection,
+                value: '',
+            },
+            ...options,
+        ];
+    }
+    const makeSelection = (e, option) => {
+        option = option.value ? option : undefined;
+        if (option != selection) {
+            onSelect && onSelect(e, option);
+        }
+        if (stateful) {
+            setSelection(option);
+        }
+        !stayOpenOnSelection && setOpen(false);
+    };
+    const styling = {};
+    if (!disableStyles) {
+        if (native) {
+            styling.css = [CSS.native(), style];
+        }
+        else {
+            styling.css = [CSS.select({ color, backgroundColor, borderColor, label, selection: selection || '', theme }), style];
+        }
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (options &&
+        (typeof options == 'object' || Array.isArray(options)) &&
+        options.length && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__select', { 'ss__select--disabled': disabled }, className) }, native ? (jsx(Fragment, null,
+            label && !hideLabelOnSelection && (jsx("span", { className: "ss__select__label" },
+                label,
+                separator && jsx("span", { className: "ss__select__label__separator" }, separator))),
+            jsx("select", { className: "ss__select__select", disabled: disabled || undefined, onChange: (e) => {
+                    const selectElement = e.target;
+                    const selectedOptionElement = selectElement.options[selectElement.selectedIndex];
+                    const selectedOption = options
+                        .filter((option, index) => {
+                        return option.label == selectedOptionElement.text && (option.value == selectedOptionElement.value || option.value == index);
+                    })
+                        .pop();
+                    !disabled && makeSelection(e, selectedOption);
+                } },
+                !selection && clearSelection && (jsx("option", { className: "ss__select__select__option", selected: true, value: "" }, clearSelection)),
+                options.map((option, index) => (jsx("option", { className: "ss__select__select__option", selected: selection?.value === option.value, value: option.value ?? index }, option.label)))))) : (jsx(Dropdown, { ...subProps.dropdown, disableClickOutside: disableClickOutside, open: open, onToggle: (e, state) => setOpen((prev) => state ?? !prev), onClick: (e) => setOpen((prev) => !prev), button: jsx(Button, { ...subProps.button },
+                label && !hideLabelOnSelection && (jsx("span", { className: "ss__select__label" },
+                    label,
+                    separator && selection && jsx("span", { className: "ss__select__label__separator" }, separator))),
+                selection && jsx("span", { className: "ss__select__selection" }, selection?.label),
+                jsx(Icon, { ...subProps.icon, icon: open ? iconClose : iconOpen })) },
+            jsx("ul", { className: "ss__select__select" }, options.map((option) => (jsx("li", { className: classnames('ss__select__select__option', {
+                    'ss__select__select__option--selected': selection?.value === option.value,
+                }), onClick: (e) => !disabled && makeSelection(e, option) },
+                jsx("span", null, option.label)))))))))));
+});