@searchspring/snap-preact-components 0.20.0

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

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

@@ -0,0 +1,92 @@
+/** @jsx h */
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { componentArgs } from '../../../utilities';
+import { Skeleton } from './Skeleton';
+import Readme from '../Badge/readme.md';
+export default {
+    title: `Atoms/Skeleton`,
+    component: Skeleton,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                width: '200px',
+                height: '200px',
+                position: 'relative',
+            } },
+            h(Story, { height: "200px" }))),
+    ],
+    argTypes: {
+        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' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Skeleton, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    width: '100px',
+    height: '100px',
+};
+export const Circle = (args) => h(Skeleton, { ...args });
+Circle.args = {
+    width: '100px',
+    height: '100px',
+    round: true,
+};

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

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

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

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

package/dist/esm/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/esm/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/esm/components/Molecules/Carousel/Carousel.js

@@ -0,0 +1,186 @@
+import { useRef } from 'preact/hooks';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import SwiperCore, { Pagination, Navigation } from 'swiper/core';
+import 'swiper/swiper.min.css';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { defined } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    carousel: ({ theme, vertical }) => 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: theme?.colors?.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: theme?.colors?.primary || '#000',
+            },
+        },
+    }),
+};
+const 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,
+    },
+};
+const defaultVerticalCarouselBreakpoints = {
+    0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 0,
+    },
+};
+export const Carousel = observer((properties) => {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        breakpoints: properties.vertical ? defaultVerticalCarouselBreakpoints : defaultCarouselBreakpoints,
+        pagination: false,
+        loop: true,
+        // global theme
+        ...globalTheme?.components?.carousel,
+        //props
+        ...properties,
+        ...properties.theme?.components?.carousel,
+    };
+    const { children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, vertical, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, className, ...additionalProps } = props;
+    const subProps = {
+        icon: {
+            // default props
+            className: 'ss__carousel__icon',
+            // global theme
+            ...globalTheme?.components?.icon,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+        },
+    };
+    SwiperCore.use([Pagination, Navigation]);
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    const rootComponentRef = useRef(null);
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.carousel({ theme, vertical }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (children && (jsx(CacheProvider, null,
+        jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) },
+            !hideButtons && (jsx("div", { className: "ss__carousel__prev-wrapper" },
+                jsx("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)) }, prevButton || jsx(Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon })))),
+            jsx(Swiper, { centerInsufficientSlides: true, onInit: (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: (swiper, e) => {
+                    onClick && onClick(swiper, e);
+                }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, breakpoints: breakpoints, pagination: pagination
+                    ? {
+                        clickable: true,
+                    }
+                    : false, ...additionalProps }, children.map((child) => {
+                return jsx(SwiperSlide, null, child);
+            })),
+            !hideButtons && (jsx("div", { className: "ss__carousel__next-wrapper" },
+                jsx("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)) }, nextButton || jsx(Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon }))))))));
+});

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