@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Molecules/VariantSelection/VariantSelection.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { List } from '../List';
+import { Swatches } from '../Swatches';
+import { Dropdown } from '../../Atoms/Dropdown';
+import { Icon } from '../../Atoms/Icon';
+import { useA11y } from '../../../hooks';
+import { fieldNameToComponentName } from '@athoscommerce/snap-toolbox';
+const defaultStyles = () => {
+    return css({
+        '.ss__variant-selection__dropdown': {
+            '.ss__dropdown__button': {
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                '.ss__dropdown__button-wrapper': {
+                    display: 'flex',
+                    gap: '5px',
+                },
+            },
+        },
+    });
+};
+const dropdownContentStyles = () => {
+    return css({
+        margin: '0px',
+        padding: '5px',
+        background: 'white',
+        zIndex: 10,
+        border: '1px solid black',
+        '.ss__variant-selection__option': {
+            cursor: 'pointer',
+            position: 'relative',
+        },
+        '.ss__variant-selection__option:hover': {
+            fontWeight: 'bold',
+        },
+        '.ss__variant-selection__option--selected': {
+            fontWeight: 'bold',
+        },
+        '.ss__variant-selection__option--disabled': {
+            pointerEvents: 'none',
+            cursor: 'initial',
+            color: 'red',
+        },
+        '.ss__variant-selection__option--disabled, .ss__variant-selection__option--unavailable': {
+            textDecoration: 'line-through',
+            opacity: 0.5,
+        },
+    });
+};
+export const VariantSelection = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        // default props
+        name: fieldNameToComponentName(properties.selection.field),
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('variantSelection', globalTheme, defaultProps, properties);
+    const { selection, onSelect, disableStyles, className, internalClassName, treePath } = props;
+    let type = props.type;
+    if (!type) {
+        if (selection.type == 'swatch') {
+            type = 'swatches';
+        }
+        else {
+            type = 'dropdown';
+        }
+    }
+    const onSelectHandler = (e, option) => {
+        if (onSelect) {
+            onSelect(e, option);
+        }
+        selection.select(option.value);
+    };
+    const subProps = {
+        dropdown: {
+            internalClassName: 'ss__variant-selection__dropdown',
+            usePortal: true,
+            // TODO: label doesnt exist on dropdown?
+            // label: selection.label || selection.field,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        icon: {
+            // default props
+            internalClassName: 'ss__variant-selection__icon',
+            size: '12px',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        list: {
+            titleText: selection.field,
+            internalClassName: 'ss__variant-selection__list',
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            onSelect: (e, option) => onSelectHandler(e, option),
+            selected: selection.selected,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        swatches: {
+            internalClassName: 'ss__variant-selection__swatches',
+            onSelect: (e, option) => onSelectHandler(e, option),
+            selected: selection.selected,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //since the dropdown is rendered in a portal, it needs its own emotion styles
+    const dropdownStyles = mergeStyles(props, dropdownContentStyles);
+    const DropdownContent = (props) => {
+        const { toggleOpen } = props;
+        return (_jsx("ul", { ...dropdownStyles, className: "ss__variant-selection__options", ref: (e) => useA11y(e, -1, true, () => toggleOpen()), children: selection.values.map((val) => {
+                const selected = selection.selected?.value == val.value;
+                return (_jsx("li", { className: classnames(`ss__variant-selection__option`, {
+                        'ss__variant-selection__option--selected': selected,
+                        'ss__variant-selection__option--disabled': val.disabled,
+                        'ss__variant-selection__option--unavailable': val.available === false,
+                    }), onClick: (e) => !val.disabled && onSelectHandler(e, val), ref: (e) => useA11y(e), "aria-selected": selected, "aria-disabled": val.disabled || val.available === false, children: val.label }));
+            }) }));
+    };
+    return selection.values.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__variant-selection', `ss__variant-selection--${type}`, `ss__variant-selection--${selection.field}`, className, internalClassName), children: (() => {
+                switch (type) {
+                    case 'dropdown':
+                        return (_jsx(_Fragment, { children: (() => {
+                                //todo prettify the button
+                                const Button = (props) => {
+                                    const { open } = props;
+                                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__dropdown__button-wrapper", children: [_jsx("span", { className: "ss__dropdown__button-wrapper__label", children: selection.label }), selection.selected ? (_jsxs("span", { className: "ss__dropdown__button-wrapper__selection", children: ["(", selection.selected.value, ")"] })) : null] }), _jsx(Icon, { icon: open ? 'angle-up' : 'angle-down', ...subProps.icon, treePath: props.treePath })] }));
+                                };
+                                return _jsx(Dropdown, { button: _jsx(Button, { treePath: treePath }), ...subProps.dropdown, content: _jsx(DropdownContent, {}) });
+                            })() }));
+                    case 'list':
+                        return (_jsx(_Fragment, { children: (() => {
+                                return _jsx(List, { ...subProps.list, options: selection.values });
+                            })() }));
+                    case 'swatches':
+                        return (_jsx(_Fragment, { children: (() => {
+                                return _jsx(Swatches, { ...subProps.swatches, options: selection.values });
+                            })() }));
+                }
+            })() }) })) : null;
+});

