@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,185 @@
+import { h } from 'preact';
+import { Image } from './Image';
+declare const _default: {
+    title: string;
+    component: typeof Image;
+    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;
+            };
+        };
+        src: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        alt: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        fallback: {
+            description: string;
+            defaultValue: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        lazy: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        hoverSrc: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onError: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onLoad: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onMouseOver: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+        onMouseOut: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const BrokenImg: any;
+export declare const ManualFallBack: any;
+export declare const onhover: any;
+//# sourceMappingURL=Image.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKpD,wBA2HE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAMzC,eAAO,MAAM,SAAS,KAAoB,CAAC;AAM3C,eAAO,MAAM,cAAc,KAAoB,CAAC;AAOhD,eAAO,MAAM,OAAO,KAAoB,CAAC"}

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

@@ -0,0 +1,145 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Image, FALLBACK_IMAGE_URL } from './Image';
+import { componentArgs } from '../../../utilities';
+import { searchResponse } from '../../../mocks/searchResponse';
+import Readme from '../Image/readme.md';
+export default {
+    title: `Atoms/Image`,
+    component: Image,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                maxWidth: '300px',
+            } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        src: {
+            description: 'Image url',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        alt: {
+            description: 'Image alt text',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        fallback: {
+            description: 'Fallback image url',
+            defaultValue: FALLBACK_IMAGE_URL,
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'string' },
+            },
+            control: { type: 'text' },
+        },
+        lazy: {
+            defaultValue: true,
+            description: 'Image lazy loading',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
+        hoverSrc: {
+            description: 'Image onHover url',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        onError: {
+            description: 'Image error event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onError',
+        },
+        onLoad: {
+            description: 'Image loaded event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onLoad',
+        },
+        onClick: {
+            description: 'Image click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        onMouseOver: {
+            description: 'Image mouse enter event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onMouseOver',
+        },
+        onMouseOut: {
+            description: 'Image mouse exit event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onMouseOut',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Image, { ...args, style: { width: '100%' } });
+export const Default = Template.bind({});
+Default.args = {
+    src: searchResponse.results[6].mappings.core.imageUrl,
+    alt: searchResponse.results[6].mappings.core.name,
+};
+export const BrokenImg = Template.bind({});
+BrokenImg.args = {
+    src: 'intentionally_broken_image.jpg',
+    alt: searchResponse.results[6].mappings.core.name,
+};
+export const ManualFallBack = Template.bind({});
+ManualFallBack.args = {
+    src: 'intentionally_broken_image.jpg',
+    alt: searchResponse.results[5].mappings.core.name,
+    fallback: searchResponse.results[5].mappings.core.imageUrl,
+};
+export const onhover = Template.bind({});
+onhover.args = {
+    src: searchResponse.results[6].mappings.core.imageUrl,
+    alt: searchResponse.results[6].mappings.core.name,
+    hoverSrc: searchResponse.results[7].mappings.core.imageUrl,
+};

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

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

package/dist/esm/components/Atoms/Image/index.d.ts.map

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

package/dist/esm/components/Atoms/Image/index.js

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

package/dist/esm/components/Atoms/Loading/LoadingBar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare function LoadingBar(properties: LoadingBarProps): JSX.Element;
+export interface LoadingBarProps extends ComponentProps {
+    active: boolean;
+    color?: string;
+    backgroundColor?: string;
+    height?: string;
+}
+//# sourceMappingURL=LoadingBar.d.ts.map

package/dist/esm/components/Atoms/Loading/LoadingBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqChD,wBAAgB,UAAU,CAAC,UAAU,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA+BnE;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/esm/components/Atoms/Loading/LoadingBar.js

@@ -0,0 +1,60 @@
+import { jsx, css, keyframes } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    loadingBar: ({ color, height, backgroundColor, theme, animation }) => 
+    //@ts-ignore
+    css({
+        height: height,
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        right: '0',
+        margin: 'auto',
+        transition: 'opacity 0.3s ease',
+        opacity: '1',
+        visibility: 'visible',
+        zIndex: '10000',
+        background: backgroundColor || theme.colors?.secondary || '#f8f8f8',
+        '& .ss__loading-bar__bar': {
+            position: 'absolute',
+            top: '0',
+            left: '-200px',
+            height: '100%',
+            background: `${color || theme.colors?.primary || '#ccc'}`,
+            animation: `${animation} 2s linear infinite`,
+        },
+    }),
+    animation: keyframes({
+        from: { left: '-200px', width: '30%' },
+        '50%': { width: '30%' },
+        '70%': { width: '70%' },
+        '80%': { left: '50%' },
+        '95%': { left: '120%' },
+        to: { left: '100%' },
+    }),
+};
+export function LoadingBar(properties) {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        height: '5px',
+        // global theme
+        ...globalTheme?.components?.loadingbar,
+        // props
+        ...properties,
+        ...properties.theme?.components?.loadingbar,
+    };
+    const { active, color, backgroundColor, height, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.loadingBar({ height, color, backgroundColor, theme, animation: CSS.animation }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (active && (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__loading-bar', className) },
+            jsx("div", { className: "ss__loading-bar__bar" })))));
+}

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.d.ts

