@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/shared/dialog/dialog.ts

@@ -0,0 +1,154 @@
+import {
+    Instance as PopperInstance,
+    Placement as PopperPlacement
+} from '@popperjs/core';
+
+export type DialogState = {
+    isOpen?: boolean;
+};
+
+export type Placement =
+    | 'top'
+    | 'top left'
+    | 'top right'
+    | 'right'
+    | 'right top'
+    | 'right bottom'
+    | 'bottom'
+    | 'bottom left'
+    | 'bottom right'
+    | 'left'
+    | 'left top'
+    | 'left bottom';
+
+const DEFAULT_PLACEMENT = 'top';
+const NUBBIN_SIZE = 14;
+
+export class Dialog {
+    constructor(
+        private trigger: HTMLElement,
+        private dialog: HTMLElement,
+        private options: {
+            placement?: Placement;
+            onChange?: (Partial: DialogState) => void;
+        } = {}
+    ) {
+        this.create();
+    }
+
+    popper: PopperInstance | null = null;
+
+    private _state: DialogState = { isOpen: false };
+
+    get state(): DialogState {
+        return this._state;
+    }
+
+    set state(nextState: DialogState) {
+        this._state = { ...this._state, ...nextState };
+
+        if (this.options.onChange) {
+            this.options.onChange(this.state);
+        }
+    }
+
+    private async create() {
+        const modifiers = [
+            {
+                name: 'flip',
+                options: {
+                    padding: NUBBIN_SIZE
+                }
+            },
+            {
+                name: 'hide',
+                enabled: false
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 2,
+                        bottom: 2,
+                        left: 5,
+                        right: 5
+                    }
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: ({ placement, reference }: any) => {
+                        if (placement.match(/^(top|bottom)/)) {
+                            return [0, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/end?/)) {
+                            return [(reference.height / 2) * 1, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/start?/)) {
+                            return [(reference.height / 2) * -1, NUBBIN_SIZE];
+                        }
+
+                        return [0, NUBBIN_SIZE];
+                    }
+                }
+            }
+        ];
+        const { createPopper } = await import('@popperjs/core');
+
+        this.popper = createPopper(this.trigger, this.dialog, {
+            placement: this.getPlacement(this.options.placement),
+            modifiers
+        });
+
+        // Show
+        this.trigger.addEventListener('mouseenter', this.show.bind(this));
+        this.trigger.addEventListener('focusin', this.show.bind(this));
+
+        // Hide
+        this.trigger.addEventListener('mouseleave', this.hide.bind(this));
+        this.trigger.addEventListener('focusout', this.hide.bind(this));
+    }
+
+    destroy() {
+        this.popper!.destroy();
+        this.popper = null;
+    }
+
+    private async show() {
+        await this.popper!.update();
+        this.state = { isOpen: true };
+    }
+
+    private hide() {
+        this.state = { isOpen: false };
+    }
+
+    // Map the "placement" property used by SLDS to the correct Popper "placement"
+    private getPlacement(
+        placement: Placement = DEFAULT_PLACEMENT
+    ): PopperPlacement {
+        switch (placement) {
+            case 'top left':
+                return 'top-start';
+            case 'top right':
+                return 'top-end';
+            case 'right top':
+                return 'right-start';
+            case 'right bottom':
+                return 'right-end';
+            case 'bottom left':
+                return 'bottom-start';
+            case 'bottom right':
+                return 'bottom-end';
+            case 'left top':
+                return 'left-start';
+            case 'left bottom':
+                return 'left-end';
+            default:
+                return placement;
+        }
+    }
+}

package/src/modules/shared/elements/__tests__/overflow.test.ts

