@searchspring/snap-preact-components 0.20.0

package/dist/cjs/utilities/sprintf.js

@@ -0,0 +1,91 @@
+"use strict";
+/**
+ * sprintf() for JavaScript v.0.4
+ *
+ * Copyright (c) 2007 Alexandru Marasteanu <http://alexei.417.ro/>
+ * Thanks to David Baird (unit test and patch).
+ *
+ * This program is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License as published by the Free Software
+ * Foundation; either version 2 of the License, or (at your option) any later
+ * version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program; if not, write to the Free Software Foundation, Inc., 59 Temple
+ * Place, Suite 330, Boston, MA 02111-1307 USA
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sprintf = void 0;
+/*eslint-disable */
+function str_repeat(i, m) {
+    for (var o = []; m > 0; o[--m] = i)
+        ;
+    return o.join('');
+}
+function sprintf() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var i = 0, a, f = args[i++], o = [], m, p, c, x;
+    while (f) {
+        if ((m = /^[^\x25]+/.exec(f)))
+            o.push(m[0]);
+        else if ((m = /^\x25{2}/.exec(f)))
+            o.push('%');
+        else if ((m = /^\x25(?:(\d+)\$)?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-fosuxX])/.exec(f))) {
+            if ((a = args[m[1] || i++]) == null || a == undefined)
+                throw 'Too few arguments.';
+            if (/[^s]/.test(m[7]) && typeof a != 'number')
+                throw 'Expecting number but found ' + typeof a;
+            switch (m[7]) {
+                case 'b':
+                    a = a.toString(2);
+                    break;
+                case 'c':
+                    a = String.fromCharCode(a);
+                    break;
+                case 'd':
+                    a = parseInt(a);
+                    break;
+                case 'e':
+                    a = m[6] ? a.toExponential(m[6]) : a.toExponential();
+                    break;
+                case 'f':
+                    a = m[6] ? parseFloat(a).toFixed(m[6]) : parseFloat(a);
+                    break;
+                case 'o':
+                    a = a.toString(8);
+                    break;
+                case 's':
+                    a = (a = String(a)) && m[6] ? a.substring(0, m[6]) : a;
+                    break;
+                case 'u':
+                    a = Math.abs(a);
+                    break;
+                case 'x':
+                    a = a.toString(16);
+                    break;
+                case 'X':
+                    a = a.toString(16).toUpperCase();
+                    break;
+            }
+            a = /[def]/.test(m[7]) && m[2] && a > 0 ? '+' + a : a;
+            c = m[3] ? (m[3] == '0' ? '0' : m[3].charAt(1)) : ' ';
+            x = m[5] - String(a).length;
+            p = m[5] ? str_repeat(c, x) : '';
+            o.push(m[4] ? a + p : p + a);
+        }
+        else
+            throw 'Huh ?!';
+        f = f.substring(m[0].length);
+    }
+    return o.join('');
+}
+exports.sprintf = sprintf;
+/*eslint-enable */

package/dist/esm/components/Atoms/Badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from '../../../types';
+export declare const Badge: ((properties: BadgeProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface BadgeProps extends ComponentProps {
+    content?: any;
+    children?: any;
+    position?: {
+        top?: string | number;
+        right?: string | number;
+        bottom?: string | number;
+        left?: string | number;
+    };
+}
+//# sourceMappingURL=Badge.d.ts.map

package/dist/esm/components/Atoms/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAWhD,eAAO,MAAM,KAAK,gBAAyB,UAAU,KAAG,WAAW;;CA8BjE,CAAC;AAEH,MAAM,WAAW,UAAW,SAAQ,cAAc;IACjD,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE;QACV,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACF"}

package/dist/esm/components/Atoms/Badge/Badge.js

@@ -0,0 +1,36 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    badge: ({ position }) => css({
+        display: 'inline-block',
+        position: 'absolute',
+        ...position,
+    }),
+};
+export const Badge = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        position: {
+            top: 0,
+            left: 0,
+        },
+        // global theme
+        ...globalTheme?.components?.badge,
+        // props
+        ...properties,
+        ...properties.theme?.components?.badge,
+    };
+    const { content, children, position, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.badge({ position }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__badge', className) }, content || children)));
+});

