@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,68 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Overlay } from './Overlay';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Overlay/readme.md';
+export default {
+    title: `Atoms/Overlay`,
+    component: Overlay,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        active: {
+            description: 'Overlay is displayed',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+        color: {
+            defaultValue: 'rgba(0,0,0,0.8)',
+            description: 'Overlay color',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: 'rgba(0,0,0,0.8)' },
+            },
+            control: { type: 'color' },
+        },
+        transitionSpeed: {
+            defaultValue: '0.25s',
+            description: 'Overlay opening/closing transition speed',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '0.25s' },
+            },
+            control: { type: 'text' },
+        },
+        onClick: {
+            description: 'Overlay click event handler',
+            table: {
+                type: {
+                    summary: 'function',
+                },
+            },
+            action: 'onClick',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Overlay, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    active: true,
+};

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

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

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

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

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

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

package/dist/esm/components/Atoms/Price/Price.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FormattedNumberProps } from '../FormattedNumber/FormattedNumber';
+export declare function Price(properties: PriceProps): JSX.Element;
+export interface PriceProps extends FormattedNumberProps {
+    lineThrough?: boolean;
+}
+//# sourceMappingURL=Price.d.ts.map

package/dist/esm/components/Atoms/Price/Price.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Price/Price.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAa1E,wBAAgB,KAAK,CAAC,UAAU,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA4DzD;AAED,MAAM,WAAW,UAAW,SAAQ,oBAAoB;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/esm/components/Atoms/Price/Price.js

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { filters } from '@searchspring/snap-toolbox';
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    price: ({ theme }) => css({
+        color: theme.colors?.primary,
+        '&.ss__price--strike': {
+            textDecoration: 'line-through',
+            color: 'initial',
+        },
+    }),
+};
+export function Price(properties) {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        symbol: '$',
+        decimalPlaces: 2,
+        padDecimalPlaces: true,
+        thousandsSeparator: ',',
+        decimalSeparator: '.',
+        symbolAfter: false,
+        lineThrough: false,
+        // global theme
+        ...globalTheme?.components?.price,
+        // props
+        ...properties,
+        ...properties.theme?.components?.price,
+    };
+    const { lineThrough, value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, raw, disableStyles, className, style, } = props;
+    const formattedPrice = filters.currency(value, {
+        symbol,
+        decimalPlaces,
+        padDecimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        symbolAfter,
+    });
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.price({ theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return raw ? (jsx(Fragment, null, formattedPrice)) : (jsx(CacheProvider, null,
+        jsx("span", { ...styling, className: classnames('ss__price', { 'ss__price--strike': lineThrough }, className) }, formattedPrice)));
+}

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

@@ -0,0 +1,137 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Price } from './Price';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Price/readme.md';
+export default {
+    title: `Atoms/Price`,
+    component: Price,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        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' },
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Price, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    value: 1099.99,
+};
+export const lineThrough = Template.bind({});
+lineThrough.args = {
+    value: 1199.99,
+    lineThrough: true,
+};
+export const CustomCurrency = Template.bind({});
+CustomCurrency.args = {
+    value: 999.99,
+    symbol: ' €',
+    thousandsSeparator: '.',
+    decimalSeparator: ',',
+    symbolAfter: true,
+};

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

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

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

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

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

@@ -0,0 +1,61 @@
+import { jsx, css, keyframes } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    skeleton: ({ width, height, round, backgroundColor, animatedColor, animation }) => 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, ${backgroundColor}, ${animatedColor}, ${backgroundColor})`,
+            transform: 'translateX(-100%)',
+            animation: `${animation} 1.5s linear infinite`,
+            animationTimingFunction: 'ease-in-out',
+        },
+    }),
+    animation: keyframes({
+        from: {
+            transform: 'translateX(-100%)',
+        },
+        to: {
+            transform: 'translateX(100%)',
+        },
+    }),
+};
+export const Skeleton = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        backgroundColor: '#ebebeb',
+        animatedColor: '#f5f5f5',
+        // global theme
+        ...globalTheme?.components?.skeleton,
+        // props
+        ...properties,
+        ...properties.theme?.components?.skeleton,
+    };
+    const { width, height, round, backgroundColor, animatedColor, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.skeleton({ width, height, round, backgroundColor, animatedColor, animation: CSS.animation }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { ...styling, className: classnames('ss__skeleton', className) })));
+});