@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,176 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Carousel } from './Carousel';
+import { Icon, iconPaths } from '../../Atoms/Icon';
+import { componentArgs } from '../../../utilities';
+import Readme from './readme.md';
+export default {
+    title: `Molecules/Carousel`,
+    component: Carousel,
+    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: {
+        loop: {
+            defaultValue: true,
+            description: 'Carousel slides loop',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
+        pagination: {
+            defaultValue: false,
+            description: 'Display pagination dots',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        vertical: {
+            defaultValue: false,
+            description: 'Carousel vertical slide direction',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        hideButtons: {
+            defaultValue: false,
+            description: 'Hide prev/next buttons',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        prevButton: {
+            description: 'Previous button',
+            table: {
+                type: {
+                    summary: 'string | JSX Element',
+                },
+            },
+            control: { type: 'text' },
+        },
+        nextButton: {
+            description: 'Next button',
+            table: {
+                type: {
+                    summary: 'string | JSX Element',
+                },
+            },
+            control: { type: 'text' },
+        },
+        breakpoints: {
+            defaultValue: undefined,
+            description: 'Carousel breakpoints',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+                defaultValue: { summary: 'Breakpoint object' },
+            },
+            control: { type: 'object' },
+        },
+        onNextButtonClick: {
+            description: 'Carousel next button click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onNextButtonClick',
+        },
+        onPrevButtonClick: {
+            description: 'Carousel prev button click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onPrevButtonClick',
+        },
+        onClick: {
+            description: 'Carousel onClick event handler (Swiper)',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        onInit: {
+            description: 'Carousel onInit event handler (Swiper)',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onInit',
+        },
+        ...componentArgs,
+    },
+};
+const colors = Array.from(Array(9).keys());
+export const Colors = (props) => {
+    return (h(Carousel, { ...props }, colors.map((number, index) => (h("div", { style: { height: '100px', width: '100px', background: shiftColor('#3a23ad', (index + `111`).padStart(6, '0')), margin: '0 auto' } })))));
+};
+Colors.args = {
+    pagination: true,
+    hideButtons: true,
+    loop: false,
+};
+export const Icons = (props) => {
+    return (h(Carousel, { ...props }, Object.keys(iconPaths).map((icon, index) => {
+        return (h("div", { style: { margin: '0 auto', textAlign: 'center' } },
+            h(Icon, { icon: icon, color: shiftColor('#3a23ad', (index + '111').padStart(6, '1')), size: "80px", style: { padding: '20px' } }),
+            h("div", { style: "text-align: center" }, icon)));
+    })));
+};
+function shiftColor(base, change) {
+    const colorRegEx = /^\#?[A-Fa-f0-9]{6}$/;
+    if (!base || !change) {
+        return '#000000';
+    }
+    if (!base.match(colorRegEx) || !change.match(colorRegEx)) {
+        return '#000000';
+    }
+    // remove '#'s
+    base = base.replace(/\#/g, '');
+    change = change.replace(/\#/g, '');
+    let newColor = '';
+    for (let i = 0; i < 3; i++) {
+        const basePiece = parseInt(base.substring(i * 2, i * 2 + 2), 16);
+        const changePiece = parseInt(change.substring(i * 2, i * 2 + 2), 16);
+        let newPiece;
+        newPiece = basePiece + changePiece;
+        newPiece = newPiece > 255 ? 255 : newPiece;
+        newPiece = newPiece.toString(16);
+        newPiece = newPiece.length < 2 ? '0' + newPiece : newPiece;
+        newColor += newPiece;
+    }
+    return `#${newColor}`;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+export declare const Checkbox: ((properties: CheckboxProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface CheckboxProps extends ComponentProps {
+    checked?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    iconColor?: string;
+    onClick?: (e: Event) => void;
+    size?: string;
+    startChecked?: boolean;
+    native?: boolean;
+}
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0BhD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAqFvE,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}

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

@@ -0,0 +1,90 @@
+import { useState } from 'preact/hooks';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { Icon } from '../../Atoms/Icon';
+const CSS = {
+    checkbox: ({ size, color, theme }) => css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: size,
+        width: size,
+        border: `1px solid ${color || theme.colors?.primary || '#333'}`,
+        '&.ss__checkbox--disabled': {
+            opacity: 0.7,
+        },
+        '& .ss__checkbox__empty': {
+            display: 'inline-block',
+            width: `calc(${size} - 30%)`,
+            height: `calc(${size} - 30%)`,
+        },
+    }),
+    native: () => css({}),
+};
+export const Checkbox = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        size: '12px',
+        startChecked: false,
+        // global theme
+        ...globalTheme?.components?.checkbox,
+        // props
+        ...properties,
+        ...properties.theme?.components?.checkbox,
+    };
+    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableStyles, className, style } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__checkbox__icon',
+            icon: 'check-thin',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                color: iconColor || color || theme.colors?.primary,
+                disableStyles,
+                icon,
+                size: size && `calc(${size} - 30%)`,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    let checkedState, setCheckedState;
+    const stateful = checked === undefined;
+    if (stateful) {
+        [checkedState, setCheckedState] = useState(startChecked);
+    }
+    else {
+        checkedState = checked;
+    }
+    const clickFunc = (e) => {
+        if (!disabled) {
+            if (stateful) {
+                setCheckedState((prev) => {
+                    return !prev;
+                });
+            }
+            onClick && onClick(e);
+        }
+    };
+    const styling = {};
+    if (!disableStyles) {
+        if (native) {
+            styling.css = [CSS.native(), style];
+        }
+        else {
+            styling.css = [CSS.checkbox({ size, color, theme }), style];
+        }
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null, native ? (jsx("input", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), type: "checkbox", onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState })) : (jsx("span", { ...styling, className: classnames('ss__checkbox', { 'ss__checkbox--disabled': disabled }, className), onClick: (e) => clickFunc(e) }, checkedState ? jsx(Icon, { ...subProps.icon }) : jsx("span", { className: "ss__checkbox__empty" })))));
+});

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