package/dist/esm/components/Atoms/Badge/Badge.stories.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+/** @jsx h */
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Badge").BadgeProps) => 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;
+            };
+        };
+        content: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        position: {
+            description: string;
+            defaultValue: {
+                top: number;
+                left: number;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const BadgeWithContent: any;
+export declare const BadgeWithChildren: (args: any) => h.JSX.Element;
+//# sourceMappingURL=Badge.stories.d.ts.map

package/dist/esm/components/Atoms/Badge/Badge.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Badge/Badge.stories.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ3B,wBA0DE;AAIF,eAAO,MAAM,gBAAgB,KAAoB,CAAC;AASlD,eAAO,MAAM,iBAAiB,8BAI7B,CAAC"}

package/dist/esm/components/Atoms/Badge/Badge.stories.js

@@ -0,0 +1,68 @@
+/** @jsx h */
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { componentArgs } from '../../../utilities';
+import { Badge } from './Badge';
+import Readme from '../Badge/readme.md';
+export default {
+    title: `Atoms/Badge`,
+    component: Badge,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                width: '200px',
+                height: '200px',
+                position: 'relative',
+                border: '2px dotted lightgrey',
+            } },
+            h(Story, { height: "200px" }))),
+    ],
+    argTypes: {
+        content: {
+            description: 'Content to be displayed in badge',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        children: {
+            description: 'Content to be displayed in badge using children',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+        },
+        position: {
+            description: 'Position of badge',
+            defaultValue: { top: 0, left: 0 },
+            table: {
+                type: {
+                    summary: 'object',
+                },
+                defaultValue: { summary: '{ top: 0, left: 0 }' },
+            },
+            control: { type: 'object' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Badge, { ...args });
+export const BadgeWithContent = Template.bind({});
+BadgeWithContent.args = {
+    content: 'pink',
+    position: {
+        top: 0,
+        right: 0,
+    },
+};
+export const BadgeWithChildren = (args) => (h(Badge, { ...args },
+    h("img", { src: "//cdn.searchspring.net/ajax_search/img/star-badge-new-blue.png" })));

package/dist/esm/components/Atoms/Badge/index.d.ts

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

package/dist/esm/components/Atoms/Badge/index.d.ts.map

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

package/dist/esm/components/Atoms/Badge/index.js

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

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const Breadcrumbs: ((properties: BreadcrumbProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface BreadcrumbProps extends ComponentProps {
+    data: {
+        label: string;
+        url?: string;
+    }[];
+    separator?: string | JSX.Element;
+}
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAgBhD,eAAO,MAAM,WAAW,gBAAyB,eAAe,KAAG,WAAW;;CAmC5E,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,IAAI,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACb,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CACjC"}

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,40 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    breadcrumbs: () => css({
+        '& .ss__breadcrumbs__crumbs': {
+            padding: '0',
+        },
+        '& .ss__breadcrumbs__crumbs__crumb, & .ss__breadcrumbs__crumbs__separator': {
+            padding: '0 5px',
+            display: 'inline-block',
+        },
+    }),
+};
+export const Breadcrumbs = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        separator: '>',
+        // global theme
+        ...globalTheme?.components?.breadcrumbs,
+        // props
+        ...properties,
+        ...properties.theme?.components?.breadcrumbs,
+    };
+    const { data, separator, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.breadcrumbs(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__breadcrumbs', className) },
+            jsx("ul", { className: "ss__breadcrumbs__crumbs" }, data
+                .map((crumb) => (jsx("li", { className: "ss__breadcrumbs__crumbs__crumb" }, crumb.url ? jsx("a", { href: crumb.url }, crumb.label) : crumb.label)))
+                .reduce((prev, curr) => [prev, jsx("li", { className: "ss__breadcrumbs__crumbs__separator" }, separator), curr])))));
+});

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Breadcrumbs").BreadcrumbProps) => 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;
+            };
+        };
+        data: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        separator: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const categoryPage: any;
+export declare const SearchPage: any;
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ3B,wBAoCE;AAIF,eAAO,MAAM,YAAY,KAAoB,CAAC;AAsB9C,eAAO,MAAM,UAAU,KAAoB,CAAC"}

