@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var CSS = {
+    button: function (_a) {
+        var _b, _c, _d;
+        var color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme;
+        return (0, react_1.css)({
+            display: 'inline-flex',
+            padding: '5px 10px',
+            position: 'relative',
+            color: color || ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary),
+            outline: 0,
+            backgroundColor: backgroundColor || '#fff',
+            border: "1px solid ".concat(borderColor || color || ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333'),
+            '&:hover': {
+                cursor: 'pointer',
+                backgroundColor: ((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.hover) || '#f8f8f8',
+            },
+            '&.ss__button--disabled': {
+                opacity: 0.7,
+                borderColor: 'rgba(51,51,51,0.7)',
+                backgroundColor: 'initial',
+                '&:hover': {
+                    cursor: 'default',
+                },
+            },
+        });
+    },
+    native: function () { return (0, react_1.css)({}); },
+};
+exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.button), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.button);
+    var backgroundColor = props.backgroundColor, borderColor = props.borderColor, color = props.color, content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var elementProps = {
+        css: disableStyles
+            ? [style]
+            : native
+                ? [CSS.native(), style]
+                : [
+                    CSS.button({
+                        color: color,
+                        backgroundColor: backgroundColor,
+                        borderColor: borderColor,
+                        theme: theme,
+                    }),
+                    style,
+                ],
+        className: (0, classnames_1.default)('ss__button', { 'ss__button--disabled': disabled }, className),
+        disabled: disabled,
+        onClick: function (e) { return !disabled && onClick && onClick(e); },
+    };
+    return ((content || children) && ((0, react_1.jsx)(providers_1.CacheProvider, null, native ? ((0, react_1.jsx)("button", __assign({}, elementProps),
+        content,
+        children)) : ((0, react_1.jsx)("div", __assign({}, elementProps),
+        content,
+        children)))));
+});

package/dist/cjs/components/Atoms/Button/Button.stories.d.ts

@@ -0,0 +1,169 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Button").ButtonProps) => 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;
+            };
+        };
+        content: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        color: {
+            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;
+            };
+        };
+        borderColor: {
+            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;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Disabled: any;
+export declare const Native: any;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/cjs/components/Atoms/Button/Button.stories.d.ts.map

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

package/dist/cjs/components/Atoms/Button/Button.stories.js

@@ -0,0 +1,117 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Native = exports.Disabled = exports.Default = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var Button_1 = require("./Button");
+var utilities_1 = require("../../../utilities");
+var readme_md_1 = __importDefault(require("../Button/readme.md"));
+exports.default = {
+    title: "Atoms/Button",
+    component: Button_1.Button,
+    parameters: {
+        docs: {
+            page: function () { return ((0, preact_1.h)("div", null,
+                (0, preact_1.h)(readme_md_1.default, null),
+                (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
+        },
+    },
+    argTypes: __assign({ content: {
+            description: 'Content to be displayed in button',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        }, children: {
+            description: 'Content to be displayed in button (using children)',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+        }, disabled: {
+            description: 'Disable button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, onClick: {
+            description: 'Button click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        }, color: {
+            description: 'Button color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.primary' },
+            },
+            control: { type: 'color' },
+        }, backgroundColor: {
+            description: 'Button background color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '#fff' },
+            },
+            control: { type: 'color' },
+        }, borderColor: {
+            description: 'Button border color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.primary' },
+            },
+            control: { type: 'color' },
+        }, native: {
+            description: 'Render as unstyled native button',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        } }, utilities_1.componentArgs),
+};
+var Template = function (args) { return (0, preact_1.h)(Button_1.Button, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    content: 'Button',
+};
+exports.Disabled = Template.bind({});
+exports.Disabled.args = {
+    content: 'Button',
+    disabled: true,
+};
+exports.Native = Template.bind({});
+exports.Native.args = {
+    content: 'Button',
+    native: true,
+};

package/dist/cjs/components/Atoms/Button/index.d.ts

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

package/dist/cjs/components/Atoms/Button/index.d.ts.map

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

package/dist/cjs/components/Atoms/Button/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);

package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare const Dropdown: ((properties: DropdownProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface DropdownProps extends ComponentProps {
+    button: string | JSX.Element;
+    content?: string | JSX.Element;
+    children?: any;
+    disabled?: boolean;
+    open?: boolean;
+    disableOverlay?: boolean;
+    onClick?: (event: Event) => void;
+    onToggle?: (event: Event, showContent: boolean) => void;
+    startOpen?: boolean;
+    disableClickOutside?: boolean;
+}
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/cjs/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA8BhD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAsFvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

package/dist/cjs/components/Atoms/Dropdown/Dropdown.js

@@ -0,0 +1,102 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var hooks_2 = require("../../../hooks");
+var utilities_1 = require("../../../utilities");
+var CSS = {
+    dropdown: function (_a) {
+        var disableOverlay = _a.disableOverlay;
+        return (0, react_1.css)({
+            position: 'relative',
+            '&.ss__dropdown--open': {
+                '& .ss__dropdown__content': {
+                    position: disableOverlay ? 'relative' : null,
+                    visibility: 'visible',
+                    opacity: 1,
+                },
+            },
+            '.ss__dropdown__button': {
+                cursor: "".concat(disableOverlay ? 'default' : 'pointer'),
+            },
+            '.ss__dropdown__content': {
+                position: 'absolute',
+                minWidth: '100%',
+                visibility: 'hidden',
+                opacity: 0,
+                top: 'auto',
+                left: 0,
+            },
+        });
+    },
+};
+exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var _b, _c, _d;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({ 
+        // default props
+        startOpen: false }, (_b = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _b === void 0 ? void 0 : _b.dropdown), properties), (_d = (_c = properties.theme) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.dropdown);
+    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, disableOverlay = props.disableOverlay, onClick = props.onClick, onToggle = props.onToggle, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var showContent, setShowContent;
+    var stateful = open === undefined;
+    if (stateful) {
+        _a = (0, hooks_1.useState)(startOpen), showContent = _a[0], setShowContent = _a[1];
+    }
+    else {
+        showContent = open;
+    }
+    var innerRef = !disableClickOutside &&
+        (0, hooks_2.useClickOutside)(function (e) {
+            if (showContent) {
+                if (!disabled) {
+                    stateful && setShowContent(false);
+                    onToggle && onToggle(e, false);
+                }
+            }
+        });
+    var toggleShowContent = function (e) {
+        if (stateful) {
+            setShowContent(function (prev) {
+                onToggle && onToggle(e, !prev);
+                return !prev;
+            });
+        }
+    };
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.dropdown({ disableOverlay: disableOverlay }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef }),
+            (0, react_1.jsx)("div", { className: "ss__dropdown__button", onClick: function (e) {
+                    if (!disabled) {
+                        toggleShowContent(e);
+                        onClick && onClick(e);
+                    }
+                } }, (0, utilities_1.cloneWithProps)(button, { open: showContent, toggleOpen: toggleShowContent })),
+            (0, react_1.jsx)("div", { className: "ss__dropdown__content" },
+                (0, utilities_1.cloneWithProps)(content, { open: showContent, toggleOpen: toggleShowContent }),
+                (0, utilities_1.cloneWithProps)(children, { open: showContent, toggleOpen: toggleShowContent })))));
+});