@salesforcedevs/arch-components 1.20.17-alpha1

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

@@ -0,0 +1,89 @@
+import { hoursMinutesLabel, hoursMinutesLeftLabel } from '../timeHelpers';
+
+describe('hoursMinutesLabel', () => {
+    let subject = hoursMinutesLabel;
+
+    describe('en', () => {
+        let lang = 'en';
+
+        it('returns correct values', () => {
+            expect(subject(lang, 0)).toEqual('');
+            expect(subject(lang, 1)).toEqual('~1 min');
+            expect(subject(lang, 10)).toEqual('~10 mins');
+            expect(subject(lang, 60)).toEqual('~1 hr');
+            expect(subject(lang, 61)).toEqual('~1 hr 1 min');
+            expect(subject(lang, 62)).toEqual('~1 hr 2 mins');
+            expect(subject(lang, 120)).toEqual('~2 hrs');
+            expect(subject(lang, 121)).toEqual('~2 hrs 1 min');
+            expect(subject(lang, 122)).toEqual('~2 hrs 2 mins');
+        });
+    });
+
+    describe('es-MX', () => {
+        let lang = 'es-MX';
+
+        it('falls back to es', () => {
+            expect(subject(lang, 0)).toEqual('');
+            expect(subject(lang, 1)).toEqual('~1 minuto');
+            expect(subject(lang, 10)).toEqual('~10 minutos');
+            expect(subject(lang, 60)).toEqual('~1 hora');
+            expect(subject(lang, 61)).toEqual('~1 hora 1 minuto');
+            expect(subject(lang, 62)).toEqual('~1 hora 2 minutos');
+            expect(subject(lang, 120)).toEqual('~2 horas');
+            expect(subject(lang, 121)).toEqual('~2 horas 1 minuto');
+            expect(subject(lang, 122)).toEqual('~2 horas 2 minutos');
+        });
+    });
+
+    describe('fj', () => {
+        let lang = 'fj';
+
+        it('falls back to en', () => {
+            expect(subject(lang, 1)).toEqual('~1 min');
+        });
+    });
+});
+
+describe('hoursMinutesLeftLabel', () => {
+    let subject = hoursMinutesLeftLabel;
+
+    describe('en', () => {
+        let lang = 'en';
+
+        it('returns correct values', () => {
+            expect(subject(lang, 0)).toEqual('');
+            expect(subject(lang, 1)).toEqual('~1 min left');
+            expect(subject(lang, 10)).toEqual('~10 mins left');
+            expect(subject(lang, 60)).toEqual('~1 hr left');
+            expect(subject(lang, 61)).toEqual('~1 hr 1 min left');
+            expect(subject(lang, 62)).toEqual('~1 hr 2 mins left');
+            expect(subject(lang, 120)).toEqual('~2 hrs left');
+            expect(subject(lang, 121)).toEqual('~2 hrs 1 min left');
+            expect(subject(lang, 122)).toEqual('~2 hrs 2 mins left');
+        });
+    });
+
+    describe('es-MX', () => {
+        let lang = 'es-MX';
+
+        it('falls back to es', () => {
+            expect(subject(lang, 0)).toEqual('');
+            expect(subject(lang, 1)).toEqual('~1 minuto restante');
+            expect(subject(lang, 10)).toEqual('~10 minutos restantes');
+            expect(subject(lang, 60)).toEqual('~1 hora restante');
+            expect(subject(lang, 61)).toEqual('~1 hora 1 minuto restantes');
+            expect(subject(lang, 62)).toEqual('~1 hora 2 minutos restantes');
+            expect(subject(lang, 120)).toEqual('~2 horas restantes');
+            expect(subject(lang, 121)).toEqual('~2 horas 1 minuto restantes');
+            expect(subject(lang, 122)).toEqual('~2 horas 2 minutos restantes');
+        });
+    });
+
+    describe('fj', () => {
+        let lang = 'fj';
+
+        it('falls back to en', () => {
+            expect(subject(lang, 1)).toEqual('~1 min left');
+        });
+    });
+});

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

@@ -0,0 +1,23 @@
+import { LabelsDict } from './types';
+
+const DEFAULT_LANGUAGE = 'en';
+
+export function label(
+    lang: string,
+    dict: LabelsDict,
+    labelKey: string,
+    values: (string | number)[] = []
+): string {
+    let [langBase] = lang.split('-');
+    let labels = {
+        ...dict[DEFAULT_LANGUAGE],
+        ...dict[langBase],
+        ...dict[lang]
+    };
+    let str = labels[labelKey];
+    if (str === undefined) return labelKey;
+    for (let val of values) {
+        str = str.replace('%{n}', val.toString());
+    }
+    return str;
+}

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