@@ -0,0 +1,39 @@
+import { calculateOverflow } from '../overflow';
+
+describe('calculateOverflow()', () => {
+    const ITEMS = [
+        { active: false, width: 100 },
+        { active: false, width: 200 },
+        { active: false, width: 100 }
+    ];
+
+    it('returns visibleItems and overflowItems', () => {
+        const { visibleItems, overflowItems } = calculateOverflow(
+            ITEMS,
+            360,
+            50
+        );
+        expect(visibleItems).toHaveLength(2);
+        expect(overflowItems).toHaveLength(1);
+    });
+
+    it('ensures an active item is always visible', () => {
+        const { visibleItems, overflowItems } = calculateOverflow(
+            [...ITEMS, { active: true, width: 300 }],
+            360,
+            50
+        );
+        expect(visibleItems.find((i) => i.width === 300)).toBeTruthy();
+        expect(overflowItems).toHaveLength(3);
+    });
+
+    it('handles bad input', () => {
+        const badItems = calculateOverflow([], 360, 50);
+        expect(badItems.visibleItems).toHaveLength(0);
+        expect(badItems.overflowItems).toHaveLength(0);
+
+        const badWidths = calculateOverflow(ITEMS);
+        expect(badWidths.visibleItems).toHaveLength(ITEMS.length);
+        expect(badWidths.overflowItems).toHaveLength(0);
+    });
+});

package/src/modules/shared/elements/overflow.ts

@@ -0,0 +1,71 @@
+/**
+ * @file Utilities for dealing with element overflows (execeeding container width)
+ * Based on https://sfdc.co/uOYl6
+ */
+
+export type CalculateOverflowItem = {
+    active: boolean;
+    value?: string;
+    width: number;
+};
+
+export function calculateOverflow(
+    items: CalculateOverflowItem[],
+    containerWidth: number = 0,
+    overflowWidth: number = 0
+) {
+    const visibleItems: CalculateOverflowItem[] = [];
+    const overflowItems: CalculateOverflowItem[] = [];
+
+    const allItemsWidth = items.reduce(
+        (totalWidth, item) => totalWidth + item.width,
+        0
+    );
+
+    // If total items width is less than containerwidth or if the containerwidth is
+    // less than zero in cases where container is not yet rendered and we subtract the threshold
+    // return all items as visibleItems and overflowItems empty
+    if (allItemsWidth <= containerWidth || containerWidth <= 0) {
+        return { visibleItems: items, overflowItems };
+    }
+
+    // Not all items fit, an overflow is needed
+    let totalWidth = overflowWidth;
+
+    // Find the active item if it exists
+    const activeItem = items.find((i) => i.active);
+
+    // The active item is always shown, so reserve space for it
+    if (activeItem) {
+        totalWidth += activeItem.width;
+    }
+
+    let activeItemFitsWithoutRearrangement = false;
+
+    items.forEach((item) => {
+        if (item.active) {
+            activeItemFitsWithoutRearrangement = overflowItems.length === 0;
+            if (activeItemFitsWithoutRearrangement) {
+                visibleItems.push(item);
+            }
+        } else {
+            const itemFits = item.width + totalWidth <= containerWidth;
+            if (itemFits && overflowItems.length === 0) {
+                totalWidth += item.width;
+                visibleItems.push(item);
+            } else {
+                overflowItems.push(item);
+            }
+        }
+    });
+
+    // Place the active item at the end
+    if (activeItem && !activeItemFitsWithoutRearrangement) {
+        visibleItems.push(activeItem);
+    }
+
+    return {
+        visibleItems,
+        overflowItems
+    };
+}

package/src/modules/shared/fetch/fetch.ts

@@ -0,0 +1,52 @@
+export function csrfHeader(token: string = '') {
+    return {
+        'X-CSRF-Token': token
+    };
+}
+
+export function fetch(url: string, { ...options }: RequestInit = {}) {
+    return window.fetch(url, {
+        ...options,
+        credentials: 'same-origin'
+    });
+}
+
+export function fetchJSON<T>(
+    url: string,
+    { headers, ...options }: RequestInit = {}
+) {
+    return fetch(url, {
+        ...options,
+        headers: {
+            ...headers,
+            Accept: 'application/json; charset=utf-8'
+        }
+    }).then(async (response) => {
+        if (response.ok) return response.json() as Promise<T>;
+        if (/json/.test(String(response.headers.get('Content-Type'))))
+            return response
+                .json()
+                .then((errorJSON) => Promise.reject(errorJSON));
+        throw new Error(
+            `Application error code ${response.status} for "${url}"`
+        );
+    });
+}
+
+export { fetchJSON as getJSON };
+
+export function postJSON<T>(
+    url: string,
+    body?: object,
+    { headers, method = 'POST', ...options }: RequestInit = {}
+) {
+    return fetchJSON<T>(url, {
+        ...options,
+        method,
+        headers: {
+            ...headers,
+            'Content-Type': 'application/json; charset=utf-8'
+        },
+        body: typeof body === 'string' ? body : JSON.stringify(body)
+    });
+}

