@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,203 @@
+import { h } from 'preact';
+import { Price } from './Price';
+declare const _default: {
+    title: string;
+    component: typeof Price;
+    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: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        symbolAfter: {
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        decimalPlaces: {
+            description: string;
+            defaultValue: number;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        padDecimalPlaces: {
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        thousandsSeparator: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        decimalSeparator: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        lineThrough: {
+            description: string;
+            defaultValue: boolean;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            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 lineThrough: any;
+export declare const CustomCurrency: any;
+//# sourceMappingURL=Price.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Price.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIhC,wBAoHE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAM7C,eAAO,MAAM,cAAc,KAAoB,CAAC"}

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

@@ -0,0 +1,143 @@
+"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.CustomCurrency = exports.lineThrough = exports.Default = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var Price_1 = require("./Price");
+var utilities_1 = require("../../../utilities");
+var readme_md_1 = __importDefault(require("../Price/readme.md"));
+exports.default = {
+    title: "Atoms/Price",
+    component: Price_1.Price,
+    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({ value: {
+            description: 'Numeric value to be formatted',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        }, symbol: {
+            description: 'Currency symbol',
+            defaultValue: '$',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '$' },
+            },
+            control: { type: 'text' },
+        }, symbolAfter: {
+            description: 'Place currency symbol after the value',
+            defaultValue: false,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        }, decimalPlaces: {
+            description: 'Number of decimal places',
+            defaultValue: 2,
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 2 },
+            },
+            control: { type: 'number' },
+        }, padDecimalPlaces: {
+            description: 'Pad decimal places with zeros',
+            defaultValue: true,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        }, thousandsSeparator: {
+            description: 'Character used to separate thousands',
+            defaultValue: ',',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: ',' },
+            },
+            control: { type: 'text' },
+        }, decimalSeparator: {
+            description: 'Character used to separate decimal values',
+            defaultValue: '.',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '.' },
+            },
+            control: { type: 'text' },
+        }, lineThrough: {
+            description: 'Add line through styling',
+            defaultValue: false,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        }, raw: {
+            description: 'Returns raw value without wrapping DOM node',
+            defaultValue: false,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        } }, utilities_1.componentArgs),
+};
+var Template = function (args) { return (0, preact_1.h)(Price_1.Price, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    value: 1099.99,
+};
+exports.lineThrough = Template.bind({});
+exports.lineThrough.args = {
+    value: 1199.99,
+    lineThrough: true,
+};
+exports.CustomCurrency = Template.bind({});
+exports.CustomCurrency.args = {
+    value: 999.99,
+    symbol: ' €',
+    thousandsSeparator: '.',
+    decimalSeparator: ',',
+    symbolAfter: true,
+};

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../../types';
+export declare const Skeleton: ((properties: SkeletonProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface SkeletonProps extends ComponentProps {
+    width: string;
+    height: string;
+    round?: boolean;
+    backgroundColor?: string;
+    animatedColor?: string;
+}
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA0ChD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA0BvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB"}

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

@@ -0,0 +1,75 @@
+"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.Skeleton = 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 = {
+    skeleton: function (_a) {
+        var width = _a.width, height = _a.height, round = _a.round, backgroundColor = _a.backgroundColor, animatedColor = _a.animatedColor, animation = _a.animation;
+        return (0, react_1.css)({
+            width: width,
+            height: height,
+            borderRadius: round ? width : '0.25rem',
+            backgroundColor: backgroundColor,
+            display: 'inline-flex',
+            lineHeight: '1',
+            position: 'relative',
+            overflow: 'hidden',
+            zIndex: '1' /* Necessary for overflow: hidden to work correctly in Safari */,
+            '&:after': {
+                content: '""',
+                display: 'block',
+                position: 'absolute',
+                left: '0',
+                right: '0',
+                height: '100%',
+                backgroundRepeat: 'no-repeat',
+                backgroundImage: "linear-gradient(90deg, ".concat(backgroundColor, ", ").concat(animatedColor, ", ").concat(backgroundColor, ")"),
+                transform: 'translateX(-100%)',
+                animation: "".concat(animation, " 1.5s linear infinite"),
+                animationTimingFunction: 'ease-in-out',
+            },
+        });
+    },
+    animation: (0, react_1.keyframes)({
+        from: {
+            transform: 'translateX(-100%)',
+        },
+        to: {
+            transform: 'translateX(100%)',
+        },
+    }),
+};
+exports.Skeleton = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({ 
+        // default props
+        backgroundColor: '#ebebeb', animatedColor: '#f5f5f5' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.skeleton), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.skeleton);
+    var width = props.width, height = props.height, round = props.round, backgroundColor = props.backgroundColor, animatedColor = props.animatedColor, disableStyles = props.disableStyles, className = props.className, style = props.style;
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.skeleton({ width: width, height: height, round: round, backgroundColor: backgroundColor, animatedColor: animatedColor, animation: CSS.animation }), 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__skeleton', className) }))));
+});

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

@@ -0,0 +1,149 @@
+/// <reference types="react" />
+/** @jsx h */
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Skeleton").SkeletonProps) => 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;
+            };
+        };
+        height: {
+            description: string;
+            defaultValue: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            description: string;
+            defaultValue: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        round: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        backgroundColor: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        animatedColor: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const Circle: {
+    (args: any): h.JSX.Element;
+    args: {
+        width: string;
+        height: string;
+        round: boolean;
+    };
+};
+//# sourceMappingURL=Skeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ3B,wBAiFE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAMzC,eAAO,MAAM,MAAM;;;;;;;CAAmC,CAAC"}