@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Organisms/BranchOverride/BranchOverride.js

@@ -0,0 +1,256 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BranchOverride = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("preact/hooks");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+// TODO: We want to avoid passing non-component props here. This may require some refactoring of this component.
+var defaultStyles = function (_a) {
+    var componentTheme = _a.componentTheme;
+    return (0, react_1.css)({
+        width: '360px',
+        height: '120px',
+        overflow: 'hidden',
+        fontSize: '14px',
+        position: 'fixed',
+        zIndex: '9999',
+        cursor: 'auto',
+        bottom: '50px',
+        right: 0,
+        padding: '0 5px',
+        background: componentTheme.main.background,
+        color: componentTheme.main.color,
+        border: componentTheme.main.border,
+        borderTopLeftRadius: '10px',
+        borderBottomLeftRadius: '10px',
+        boxShadow: componentTheme.main.boxShadow,
+        transition: 'height ease 0.2s, right ease 0.5s 0.2s',
+        '&.ss__branch-override--collapsed': {
+            transition: 'height ease 0.5s 0.5s, right ease 0.5s',
+            right: '-323px',
+            height: '50px',
+            cursor: 'pointer',
+        },
+        '.ss__branch-override__top': {
+            padding: '10px 5px',
+            background: componentTheme.top.background,
+            borderBottom: componentTheme.top.border,
+            '.ss__branch-override__top__logo': {
+                display: 'inline-block',
+                height: '30px',
+                maxHeight: '30px',
+                verticalAlign: 'middle',
+            },
+            '.ss__branch-override__top__collapse': {
+                display: 'inline-block',
+                float: 'right',
+                paddingTop: '7px',
+                cursor: 'pointer',
+            },
+            '.ss__branch-override__top__button': {
+                borderRadius: '5px',
+                padding: '6px',
+                height: '100%',
+                lineHeight: '14px',
+                textAlign: 'center',
+                cursor: 'pointer',
+                fontSize: '10px',
+                border: componentTheme.top.button.border,
+                color: componentTheme.top.button.color,
+                float: 'right',
+                marginRight: '14px',
+            },
+        },
+        '.ss__branch-override__bottom': {
+            padding: '10px 15px',
+            fontSize: '12px',
+            '.ss__branch-override__bottom__left': {
+                fontWeight: 'bold',
+                fontStyle: componentTheme.bottom.branch.style,
+                color: componentTheme.bottom.branch.color,
+                fontSize: '14px',
+                lineHeight: '20px',
+                display: 'inline-flex',
+                alignItems: 'center',
+                maxWidth: '180px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                svg: {
+                    marginRight: '10px',
+                },
+            },
+            '.ss__branch-override__bottom__right': {
+                float: 'right',
+                fontStyle: 'italic',
+                color: componentTheme.bottom.additional.color,
+                fontSize: '12px',
+                lineHeight: '20px',
+            },
+            '.ss__branch-override__bottom__content': {
+                marginTop: '10px',
+            },
+        },
+    });
+};
+var darkTheme = {
+    class: 'ss__branch-override--dark',
+    main: {
+        border: '0',
+        background: 'rgba(26, 29, 36, 0.9)',
+        color: '#fff',
+        boxShadow: '',
+    },
+    top: {
+        border: '1px solid #454c5f',
+        logo: {
+            src: 'https://cdn.athoscommerce.net/snap/images/athos-logo-white.svg',
+        },
+        button: {
+            border: '1px solid #fff',
+            color: '#fff',
+            content: 'STOP PREVIEW',
+        },
+        close: {
+            fill: '#fff',
+        },
+    },
+    bottom: {
+        content: 'Preview functionality may differ from production.',
+        branch: {
+            color: '#fff',
+            style: 'italic',
+        },
+        additional: {
+            color: '#fff',
+        },
+    },
+};
+var lightTheme = {
+    class: 'ss__branch-override--light',
+    main: {
+        border: '0',
+        background: 'rgba(29, 73, 144, 0.9)',
+        color: '#fff',
+        boxShadow: '',
+    },
+    top: {
+        border: '1px solid #3c78d7',
+        logo: {
+            src: 'https://cdn.athoscommerce.net/snap/images/athos-logo-white.svg',
+        },
+        button: {
+            border: '1px solid #fff',
+            color: '#fff',
+            content: 'STOP PREVIEW',
+        },
+        close: {
+            fill: '#fff',
+        },
+    },
+    bottom: {
+        content: 'Preview functionality may differ from production.',
+        branch: {
+            color: '#fff',
+            style: 'italic',
+        },
+        additional: {
+            color: '#fff',
+        },
+    },
+};
+var failureTheme = {
+    class: 'ss__branch-override--error',
+    main: {
+        border: '0',
+        background: 'rgba(130, 6, 6, 0.9)',
+        color: '#fff',
+        boxShadow: '',
+    },
+    top: {
+        border: '1px solid #e50b0b',
+        logo: {
+            src: 'https://cdn.athoscommerce.net/snap/images/athos-logo-white.svg',
+        },
+        button: {
+            border: '1px solid #fff',
+            color: '#fff',
+            content: 'REMOVE',
+        },
+        close: {
+            fill: '#fff',
+        },
+    },
+    bottom: {
+        content: 'Incorrect branch name or branch no longer exists.',
+        branch: {
+            color: '#fff',
+            style: 'italic',
+        },
+        additional: {
+            color: '#fff',
+        },
+    },
+};
+var componentThemes = {
+    darkTheme: darkTheme,
+    lightTheme: lightTheme,
+    failureTheme: failureTheme,
+};
+var BranchOverride = function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('branchOverride', globalTheme, defaultProps, properties);
+    var branch = props.branch, details = props.details, error = props.error, className = props.className, internalClassName = props.internalClassName, darkMode = props.darkMode, disableStyles = props.disableStyles, onRemoveClick = props.onRemoveClick, treePath = props.treePath;
+    var subProps = {
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__branch-override__bottom__left__icon', size: '12px' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+    var _a = (0, hooks_1.useState)(prefersDark ? 'darkTheme' : 'lightTheme'), themeName = _a[0], setThemeName = _a[1];
+    var _b = (0, hooks_1.useState)(0), collapsed = _b[0], setCollapsed = _b[1];
+    if (error) {
+        setThemeName('failureTheme');
+    }
+    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { componentTheme: componentThemes[themeName] }), defaultStyles);
+    return (details || error) && branch ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__branch-override', componentThemes[themeName].class, { 'ss__branch-override--collapsed': collapsed }, className, internalClassName) }, styling, { onClick: function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            setCollapsed(0);
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__top", children: [(0, jsx_runtime_1.jsx)("img", { className: "ss__branch-override__top__logo", src: componentThemes[themeName].top.logo.src }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__collapse", onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setCollapsed(1);
+                        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ size: "18px", color: componentThemes[themeName].top.close.fill }, subProps.icon, { icon: "close-thin" })) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__button", onClick: function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onRemoveClick && onRemoveClick(e, branch);
+                        }, children: componentThemes[themeName].top.button.content })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__bottom", children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__left", children: error ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ size: "12px", color: componentThemes[themeName].bottom.branch.color }, subProps.icon, { icon: "warn" })), (0, jsx_runtime_1.jsx)("span", { children: error.message })] })) : (branch) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__right", children: error ? branch : details === null || details === void 0 ? void 0 : details.lastModified }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__bottom__content", children: (error === null || error === void 0 ? void 0 : error.description) || componentThemes[themeName].bottom.content })] })] }))) : null;
+};
+exports.BranchOverride = BranchOverride;

