@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,103 @@
+"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.Circle = exports.Default = void 0;
+/** @jsx h */
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var utilities_1 = require("../../../utilities");
+var Skeleton_1 = require("./Skeleton");
+var readme_md_1 = __importDefault(require("../Badge/readme.md"));
+exports.default = {
+    title: "Atoms/Skeleton",
+    component: Skeleton_1.Skeleton,
+    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 }))); },
+        },
+    },
+    decorators: [
+        function (Story) { return ((0, preact_1.h)("div", { style: {
+                width: '200px',
+                height: '200px',
+                position: 'relative',
+            } },
+            (0, preact_1.h)(Story, { height: "200px" }))); },
+    ],
+    argTypes: __assign({ height: {
+            description: 'CSS sizing to set the height of the Skeleton',
+            defaultValue: '100px',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        }, width: {
+            description: 'CSS sizing to set the width of the Skeleton',
+            defaultValue: '100px',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        }, round: {
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+            },
+            control: { type: 'boolean' },
+        }, backgroundColor: {
+            description: 'Background color',
+            defaultValue: '#ebebeb',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'string' },
+            },
+            control: { type: 'text' },
+        }, animatedColor: {
+            description: 'Color setting for the vertical animated bar',
+            defaultValue: '#f5f5f5',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'string' },
+            },
+            control: { type: 'text' },
+        } }, utilities_1.componentArgs),
+};
+var Template = function (args) { return (0, preact_1.h)(Skeleton_1.Skeleton, __assign({}, args)); };
+exports.Default = Template.bind({});
+exports.Default.args = {
+    width: '100px',
+    height: '100px',
+};
+var Circle = function (args) { return (0, preact_1.h)(Skeleton_1.Skeleton, __assign({}, args)); };
+exports.Circle = Circle;
+exports.Circle.args = {
+    width: '100px',
+    height: '100px',
+    round: true,
+};

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

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

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

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

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