@@ -0,0 +1,128 @@
+import { h } from 'preact';
+import { LoadingBar } from './LoadingBar';
+declare const _default: {
+    title: string;
+    component: typeof LoadingBar;
+    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;
+            };
+        };
+        active: {
+            defaultValue: boolean;
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: 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;
+            };
+        };
+        height: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Active: any;
+//# sourceMappingURL=LoadingBar.stories.d.ts.map

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Loading/LoadingBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1C,wBA2DE;AAIF,eAAO,MAAM,MAAM,KAAoB,CAAC"}

package/dist/esm/components/Atoms/Loading/LoadingBar.stories.js

@@ -0,0 +1,67 @@
+import { h } from 'preact';
+import { LoadingBar } from './LoadingBar';
+import { componentArgs } from '../../../utilities';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import Readme from '../Loading/readme.md';
+export default {
+    title: `Atoms/LoadingBar`,
+    component: LoadingBar,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        active: {
+            defaultValue: false,
+            description: 'LoadingBar is displayed',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        color: {
+            description: 'Bar color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.primary' },
+            },
+            control: { type: 'color' },
+        },
+        backgroundColor: {
+            description: 'Background color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'theme.colors.secondary' },
+            },
+            control: { type: 'color' },
+        },
+        height: {
+            defaultValue: '5px',
+            description: 'LoadingBar height',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '5px' },
+            },
+            control: { type: 'text' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(LoadingBar, { ...args });
+export const Active = Template.bind({});
+Active.args = {
+    active: true,
+};

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

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

package/dist/esm/components/Atoms/Loading/index.d.ts.map

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

package/dist/esm/components/Atoms/Loading/index.js

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

package/dist/esm/components/Atoms/Merchandising/Banner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BannerContent, BannerType, ComponentProps } from '../../../types';
+export declare function Banner(properties: BannerProps): JSX.Element;
+export interface BannerProps extends ComponentProps {
+    content: BannerContent | [];
+    type: BannerType;
+}
+//# sourceMappingURL=Banner.d.ts.map

package/dist/esm/components/Atoms/Merchandising/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAa3E,wBAAgB,MAAM,CAAC,UAAU,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwC3D;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,EAAE,aAAa,GAAG,EAAE,CAAC;IAC5B,IAAI,EAAE,UAAU,CAAC;CACjB"}

package/dist/esm/components/Atoms/Merchandising/Banner.js

@@ -0,0 +1,42 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { BannerType } from '../../../types';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    banner: () => css({
+        '& iframe, img': {
+            maxWidth: '100%',
+            height: 'auto',
+        },
+    }),
+};
+export function Banner(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        content: [],
+        type: '',
+        // global theme
+        ...globalTheme?.components?.banner,
+        // props
+        ...properties,
+        ...properties.theme?.components?.banner,
+    };
+    const { content, type, disableStyles, className, style } = props;
+    if (type === BannerType.INLINE) {
+        console.warn(`BannerType '${BannerType.INLINE}' is not supported in <Banner /> component`);
+        return;
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.banner(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (content &&
+        content[type]?.length && (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__banner', `ss__banner--${type}`, className), ...styling, dangerouslySetInnerHTML: {
+                __html: content[props.type].join(''),
+            } }))));
+}