@searchspring/snap-preact-components 0.20.0

package/dist/cjs/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/cjs/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"}

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

@@ -0,0 +1,152 @@
+"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.StringChildren = exports.JSXChildren = exports.JSXContent = exports.ExternalState = exports.Default = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var Dropdown_1 = require("./Dropdown");
+var utilities_1 = require("../../../utilities");
+var readme_md_1 = __importDefault(require("../Dropdown/readme.md"));
+var Badge_1 = require("../Badge/Badge");
+exports.default = {
+    title: "Atoms/Dropdown",
+    component: Dropdown_1.Dropdown,
+    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({ button: {
+            description: 'Button content to toggle the dropdown',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        }, content: {
+            description: 'Content to be displayed in dropdown',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        }, children: {
+            description: 'Content to be displayed in dropdown using children',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+        }, disabled: {
+            description: 'Disable dropdown - prevents all click events',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, disableOverlay: {
+            description: 'Disable dropdown overlay and renders as block',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, open: {
+            description: 'Pass a value here to control the state externally',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: 'undefined' },
+            },
+            control: { type: 'boolean' },
+        }, startOpen: {
+            description: 'Dropdown state is open on initial render - used with internal state only',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, disableClickOutside: {
+            description: 'Ignore clicks outside of element',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, onClick: {
+            description: 'Dropdown click event handler',
+            table: {
+                type: {
+                    summary: 'function(e: Event)',
+                },
+            },
+            action: 'onClick',
+        }, onToggle: {
+            description: 'Executes when the internal state changes, gets passed the event and the internal state - used with internal state only',
+            table: {
+                type: {
+                    summary: 'function(e: Event, open: boolean)',
+                    detail: 'e is the click event',
+                },
+            },
+            action: 'onToggle',
+        } }, utilities_1.componentArgs),
+};
+var Template = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    button: 'button text',
+    content: 'content text',
+};
+var Template2 = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, __assign({}, args)); };
+exports.ExternalState = Template2.bind({});
+exports.ExternalState.args = {
+    button: 'button text',
+    content: 'content text',
+    open: true,
+};
+var Template3 = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, __assign({}, args)); };
+exports.JSXContent = Template3.bind({});
+exports.JSXContent.args = {
+    button: 'button text',
+    content: (0, preact_1.h)(Badge_1.Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
+};
+var Template4 = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, { button: args.button }, args.content); };
+exports.JSXChildren = Template4.bind({});
+exports.JSXChildren.args = {
+    button: 'button text',
+    content: (0, preact_1.h)(Badge_1.Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
+};
+var Template5 = function (args) { return (0, preact_1.h)(Dropdown_1.Dropdown, { button: args.button }, args.content); };
+exports.StringChildren = Template5.bind({});
+exports.StringChildren.args = {
+    button: 'button text',
+    content: 'string content - (note this component receieved the open state as a prop)',
+};

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

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

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

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

package/dist/cjs/components/Atoms/Dropdown/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("./Dropdown"), exports);

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare function FormattedNumber(properties: FormattedNumberProps): JSX.Element;
+export interface FormattedNumberProps extends ComponentProps {
+    value: number;
+    symbol?: string;
+    decimalPlaces?: number;
+    padDecimalPlaces?: boolean;
+    thousandsSeparator?: string;
+    decimalSeparator?: string;
+    symbolAfter?: boolean;
+    raw?: boolean;
+}
+//# sourceMappingURL=FormattedNumber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMhD,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA6C7E;AACD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd"}

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

@@ -0,0 +1,52 @@
+"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.FormattedNumber = void 0;
+/** @jsx jsx */
+var preact_1 = require("preact");
+var react_1 = require("@emotion/react");
+var snap_toolbox_1 = require("@searchspring/snap-toolbox");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var CSS = {
+    formattedNumber: function () { return (0, react_1.css)({}); },
+};
+function FormattedNumber(properties) {
+    var _a, _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({ 
+        // default props
+        symbol: '', decimalPlaces: 3, padDecimalPlaces: true, thousandsSeparator: '', decimalSeparator: '.', symbolAfter: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.formattedNumber), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.formattedNumber);
+    var value = props.value, symbol = props.symbol, decimalPlaces = props.decimalPlaces, padDecimalPlaces = props.padDecimalPlaces, thousandsSeparator = props.thousandsSeparator, decimalSeparator = props.decimalSeparator, symbolAfter = props.symbolAfter, disableStyles = props.disableStyles, className = props.className, style = props.style, raw = props.raw;
+    var formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
+        symbol: symbol,
+        decimalPlaces: decimalPlaces,
+        padDecimalPlaces: padDecimalPlaces,
+        thousandsSeparator: thousandsSeparator,
+        decimalSeparator: decimalSeparator,
+        symbolAfter: symbolAfter,
+    });
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.formattedNumber(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return raw ? ((0, react_1.jsx)(preact_1.Fragment, null, formattedNumber)) : ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__formatted-number', className) }, styling), formattedNumber)));
+}
+exports.FormattedNumber = FormattedNumber;

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

@@ -0,0 +1,185 @@
+import { h } from 'preact';
+import { FormattedNumber } from './FormattedNumber';
+declare const _default: {
+    title: string;
+    component: typeof FormattedNumber;
+    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;
+            };
+        };
+        value: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        symbol: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        symbolAfter: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        decimalPlaces: {
+            defaultValue: number;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        padDecimalPlaces: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        thousandsSeparator: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        decimalSeparator: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        raw: {
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Temperature: any;
+export declare const Length: any;
+//# sourceMappingURL=FormattedNumber.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD,wBAsGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,MAAM,KAAoB,CAAC"}