@astryxdesign/lab 0.0.0-bootstrap.0 → 0.1.2-canary.04e71b2

package/src/Schedule/ListView.tsx

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ListView.tsx
+ * @input Schedule context and list view options
+ * @output Event-list schedule view factory
+ * @position Concrete schedule view; exported as createScheduleListView
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {
+  plainDateAddDays,
+  plainDateFromInstant,
+  plainDateIsEqual,
+  plainDateToISO,
+  type PlainDate,
+} from '@astryxdesign/core/utils';
+import {Heading} from '@astryxdesign/core/Text';
+import {
+  enumerateDates,
+  eventOccursOnDate,
+  getScheduleRangeFromDates,
+  isDayEvent,
+} from './dateMath';
+import {useScheduleContext} from './context';
+import {
+  formatDayNumber,
+  formatFullDate,
+  formatWeekday,
+  formatWeekTitle,
+  isEventInPast,
+  ListEventRow,
+  ScheduleFrame,
+  ScheduleRangeMonthTitle,
+  styles,
+} from './shared';
+import {useCurrentTime} from './useCurrentTime';
+import {scheduleRangeToZonedDateTimeRange} from './zonedDateTime';
+import type {
+  CalendarEvent,
+  Instant,
+  ScheduleView,
+  ScheduleViewComponentProps,
+} from './types';
+
+export interface ScheduleListViewOptions {
+  days?: number;
+}
+
+function ScheduleListView(
+  _props: ScheduleViewComponentProps<ScheduleListViewOptions>,
+) {
+  const {events, timezoneID, range, isLoading} = useScheduleContext();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const currentTime = useCurrentTime();
+  const currentPlainDate = plainDateFromInstant(currentTime, timezoneID);
+  const endDate = plainDateAddDays(range.endDate, -1);
+  const titleLabel = formatWeekTitle(range.startDate, endDate, timezoneID);
+  const visibleDays = days
+    .map(day => {
+      const isCurrentDay = plainDateIsEqual(day, currentPlainDate);
+      const isBaseDay = plainDateIsEqual(day, range.startDate);
+      const dayEvents = events.filter(event =>
+        eventOccursOnDate(event, day, timezoneID),
+      );
+      return {
+        day,
+        dayEvents,
+        isCurrentDay,
+        isVisible: dayEvents.length > 0 || isCurrentDay || isBaseDay,
+      };
+    })
+    .filter(dayRecord => dayRecord.isVisible);
+
+  return (
+    <ScheduleFrame
+      title={
+        <ScheduleRangeMonthTitle
+          start={range.startDate}
+          end={endDate}
+          timezoneID={timezoneID}
+        />
+      }
+      titleLabel={titleLabel}
+      isLoading={isLoading}>
+      <div {...stylex.props(styles.list)}>
+        {visibleDays.map(({day, dayEvents, isCurrentDay}, index) => (
+          <section
+            key={plainDateToISO(day)}
+            {...stylex.props(
+              styles.listDay,
+              index === visibleDays.length - 1 && styles.listDayLast,
+            )}>
+            <ListDayHeading
+              day={day}
+              isCurrentDay={isCurrentDay}
+              timezoneID={timezoneID}
+            />
+            <div {...stylex.props(styles.listEvents)}>
+              {renderListRows({
+                events: dayEvents,
+                timezoneID,
+                showCurrentTime: isCurrentDay && !isLoading,
+                currentTime,
+              })}
+            </div>
+          </section>
+        ))}
+      </div>
+    </ScheduleFrame>
+  );
+}
+
+function ListDayHeading({
+  day,
+  isCurrentDay,
+  timezoneID,
+}: {
+  day: PlainDate;
+  isCurrentDay: boolean;
+  timezoneID: string;
+}) {
+  return (
+    <Heading
+      level={4}
+      color="secondary"
+      display="block"
+      aria-label={formatFullDate(day, timezoneID)}
+      aria-current={isCurrentDay ? 'date' : undefined}
+      xstyle={styles.listDayHeading}>
+      <span
+        {...stylex.props(
+          styles.listDayNumber,
+          isCurrentDay && styles.listDayNumberCurrent,
+        )}>
+        <span {...stylex.props(styles.listDayNumberText)}>
+          {formatDayNumber(day, timezoneID)}
+        </span>
+      </span>
+      {formatWeekday(day, timezoneID, 'short')}
+    </Heading>
+  );
+}
+
+function renderListRows({
+  events,
+  timezoneID,
+  showCurrentTime,
+  currentTime,
+}: {
+  events: ReadonlyArray<CalendarEvent>;
+  timezoneID: string;
+  showCurrentTime: boolean;
+  currentTime: Instant;
+}) {
+  const rows = events.map(event => (
+    <ListEventRow
+      key={event.id}
+      event={event}
+      timezoneID={timezoneID}
+      isPast={isEventInPast(event, currentTime, timezoneID)}
+    />
+  ));
+
+  if (!showCurrentTime) {
+    return rows;
+  }
+
+  const marker = (
+    <div key="current-time" aria-hidden {...stylex.props(styles.listNowRow)} />
+  );
+  const insertIndex = events.findIndex(
+    event => !isDayEvent(event) && event.start > currentTime,
+  );
+  if (insertIndex < 0) {
+    return [...rows, marker];
+  }
+  return [...rows.slice(0, insertIndex), marker, ...rows.slice(insertIndex)];
+}
+
+export function createScheduleListView({
+  days: listDays = 7,
+}: ScheduleListViewOptions = {}): ScheduleView<ScheduleListViewOptions> {
+  return {
+    component: ScheduleListView,
+    options: {days: listDays},
+    getDateRange: date => {
+      const range = getListDateRange({
+        date: date.toPlainDate(),
+        timezoneID: date.timezoneID,
+        days: listDays,
+      });
+      return scheduleRangeToZonedDateTimeRange(range, date.timezoneID);
+    },
+    getPreviousDateRange: date => {
+      const range = getListDateRange({
+        date: plainDateAddDays(date.toPlainDate(), -listDays),
+        timezoneID: date.timezoneID,
+        days: listDays,
+      });
+      return {
+        label: 'Previous list range',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID),
+      };
+    },
+    getNextDateRange: date => {
+      const range = getListDateRange({
+        date: plainDateAddDays(date.toPlainDate(), listDays),
+        timezoneID: date.timezoneID,
+        days: listDays,
+      });
+      return {
+        label: 'Next list range',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID),
+      };
+    },
+  };
+}
+
+function getListDateRange({
+  date,
+  timezoneID,
+  days,
+}: {
+  date: PlainDate;
+  timezoneID: string;
+  days: number;
+}) {
+  return getScheduleRangeFromDates({
+    startDate: date,
+    endDate: plainDateAddDays(date, days),
+    timezoneID,
+  });
+}