@@ -0,0 +1,47 @@
+import { LabelsDict } from './types';
+import { label } from './helpers';
+
+export const labels: LabelsDict = {
+    en: {
+        zero: '0 Points',
+        one: '+1 Point',
+        many: '+%{n} Points'
+    },
+    de: {
+        zero: '0 Punkte',
+        one: '+1 Punkt',
+        many: '+%{n} Punkte'
+    },
+    es: {
+        zero: '0 puntos',
+        one: '+1 punto',
+        many: '+%{n} puntos'
+    },
+    fr: {
+        zero: '0 point',
+        one: '+ 1 point',
+        many: '+ %{n} points'
+    },
+    ja: {
+        zero: '0 ポイント',
+        one: '+1 ポイント',
+        many: '+%{n} ポイント'
+    },
+    pt: {
+        zero: '0 pontos',
+        one: '+1 ponto',
+        many: '+%{n} pontos'
+    }
+};
+
+export function pointLabel(lang: string, points: number | undefined) {
+    if (points !== undefined) {
+        if (points === 0) {
+            return label(lang, labels, 'zero', [points]);
+        } else if (points === 1) {
+            return label(lang, labels, 'one', [points]);
+        } else {
+            return label(lang, labels, 'many', [points]);
+        }
+    }
+}

package/src/modules/shared/labels/timeHelpers.ts