@@ -0,0 +1,182 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { CheckboxProps } from './Checkbox';
+declare const _default: {
+    title: string;
+    component: ((properties: CheckboxProps) => 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;
+            };
+        };
+        checked: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        icon: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        color: {
+            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;
+            };
+        };
+        native: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Disabled: any;
+export declare const Native: any;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBAoGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}

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

@@ -0,0 +1,115 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Checkbox } from './Checkbox';
+import { iconPaths } from '../../Atoms/Icon';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Checkbox/readme.md';
+export default {
+    title: `Molecules/Checkbox`,
+    component: Checkbox,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        checked: {
+            description: 'Checkbox is checked (managed state)',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            description: 'Checkbox is disabled',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        size: {
+            defaultValue: '12px',
+            description: 'Checkbox size',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '12px' },
+            },
+            control: { type: 'text' },
+        },
+        icon: {
+            defaultValue: 'check-thin',
+            description: 'Icon name',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'check-thin' },
+            },
+            control: {
+                type: 'select',
+                options: [...Object.keys(iconPaths)],
+            },
+        },
+        color: {
+            description: 'Checkbox color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.primary' },
+            },
+            control: { type: 'color' },
+        },
+        iconColor: {
+            description: 'Checkbox icon color. Overwrites color.',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.primary' },
+            },
+            control: { type: 'color' },
+        },
+        native: {
+            description: 'Render as unstyled native checkbox',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        onClick: {
+            description: 'Checkbox click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Checkbox, { ...args });
+export const Default = Template.bind({});
+export const Disabled = Template.bind({});
+Disabled.args = {
+    checked: true,
+    disabled: true,
+};
+export const Native = Template.bind({});
+Native.args = {
+    native: true,
+};

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from '../../../types';
+import { ErrorType } from '@searchspring/snap-store-mobx';
+import type { AbstractController } from '@searchspring/snap-controller';
+export declare const ErrorHandler: ((properties: ErrorHandlerProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface ErrorHandlerProps extends ComponentProps {
+    controller?: AbstractController;
+    error?: {
+        code?: number;
+        type: ErrorType;
+        message: string;
+    };
+    onRetryClick?: (e: Event) => void;
+}
+//# sourceMappingURL=ErrorHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorHandler.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/ErrorHandler/ErrorHandler.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAgExE,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAmG/E,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC"}