@tcn/ui-time-selector 1.0.0

package/src/components/date_range_panel/date_range_panel_presenter.ts

@@ -0,0 +1,35 @@
+import { Signal } from '@tcn/state';
+
+export class DateRangePanelPresenter {
+  private _isApplyDisabled = new Signal<boolean>(false);
+
+  readonly broadcasts: {
+    isApplyDisabled: Signal<boolean>['broadcast'];
+  };
+
+  constructor(
+    readonly startDate: Signal<Date | null>,
+    readonly endDate: Signal<Date | null>
+  ) {
+    this.broadcasts = {
+      isApplyDisabled: this._isApplyDisabled.broadcast,
+    };
+    this._updateApplyDisabled();
+  }
+
+  private _updateApplyDisabled() {
+    const start = this.startDate.get();
+    const end = this.endDate.get();
+    this._isApplyDisabled.set(start == null || end == null || end <= start);
+  }
+
+  setStartDate(date: Date | null) {
+    this.startDate.set(date);
+    this._updateApplyDisabled();
+  }
+
+  setEndDate(date: Date | null) {
+    this.endDate.set(date);
+    this._updateApplyDisabled();
+  }
+}

package/src/components/preset_panel/preset_panel.module.css

@@ -0,0 +1,35 @@
+.presets-panel {
+  flex: 1;
+  padding: 8px;
+  gap: 0;
+}
+
+.preset-search {
+  margin-bottom: 8px;
+}
+
+.preset-list {
+  overflow-x: hidden;
+  overflow-y: auto;
+  gap: 2px;
+}
+
+.preset-item {
+  width: 100%;
+  padding: 6px 8px;
+  margin-left: 6px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.preset-item:hover {
+  background: var(--tcn-color-surface-hover, #f3f4f6);
+}
+
+.preset-item[data-selected="true"] {
+  background: var(--tcn-color-surface-selected, #eff6ff);
+}
+
+.preset-item[data-highlighted="true"] {
+  background: var(--tcn-color-surface-hover, #e5e7eb);
+}

package/src/components/preset_panel/preset_panel.tsx

@@ -0,0 +1,74 @@
+import { useSignalValue } from '@tcn/state';
+import { HStack, VStack } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+import { Input } from '@tcn/ui/inputs';
+import { useEffect, useRef } from 'react';
+import { type PresetItem } from '../utils.js';
+import { PresetPanelPresenter } from './preset_panel_presenter.js';
+import styles from './preset_panel.module.css';
+
+export interface PresetPanelOwnProps {
+  presenter: PresetPanelPresenter;
+  selectedPreset: PresetItem | null;
+  focused: boolean;
+  onSelect: (item: PresetItem) => void;
+}
+
+export type PresetPanelProps = PresetPanelOwnProps;
+
+export function PresetPanel({
+  presenter,
+  selectedPreset,
+  focused,
+  onSelect,
+}: PresetPanelProps) {
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const search = useSignalValue(presenter.broadcasts.search);
+  const filteredItems = useSignalValue(presenter.broadcasts.filteredItems);
+  const highlightedIndex = useSignalValue(presenter.broadcasts.highlightedIndex);
+
+  useEffect(() => {
+    if (focused) {
+      searchRef.current?.focus();
+    }
+  }, [focused]);
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (list == null) return;
+    const item = list.children[highlightedIndex] as HTMLElement | undefined;
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [highlightedIndex]);
+
+  return (
+    <VStack className={styles['presets-panel']} height="auto">
+      <Input
+        ref={searchRef}
+        className={styles['preset-search']}
+        value={search}
+        onChange={v => presenter.setSearch(v)}
+        placeholder="Search quick ranges"
+        onKeyDown={e => {
+          const result = presenter.handleKeyDown(e.key);
+          if (result.preventDefault) e.preventDefault();
+          if (result.selectedItem != null) onSelect(result.selectedItem);
+        }}
+      />
+      <VStack ref={listRef} className={styles['preset-list']} height="290px" width="100%">
+        {filteredItems.map((item, index) => (
+          <HStack
+            key={item.label}
+            className={styles['preset-item']}
+            data-selected={selectedPreset != null && item.label === selectedPreset.label}
+            data-highlighted={index === highlightedIndex}
+            onClick={() => onSelect(item)}
+          >
+            <BodyText selectable={false}>{item.label}</BodyText>
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  );
+}

package/src/components/preset_panel/preset_panel_presenter.ts

@@ -0,0 +1,68 @@
+import { Signal, derive } from '@tcn/state';
+import { type PresetItem } from '../utils.js';
+
+export class PresetPanelPresenter {
+  private _search = new Signal<string>('');
+  private _highlightedIndex = new Signal<number>(0);
+  private _filteredItems: ReturnType<typeof derive<string, PresetItem[]>>;
+
+  readonly broadcasts: {
+    search: Signal<string>['broadcast'];
+    highlightedIndex: Signal<number>['broadcast'];
+    filteredItems: ReturnType<typeof derive<string, PresetItem[]>>['broadcast'];
+  };
+
+  constructor(private readonly _items: PresetItem[]) {
+    this._filteredItems = derive(this._search, search =>
+      _items.filter(item => item.label.toLowerCase().includes(search.toLowerCase()))
+    );
+
+    this.broadcasts = {
+      search: this._search.broadcast,
+      highlightedIndex: this._highlightedIndex.broadcast,
+      filteredItems: this._filteredItems.broadcast,
+    };
+  }
+
+  setSearch(query: string) {
+    this._search.set(query);
+    this._highlightedIndex.set(0);
+  }
+
+  moveHighlight(direction: 1 | -1) {
+    const count = this._filteredItems.get().length;
+    if (count === 0) return;
+    const next = (this._highlightedIndex.get() + direction + count) % count;
+    this._highlightedIndex.set(next);
+  }
+
+  getHighlightedItem(): PresetItem | null {
+    const items = this._filteredItems.get();
+    return items[this._highlightedIndex.get()] ?? null;
+  }
+
+  handleKeyDown(key: string): {
+    preventDefault: boolean;
+    selectedItem?: PresetItem;
+    escape?: boolean;
+  } {
+    if (key === 'ArrowDown') {
+      this.moveHighlight(1);
+      return { preventDefault: true };
+    } else if (key === 'ArrowUp') {
+      this.moveHighlight(-1);
+      return { preventDefault: true };
+    } else if (key === 'Enter') {
+      const item = this.getHighlightedItem();
+      return { preventDefault: true, selectedItem: item ?? undefined };
+    } else if (key === 'Escape') {
+      return { preventDefault: false, escape: true };
+    }
+    return { preventDefault: false };
+  }
+
+  reset() {
+    this._search.set('');
+    this._highlightedIndex.set(0);
+  }
+}

package/src/components/time_selector/time_selector.module.css

@@ -0,0 +1,27 @@
+.trigger-abbreviation {
+  color: var(--ergo-primary, #2563eb);
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--tcn-color-border, #d1d5db);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.trigger:hover {
+  border-color: var(--tcn-color-border-hover, #9ca3af);
+}
+
+.popper-content {
+  background: var(--tcn-color-surface-primary, #ffffff);
+  border: 1px solid var(--tcn-color-border, #d1d5db);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  align-items: flex-start;
+  width: 400px;
+}

package/src/components/time_selector/time_selector.tsx

@@ -0,0 +1,100 @@
+import { useSignalValue } from '@tcn/state';
+import { ElementPopper } from '@tcn/ui/overlay';
+import { HStack, VStack } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+import { useRef, useState } from 'react';
+import { TimeSelectorPresenter } from './time_selector_presenter.js';
+import { PresetPanel } from '../preset_panel/preset_panel.js';
+import { DateRangePanel } from '../date_range_panel/date_range_panel.js';
+import { TimezoneFooter } from '../timezone_footer/timezone_footer.js';
+import styles from './time_selector.module.css';
+
+export interface TimeSelectorOwnProps {
+  onChange?: (start: Date, end: Date) => void;
+  onTimezoneChange?: (timezone: string) => void;
+  startDateMin?: Date | null;
+  startDateMax?: Date | null;
+  endDateMin?: Date | null;
+  endDateMax?: Date | null;
+  timezones?: string[];
+}
+
+export type TimeSelectorProps = TimeSelectorOwnProps;
+
+export function TimeSelector({
+  onChange,
+  onTimezoneChange,
+  startDateMin,
+  startDateMax,
+  endDateMin,
+  endDateMax,
+  timezones,
+}: TimeSelectorProps) {
+  const [presenter] = useState(() => new TimeSelectorPresenter());
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const isOpen = useSignalValue(presenter.broadcasts.isOpen);
+  const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);
+  const displayValue = useSignalValue(presenter.broadcasts.displayValue);
+  const displayAbbreviation = useSignalValue(
+    presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation
+  );
+
+  return (
+    <>
+      <div
+        ref={anchorRef}
+        className={styles.trigger}
+        onClick={() => presenter.toggleOpen()}
+      >
+        <HStack height="auto" width="auto" gap="4px">
+          <BodyText selectable={false}>{displayValue},</BodyText>
+          <BodyText
+            selectable={false}
+            style={{ fontWeight: 700 }}
+            className={styles['trigger-abbreviation']}
+          >
+            {displayAbbreviation}
+          </BodyText>
+        </HStack>
+      </div>
+      <ElementPopper
+        anchorElement={anchorRef}
+        open={isOpen}
+        onDismissal={() => presenter.close()}
+        dismissals={[]}
+      >
+        <VStack
+          className={styles['popper-content']}
+          height="auto"
+          onKeyDown={e => {
+            if (e.key === 'Escape') presenter.close();
+          }}
+        >
+          <HStack height="auto" width="100%" vAlign="start">
+            <DateRangePanel
+              presenter={presenter.dateRangePanelPresenter}
+              focused={isOpen && selectedPreset == null}
+              startDateMin={startDateMin}
+              startDateMax={startDateMax}
+              endDateMin={endDateMin}
+              endDateMax={endDateMax}
+              onApply={() => presenter.applyTimeRange(onChange)}
+            />
+            <PresetPanel
+              presenter={presenter.presetPanelPresenter}
+              selectedPreset={selectedPreset}
+              focused={isOpen && selectedPreset != null}
+              onSelect={item => presenter.handlePresetSelect(item, onChange)}
+            />
+          </HStack>
+          <TimezoneFooter
+            presenter={presenter.timezoneFooterPresenter}
+            timezones={timezones}
+            onTimezoneChange={onTimezoneChange}
+          />
+        </VStack>
+      </ElementPopper>
+    </>
+  );
+}

package/src/components/time_selector/time_selector_presenter.ts

@@ -0,0 +1,116 @@
+import { Signal } from '@tcn/state';
+import {
+  formatDate,
+  datesFromPreset,
+  shiftForDisplay,
+  unshiftFromDisplay,
+  type PresetItem,
+} from '../utils.js';
+import { PresetPanelPresenter } from '../preset_panel/preset_panel_presenter.js';
+import { DateRangePanelPresenter } from '../date_range_panel/date_range_panel_presenter.js';
+import { TimezoneFooterPresenter } from '../timezone_footer/timezone_footer_presenter.js';
+
+export type { PresetItem };
+
+export const PRESET_ITEMS: PresetItem[] = [
+  { label: 'Last 5 mins', minutes: 5 },
+  { label: 'Last 15 mins', minutes: 15 },
+  { label: 'Last 30 mins', minutes: 30 },
+  { label: 'Last 1 hour', minutes: 60 },
+  { label: 'Last 3 hours', minutes: 180 },
+  { label: 'Last 6 hours', minutes: 360 },
+  { label: 'Last 12 hours', minutes: 720 },
+  { label: 'Last 24 hours', minutes: 1440 },
+  { label: 'Last 2 days', minutes: 2880 },
+  { label: 'Last 7 days', minutes: 10080 },
+  { label: 'Last 30 days', minutes: 43200 },
+];
+
+export class TimeSelectorPresenter {
+  private _isOpen = new Signal<boolean>(false);
+  private _selectedPreset = new Signal<PresetItem | null>(PRESET_ITEMS[0]);
+  private _displayValue: Signal<string>;
+  private _startDate: Signal<Date | null>;
+  private _endDate: Signal<Date | null>;
+
+  readonly presetPanelPresenter: PresetPanelPresenter;
+  readonly dateRangePanelPresenter: DateRangePanelPresenter;
+  readonly timezoneFooterPresenter: TimezoneFooterPresenter;
+
+  readonly broadcasts: {
+    isOpen: Signal<boolean>['broadcast'];
+    selectedPreset: Signal<PresetItem | null>['broadcast'];
+    displayValue: Signal<string>['broadcast'];
+  };
+
+  constructor() {
+    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const { start, end } = datesFromPreset(PRESET_ITEMS[0]);
+
+    this._startDate = new Signal<Date | null>(shiftForDisplay(start, browserTz));
+    this._endDate = new Signal<Date | null>(shiftForDisplay(end, browserTz));
+
+    this.presetPanelPresenter = new PresetPanelPresenter(PRESET_ITEMS);
+    this.dateRangePanelPresenter = new DateRangePanelPresenter(
+      this._startDate,
+      this._endDate
+    );
+    this.timezoneFooterPresenter = new TimezoneFooterPresenter(
+      this._startDate,
+      this._endDate
+    );
+
+    this._displayValue = new Signal<string>(PRESET_ITEMS[0].label);
+
+    this.broadcasts = {
+      isOpen: this._isOpen.broadcast,
+      selectedPreset: this._selectedPreset.broadcast,
+      displayValue: this._displayValue.broadcast,
+    };
+  }
+
+  handlePresetSelect(item: PresetItem, onChange?: (start: Date, end: Date) => void) {
+    this._selectedPreset.set(item);
+
+    const { start, end } = datesFromPreset(item);
+    const tz = this.timezoneFooterPresenter.getTimezone();
+
+    this._startDate.set(shiftForDisplay(start, tz));
+    this._endDate.set(shiftForDisplay(end, tz));
+
+    this._displayValue.set(item.label);
+    onChange?.(start, end);
+    this.close();
+  }
+
+  applyTimeRange(onChange?: (start: Date, end: Date) => void) {
+    const displayStart = this._startDate.get();
+    const displayEnd = this._endDate.get();
+
+    if (displayStart != null && displayEnd != null) {
+      const tz = this.timezoneFooterPresenter.getTimezone();
+      const realStart = unshiftFromDisplay(displayStart, tz);
+      const realEnd = unshiftFromDisplay(displayEnd, tz);
+
+      this._selectedPreset.set(null);
+      this._displayValue.set(`${formatDate(displayStart)} to ${formatDate(displayEnd)}`);
+
+      onChange?.(realStart, realEnd);
+
+      this.close();
+    }
+  }
+
+  toggleOpen() {
+    if (this._isOpen.get()) {
+      this.close();
+    } else {
+      this._isOpen.set(true);
+    }
+  }
+
+  close() {
+    this._isOpen.set(false);
+    this.presetPanelPresenter.reset();
+  }
+}

package/src/components/timezone_footer/timezone_footer.module.css

@@ -0,0 +1,28 @@
+.utc-footer {
+  border-top: 1px solid var(--tcn-color-border, #d1d5db);
+  padding: 8px 12px;
+  gap: 8px;
+}
+
+.utc-label {
+  color: var(--tcn-color-text-secondary, #6b7280);
+}
+
+.utc-offset {
+  padding-right: 4px;
+}
+
+.timezone-settings-button {
+  flex-shrink: 0;
+}
+
+.timezone-select {
+  width: 100%;
+}
+
+.timezone-option-offset {
+  color: var(--tcn-color-text-secondary, #6b7280);
+  min-width: 80px;
+  text-align: right;
+  padding-right: 4px;
+}

package/src/components/timezone_footer/timezone_footer.tsx

@@ -0,0 +1,109 @@
+import { useSignalValue } from '@tcn/state';
+import { HStack, Spacer, VStack } from '@tcn/ui/stacks';
+import { BodyText } from '@tcn/ui/typography';
+import { Option, Select } from '@tcn/ui/inputs';
+import { Button } from '@tcn/ui/actions';
+import { useMemo } from 'react';
+import { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';
+import { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';
+import {
+  formatUTCOffset,
+  getTimezoneAbbreviation,
+  getTimezoneOffsetMinutes,
+} from '../utils.js';
+import { TimezoneFooterPresenter } from './timezone_footer_presenter.js';
+import styles from './timezone_footer.module.css';
+
+interface TimezoneOption {
+  iana: string;
+  abbreviation: string;
+  utcOffset: string;
+  offsetMinutes: number;
+}
+
+export interface TimezoneFooterOwnProps {
+  presenter: TimezoneFooterPresenter;
+  timezones?: string[];
+  onTimezoneChange?: (tz: string) => void;
+}
+
+export type TimezoneFooterProps = TimezoneFooterOwnProps;
+
+export function TimezoneFooter({
+  presenter,
+  timezones,
+  onTimezoneChange,
+}: TimezoneFooterProps) {
+  const selectedTimezone = useSignalValue(presenter.broadcasts.timezone);
+  const isSelectOpen = useSignalValue(presenter.broadcasts.isSelectOpen);
+  const timezoneAbbreviation = useSignalValue(presenter.broadcasts.timezoneAbbreviation);
+  const timezoneLabel = useSignalValue(presenter.broadcasts.timezoneLabel);
+  const utcOffset = useSignalValue(presenter.broadcasts.utcOffset);
+
+  const timezoneOptions = useMemo<TimezoneOption[]>(() => {
+    const ianas: string[] =
+      timezones ?? ((Intl as any).supportedValuesOf('timeZone') as string[]);
+    const now = new Date();
+    return ianas
+      .map(iana => {
+        const offsetMinutes = getTimezoneOffsetMinutes(iana, now);
+        return {
+          iana,
+          abbreviation: getTimezoneAbbreviation(iana, now),
+          utcOffset: formatUTCOffset(offsetMinutes),
+          offsetMinutes,
+        };
+      })
+      .sort((a, b) => b.offsetMinutes - a.offsetMinutes);
+  }, [timezones]);
+
+  return (
+    <VStack className={styles['utc-footer']} height="auto" width="100%">
+      <HStack height="auto" width="100%">
+        <BodyText className={styles['utc-label']} selectable={false} size="md">
+          {timezoneLabel}
+        </BodyText>
+        <Spacer />
+        <BodyText selectable={false} size="md" className={styles['utc-offset']}>
+          {utcOffset}
+        </BodyText>
+        <Button
+          size="sm"
+          hierarchy="secondary"
+          className={styles['timezone-settings-button']}
+          onClick={() => presenter.toggleSelect()}
+        >
+          Change time settings
+          {isSelectOpen ? <ChevronUpIcon size="sm" /> : <ChevronDownIcon size="sm" />}
+        </Button>
+      </HStack>
+      {isSelectOpen && (
+        <Select
+          value={selectedTimezone}
+          onChange={tz => presenter.setTimezone(tz, onTimezoneChange)}
+          hierarchy="secondary"
+          className={styles['timezone-select']}
+          size="sm"
+        >
+          {timezoneOptions.map(tz => (
+            <Option
+              key={tz.iana}
+              value={tz.iana}
+              label={timezoneAbbreviation}
+              keywords={[tz.iana, tz.abbreviation]}
+            >
+              <HStack height="auto" width="100%" gap="8px">
+                <BodyText selectable={false}>{tz.iana}</BodyText>
+                <Spacer />
+                <BodyText selectable={false}>{tz.abbreviation}</BodyText>
+                <BodyText className={styles['timezone-option-offset']} selectable={false}>
+                  {tz.utcOffset}
+                </BodyText>
+              </HStack>
+            </Option>
+          ))}
+        </Select>
+      )}
+    </VStack>
+  );
+}

package/src/components/timezone_footer/timezone_footer_presenter.ts

@@ -0,0 +1,83 @@
+import { Signal, derive } from '@tcn/state';
+import {
+  formatUTCOffset,
+  getTimezoneAbbreviation,
+  getTimezoneOffsetMinutes,
+  shiftForDisplay,
+  unshiftFromDisplay,
+} from '../utils.js';
+
+export class TimezoneFooterPresenter {
+  private _timezone: Signal<string>;
+  private _isSelectOpen = new Signal<boolean>(false);
+  private _timezoneAbbreviation: ReturnType<typeof derive<string, string>>;
+  private _timezoneLabel: ReturnType<typeof derive<string, string>>;
+  private _utcOffset: ReturnType<typeof derive<string, string>>;
+
+  readonly broadcasts: {
+    timezone: Signal<string>['broadcast'];
+    isSelectOpen: Signal<boolean>['broadcast'];
+    timezoneAbbreviation: ReturnType<typeof derive<string, string>>['broadcast'];
+    timezoneLabel: ReturnType<typeof derive<string, string>>['broadcast'];
+    utcOffset: ReturnType<typeof derive<string, string>>['broadcast'];
+  };
+
+  constructor(
+    private readonly _startDate: Signal<Date | null>,
+    private readonly _endDate: Signal<Date | null>
+  ) {
+    const browserTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    this._timezone = new Signal<string>(browserTz);
+
+    this._timezoneAbbreviation = derive(this._timezone, tz =>
+      getTimezoneAbbreviation(tz, new Date())
+    );
+    this._timezoneLabel = derive(
+      this._timezone,
+      tz => `${tz}, ${getTimezoneAbbreviation(tz, new Date())}`
+    );
+    this._utcOffset = derive(this._timezone, tz =>
+      formatUTCOffset(getTimezoneOffsetMinutes(tz, new Date()))
+    );
+
+    this.broadcasts = {
+      timezone: this._timezone.broadcast,
+      isSelectOpen: this._isSelectOpen.broadcast,
+      timezoneAbbreviation: this._timezoneAbbreviation.broadcast,
+      timezoneLabel: this._timezoneLabel.broadcast,
+      utcOffset: this._utcOffset.broadcast,
+    };
+  }
+
+  getTimezone(): string {
+    return this._timezone.get();
+  }
+
+  getAbbreviation(): string {
+    return this._timezoneAbbreviation.get();
+  }
+
+  toggleSelect() {
+    this._isSelectOpen.set(!this._isSelectOpen.get());
+  }
+
+  setTimezone(iana: string, onTimezoneChange?: (tz: string) => void) {
+    const oldTz = this._timezone.get();
+
+    const currentStart = this._startDate.get();
+    if (currentStart != null) {
+      const realStart = unshiftFromDisplay(currentStart, oldTz);
+      this._startDate.set(shiftForDisplay(realStart, iana));
+    }
+
+    const currentEnd = this._endDate.get();
+    if (currentEnd != null) {
+      const realEnd = unshiftFromDisplay(currentEnd, oldTz);
+      this._endDate.set(shiftForDisplay(realEnd, iana));
+    }
+
+    this._timezone.set(iana);
+    this._isSelectOpen.set(false);
+    onTimezoneChange?.(iana);
+  }
+}