@@ -0,0 +1,182 @@
+import { LabelsDict } from './types';
+import { label } from './helpers';
+
+const labels: LabelsDict = {
+    en: {
+        minute: '~%{n} min',
+        minutes: '~%{n} mins',
+        hour: '~%{n} hr',
+        hours: '~%{n} hrs',
+        hourMinute: '~%{n} hr %{n} min',
+        hourMinutes: '~%{n} hr %{n} mins',
+        hoursMinute: '~%{n} hrs %{n} min',
+        hoursMinutes: '~%{n} hrs %{n} mins',
+
+        minuteLeft: '~%{n} min left',
+        minutesLeft: '~%{n} mins left',
+        hourLeft: '~%{n} hr left',
+        hoursLeft: '~%{n} hrs left',
+        hourMinuteLeft: '~%{n} hr %{n} min left',
+        hourMinutesLeft: '~%{n} hr %{n} mins left',
+        hoursMinuteLeft: '~%{n} hrs %{n} min left',
+        hoursMinutesLeft: '~%{n} hrs %{n} mins left'
+    },
+    es: {
+        minute: '~%{n} minuto',
+        minutes: '~%{n} minutos',
+        hour: '~%{n} hora',
+        hours: '~%{n} horas',
+        hourMinute: '~%{n} hora %{n} minuto',
+        hourMinutes: '~%{n} hora %{n} minutos',
+        hoursMinute: '~%{n} horas %{n} minuto',
+        hoursMinutes: '~%{n} horas %{n} minutos',
+
+        minuteLeft: '~%{n} minuto restante',
+        minutesLeft: '~%{n} minutos restantes',
+        hourLeft: '~%{n} hora restante',
+        hoursLeft: '~%{n} horas restantes',
+        hourMinuteLeft: '~%{n} hora %{n} minuto restantes',
+        hourMinutesLeft: '~%{n} hora %{n} minutos restantes',
+        hoursMinuteLeft: '~%{n} horas %{n} minuto restantes',
+        hoursMinutesLeft: '~%{n} horas %{n} minutos restantes'
+    },
+    de: {
+        minute: '~%{n} min',
+        minutes: '~%{n} min',
+        hour: '~%{n} Std',
+        hours: '~%{n} Std',
+        hourMinute: '~%{n} Std %{n} min',
+        hourMinutes: '~%{n} Std %{n} min',
+        hoursMinute: '~%{n} Std %{n} min',
+        hoursMinutes: '~%{n} Std %{n} min',
+
+        minuteLeft: '~%{n} min verbleibt',
+        minutesLeft: '~%{n} min verbleiben',
+        hourLeft: '~%{n} Std verbleibt',
+        hoursLeft: '~%{n} Std verbleiben',
+        hourMinuteLeft: '~%{n} Std %{n} min verbleiben',
+        hourMinutesLeft: '~%{n} Std %{n} min verbleiben',
+        hoursMinuteLeft: '~Noch %{n} Stunden %{n} Minute',
+        hoursMinutesLeft: '~%{n} Std %{n} min verbleiben'
+    },
+    fr: {
+        minute: '%{n} min',
+        minutes: '%{n} min',
+        hour: '%{n} h',
+        hours: '%{n} h',
+        hourMinute: '%{n} h %{n} min',
+        hourMinutes: '%{n} h %{n} min',
+        hoursMinute: '%{n} h %{n} min',
+        hoursMinutes: '%{n} h %{n} min',
+
+        minuteLeft: 'Il reste %{n} min',
+        minutesLeft: 'Il reste %{n} min',
+        hourLeft: 'Il reste %{n} h',
+        hoursLeft: 'Il reste %{n} h',
+        hourMinuteLeft: 'Il reste %{n} h %{n} min',
+        hourMinutesLeft: 'Il reste %{n} h %{n} min',
+        hoursMinuteLeft: 'Il reste %{n} h %{n} min',
+        hoursMinutesLeft: 'Il reste %{n} h %{n} min'
+    },
+    ja: {
+        minute: '%{n} 分',
+        minutes: '%{n} 分',
+        hour: '%{n} 時間',
+        hours: '%{n} 時間',
+        hourMinute: '%{n} 時間 %{n} 分',
+        hourMinutes: '%{n} 時間 %{n} 分',
+        hoursMinute: '%{n} 時間 %{n} 分',
+        hoursMinutes: '%{n} 時間 %{n} 分',
+
+        minuteLeft: '残り %{n} 分',
+        minutesLeft: '残り %{n} 分',
+        hourLeft: '残り %{n} 時間',
+        hoursLeft: '残り %{n} 時間',
+        hourMinuteLeft: '残り %{n} 時間 %{n} 分',
+        hourMinutesLeft: '残り %{n} 時間 %{n} 分',
+        hoursMinuteLeft: '残り %{n} 時間 %{n} 分',
+        hoursMinutesLeft: '残り %{n} 時間 %{n} 分'
+    },
+    pt: {
+        minute: '~%{n}min',
+        minutes: '~%{n}min',
+        hour: '~%{n}h',
+        hours: '~%{n}h',
+        hourMinute: '~%{hours}h%{minutes}min',
+        hourMinutes: '~%{hours}h%{minutes}min',
+        hoursMinute: '~%{hours}h%{minutes}min',
+        hoursMinutes: '~%{hours}h%{minutes}min',
+
+        minuteLeft: '~%{n} minuto restantes',
+        minutesLeft: '~%{n} minutos restantes',
+        hourLeft: '~%{n}h restante',
+        hoursLeft: '~%{n}h restantes',
+        hourMinuteLeft: '~%{n}h%{n}min restante',
+        hourMinutesLeft: '~%{n}h%{n}min restantes',
+        hoursMinuteLeft: '~%{n}h%{n}min restante',
+        hoursMinutesLeft: '~%{n}h%{n}min restantes'
+    }
+};
+
+function hoursMinutesLabelArgs(timeInMinutes: number) {
+    const hrs = Math.floor(timeInMinutes / 60);
+    const mins = timeInMinutes % 60;
+
+    let key = '';
+    let values = [];
+
+    if (hrs > 0) {
+        values.push(hrs);
+    }
+
+    values.push(mins);
+
+    if (hrs === 0 && mins === 0) {
+        key = 'minutes';
+    }
+    if (hrs === 0 && mins === 1) {
+        key = 'minute';
+    }
+    if (hrs === 0 && mins > 1) {
+        key = 'minutes';
+    }
+    if (hrs === 1 && mins === 0) {
+        key = 'hour';
+    }
+    if (hrs === 1 && mins === 1) {
+        key = 'hourMinute';
+    }
+    if (hrs === 1 && mins > 1) {
+        key = 'hourMinutes';
+    }
+    if (hrs > 1 && mins === 0) {
+        key = 'hours';
+    }
+    if (hrs > 1 && mins === 1) {
+        key = 'hoursMinute';
+    }
+    if (hrs > 1 && mins > 1) {
+        key = 'hoursMinutes';
+    }
+
+    return {
+        key,
+        values
+    };
+}
+
+export function hoursMinutesLabel(lang: string, timeInMinutes: number) {
+    let labelInfo = hoursMinutesLabelArgs(timeInMinutes);
+
+    return timeInMinutes
+        ? label(lang, labels, `${labelInfo.key}`, labelInfo.values)
+        : '';
+}
+
+export function hoursMinutesLeftLabel(lang: string, timeInMinutes: number) {
+    let labelInfo = hoursMinutesLabelArgs(timeInMinutes);
+
+    return timeInMinutes
+        ? label(lang, labels, `${labelInfo.key}Left`, labelInfo.values)
+        : '';
+}

