@salesforcedevs/arch-components 1.20.17-alpha4 → 1.20.17-alpha5

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

@@ -1,154 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,71 +0,0 @@
-/**
- * @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

@@ -1,52 +0,0 @@
-export function csrfHeader(token: string = '') {
-    return {
-        'X-CSRF-Token': token
-    };
-}
-
-export function fetch(url: string, { ...options }: globalThis.RequestInit = {}) {
-    return window.fetch(url, {
-        ...options,
-        credentials: 'same-origin'
-    });
-}
-
-export function fetchJSON<T>(
-    url: string,
-    { headers, ...options }: globalThis.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 }: globalThis.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

@@ -1,141 +0,0 @@
-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 hashValue = 0;
-    for (let i = 0; i < value.length; i++) {
-        const char = value.charCodeAt(i);
-        hashValue = (hashValue << 5) - hashValue + char;
-        hashValue |= 0;
-    }
-    return hashValue;
-}
-
-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 = '';
-    const 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

@@ -1,74 +0,0 @@
-/**
- * @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

@@ -1,107 +0,0 @@
-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', () => {
-        const 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', () => {
-        const 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', () => {
-        const 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

@@ -1,33 +0,0 @@
-import { pointLabel } from '../pointHelpers';
-
-describe('pointLabel', () => {
-    describe('en', () => {
-        const 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', () => {
-        const 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', () => {
-        const 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');
-        });
-    });
-});