package/src/modules/shared/helpers/helpers.ts

@@ -0,0 +1,141 @@
+export function attrToBool(attr: any) {
+    if (typeof attr === 'boolean') {
+        return attr;
+    }
+    if (typeof attr === 'string') {
+        return attr === 'true' || attr === '';
+    }
+    return !!attr;
+}
+
+export function hash(value: string) {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        let char = value.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash |= 0;
+    }
+    return hash;
+}
+
+export function createImageUrl(image: string, hash: string) {
+    if (image.startsWith('/assets')) {
+        const segments = image.split('/');
+        return `/1/asset/immutable/s/${hash}/$assetsDir/images/${
+            segments[segments.length - 1]
+        }`;
+    }
+    return image;
+}
+
+export const InteractionEventTypes = Object.freeze({
+    CLICK: 'CLICK',
+    PAGE_VIEW: 'PAGE_VIEW',
+    INPUT_CHANGE: 'INPUT_CHANGE',
+    FILE_DOWNLOAD: 'FILE_DOWNLOAD',
+    IMAGE_DOWNLOAD: 'IMAGE_DOWNLOAD', //used with CDN
+    IMAGE_CLICK: 'IMAGE_CLICK',
+    DROPDOWN_CHANGE: 'DROPDOWN_CHANGE'
+});
+const channelActions = Object.freeze({
+    DOWNLOAD: 'DOWNLOAD',
+    VIEW: 'VIEW'
+});
+const channelActionsStatus = Object.freeze({
+    SUCCESS: 'SUCCESS',
+    FAILURE: 'FAILURE'
+});
+export function sendInteractionEvent(name: string, type: string, event: any, target?: any) {
+    const element = target || event.currentTarget;
+    let text: string = '';
+    let eventValue: string = '';
+    let channelAction: string = '';
+    let channelActionStatus: string = channelActionsStatus.SUCCESS;
+    const pageUrl = new URL(document.location.href);
+    const searchTitle = pageUrl.searchParams.get('keywords') || '';
+    if (
+        type === InteractionEventTypes.IMAGE_CLICK ||
+        type === InteractionEventTypes.FILE_DOWNLOAD
+    ) {
+        eventValue = element.href || element.src;
+        const url = new URL(
+            eventValue,
+            window.location.protocol + '//' + window.location.host
+        );
+        text = url.pathname.substr(url.pathname.lastIndexOf('/') + 1);
+        channelAction = channelActions.DOWNLOAD;
+    }
+    if (type === InteractionEventTypes.CLICK) {
+        eventValue = element.href || '';
+
+        let textNode = element;
+        if (element.firstChild.localName === 'slot') {
+            textNode = element.firstChild
+                .assignedNodes()
+                .find((child: any) => child.textContent !== '');
+        }
+        text = element.ariaLabel || textNode.textContent || textNode.innerText;
+
+        if (eventValue.includes('/view/')) {
+            type = InteractionEventTypes.IMAGE_CLICK;
+            const imgSrc = target.getElementsByTagName('img')[0].src;
+            channelAction = channelActions.VIEW;
+
+            if (imgSrc) {
+                const url = new URL(
+                    imgSrc,
+                    window.location.protocol + '//' + window.location.host
+                );
+                text = url.pathname.substr(url.pathname.lastIndexOf('/') + 1);
+            }
+        }
+        if (eventValue.includes('/cms/delivery/media')) {
+            type = InteractionEventTypes.IMAGE_DOWNLOAD;
+            channelAction = channelActions.DOWNLOAD;
+        }
+    }
+    if (type === InteractionEventTypes.DROPDOWN_CHANGE) {
+        text = element.id;
+        eventValue = element.value;
+    }
+    if (type === InteractionEventTypes.INPUT_CHANGE) {
+        text = element.ariaLabel;
+        eventValue = element.value;
+    }
+    let env = 'DEV';
+    if (window.location.host === 'architect.salesforce.com') {
+        env = 'PRD';
+    }
+    if (window.location.host.includes('site-staging')) {
+        env = 'STG';
+    }
+    text = text.replace(/^\s+|\s+$/g, '');
+    const pathNameArray = window.location.pathname.split('/');
+    const interaction = {
+        name: name,
+        eventType: 'websiteInteractionEvent',
+        topLevelLocation: pathNameArray[1] || '/',
+        secondLevelLocation: pathNameArray[2],
+        page: pathNameArray[3],
+        params: window.location.search || window.location.hash,
+        interactionType: type,
+        interactionElement: element
+            ? `${element.localName}/${element.name}/${text}`
+            : '',
+        eventValue: eventValue,
+        env: env,
+        gaClientId: localStorage.getItem('ga_client_id'),
+        elementId: element.id,
+        elementLabel: text,
+        channelAction: channelAction,
+        channelActionStatus: channelActionStatus,
+        testSend: env === 'PRD' ? 'false' : 'true',
+        pageId: pathNameArray[pathNameArray.length - 1],
+        pageTitle: document.title,
+        searchTitle: pathNameArray[1] === 'search' ? searchTitle : '',
+        domainName: window.location.hostname
+    };
+    (window as any).SalesforceInteractions?.sendEvent({
+        interaction: interaction
+    });
+}