package/src/modules/shared/labels/types.d.ts

@@ -0,0 +1,5 @@
+export type LabelsDict = {
+    [key: string]: {
+        [key: string]: string;
+    };
+};

package/src/modules/shared/logger/logger.ts

@@ -0,0 +1,33 @@
+/**
+ * @file Utility for logging messages to the console
+ * @example
+ * logger.warn("oops!");
+ */
+
+type LoggerOptions = {
+    prefix: string;
+};
+
+export class Logger {
+    constructor(opts: Partial<LoggerOptions> = {}) {
+        this.options = { ...this.defaultOptions, ...opts };
+    }
+
+    private defaultOptions = {
+        prefix: '[th-components]: '
+    } as LoggerOptions;
+
+    private options: LoggerOptions = this.defaultOptions;
+
+    warn(msg: string) {
+        console.warn(`${this.options.prefix}${msg}`.trim());
+    }
+
+    error(msg: string) {
+        if (__DEBUG__) {
+            console.error(`${this.options.prefix}${msg}`.trim());
+        }
+    }
+}
+
+export default new Logger();

package/src/modules/shared/menu/menu.ts

@@ -0,0 +1,239 @@
+import { ShadowRootTheGoodPart } from 'lwc';
+
+//import { getFocusableElements } from 'shared/a11y';
+
+type Input = {
+    onChange: (state: MenuState) => void;
+    shadowRoot: ShadowRootTheGoodPart;
+};
+
+export type MenuState = {
+    count: number;
+    open: boolean;
+    selectedIndex: number;
+    setup: boolean;
+};
+
+export type Selector = 'trigger' | 'menu' | 'item';
+
+const SELECTOR_TRIGGER = 'trigger';
+const SELECTOR_MENU = 'menu';
+const SELECTOR_ITEM = 'item';
+
+export function getSelector(selector: Selector) {
+    return `[data-menu="${selector}"]`;
+}
+
+export class Menu {
+    private _state: MenuState = {
+        count: 0,
+        open: false,
+        selectedIndex: -1,
+        setup: false
+    };
+    private get state(): MenuState {
+        return this._state;
+    }
+    private set state(value: MenuState) {
+        this._state = value;
+        this.update();
+        this.input.onChange(this._state);
+    }
+
+    constructor(private input: Input) {
+        input.onChange(this.state);
+    }
+
+    private setState(
+        nextState:
+            | Partial<MenuState>
+            | ((state: MenuState) => Partial<MenuState>)
+    ) {
+        let { state } = this;
+        this.state = {
+            ...state,
+            ...(typeof nextState === 'function' ? nextState(state) : nextState)
+        };
+    }
+
+    renderedCallback() {
+        if (!this.state.setup) {
+            let $trigger = this.getElement(SELECTOR_TRIGGER)!;
+            let $menu = this.getElement(SELECTOR_MENU)!;
+            $trigger.addEventListener('click', this.onTriggerClick as EventListener);
+            $trigger.addEventListener('keydown', this.onTriggerKeyDown as EventListener);
+            $menu.addEventListener('blur', this.onMenuBlur as EventListener);
+            $menu.addEventListener('click', this.onMenuClick as EventListener);
+            $menu.addEventListener('keydown', this.onMenuKeyDown as EventListener);
+            this._state = { ...this.state, setup: true };
+        }
+        // Bypass setState to avoid an infinite loop (setState calls onChange)
+        this._state = {
+            ...this.state,
+            count: this.input.shadowRoot.querySelectorAll(
+                getSelector(SELECTOR_ITEM)
+            ).length
+        };
+        this.update();
+    }
+
+    disconnectedCallback() {
+        let $trigger = this.getElement(SELECTOR_TRIGGER)!;
+        let $menu = this.getElement(SELECTOR_MENU)!;
+        $trigger.removeEventListener('click', this.onTriggerClick as EventListener);
+        $trigger.removeEventListener('keydown', this.onTriggerKeyDown as EventListener);
+        $menu.removeEventListener('blur', this.onMenuBlur as EventListener);
+        $menu.removeEventListener('click', this.onMenuClick as EventListener);
+        $menu.removeEventListener('keydown', this.onMenuKeyDown as EventListener);
+    }
+
+    open() {
+        this.setState({
+            open: true,
+            selectedIndex: 0
+        });
+        if (this.state.setup) {
+            (this.getElement(SELECTOR_MENU) as HTMLElement)?.focus();
+        }
+    }
+
+    close() {
+        this.setState({ open: false });
+    }
+
+    private getElement(selector: Selector) {
+        return this.input.shadowRoot.querySelector(getSelector(selector));
+    }
+
+    private onTriggerClick = (e: MouseEvent) => {
+        if (this.state.open) this.close();
+        else this.open();
+    };
+
+    private onTriggerKeyDown = (e: KeyboardEvent) => {
+        switch (e.key) {
+            case 'Enter':
+            case 'Space':
+            case 'ArrowDown':
+                this.open();
+                break;
+        }
+    };
+
+    private onMenuClick = (e: MouseEvent) => {};
+
+    private onMenuBlur = (e: FocusEvent) => {
+        setTimeout(() => {
+            let $active = this.input.shadowRoot.activeElement;
+            let $menu = this.getElement(SELECTOR_MENU)!;
+            if ($menu === $active || $menu.contains($active)) return;
+            this.setState({ open: false });
+        });
+    };
+
+    private onMenuKeyDown = (e: KeyboardEvent) => {
+        switch (e.key) {
+            case 'ArrowUp':
+                this.setState((state) => {
+                    let { selectedIndex } = state;
+                    selectedIndex--;
+                    if (selectedIndex < 0) selectedIndex = state.count - 1;
+                    return { selectedIndex };
+                });
+                break;
+            case 'ArrowDown':
+                this.setState((state) => {
+                    let { selectedIndex } = state;
+                    selectedIndex++;
+                    if (selectedIndex === state.count) selectedIndex = 0;
+                    return { selectedIndex };
+                });
+                break;
+            case 'Enter':
+                if (!this.state.open) break;
+                this.close();
+                this.select();
+                break;
+            case 'Escape':
+            case 'Esc': {
+                this.close();
+    /*             let [element] = getFocusableElements(
+                    this.getElement(SELECTOR_TRIGGER)!
+                );
+                if (element) element.focus(); */
+                break;
+            }
+        }
+    };
+
+    private select() {
+        let element = this.input.shadowRoot.querySelectorAll(
+            getSelector(SELECTOR_ITEM)
+        )[this.state.selectedIndex] as HTMLElement | undefined;
+        if (element) element.click();
+    }
+
+    private setTriggerAttributes() {
+        if (!this.state.setup) {
+            return;
+        }
+        let $trigger = this.getElement(SELECTOR_TRIGGER)!;
+        let $menu = this.getElement(SELECTOR_MENU)!;
+        $trigger.setAttribute('aria-controls', $menu.getAttribute('id') || '');
+        $trigger.setAttribute('aria-expanded', String(this.state.open));
+        $trigger.setAttribute('aria-haspopup', 'true');
+        $trigger.setAttribute('role', 'button');
+    }
+
+    private setMenuAttributes() {
+        if (!this.state.setup) {
+            return;
+        }
+
+        let $menu = this.getElement(SELECTOR_MENU)!;
+        let $activeDecendant = this.input.shadowRoot.querySelectorAll(
+            getSelector(SELECTOR_ITEM)
+        )[this.state.selectedIndex] as HTMLElement | undefined;
+        $menu.setAttribute(
+            'aria-activedescendant',
+            $activeDecendant ? $activeDecendant.getAttribute('id') || '' : ''
+        );
+        $menu.setAttribute('aria-hidden', String(!this.state.open));
+        ($menu as HTMLElement).style.zIndex = this.state.open ? '100' : '';
+        ($menu as HTMLElement).style.display = this.state.open ? 'block' : 'none';
+        if (this.state.open) {
+            $menu.setAttribute('tabindex', '0');
+        } else {
+            $menu.removeAttribute('tabindex');
+        }
+        this.input.shadowRoot.querySelectorAll('ui,li').forEach((node) => {
+            let element = node as HTMLElement;
+            element.setAttribute('role', 'presentation');
+        });
+        this.input.shadowRoot
+            .querySelectorAll(getSelector(SELECTOR_ITEM))
+            .forEach((node) => {
+                let element = node as HTMLElement;
+                element.setAttribute('tabindex', '-1');
+            });
+    }
+
+    private setMenuItemsAttributes() {
+        this.input.shadowRoot
+            .querySelectorAll(getSelector(SELECTOR_ITEM))
+            .forEach((node, i) => {
+                let element = node as HTMLElement;
+                element.setAttribute(
+                    'data-active',
+                    String(i === this.state.selectedIndex)
+                );
+                element.setAttribute('role', 'menuitem');
+            });
+    }
+
+    private update() {
+        this.setTriggerAttributes();
+        this.setMenuAttributes();
+        this.setMenuItemsAttributes();
+    }
+}

package/src/modules/shared/overflow/__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);
+    });
+});