package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import 'swiper/swiper.min.css';
+import { ComponentProps } from '../../../types';
+export declare const Carousel: ((properties: CarouselProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface CarouselProps extends ComponentProps {
+    breakpoints?: any;
+    prevButton?: JSX.Element | string;
+    nextButton?: JSX.Element | string;
+    hideButtons?: boolean;
+    loop?: boolean;
+    vertical?: boolean;
+    pagination?: boolean;
+    onClick?: (swiper: any, e: any) => void;
+    onNextButtonClick?: (e: any) => void;
+    onPrevButtonClick?: (e: any) => void;
+    onInit?: (swiper: any) => void;
+    children?: JSX.Element[];
+}
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,uBAAuB,CAAC;AAM/B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA2HhD,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CAgIvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,KAAK,IAAI,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,CAAC,CAAC,KAAA,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACzB"}

package/dist/cjs/components/Molecules/Carousel/Carousel.js

@@ -0,0 +1,225 @@
+"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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Carousel = 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 core_1 = __importStar(require("swiper/core"));
+require("swiper/swiper.min.css");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var react_2 = require("swiper/react");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var CSS = {
+    carousel: function (_a) {
+        var _b, _c;
+        var theme = _a.theme, vertical = _a.vertical;
+        return (0, react_1.css)({
+            display: 'flex',
+            maxWidth: '100%',
+            maxHeight: vertical ? '100%' : null,
+            margin: 0,
+            padding: 0,
+            overflow: 'hidden',
+            '&.ss__carousel-vertical': {
+                flexDirection: 'column',
+                '.swiper-slide': {
+                    /* Center slides vertically */
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                },
+                '.swiper-container': {
+                    flexDirection: 'row',
+                },
+                '.swiper-pagination': {
+                    width: 'auto',
+                    order: 0,
+                    flexDirection: 'column',
+                    margin: 0,
+                    padding: '10px',
+                },
+                '.swiper-pagination-bullet': {
+                    margin: '4px',
+                },
+            },
+            '.swiper-pagination-bullet-active': {
+                background: ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) || 'inherit',
+            },
+            '.ss__carousel__next-wrapper, .ss__carousel__prev-wrapper': {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
+            '.ss__carousel__next, .ss__carousel__prev': {
+                padding: '5px',
+                cursor: 'pointer',
+                lineHeight: 0,
+                '&.swiper-button-disabled': {
+                    opacity: '0.3',
+                    cursor: 'default',
+                },
+            },
+            '.swiper-container': {
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            '.swiper-wrapper': {
+                order: 0,
+            },
+            '.swiper-pagination': {
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: '10px',
+                width: '100%',
+                order: 1,
+                transition: '.3s opacity',
+            },
+            '.swiper-pagination-bullet': {
+                width: '8px',
+                height: '8px',
+                display: 'inline-block',
+                borderRadius: '50%',
+                background: '#000',
+                opacity: '.2',
+                cursor: 'pointer',
+                margin: '0 4px',
+                '&.swiper-pagination-bullet-active': {
+                    opacity: '0.8',
+                    background: ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#000',
+                },
+            },
+        });
+    },
+};
+var defaultCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+    480: {
+        slidesPerView: 2,
+        slidesPerGroup: 2,
+        spaceBetween: 10,
+    },
+    768: {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 10,
+    },
+    1024: {
+        slidesPerView: 4,
+        slidesPerGroup: 4,
+        spaceBetween: 10,
+    },
+    1200: {
+        slidesPerView: 5,
+        slidesPerGroup: 5,
+        spaceBetween: 10,
+    },
+};
+var defaultVerticalCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+};
+exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d;
+    var globalTheme = (0, providers_1.useTheme)();
+    var theme = __assign(__assign({}, globalTheme), properties.theme);
+    var props = __assign(__assign(__assign({ 
+        // default props
+        breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints, pagination: false, loop: true }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.carousel), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.carousel);
+    var children = props.children, breakpoints = props.breakpoints, loop = props.loop, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, onInit = props.onInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, style = props.style, className = props.className, additionalProps = __rest(props, ["children", "breakpoints", "loop", "pagination", "nextButton", "prevButton", "hideButtons", "vertical", "onInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "className"]);
+    var subProps = {
+        icon: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__carousel__icon' }, (_d = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _d === void 0 ? void 0 : _d.icon), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+    };
+    core_1.default.use([core_1.Pagination, core_1.Navigation]);
+    var navigationPrevRef = (0, hooks_1.useRef)(null);
+    var navigationNextRef = (0, hooks_1.useRef)(null);
+    var rootComponentRef = (0, hooks_1.useRef)(null);
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.carousel({ theme: theme, vertical: vertical }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (children && ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) }),
+            !hideButtons && ((0, react_1.jsx)("div", { className: "ss__carousel__prev-wrapper" },
+                (0, react_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }) }, prevButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon))))),
+            (0, react_1.jsx)(react_2.Swiper, __assign({ centerInsufficientSlides: true, onInit: function (swiper) {
+                    //@ts-ignore
+                    swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
+                    //@ts-ignore
+                    swiper.params.navigation.nextEl = navigationNextRef.current ? navigationNextRef.current : undefined;
+                    if (onInit) {
+                        onInit(swiper);
+                    }
+                }, onClick: function (swiper, e) {
+                    onClick && onClick(swiper, e);
+                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, breakpoints: breakpoints, pagination: pagination
+                    ? {
+                        clickable: true,
+                    }
+                    : false }, additionalProps), children.map(function (child) {
+                return (0, react_1.jsx)(react_2.SwiperSlide, null, child);
+            })),
+            !hideButtons && ((0, react_1.jsx)("div", { className: "ss__carousel__next-wrapper" },
+                (0, react_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }) }, nextButton || (0, react_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon)))))))));
+});

package/dist/cjs/components/Molecules/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { h } from 'preact';
+declare const _default: {
+    title: string;
+    component: ((properties: import("./Carousel").CarouselProps) => 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;
+            };
+        };
+        loop: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        pagination: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        vertical: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hideButtons: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        prevButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        nextButton: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        breakpoints: {
+            defaultValue: any;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onNextButtonClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onPrevButtonClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onInit: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Colors: {
+    (props: any): h.JSX.Element;
+    args: {
+        pagination: boolean;
+        hideButtons: boolean;
+        loop: boolean;
+    };
+};
+export declare const Icons: (props: any) => h.JSX.Element;
+//# sourceMappingURL=Carousel.stories.d.ts.map

package/dist/cjs/components/Molecules/Carousel/Carousel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASrC,wBAyIE;AAGF,eAAO,MAAM,MAAM;;;;;;;CAQlB,CAAC;AAOF,eAAO,MAAM,KAAK,+BAajB,CAAC"}