package/src/Schedule/MonthlyView.tsx

@@ -0,0 +1,401 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file MonthlyView.tsx
+ * @input Schedule context and monthly view options
+ * @output Month grid schedule view factory
+ * @position Concrete schedule view; exported as createScheduleMonthlyView
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {
+  plainDateAddDays,
+  plainDateAddMonths,
+  plainDateFromInstant,
+  plainDateIsAfter,
+  plainDateIsBefore,
+  plainDateIsEqual,
+  plainDateSetEndOfWeekExclusive,
+  plainDateSetFirstOfMonth,
+  plainDateSetStartOfWeek,
+  plainDateToISO,
+  type PlainDate,
+} from '@astryxdesign/core/utils';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {
+  enumerateDates,
+  getScheduleRangeFromDates,
+  isDayEvent,
+} from './dateMath';
+import {useScheduleContext} from './context';
+import {
+  formatDayNumber,
+  formatEventAccessibilityLabel,
+  formatFullDate,
+  formatMonthTitle,
+  formatWeekday,
+  isEventInPast,
+  MonthEventPill,
+  ScheduleFrame,
+  ScheduleMonthTitle,
+  styles,
+} from './shared';
+import {useCurrentTime} from './useCurrentTime';
+import {scheduleRangeToZonedDateTimeRange} from './zonedDateTime';
+import type {
+  CalendarEvent,
+  ScheduleView,
+  ScheduleViewComponentProps,
+} from './types';
+
+export interface ScheduleMonthlyViewOptions {
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+function ScheduleMonthlyView(
+  _props: ScheduleViewComponentProps<ScheduleMonthlyViewOptions>,
+) {
+  const {events, categories, date, focusDate, timezoneID, range, isLoading} =
+    useScheduleContext();
+  const rangeDate = date.toPlainDate();
+  const highlightedDate = focusDate.toPlainDate();
+  const currentTime = useCurrentTime();
+  const days = enumerateDates(range.startDate, range.endDate);
+  const weeks = getWeeks(days);
+  const eventSegments = getMonthEventSegments(events, days, timezoneID);
+  const eventsByDay = getMonthEventsByDay(events, days, timezoneID);
+
+  return (
+    <ScheduleFrame
+      title={<ScheduleMonthTitle date={rangeDate} timezoneID={timezoneID} />}
+      titleLabel={formatMonthTitle(rangeDate, timezoneID)}
+      isLoading={isLoading}>
+      <div
+        role="grid"
+        aria-label={formatMonthTitle(rangeDate, timezoneID)}
+        aria-readonly
+        {...stylex.props(styles.monthGrid)}>
+        <div role="row" {...stylex.props(styles.weekHeader)}>
+          {days.slice(0, 7).map((day, index) => (
+            <div
+              key={plainDateToISO(day)}
+              role="columnheader"
+              aria-label={formatWeekday(day, timezoneID, 'long')}
+              aria-colindex={index + 1}
+              {...stylex.props(styles.weekdayLabel)}>
+              <Heading
+                level={4}
+                color="secondary"
+                display="block"
+                xstyle={styles.weekdayHeading}>
+                {formatWeekday(day, timezoneID, 'short')}
+              </Heading>
+            </div>
+          ))}
+        </div>
+        <div {...stylex.props(styles.monthGridSurface)}>
+          <div {...stylex.props(styles.monthCellGrid)}>
+            {weeks.map((week, weekIndex) => (
+              <div
+                key={plainDateToISO(week[0])}
+                role="row"
+                {...stylex.props(styles.monthGridRow)}>
+                {week.map((day, dayIndex) => {
+                  const index = weekIndex * 7 + dayIndex;
+                  const isOutsideMonth = day.month !== rangeDate.month;
+                  const dayEvents =
+                    eventsByDay.get(plainDateToISO(day)) ?? EMPTY_EVENTS;
+                  return (
+                    <div
+                      key={plainDateToISO(day)}
+                      role="gridcell"
+                      aria-label={formatFullDate(day, timezoneID)}
+                      aria-colindex={dayIndex + 1}
+                      aria-current={
+                        plainDateIsEqual(day, highlightedDate)
+                          ? 'date'
+                          : undefined
+                      }
+                      {...stylex.props(
+                        styles.monthCell,
+                        index % 7 === 6 && styles.monthCellLastColumn,
+                        index >= days.length - 7 && styles.monthCellLastRow,
+                        isOutsideMonth && styles.monthCellOutside,
+                      )}>
+                      <div
+                        {...stylex.props(
+                          styles.monthDayNumber,
+                          plainDateIsEqual(day, highlightedDate) &&
+                            styles.currentDayPill,
+                        )}>
+                        <Text
+                          type="supporting"
+                          color="inherit"
+                          weight="medium"
+                          hasTabularNumbers>
+                          {formatDayNumber(day, timezoneID)}
+                        </Text>
+                      </div>
+                      {dayEvents.length > 0 && (
+                        <ul {...stylex.props(styles.visuallyHidden)}>
+                          {dayEvents.map(event => (
+                            <li key={event.id}>
+                              {formatEventAccessibilityLabel(
+                                event,
+                                day,
+                                timezoneID,
+                                categories,
+                              )}
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+          <div aria-hidden {...stylex.props(styles.monthEventOverlay)}>
+            {eventSegments.map(segment => (
+              <div
+                key={`${segment.event.id}:${segment.week}:${segment.columnStart}`}
+                {...stylex.props(
+                  styles.monthEventSpan(
+                    segment.week,
+                    segment.columnStart,
+                    segment.columnEnd,
+                    segment.level,
+                  ),
+                )}>
+                <MonthEventPill
+                  event={segment.event}
+                  timezoneID={timezoneID}
+                  isPast={isEventInPast(segment.event, currentTime, timezoneID)}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </ScheduleFrame>
+  );
+}
+
+function getWeeks(days: ReadonlyArray<PlainDate>): PlainDate[][] {
+  const weeks: PlainDate[][] = [];
+  for (let index = 0; index < days.length; index += 7) {
+    weeks.push(days.slice(index, index + 7));
+  }
+  return weeks;
+}
+
+const EMPTY_EVENTS: ReadonlyArray<CalendarEvent> = [];
+
+function getMonthEventsByDay(
+  events: ReadonlyArray<CalendarEvent>,
+  days: ReadonlyArray<PlainDate>,
+  timezoneID: string,
+): Map<string, CalendarEvent[]> {
+  const eventsByDay = new Map<string, CalendarEvent[]>();
+  days.forEach(day => {
+    eventsByDay.set(plainDateToISO(day), []);
+  });
+  const firstDay = days[0];
+  const lastDay = days[days.length - 1];
+  if (firstDay == null || lastDay == null) {
+    return eventsByDay;
+  }
+
+  events.forEach(event => {
+    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+    if (
+      plainDateIsBefore(eventEnd, firstDay) ||
+      plainDateIsAfter(eventStart, lastDay)
+    ) {
+      return;
+    }
+
+    let current = plainDateIsBefore(eventStart, firstDay)
+      ? firstDay
+      : eventStart;
+    const visibleEnd = plainDateIsAfter(eventEnd, lastDay) ? lastDay : eventEnd;
+    while (!plainDateIsAfter(current, visibleEnd)) {
+      eventsByDay.get(plainDateToISO(current))?.push(event);
+      current = plainDateAddDays(current, 1);
+    }
+  });
+
+  return eventsByDay;
+}
+
+interface MonthEventSegment {
+  event: CalendarEvent;
+  week: number;
+  columnStart: number;
+  columnEnd: number;
+  level: number;
+}
+
+const MAX_MONTH_EVENT_LEVELS = 4;
+
+function getMonthEventSegments(
+  events: ReadonlyArray<CalendarEvent>,
+  days: ReadonlyArray<PlainDate>,
+  timezoneID: string,
+): MonthEventSegment[] {
+  const segments: MonthEventSegment[] = [];
+  const levelsByWeek: Array<number[]> = [];
+  const monthEvents = events
+    .map(event => {
+      const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+      const startIndex = days.findIndex(
+        day => !plainDateIsBefore(day, eventStart),
+      );
+      const endIndexFromRight = [...days]
+        .reverse()
+        .findIndex(day => !plainDateIsAfter(day, eventEnd));
+      if (startIndex < 0 || endIndexFromRight < 0) {
+        return null;
+      }
+      const endIndex = days.length - 1 - endIndexFromRight;
+      return {
+        event,
+        startIndex,
+        endIndex,
+        isPriority: isDayEvent(event) || endIndex > startIndex,
+      };
+    })
+    .filter(
+      (
+        record,
+      ): record is {
+        event: CalendarEvent;
+        startIndex: number;
+        endIndex: number;
+        isPriority: boolean;
+      } => record != null,
+    )
+    .sort((a, b) => {
+      if (a.startIndex !== b.startIndex) {
+        return a.startIndex - b.startIndex;
+      }
+      if (a.isPriority !== b.isPriority) {
+        return a.isPriority ? -1 : 1;
+      }
+      const aDuration = a.endIndex - a.startIndex;
+      const bDuration = b.endIndex - b.startIndex;
+      if (aDuration !== bDuration) {
+        return bDuration - aDuration;
+      }
+      return a.event.title.localeCompare(b.event.title);
+    });
+
+  monthEvents.forEach(({event, startIndex, endIndex}) => {
+    const [eventStart, eventEnd] = getEventDateSpan(event, timezoneID);
+    if (
+      plainDateIsBefore(eventEnd, days[0]) ||
+      plainDateIsAfter(eventStart, days[days.length - 1])
+    ) {
+      return;
+    }
+
+    for (
+      let week = Math.floor(startIndex / 7);
+      week <= Math.floor(endIndex / 7);
+      week += 1
+    ) {
+      const columnStart =
+        week === Math.floor(startIndex / 7) ? startIndex % 7 : 0;
+      const columnEnd = week === Math.floor(endIndex / 7) ? endIndex % 7 : 6;
+      const weekLevels = (levelsByWeek[week] ??= []);
+      const level = getAvailableLevel(weekLevels, columnStart);
+      if (level < MAX_MONTH_EVENT_LEVELS) {
+        weekLevels[level] = columnEnd;
+        segments.push({event, week, columnStart, columnEnd, level});
+      }
+    }
+  });
+
+  return segments;
+}
+
+function getEventDateSpan(
+  event: CalendarEvent,
+  timezoneID: string,
+): [PlainDate, PlainDate] {
+  if (isDayEvent(event)) {
+    return [event.start, event.end];
+  }
+  return [
+    plainDateFromInstant(event.start, timezoneID),
+    plainDateFromInstant(Math.max(event.end - 1, event.start), timezoneID),
+  ];
+}
+
+function getAvailableLevel(levels: number[], columnStart: number): number {
+  const level = levels.findIndex(columnEnd => columnStart > columnEnd);
+  return level >= 0 ? level : levels.length;
+}
+
+export function createScheduleMonthlyView({
+  weekStartsOn = 0,
+}: ScheduleMonthlyViewOptions = {}): ScheduleView<ScheduleMonthlyViewOptions> {
+  return {
+    component: ScheduleMonthlyView,
+    options: {weekStartsOn},
+    getDateRange: date => {
+      const range = getMonthDateRange({
+        date: date.toPlainDate(),
+        timezoneID: date.timezoneID,
+        weekStartsOn,
+      });
+      return scheduleRangeToZonedDateTimeRange(range, date.timezoneID);
+    },
+    getPreviousDateRange: date => {
+      const range = getMonthDateRange({
+        date: plainDateAddMonths(date.toPlainDate(), -1),
+        timezoneID: date.timezoneID,
+        weekStartsOn,
+      });
+      return {
+        label: 'Previous month',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID),
+      };
+    },
+    getNextDateRange: date => {
+      const range = getMonthDateRange({
+        date: plainDateAddMonths(date.toPlainDate(), 1),
+        timezoneID: date.timezoneID,
+        weekStartsOn,
+      });
+      return {
+        label: 'Next month',
+        range: scheduleRangeToZonedDateTimeRange(range, date.timezoneID),
+      };
+    },
+  };
+}
+
+function getMonthDateRange({
+  date,
+  timezoneID,
+  weekStartsOn,
+}: {
+  date: PlainDate;
+  timezoneID: string;
+  weekStartsOn: number;
+}) {
+  const firstOfMonth = plainDateSetFirstOfMonth(date);
+  const nextMonth = plainDateAddMonths(firstOfMonth, 1);
+  return getScheduleRangeFromDates({
+    startDate: plainDateSetStartOfWeek(firstOfMonth, weekStartsOn),
+    endDate: plainDateSetEndOfWeekExclusive(
+      plainDateAddDays(nextMonth, -1),
+      weekStartsOn,
+    ),
+    timezoneID,
+  });
+}

package/src/Schedule/Schedule.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../core/src/docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'Schedule',
+  displayName: 'Schedule',
+  group: 'Schedule',
+  category: 'Data Input',
+
+  usage: {
+    description: '',
+  },
+
+  props: [],
+};