@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/contribution-heatmap/index.ts

@@ -0,0 +1,348 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import '~/components/tooltip/scss/index.scss';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [CONTRIBUTION_HEATMAP_CELL]?: Attributes;
+    data: Day[];
+    label?: string;
+    onscroll?: never;
+    state?: State;
+    thresholds?: number[];
+};
+
+type Cell = {
+    date: Date;
+    label: string;
+    level: number;
+    tip: string;
+};
+
+// `level` (0 to 4) overrides the thresholds, for data that arrives already bucketed, like GitHub's own graph.
+type Day = {
+    count: number;
+    date: string;
+    level?: number;
+};
+
+type State = {
+    index: number;
+};
+
+
+const CELL = 10;
+
+const CONTRIBUTION_HEATMAP_CELL = Symbol.for('@esportsplus/ui/contribution-heatmap.cell');
+
+const DAYS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+
+const LEVELS = [0, 1, 2, 3, 4];
+
+const LONG_DATE = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', timeZone: 'UTC', weekday: 'long', year: 'numeric' });
+
+const MONTH = new Intl.DateTimeFormat('en-US', { month: 'short', timeZone: 'UTC' });
+
+const NUMBER = new Intl.NumberFormat('en-US');
+
+const PITCH = 13;
+
+const SHORT_DATE = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'short', timeZone: 'UTC' });
+
+const THRESHOLDS = [1, 4, 7, 10];
+
+
+function levelOf(count: number, thresholds: number[]) {
+    let level = 0;
+
+    for (let i = 0, n = thresholds.length; i < n; i++) {
+        if (count >= thresholds[i]) {
+            level++;
+        }
+    }
+
+    return level;
+}
+
+function phrase(count: number) {
+    if (count === 0) {
+        return 'No contributions';
+    }
+
+    return `${NUMBER.format(count)} contribution${count === 1 ? '' : 's'}`;
+}
+
+
+function legend(attributes: Attributes = {}) {
+    return html`
+        <div aria-hidden='true' class='contribution-heatmap-legend' ${attributes}>
+            <span>Less</span>
+            ${LEVELS.map((level) => html`<span class='contribution-heatmap-swatch' data-level='${level}'></span>`)}
+            <span>More</span>
+        </div>
+    `;
+}
+
+function template(this: { attributes?: Partial<A> } | void, { data, label, state = reactive({ index: data.length - 1 }), thresholds = THRESHOLDS, ...attributes }: A) {
+    let cells: Cell[] = [],
+        focusable: HTMLElement | undefined,
+        grid: HTMLElement | undefined,
+        months: { column: number; name: string }[] = [],
+        observer: IntersectionObserver | undefined,
+        tip: HTMLElement | undefined,
+        weeks = Math.ceil(data.length / 7),
+        wrap: HTMLElement | undefined;
+
+    for (let i = 0, n = data.length; i < n; i++) {
+        let day = data[i],
+            date = new Date(`${day.date}T00:00:00Z`);
+
+        cells.push({
+            date,
+            label: `${phrase(day.count)} on ${LONG_DATE.format(date)}`,
+            level: day.level ?? levelOf(day.count, thresholds),
+            tip: `${phrase(day.count)} on ${SHORT_DATE.format(date)}`
+        });
+
+        // A month is labelled at the column holding its 1st; labels closer than 3 columns would collide.
+        if (date.getUTCDate() !== 1) {
+            continue;
+        }
+
+        let column = Math.floor(i / 7);
+
+        if (months.length && column - months[months.length - 1].column < 3) {
+            months.pop();
+        }
+
+        months.push({ column, name: MONTH.format(date) });
+    }
+
+    function cellFrom(target: EventTarget | null) {
+        return (target as HTMLElement | null)?.closest<HTMLElement>('[data-i]') ?? null;
+    }
+
+    function hide() {
+        tip?.classList.remove('--active');
+    }
+
+    function move(next: number) {
+        let index = Math.min(Math.max(next, 0), data.length - 1);
+
+        state.index = index;
+        grid?.querySelector<HTMLElement>(`[data-i="${index}"]`)?.focus();
+    }
+
+    // Roving tabindex: the grid is one tab stop and only the two cells whose tabindex changed are touched.
+    function rove(index: number) {
+        let element = grid?.querySelector<HTMLElement>(`[data-i="${index}"]`);
+
+        if (!element || element === focusable) {
+            return;
+        }
+
+        if (focusable) {
+            focusable.tabIndex = -1;
+        }
+
+        element.tabIndex = 0;
+        focusable = element;
+    }
+
+    // Moved and rewritten directly, so sweeping across hundreds of cells never re-renders them. It jumps with
+    // no transition: a tooltip that glides between cells lags behind the pointer.
+    function show(element: HTMLElement) {
+        let cell = cells[Number(element.dataset.i)],
+            message = tip?.firstElementChild as HTMLElement | null;
+
+        if (!cell || !message || !tip || !wrap) {
+            return;
+        }
+
+        message.textContent = cell.tip;
+
+        let box = wrap.getBoundingClientRect(),
+            rect = element.getBoundingClientRect(),
+            // Undoes any scale an ancestor applies.
+            scale = wrap.offsetWidth / box.width || 1,
+            width = message.offsetWidth,
+            x = Math.min(Math.max((rect.left - box.left + rect.width / 2) * scale, width / 2), wrap.offsetWidth - width / 2),
+            y = (rect.top - box.top) * scale;
+
+        tip.style.transform = `translate(${x}px, ${y}px)`;
+        tip.classList.add('--active');
+    }
+
+    let stop = effect(() => {
+        rove(state.index);
+    });
+
+    onCleanup(() => {
+        observer?.disconnect();
+        stop();
+    });
+
+    return html`
+        <div
+            class='contribution-heatmap'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                onrender: (element: HTMLElement) => {
+                    wrap = element;
+                }
+            }}
+        >
+            <div aria-hidden='true' class='contribution-heatmap-days'>
+                ${DAYS.map((day) => html`<span>${day}</span>`)}
+            </div>
+
+            <div
+                class='contribution-heatmap-scroll'
+                ${{
+                    onconnect: (element: HTMLElement) => {
+                        // On a narrow screen, open on the most recent weeks.
+                        element.scrollLeft = element.scrollWidth;
+                    },
+                    onscroll: hide
+                }}
+            >
+                <div class='contribution-heatmap-body' style='width: ${weeks * PITCH - (PITCH - CELL)}px'>
+                    <div aria-hidden='true' class='contribution-heatmap-months'>
+                        ${months.map((month) => html`<span style='left: ${month.column * PITCH}px'>${month.name}</span>`)}
+                    </div>
+
+                    <div
+                        aria-readonly='true'
+                        class='contribution-heatmap-grid'
+                        role='grid'
+                        ${{
+                            'aria-label': label ?? `Contributions over the last ${weeks} weeks`,
+                            onconnect: (element: HTMLElement) => {
+                                grid = element;
+                                rove(state.index);
+                                observer = new IntersectionObserver((entries) => {
+                                    if (!entries.some((entry) => entry.isIntersecting)) {
+                                        return;
+                                    }
+
+                                    observer?.disconnect();
+                                    element.classList.add('--shown');
+                                }, { threshold: 0.4 });
+                                observer.observe(element);
+                            },
+                            onfocusin: (e: FocusEvent) => {
+                                let element = cellFrom(e.target);
+
+                                if (!element) {
+                                    return;
+                                }
+
+                                state.index = Number(element.dataset.i);
+                                show(element);
+                            },
+                            onfocusout: (e: FocusEvent) => {
+                                if (!grid?.contains(e.relatedTarget as Node | null)) {
+                                    hide();
+                                }
+                            },
+                            onkeydown: (e: KeyboardEvent) => {
+                                let element = cellFrom(e.target);
+
+                                if (!element) {
+                                    return;
+                                }
+
+                                if (e.key === 'Escape') {
+                                    hide();
+                                    return;
+                                }
+
+                                let i = Number(element.dataset.i),
+                                    day = i % 7,
+                                    next = ({
+                                        ArrowDown: day < 6 ? i + 1 : i,
+                                        ArrowLeft: i - 7,
+                                        ArrowRight: i + 7,
+                                        ArrowUp: day > 0 ? i - 1 : i,
+                                        End: (weeks - 1) * 7 + day,
+                                        Home: day
+                                    } as Record<string, number>)[e.key];
+
+                                if (next === undefined) {
+                                    return;
+                                }
+
+                                e.preventDefault();
+                                move(next);
+                            },
+                            onpointerdown: (e: PointerEvent) => {
+                                let element = cellFrom(e.target);
+
+                                if (e.pointerType === 'touch' && element) {
+                                    show(element);
+                                }
+                            },
+                            onpointerleave: (e: PointerEvent) => {
+                                if (e.pointerType !== 'touch') {
+                                    hide();
+                                }
+                            },
+                            onpointerover: (e: PointerEvent) => {
+                                let element = cellFrom(e.target);
+
+                                if (e.pointerType !== 'touch' && element) {
+                                    show(element);
+                                }
+                            }
+                        }}
+                    >
+                        ${DAYS.map((_, day) => html`
+                            <div class='contribution-heatmap-row' role='row'>
+                                ${Array.from({ length: weeks }, (_, week) => {
+                                    let i = week * 7 + day,
+                                        cell = cells[i];
+
+                                    if (!cell) {
+                                        return html`<div class='contribution-heatmap-cell contribution-heatmap-cell--empty' role='presentation'></div>`;
+                                    }
+
+                                    return html`
+                                        <div
+                                            aria-label='${cell.label}'
+                                            class='contribution-heatmap-cell'
+                                            data-i='${i}'
+                                            data-level='${cell.level}'
+                                            role='gridcell'
+                                            style='--column: ${week}'
+                                            tabindex='-1'
+                                            ${this?.attributes?.[CONTRIBUTION_HEATMAP_CELL]}
+                                            ${attributes[CONTRIBUTION_HEATMAP_CELL]}
+                                        ></div>
+                                    `;
+                                })}
+                            </div>
+                        `)}
+                    </div>
+                </div>
+            </div>
+
+            <div
+                aria-hidden='true'
+                class='contribution-heatmap-tip tooltip'
+                ${{
+                    onrender: (element: HTMLElement) => {
+                        tip = element;
+                    }
+                }}
+            >
+                <span class='tooltip-message tooltip-message--n'></span>
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { cell: CONTRIBUTION_HEATMAP_CELL, legend } as const);
+export type { Day as ContributionHeatmapDay, State as ContributionHeatmapState };

package/src/components/contribution-heatmap/scss/index.scss

@@ -0,0 +1,151 @@
+@use 'variables';
+
+// A grid rather than flex so the weeks column adds nothing to the min-content width: the heatmap only
+// scrolls when the screen is genuinely too narrow for the year.
+.contribution-heatmap {
+    color: var(--color);
+    display: grid;
+    font-size: var(--font-size);
+    grid-template-columns: auto minmax(0, max-content);
+    max-width: 100%;
+    position: relative;
+    width: fit-content;
+
+
+    // Settles from 0.6, not 0: a square growing from nothing reads as a pop, one settling from slightly small
+    // reads as arriving.
+    &-cell {
+        background: var(--level-0);
+        border-radius: var(--cell-radius);
+        flex-shrink: 0;
+        height: var(--cell-size);
+        opacity: 0;
+        outline: none;
+        scale: 0.6;
+        transition:
+            opacity var(--transition-duration) var(--transition-timing-function) calc(var(--column) * var(--stagger)),
+            scale var(--transition-duration) var(--transition-timing-function) calc(var(--column) * var(--stagger));
+        width: var(--cell-size);
+
+        // Rings the hovered day outside itself, so it shows on the darkest level too.
+        &:hover {
+            outline: 1px solid var(--hover-color);
+            outline-offset: 1px;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-color);
+            outline-offset: 1px;
+        }
+
+        &--empty {
+            background: none;
+        }
+
+        @for $level from 1 through 4 {
+            &[data-level='#{$level}'] {
+                background: var(--level-#{$level});
+            }
+        }
+    }
+
+    // Stays put while the weeks scroll, so rows keep their names.
+    &-days {
+        display: flex;
+        flex-direction: column;
+        margin-inline-end: 5px;
+        margin-top: 23px;
+
+        span {
+            height: var(--pitch);
+            line-height: var(--cell-size);
+        }
+    }
+
+    &-grid {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--pitch) - var(--cell-size));
+
+        &.--shown .contribution-heatmap-cell {
+            opacity: 1;
+            scale: 1;
+        }
+    }
+
+    &-months {
+        height: 20px;
+        position: relative;
+
+        span {
+            line-height: 1;
+            position: absolute;
+            top: 0;
+        }
+    }
+
+    &-row {
+        display: flex;
+        gap: calc(var(--pitch) - var(--cell-size));
+    }
+
+    // Room on every side, so focus and hover rings aren't clipped by the scroll container.
+    &-scroll {
+        min-width: 0;
+        overflow-x: auto;
+        overscroll-behavior-x: contain;
+        padding: 3px;
+    }
+
+    // Qualified by the root so it beats the reused tooltip's own position and stacking.
+    & &-tip {
+        cursor: auto;
+        height: 0;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 0;
+        z-index: 10;
+
+        &.--active .tooltip-message {
+            --transition-duration: 0.1s;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-cell {
+            scale: 1;
+            transition: none;
+        }
+    }
+}
+
+.contribution-heatmap-legend {
+    align-items: center;
+    color: var(--color);
+    display: flex;
+    font-size: var(--font-size);
+    gap: 4px;
+
+    > span:first-child {
+        margin-inline-end: 4px;
+    }
+
+    > span:last-child {
+        margin-inline-start: 4px;
+    }
+}
+
+.contribution-heatmap-swatch {
+    border-radius: var(--cell-radius);
+    height: var(--cell-size);
+    width: var(--cell-size);
+
+    @for $level from 0 through 4 {
+        &[data-level='#{$level}'] {
+            background: var(--level-#{$level});
+        }
+    }
+}

package/src/components/contribution-heatmap/scss/variables.scss

@@ -0,0 +1,39 @@
+.contribution-heatmap,
+.contribution-heatmap-legend {
+    --cell-radius: var(--border-radius-100);
+    --cell-size: 10px;
+    --color: var(--color-text-300);
+    --focus-color: var(--color-text-500);
+    --font-size: var(--font-size-300);
+    --hover-color: color-mix(in oklab, var(--color-text-500) 50%, transparent);
+    // One hue, light to dark. Level 0 stays faintly visible so empty days still read as part of the grid.
+    --level-0: color-mix(in oklab, var(--level-color) 7%, transparent);
+    --level-1: color-mix(in oklab, var(--level-color) 25%, transparent);
+    --level-2: color-mix(in oklab, var(--level-color) 45%, transparent);
+    --level-3: color-mix(in oklab, var(--level-color) 70%, transparent);
+    --level-4: var(--level-color);
+    --level-color: var(--color-text-500);
+    --pitch: 13px;
+    // Per column, so the whole year sweeps in under half a second and reads as one gesture.
+    --stagger: 8ms;
+    --transition-duration: 0.3s;
+    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.contribution-heatmap--blue,
+.contribution-heatmap-legend--blue {
+    --level-color: var(--color-blue-400);
+}
+
+.contribution-heatmap-tip .tooltip-message {
+    --border-radius: var(--border-radius-300);
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-500);
+    --offset: 0px;
+    --padding-horizontal: var(--size-100);
+    --padding-vertical: calc(var(--size-100) / 2);
+    --spacer: 6px;
+    // Appears in 100ms and leaves in 75ms, so it never lingers.
+    --transition-duration: 75ms;
+    --transition-timing-function: ease-out;
+}

package/src/components/counter/index.ts

@@ -6,11 +6,13 @@ import './scss/index.scss';
 let formatters: Record<string, Intl.NumberFormat> = {};
 
 
-export default ({ currency, decimals = 2, delay, max, state: api = reactive({ value: -1 }), suffix, value, ...attributes }: Attributes & {
+export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state: api = reactive({ value: -1 }), suffix, value, ...attributes }: Attributes & {
     currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
     decimals?: number;
     delay?: number;
     max?: number;
+    prefix?: string;
+    startOnView?: boolean;
     state?: { value: number },
     suffix?: string;
     value: number;
@@ -22,7 +24,8 @@ export default ({ currency, decimals = 2, delay, max, state: api = reactive({ va
                 currency: currency || 'USD'
             }),
         animation = reactive({ started: false }),
-        render = reactive([] as { digit: boolean; value: string }[]),
+        observer: IntersectionObserver | undefined,
+        render = reactive([] as { digit: boolean; index: number; roll: number; value: string }[]),
         stop = effect(() => {
             let target = api.value === -1 ? value : api.value,
                 started = animation.started;
@@ -42,14 +45,22 @@ export default ({ currency, decimals = 2, delay, max, state: api = reactive({ va
 
             values = values.split('');
 
+            if (prefix) {
+                values.unshift(...prefix.split(''));
+            }
+
             if (suffix) {
                 values.push(' ', ...suffix.split(''));
             }
 
             untrack(() => {
+                let remaining = values.filter((value: string) => !isNaN(parseInt(value, 10))).length;
+
                 for (let i = 0, n = values.length; i < n; i++) {
-                    let value = values[i],
-                        digit = !isNaN(parseInt(value, 10));
+                    let previous = render[i],
+                        value = values[i],
+                        digit = !isNaN(parseInt(value, 10)),
+                        index = digit ? --remaining : 0;
 
                     if (digit && (!started || padding > 0)) {
                         padding--;
@@ -57,11 +68,16 @@ export default ({ currency, decimals = 2, delay, max, state: api = reactive({ va
                     }
 
                     // Preserve the track so CSS can transition between digit positions.
-                    if (render[i]?.digit === digit) {
-                        render[i].value = value;
+                    if (previous?.digit === digit) {
+                        previous.index = index;
+
+                        if (previous.value !== value) {
+                            previous.roll = previous.roll === 1 ? 2 : 1;
+                            previous.value = value;
+                        }
                     }
                     else {
-                        let character = reactive({ digit, value });
+                        let character = reactive({ digit, index, roll: 0, value });
 
                         render[i] = character;
                     }
@@ -72,15 +88,41 @@ export default ({ currency, decimals = 2, delay, max, state: api = reactive({ va
                 }
             });
         }),
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    function start() {
         timer = setTimeout(() => animation.started = true, delay ?? 1000);
+    }
 
     onCleanup(() => {
         clearTimeout(timer);
+        observer?.disconnect();
         stop();
     });
 
     return html`
-        <div class='counter' ${attributes}>
+        <div
+            class='counter'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    if (!startOnView) {
+                        start();
+                        return;
+                    }
+
+                    observer = new IntersectionObserver((entries) => {
+                        if (!entries.some((entry) => entry.isIntersecting)) {
+                            return;
+                        }
+
+                        observer?.disconnect();
+                        start();
+                    });
+                    observer.observe(element);
+                }
+            }}
+        >
             ${html.reactive(render, function (character) {
                     if (!character.digit) {
                         return html`
@@ -90,9 +132,14 @@ export default ({ currency, decimals = 2, delay, max, state: api = reactive({ va
                         `;
                     }
 
+                    // Alternating the roll parity swaps between identical keyframes, restarting the per-roll animation.
                     return html`
                         <div class='counter-character'>
-                            <div class='counter-character-track' style='${() => `--value: ${character.value}`}'>
+                            <div
+                                class='counter-character-track'
+                                data-roll='${() => character.roll}'
+                                style='${() => `--index: ${character.index}; --value: ${character.value}`}'
+                            >
                                 <span>9</span>
                                 ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
                                 <span>0</span>