@searchspring/snap-preact-components 0.20.0

package/dist/esm/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/esm/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/esm/components/Atoms/Button/Button.stories.js

@@ -0,0 +1,110 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Button } from './Button';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Button/readme.md';
+export default {
+    title: `Atoms/Button`,
+    component: Button,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        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' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Button, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    content: 'Button',
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    content: 'Button',
+    disabled: true,
+};
+export const Native = Template.bind({});
+Native.args = {
+    content: 'Button',
+    native: true,
+};

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

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

package/dist/esm/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/esm/components/Atoms/Button/index.js

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

package/dist/esm/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/esm/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/esm/components/Atoms/Dropdown/Dropdown.js

@@ -0,0 +1,86 @@
+import { useState } from 'preact/hooks';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+import { useClickOutside } from '../../../hooks';
+import { cloneWithProps } from '../../../utilities';
+const CSS = {
+    dropdown: ({ disableOverlay }) => css({
+        position: 'relative',
+        '&.ss__dropdown--open': {
+            '& .ss__dropdown__content': {
+                position: disableOverlay ? 'relative' : null,
+                visibility: 'visible',
+                opacity: 1,
+            },
+        },
+        '.ss__dropdown__button': {
+            cursor: `${disableOverlay ? 'default' : 'pointer'}`,
+        },
+        '.ss__dropdown__content': {
+            position: 'absolute',
+            minWidth: '100%',
+            visibility: 'hidden',
+            opacity: 0,
+            top: 'auto',
+            left: 0,
+        },
+    }),
+};
+export const Dropdown = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        startOpen: false,
+        // global theme
+        ...globalTheme?.components?.dropdown,
+        // props
+        ...properties,
+        ...properties.theme?.components?.dropdown,
+    };
+    const { button, content, children, disabled, open, disableOverlay, onClick, onToggle, startOpen, disableClickOutside, disableStyles, className, style, } = props;
+    let showContent, setShowContent;
+    const stateful = open === undefined;
+    if (stateful) {
+        [showContent, setShowContent] = useState(startOpen);
+    }
+    else {
+        showContent = open;
+    }
+    const innerRef = !disableClickOutside &&
+        useClickOutside((e) => {
+            if (showContent) {
+                if (!disabled) {
+                    stateful && setShowContent(false);
+                    onToggle && onToggle(e, false);
+                }
+            }
+        });
+    const toggleShowContent = (e) => {
+        if (stateful) {
+            setShowContent((prev) => {
+                onToggle && onToggle(e, !prev);
+                return !prev;
+            });
+        }
+    };
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.dropdown({ disableOverlay }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__dropdown', { 'ss__dropdown--open': showContent }, className), ref: innerRef },
+            jsx("div", { className: "ss__dropdown__button", onClick: (e) => {
+                    if (!disabled) {
+                        toggleShowContent(e);
+                        onClick && onClick(e);
+                    }
+                } }, cloneWithProps(button, { open: showContent, toggleOpen: toggleShowContent })),
+            jsx("div", { className: "ss__dropdown__content" },
+                cloneWithProps(content, { open: showContent, toggleOpen: toggleShowContent }),
+                cloneWithProps(children, { open: showContent, toggleOpen: toggleShowContent })))));
+});

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

@@ -0,0 +1,195 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Dropdown").DropdownProps) => 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;
+            };
+        };
+        button: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            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;
+            };
+        };
+        disableOverlay: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        open: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        startOpen: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableClickOutside: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onToggle: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                    detail: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const ExternalState: any;
+export declare const JSXContent: any;
+export declare const JSXChildren: any;
+export declare const StringChildren: any;
+//# sourceMappingURL=Dropdown.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS3B,wBAgHE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,aAAa,KAAqB,CAAC;AAShD,eAAO,MAAM,UAAU,KAAqB,CAAC;AAQ7C,eAAO,MAAM,WAAW,KAAqB,CAAC;AAQ9C,eAAO,MAAM,cAAc,KAAqB,CAAC"}