package/dist/esm/components/Atoms/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,73 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Breadcrumbs } from './Breadcrumbs';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Breadcrumbs/readme.md';
+export default {
+    title: `Atoms/Breadcrumbs`,
+    component: Breadcrumbs,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        data: {
+            description: 'Breadcrumb data object',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: { type: 'object' },
+        },
+        separator: {
+            description: 'Breadcrumb delimiter',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+                defaultValue: { summary: '>' },
+            },
+            control: { type: 'text' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Breadcrumbs, { ...args });
+export const categoryPage = Template.bind({});
+categoryPage.args = {
+    data: [
+        {
+            url: '/',
+            label: 'Home',
+        },
+        {
+            url: '/',
+            label: 'Collections',
+        },
+        {
+            url: '/',
+            label: 'Appliances',
+        },
+        {
+            label: 'Fridge',
+        },
+    ],
+    separator: '/',
+};
+export const SearchPage = Template.bind({});
+SearchPage.args = {
+    data: [
+        {
+            url: '/',
+            label: 'Home',
+        },
+        {
+            label: 'Search',
+        },
+    ],
+};

package/dist/esm/components/Atoms/Breadcrumbs/index.d.ts

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

package/dist/esm/components/Atoms/Breadcrumbs/index.d.ts.map

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

package/dist/esm/components/Atoms/Breadcrumbs/index.js

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

package/dist/esm/components/Atoms/Button/Button.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const Button: ((properties: ButtonProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface ButtonProps extends ComponentProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    color?: string;
+    content?: string | JSX.Element;
+    children?: any;
+    disabled?: boolean;
+    native?: boolean;
+    onClick?: (e: Event) => void;
+}
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/Atoms/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA6BhD,eAAO,MAAM,MAAM,gBAAyB,WAAW,KAAG,WAAW;;CAkDnE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC7B"}

package/dist/esm/components/Atoms/Button/Button.js

@@ -0,0 +1,64 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    button: ({ color, backgroundColor, borderColor, theme }) => css({
+        display: 'inline-flex',
+        padding: '5px 10px',
+        position: 'relative',
+        color: color || theme.colors?.primary,
+        outline: 0,
+        backgroundColor: backgroundColor || '#fff',
+        border: `1px solid ${borderColor || color || theme.colors?.primary || '#333'}`,
+        '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: theme.colors?.hover || '#f8f8f8',
+        },
+        '&.ss__button--disabled': {
+            opacity: 0.7,
+            borderColor: 'rgba(51,51,51,0.7)',
+            backgroundColor: 'initial',
+            '&:hover': {
+                cursor: 'default',
+            },
+        },
+    }),
+    native: () => css({}),
+};
+export const Button = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.button,
+        // props
+        ...properties,
+        ...properties.theme?.components?.button,
+    };
+    const { backgroundColor, borderColor, color, content, children, disabled, native, onClick, disableStyles, className, style } = props;
+    const elementProps = {
+        css: disableStyles
+            ? [style]
+            : native
+                ? [CSS.native(), style]
+                : [
+                    CSS.button({
+                        color,
+                        backgroundColor,
+                        borderColor,
+                        theme,
+                    }),
+                    style,
+                ],
+        className: classnames('ss__button', { 'ss__button--disabled': disabled }, className),
+        disabled,
+        onClick: (e) => !disabled && onClick && onClick(e),
+    };
+    return ((content || children) && (jsx(CacheProvider, null, native ? (jsx("button", { ...elementProps },
+        content,
+        children)) : (jsx("div", { ...elementProps },
+        content,
+        children)))));
+});