package/dist/cjs/components/src/components/Organisms/BranchOverride/index.d.ts

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

package/dist/cjs/components/src/components/Organisms/BranchOverride/index.d.ts.map

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

package/dist/cjs/components/src/components/Organisms/BranchOverride/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BranchOverride"), exports);

package/dist/cjs/components/src/components/Organisms/Facet/Facet.d.ts

@@ -0,0 +1,67 @@
+import { IconProps, IconType } from '../../Atoms/Icon';
+import { ComponentProps } from '../../../types';
+import type { ValueFacet, RangeFacet } from '@athoscommerce/snap-store-mobx';
+import { Lang } from '../../../hooks';
+export declare const Facet: ((properties: FacetProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type FacetProps = {
+    lang?: Partial<FacetLang>;
+    facet: ValueFacet | RangeFacet;
+} & FacetTemplatesLegalProps & ComponentProps<FacetProps>;
+export type FacetTemplatesLegalProps = {
+    disableCollapse?: boolean;
+    color?: string;
+    iconCollapse?: IconType | Partial<IconProps>;
+    iconColor?: string;
+    iconExpand?: IconType | Partial<IconProps>;
+    limit?: number;
+    statefulOverflow?: boolean;
+    overflowSlot?: JSX.Element | JSX.Element[];
+    optionsSlot?: JSX.Element | JSX.Element[];
+    disableOverflow?: boolean;
+    previewOnFocus?: boolean;
+    valueProps?: any;
+    showSelectedCount?: boolean;
+    hideSelectedCountParenthesis?: boolean;
+    showClearAllText?: boolean;
+    clearAllText?: string;
+    clearAllIcon?: IconType | Partial<IconProps>;
+    hideShowMoreLessText?: boolean;
+    showMoreText?: string;
+    showLessText?: string;
+    iconOverflowMore?: IconType | Partial<IconProps>;
+    iconOverflowLess?: IconType | Partial<IconProps>;
+    fields?: FieldProps;
+    display?: FieldProps;
+    searchable?: boolean;
+    rangeInputs?: boolean;
+    rangeInputsSubmitButtonText?: string;
+    rangeInputsPrefix?: string;
+    rangeInputsInheritDefaultValues?: boolean;
+    rangeInputsSeparatorText?: string;
+    justContent?: boolean;
+    horizontal?: boolean;
+};
+export interface FacetLang {
+    showMoreText: Lang<{
+        facet: ValueFacet | RangeFacet;
+    }>;
+    showLessText: Lang<{
+        facet: ValueFacet | RangeFacet;
+    }>;
+    dropdownButton: Lang<{
+        facet: ValueFacet | RangeFacet;
+    }>;
+    clearAllText: Lang<{
+        facet: ValueFacet | RangeFacet;
+    }>;
+    submitRangeButton: Lang<{
+        facet: ValueFacet | RangeFacet;
+    }>;
+}
+type FieldProps = {
+    [variable: string]: Omit<FacetProps, 'facet'>;
+};
+export {};
+//# sourceMappingURL=Facet.d.ts.map

package/dist/cjs/components/src/components/Organisms/Facet/Facet.d.ts.map

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