package/src/modules/shared/i18n/i18n.ts

@@ -0,0 +1,74 @@
+/**
+ * @file Provides a localization service
+ */
+import i18n from 'i18n-js';
+
+export type Locale = 'de' | 'en' | 'es-MX' | 'fr' | 'ja' | 'pt-BR';
+
+type Labels = {
+    [key: string]: string;
+};
+
+type Locales = {
+    [locale in Locale]?: {
+        [key: string]: Labels | string;
+    };
+};
+
+type Scope = {
+    [scopeName: string]: Locales;
+};
+
+i18n.defaultLocale = 'en';
+i18n.fallbacks = true;
+
+export function toLocaleKey(value: string) {
+    return value.replace(
+        /([a-z]{2,3})(?:[_-])?([A-Z]{2})/g,
+        (_, lang, country) => `${lang}-${country.toUpperCase()}`
+    );
+}
+
+let guid = 0;
+
+/**
+ * @class I18n
+ * @example
+ * import { I18n } from "shared/i18n";
+ * import labels from "./locales";
+ * const i18n = new I18n({ scopeName: labels });
+ * i18n.t("en", "scopeName", "foo.bar");
+ */
+export class I18n {
+    private id = guid++;
+
+    constructor(scope?: Scope) {
+        if (scope) this.addScope(scope);
+    }
+
+    t(
+        locale: string,
+        scope: string,
+        key: string,
+        options?: any
+    ) {
+        // i18n-js is a singleton, so setting locale on each call is required to
+        // avoid overriding the locale of other components' call to this function
+        i18n.locale = locale;
+        return i18n.t(`${scope}_${this.id}.${key}`, options);
+    }
+
+    addScope(scope: Scope) {
+        for (const [scopeName, locales] of Object.entries(scope)) {
+            for (const [locale, labels] of Object.entries(locales)) {
+                // Modules can only export indentifiers, so we transform the key
+                // "esMX" => "es-MX"
+                const localeKey = toLocaleKey(locale);
+                i18n.translations[localeKey] = {
+                    ...i18n.translations[localeKey],
+                    [`${scopeName}_${this.id}`]: labels
+                };
+            }
+        }
+    }
+}

package/src/modules/shared/labels/__tests__/helpers.test.ts

