@searchspring/snap-preact-components 0.20.0

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

@@ -0,0 +1,147 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Dropdown } from './Dropdown';
+import { componentArgs } from '../../../utilities';
+import Readme from '../Dropdown/readme.md';
+import { Badge } from '../Badge/Badge';
+export default {
+    title: `Atoms/Dropdown`,
+    component: Dropdown,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        button: {
+            description: 'Button content to toggle the dropdown',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        content: {
+            description: 'Content to be displayed in dropdown',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+            control: { type: 'text' },
+        },
+        children: {
+            description: 'Content to be displayed in dropdown using children',
+            table: {
+                type: {
+                    summary: 'string, JSX',
+                },
+            },
+        },
+        disabled: {
+            description: 'Disable dropdown - prevents all click events',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        disableOverlay: {
+            description: 'Disable dropdown overlay and renders as block',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        open: {
+            description: 'Pass a value here to control the state externally',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: 'undefined' },
+            },
+            control: { type: 'boolean' },
+        },
+        startOpen: {
+            description: 'Dropdown state is open on initial render - used with internal state only',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        disableClickOutside: {
+            description: 'Ignore clicks outside of element',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: false },
+            },
+            control: { type: 'boolean' },
+        },
+        onClick: {
+            description: 'Dropdown click event handler',
+            table: {
+                type: {
+                    summary: 'function(e: Event)',
+                },
+            },
+            action: 'onClick',
+        },
+        onToggle: {
+            description: 'Executes when the internal state changes, gets passed the event and the internal state - used with internal state only',
+            table: {
+                type: {
+                    summary: 'function(e: Event, open: boolean)',
+                    detail: 'e is the click event',
+                },
+            },
+            action: 'onToggle',
+        },
+        ...componentArgs,
+    },
+};
+const Template = (args) => h(Dropdown, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    button: 'button text',
+    content: 'content text',
+};
+const Template2 = (args) => h(Dropdown, { ...args });
+export const ExternalState = Template2.bind({});
+ExternalState.args = {
+    button: 'button text',
+    content: 'content text',
+    open: true,
+};
+const Template3 = (args) => h(Dropdown, { ...args });
+export const JSXContent = Template3.bind({});
+JSXContent.args = {
+    button: 'button text',
+    content: h(Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
+};
+const Template4 = (args) => h(Dropdown, { button: args.button }, args.content);
+export const JSXChildren = Template4.bind({});
+JSXChildren.args = {
+    button: 'button text',
+    content: h(Badge, { content: 'jsx content - (note this component receieved the open state as a prop)' }),
+};
+const Template5 = (args) => h(Dropdown, { button: args.button }, args.content);
+export const StringChildren = Template5.bind({});
+StringChildren.args = {
+    button: 'button text',
+    content: 'string content - (note this component receieved the open state as a prop)',
+};

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare function FormattedNumber(properties: FormattedNumberProps): JSX.Element;
+export interface FormattedNumberProps extends ComponentProps {
+    value: number;
+    symbol?: string;
+    decimalPlaces?: number;
+    padDecimalPlaces?: boolean;
+    thousandsSeparator?: string;
+    decimalSeparator?: string;
+    symbolAfter?: boolean;
+    raw?: boolean;
+}
+//# sourceMappingURL=FormattedNumber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAMhD,wBAAgB,eAAe,CAAC,UAAU,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA6C7E;AACD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;CACd"}

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

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { Fragment } from 'preact';
+import { jsx, css } from '@emotion/react';
+import { filters } from '@searchspring/snap-toolbox';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    formattedNumber: () => css({}),
+};
+export function FormattedNumber(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        symbol: '',
+        decimalPlaces: 3,
+        padDecimalPlaces: true,
+        thousandsSeparator: '',
+        decimalSeparator: '.',
+        symbolAfter: true,
+        // global theme
+        ...globalTheme?.components?.formattedNumber,
+        // props
+        ...properties,
+        ...properties.theme?.components?.formattedNumber,
+    };
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, disableStyles, className, style, raw } = props;
+    const formattedNumber = filters.formatNumber(value, {
+        symbol,
+        decimalPlaces,
+        padDecimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        symbolAfter,
+    });
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.formattedNumber(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return raw ? (jsx(Fragment, null, formattedNumber)) : (jsx(CacheProvider, null,
+        jsx("span", { className: classnames('ss__formatted-number', className), ...styling }, formattedNumber)));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumber.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/FormattedNumber/FormattedNumber.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpD,wBAsGE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAKzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,MAAM,KAAoB,CAAC"}

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

@@ -0,0 +1,122 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { FormattedNumber } from './FormattedNumber';
+import { componentArgs } from '../../../utilities';
+import Readme from '../FormattedNumber/readme.md';
+export default {
+    title: `Atoms/FormattedNumber`,
+    component: FormattedNumber,
+    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: {
+            defaultValue: '',
+            description: 'Unit symbol',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        symbolAfter: {
+            defaultValue: true,
+            description: 'Place unit symbol after the value',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
+        decimalPlaces: {
+            defaultValue: 3,
+            description: 'Number of decimal places',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 3 },
+            },
+            control: { type: 'number' },
+        },
+        padDecimalPlaces: {
+            defaultValue: true,
+            description: 'Pad decimal places with zeros',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                defaultValue: { summary: true },
+            },
+            control: { type: 'boolean' },
+        },
+        thousandsSeparator: {
+            defaultValue: '',
+            description: 'Character used to separate thousands',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '' },
+            },
+            control: { type: 'text' },
+        },
+        decimalSeparator: {
+            defaultValue: '.',
+            description: 'Character used to separate decimal values',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '.' },
+            },
+            control: { type: 'text' },
+        },
+        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(FormattedNumber, { ...args });
+export const Default = Template.bind({});
+Default.args = {
+    value: 1099.99,
+};
+export const Temperature = Template.bind({});
+Temperature.args = {
+    value: 100,
+    symbol: ' °C',
+    decimalPlaces: 2,
+};
+export const Length = Template.bind({});
+Length.args = {
+    value: 100,
+    symbol: ' mm',
+    decimalPlaces: 2,
+};

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+import { IconType } from './paths';
+export declare function Icon(properties: IconProps): JSX.Element;
+export interface IconProps extends ComponentProps {
+    color?: string;
+    icon?: IconType | string;
+    path?: string;
+    size?: string;
+    width?: string;
+    height?: string;
+    viewBox?: string;
+}
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW9C,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAyCvD;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB"}

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

@@ -0,0 +1,37 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { iconPaths } from './paths';
+const CSS = {
+    icon: ({ color, height, width, size, theme }) => css({
+        fill: color || theme.colors?.primary,
+        width: width || size,
+        height: height || size,
+    }),
+};
+export function Icon(properties) {
+    const globalTheme = useTheme();
+    const theme = { ...globalTheme, ...properties.theme };
+    const props = {
+        // default props
+        size: '16px',
+        viewBox: '0 0 56 56',
+        // global theme
+        ...globalTheme?.components?.icon,
+        // props
+        ...properties,
+        ...properties.theme?.components?.icon,
+    };
+    const { color, icon, path, size, width, height, viewBox, disableStyles, className, style } = props;
+    const iconPath = iconPaths[icon] || path;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.icon({ color, width, height, size, theme }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (iconPath && (jsx(CacheProvider, null,
+        jsx("svg", { ...styling, className: classnames('ss__icon', icon ? `ss__icon--${icon}` : null, className), viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles && (width || size), height: disableStyles && (height || size) },
+            jsx("path", { fill: disableStyles && color, d: iconPath })))));
+}