package/dist/esm/components/src/components/Molecules/VariantSelection/index.d.ts

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

package/dist/esm/components/src/components/Molecules/VariantSelection/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/VariantSelection/index.js

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

package/dist/esm/components/src/components/Organisms/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,96 @@
+import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
+import type { Term } from '@athoscommerce/snap-store-mobx';
+import { IconProps } from '../../Atoms/Icon/Icon';
+import { ComponentProps, BreakpointsProps, ResultComponent } from '../../../types';
+import { Lang } from '../../../hooks';
+import { IconType } from '../../Atoms/Icon';
+export declare const Autocomplete: ((properties: AutocompleteProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type AutocompleteProps = {
+    lang?: Partial<AutocompleteLang>;
+    controller: AutocompleteController;
+    breakpoints?: BreakpointsProps;
+} & AutocompleteTemplatesLegalProps & ComponentProps<AutocompleteProps>;
+export type AutocompleteTemplatesLegalProps = {
+    input: Element | string;
+    hideTerms?: boolean;
+    hideFacets?: boolean;
+    hideContent?: boolean;
+    hideBanners?: boolean;
+    hideLink?: boolean;
+    hideHistory?: boolean;
+    hideTrending?: boolean;
+    retainHistory?: boolean;
+    retainTrending?: boolean;
+    horizontalTerms?: boolean;
+    vertical?: boolean;
+    termsTitle?: string;
+    trendingTitle?: string;
+    historyTitle?: string;
+    facetsTitle?: string;
+    contentTitle?: string;
+    viewportMaxHeight?: boolean;
+    seeMoreButtonText?: string | ((controller: AutocompleteController) => string);
+    seeMoreButtonIcon?: IconType | Partial<IconProps> | boolean;
+    termsSlot?: JSX.Element | JSX.Element[];
+    facetsSlot?: JSX.Element | JSX.Element[];
+    contentSlot?: JSX.Element | JSX.Element[];
+    resultsSlot?: JSX.Element | JSX.Element[];
+    noResultsSlot?: JSX.Element | JSX.Element[];
+    linkSlot?: JSX.Element | JSX.Element[];
+    width?: string;
+    resultComponent?: ResultComponent;
+    onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    templates?: {
+        recommendation?: {
+            enabled: boolean;
+            component?: 'Recommendation';
+            resultComponent?: string;
+            config?: Partial<RecommendationControllerConfig>;
+        };
+    };
+};
+export interface AutocompleteLang {
+    termsTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    trendingTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    historyTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    facetsTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    contentTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    closeButton: Lang<{
+        controller: AutocompleteController;
+    }>;
+    trendingTerm: Lang<{
+        controller: AutocompleteController;
+        term: Term;
+        index: number;
+    }>;
+    suggestionsTerm: Lang<{
+        controller: AutocompleteController;
+        term: Term;
+        index: number;
+    }>;
+    historyTerm: Lang<{
+        controller: AutocompleteController;
+        term: Term;
+        index: number;
+    }>;
+    noResultsText: Lang<{
+        controller: AutocompleteController;
+    }>;
+    seeMoreButton: Lang<{
+        controller: AutocompleteController;
+    }>;
+}
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/esm/components/src/components/Organisms/Autocomplete/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}