@@ -0,0 +1,107 @@
+import { label } from '../helpers';
+import { LabelsDict } from '../types';
+
+const dict: LabelsDict = {
+    en: {
+        foo: 'foon',
+        points: '%{n} points',
+        attempts: '%{n} attempts'
+    },
+    es: {
+        foo: 'fol',
+        fooNoRegion: 'fooNoRegionValue',
+        faa: 'faa'
+    },
+    'es-MX': {
+        foo: 'foll',
+        points: '%{n} puntos'
+    }
+};
+
+describe('label', () => {
+    describe('default language', () => {
+        let lang = 'en';
+
+        describe('known keys', () => {
+            it('finds key and returns the value', () => {
+                expect(label(lang, dict, 'foo')).toEqual('foon');
+            });
+
+            it('finds key and substitutes values', () => {
+                expect(label(lang, dict, 'points', [300])).toEqual(
+                    '300 points'
+                );
+            });
+
+            it('finds key and substitutes values, and ignores overloading', () => {
+                expect(label(lang, dict, 'points', [300, 100])).toEqual(
+                    '300 points'
+                );
+            });
+
+            it('finds key and does not substitue missing values', () => {
+                expect(label(lang, dict, 'points')).toEqual('%{n} points');
+            });
+        });
+
+        describe('fallbacks', () => {
+            it('fails to find key and returns the label', () => {
+                expect(label(lang, dict, 'nf')).toEqual('nf');
+            });
+        });
+    });
+
+    describe('language with region', () => {
+        let lang = 'es-MX';
+
+        describe('known keys', () => {
+            it('finds key and returns the value', () => {
+                expect(label(lang, dict, 'foo')).toEqual('foll');
+            });
+
+            it('finds key and substitutes values', () => {
+                expect(label(lang, dict, 'points', [300])).toEqual(
+                    '300 puntos'
+                );
+            });
+        });
+
+        describe('fallbacks', () => {
+            it('fails to find key and falls back to language', () => {
+                expect(label(lang, dict, 'fooNoRegion')).toEqual(
+                    'fooNoRegionValue'
+                );
+            });
+
+            it('fails to find key and falls back to english', () => {
+                expect(label(lang, dict, 'attempts', [3])).toEqual(
+                    '3 attempts'
+                );
+            });
+
+            it('fails to find key and returns the label', () => {
+                expect(label(lang, dict, 'nf')).toEqual('nf');
+            });
+        });
+    });
+
+    describe('language not found', () => {
+        let lang = 'de';
+
+        describe('fallbacks', () => {
+            it('fails to find key and falls back to english', () => {
+                expect(label(lang, dict, 'faa')).toEqual('faa');
+            });
+
+            it('fails to find key and falls back to english', () => {
+                expect(label(lang, dict, 'attempts', [3])).toEqual(
+                    '3 attempts'
+                );
+            });
+
+            it('fails to find key and returns the label', () => {
+                expect(label(lang, dict, 'nf')).toEqual('nf');
+            });
+        });
+    });
+});

package/src/modules/shared/labels/__tests__/pointHelpers.test.ts

@@ -0,0 +1,33 @@
+import { pointLabel } from '../pointHelpers';
+
+describe('pointLabel', () => {
+    describe('en', () => {
+        let lang = 'en';
+
+        it('returns correct values', () => {
+            expect(pointLabel(lang, 0)).toEqual('0 Points');
+            expect(pointLabel(lang, 1)).toEqual('+1 Point');
+            expect(pointLabel(lang, 10)).toEqual('+10 Points');
+        });
+    });
+
+    describe('es-MX', () => {
+        let lang = 'es-MX';
+
+        it('returns correct values', () => {
+            expect(pointLabel(lang, 0)).toEqual('0 puntos');
+            expect(pointLabel(lang, 1)).toEqual('+1 punto');
+            expect(pointLabel(lang, 10)).toEqual('+10 puntos');
+        });
+    });
+
+    describe('fj', () => {
+        let lang = 'fj';
+
+        it('returns correct values', () => {
+            expect(pointLabel(lang, 0)).toEqual('0 Points');
+            expect(pointLabel(lang, 1)).toEqual('+1 Point');
+            expect(pointLabel(lang, 10)).toEqual('+10 Points');
+        });
+    });
+});