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

package/src/Schedule/context.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file context.tsx
+ * @input Resolved Schedule events, range, timezone, and active date
+ * @output Schedule context object and hook used by view components
+ * @position Internal context bridge between generic Schedule and concrete views
+ */
+
+import {createContext, useContext} from 'react';
+import type {
+  CalendarEvent,
+  ScheduleRange,
+  ZonedDateTime,
+  ScheduleCategory,
+  SchedulePlugin,
+  ScheduleViewBase,
+} from './types';
+
+export interface ScheduleContextValue {
+  events: ReadonlyArray<CalendarEvent>;
+  categories: ReadonlyArray<ScheduleCategory>;
+  date: ZonedDateTime;
+  focusDate: ZonedDateTime;
+  timezoneID: string;
+  range: ScheduleRange;
+  isLoading: boolean;
+  onPreviousDate: () => void;
+  previousDateLabel: string;
+  onToday: () => void;
+  onNextDate: () => void;
+  nextDateLabel: string;
+  view: ScheduleViewBase;
+  plugins: ReadonlyArray<SchedulePlugin>;
+}
+
+export const ScheduleContext = createContext<ScheduleContextValue | null>(
+  null,
+);
+
+export function useScheduleContext(): ScheduleContextValue {
+  const context = useContext(ScheduleContext);
+  if (context == null) {
+    throw new Error('Schedule views must be rendered inside Schedule.');
+  }
+  return context;
+}

package/src/Schedule/dateMath.ts

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file dateMath.ts
+ * @input PlainDate records, Instant epoch milliseconds, IANA timezone IDs
+ * @output Pure range, conversion, formatting, and event-overlap utilities
+ * @position Shared schedule utility layer; consumed by Schedule and tests
+ */
+
+import {
+  type PlainDate,
+  plainDateAddDays,
+  plainDateFromInstant,
+  plainDateIsAfter,
+  plainDateIsBefore,
+  plainDateToInstant,
+} from '@astryxdesign/core/utils';
+import type {CalendarDayEvent, CalendarEvent} from './CalendarEvent';
+import type {Instant, ScheduleRange} from './types';
+
+export function getBrowserTimezoneID(): string {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+}
+
+export function isDayEvent(event: CalendarEvent): event is CalendarDayEvent {
+  return typeof event.start !== 'number';
+}
+
+export function getScheduleRangeFromDates({
+  startDate,
+  endDate,
+  timezoneID,
+}: {
+  startDate: PlainDate;
+  endDate: PlainDate;
+  timezoneID: string;
+}): ScheduleRange {
+  return {
+    startDate,
+    endDate,
+    start: plainDateToInstant(startDate, timezoneID) as Instant,
+    end: plainDateToInstant(endDate, timezoneID) as Instant,
+  };
+}
+
+export function enumerateDates(start: PlainDate, endExclusive: PlainDate) {
+  const dates: PlainDate[] = [];
+  let current = start;
+  while (plainDateIsBefore(current, endExclusive)) {
+    dates.push(current);
+    current = plainDateAddDays(current, 1);
+  }
+  return dates;
+}
+
+export function eventOverlapsRange(
+  event: CalendarEvent,
+  range: ScheduleRange,
+  timezoneID: string,
+): boolean {
+  if (isDayEvent(event)) {
+    const eventStart = plainDateToInstant(event.start, timezoneID) as Instant;
+    const eventEnd = plainDateToInstant(
+      plainDateAddDays(event.end, 1),
+      timezoneID,
+    ) as Instant;
+    return eventStart < range.end && eventEnd > range.start;
+  }
+  return event.start < range.end && event.end > range.start;
+}
+
+export function eventOccursOnDate(
+  event: CalendarEvent,
+  date: PlainDate,
+  timezoneID: string,
+): boolean {
+  if (isDayEvent(event)) {
+    return (
+      !plainDateIsAfter(event.start, date) &&
+      !plainDateIsBefore(event.end, date)
+    );
+  }
+  const startDate = plainDateFromInstant(event.start, timezoneID);
+  const endDate = plainDateFromInstant(
+    Math.max(event.end - 1, event.start),
+    timezoneID,
+  );
+  return (
+    !plainDateIsAfter(startDate, date) && !plainDateIsBefore(endDate, date)
+  );
+}
+
+export function sortEvents(
+  events: ReadonlyArray<CalendarEvent>,
+  timezoneID: string,
+): CalendarEvent[] {
+  return [...events].sort((a, b) => {
+    const aStart = getEventSortStart(a, timezoneID);
+    const bStart = getEventSortStart(b, timezoneID);
+    return aStart < bStart
+      ? -1
+      : aStart > bStart
+        ? 1
+        : a.title.localeCompare(b.title);
+  });
+}
+
+function getEventSortStart(event: CalendarEvent, timezoneID: string): Instant {
+  return isDayEvent(event)
+    ? (plainDateToInstant(event.start, timezoneID) as Instant)
+    : event.start;
+}

package/src/Schedule/index.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input Schedule implementation and public schedule types
+ * @output Public exports for @astryxdesign/lab Schedule
+ * @position Component entry point; re-exported by packages/lab/src/index.ts
+ */
+
+export {Schedule, type ScheduleProps} from './Schedule';
+export {createEventFromISO} from './CalendarEvent';
+export {
+  createScheduleMonthlyView,
+  type ScheduleMonthlyViewOptions,
+} from './MonthlyView';
+export {
+  createScheduleWeeklyView,
+  type ScheduleWeeklyViewOptions,
+} from './WeeklyView';
+export {
+  createScheduleDayView,
+  type ScheduleDayViewOptions,
+} from './DayView';
+export {
+  createScheduleListView,
+  type ScheduleListViewOptions,
+} from './ListView';
+export {ScheduleContext, useScheduleContext} from './context';
+export {
+  defaultSchedulePlugins,
+  useSchedulePaginationPlugin,
+  useScheduleViewSelectorPlugin,
+} from './plugins';
+export type {ScheduleContextValue} from './context';
+export type {SchedulePaginationPluginOptions} from './plugins/PaginationPlugin';
+export type {
+  ScheduleViewSelectorOption,
+  ScheduleViewSelectorPluginOptions,
+} from './plugins/ViewSelectorPlugin';
+
+export type {
+  CalendarDayEvent,
+  CalendarEvent,
+  CalendarEventBase,
+  CalendarInstantEvent,
+  Instant,
+  PlainDate,
+  ScheduleRange,
+  ZonedDateTime,
+  ZonedDateTimeRange,
+  ScheduleCategory,
+  ScheduleDate,
+  ScheduleEventColor,
+  ScheduleEventSource,
+  ScheduleHeaderContent,
+  SchedulePlugin,
+  SchedulePluginPosition,
+  ScheduleView,
+  ScheduleViewBase,
+  ScheduleViewOptions,
+} from './types';

package/src/Schedule/plugins/PaginationPlugin.tsx

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file PaginationPlugin.tsx
+ * @input Schedule date navigation callbacks from Schedule context
+ * @output Hook and default plugin that render previous, today, and next controls
+ * @position Built-in Schedule plugin; re-exported from plugins.tsx
+ */
+
+import {useMemo, type ReactNode} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
+import {Icon} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {useScheduleContext} from '../context';
+import type {
+  ScheduleHeaderContent,
+  SchedulePlugin,
+  SchedulePluginPosition,
+} from '../types';
+
+export interface SchedulePaginationPluginOptions {
+  position?: SchedulePluginPosition;
+}
+
+function SchedulePaginationControls() {
+  const {
+    onPreviousDate,
+    previousDateLabel,
+    onToday,
+    onNextDate,
+    nextDateLabel,
+  } = useScheduleContext();
+  return (
+    <ButtonGroup label="Schedule pagination" size="sm">
+      <IconButton
+        label={previousDateLabel}
+        icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
+        onClick={onPreviousDate}
+      />
+      <Button label="Today" size="sm" onClick={onToday} />
+      <IconButton
+        label={nextDateLabel}
+        icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
+        onClick={onNextDate}
+      />
+    </ButtonGroup>
+  );
+}
+
+function createSchedulePaginationPlugin({
+  position = 'start',
+}: SchedulePaginationPluginOptions = {}): SchedulePlugin {
+  return {
+    renderHeader(
+      startContent: ReactNode,
+      centerContent: ReactNode,
+      endContent: ReactNode,
+    ): ScheduleHeaderContent {
+      const controls = <SchedulePaginationControls />;
+      return position === 'start'
+        ? {
+            startContent: (
+              <>
+                {controls}
+                {startContent}
+              </>
+            ),
+            centerContent,
+            endContent,
+          }
+        : {
+            startContent,
+            centerContent,
+            endContent: (
+              <>
+                {endContent}
+                {controls}
+              </>
+            ),
+          };
+    },
+  };
+}
+
+export const defaultSchedulePaginationPlugin =
+  createSchedulePaginationPlugin();
+
+export function useSchedulePaginationPlugin({
+  position = 'start',
+}: SchedulePaginationPluginOptions = {}): SchedulePlugin {
+  return useMemo(
+    () => createSchedulePaginationPlugin({position}),
+    [position],
+  );
+}

package/src/Schedule/plugins/ViewSelectorPlugin.tsx

@@ -0,0 +1,128 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ViewSelectorPlugin.tsx
+ * @input Schedule view options and caller-provided view change callback
+ * @output Hook that renders an DropdownMenu plugin for caller-provided views
+ * @position Built-in Schedule plugin; re-exported from plugins.tsx
+ */
+
+import {useMemo, type ReactNode} from 'react';
+import {DropdownMenu, DropdownMenuItem} from '@astryxdesign/core/DropdownMenu';
+import {Icon} from '@astryxdesign/core/Icon';
+import {useScheduleContext} from '../context';
+import type {
+  ScheduleHeaderContent,
+  SchedulePlugin,
+  SchedulePluginPosition,
+  ScheduleView,
+  ScheduleViewBase,
+} from '../types';
+
+export interface ScheduleViewSelectorOption<
+  View extends ScheduleViewBase = ScheduleView,
+> {
+  view: View;
+  label: string;
+}
+
+export interface ScheduleViewSelectorPluginOptions<
+  View extends ScheduleViewBase = ScheduleView,
+> {
+  onChangeView?: (view: View) => void;
+  position?: SchedulePluginPosition;
+}
+
+function ScheduleViewSelectorControl<View extends ScheduleViewBase>({
+  onChangeView,
+  options,
+}: {
+  onChangeView?: (view: View) => void;
+  options: ReadonlyArray<ScheduleViewSelectorOption<View>>;
+}) {
+  const {view} = useScheduleContext();
+  const selectedIndex = options.findIndex(option => option.view === view);
+  const selectedLabel = options[selectedIndex]?.label ?? 'View';
+  return (
+    <DropdownMenu
+      button={{
+        label: selectedLabel,
+        size: 'sm',
+        isDisabled: onChangeView == null,
+      }}
+      menuWidth={160}>
+      {options.map((option, index) => (
+        <DropdownMenuItem
+          key={option.label}
+          label={option.label}
+          onClick={() => onChangeView?.(option.view)}
+          endContent={
+            index === selectedIndex ? (
+              <Icon icon="check" size="sm" color="primary" />
+            ) : null
+          }
+        />
+      ))}
+    </DropdownMenu>
+  );
+}
+
+function createScheduleViewSelectorPlugin<View extends ScheduleViewBase>(
+  options: ReadonlyArray<ScheduleViewSelectorOption<View>>,
+  {
+    onChangeView,
+    position = 'end',
+  }: ScheduleViewSelectorPluginOptions<View> = {},
+): SchedulePlugin {
+  return {
+    renderHeader(
+      startContent: ReactNode,
+      centerContent: ReactNode,
+      endContent: ReactNode,
+    ): ScheduleHeaderContent {
+      const control = (
+        <ScheduleViewSelectorControl
+          onChangeView={onChangeView}
+          options={options}
+        />
+      );
+      return position === 'start'
+        ? {
+            startContent: (
+              <>
+                {startContent}
+                {control}
+              </>
+            ),
+            centerContent,
+            endContent,
+          }
+        : {
+            startContent,
+            centerContent,
+            endContent: (
+              <>
+                {endContent}
+                {control}
+              </>
+            ),
+          };
+    },
+  };
+}
+
+export function useScheduleViewSelectorPlugin<
+  View extends ScheduleViewBase,
+>(
+  options: ReadonlyArray<ScheduleViewSelectorOption<View>>,
+  pluginOptions: ScheduleViewSelectorPluginOptions<View> = {},
+): SchedulePlugin {
+  const {onChangeView, position = 'end'} = pluginOptions;
+  return useMemo(
+    () =>
+      createScheduleViewSelectorPlugin(options, {onChangeView, position}),
+    [onChangeView, options, position],
+  );
+}

package/src/Schedule/plugins/index.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file plugins.tsx
+ * @input Built-in schedule plugin hooks and stable defaults
+ * @output Default Schedule plugin list and plugin hook re-exports
+ * @position Plugin barrel; plugin implementations live in separate files
+ */
+
+import {defaultSchedulePaginationPlugin} from './PaginationPlugin';
+import type {SchedulePlugin} from '../types';
+
+export {useSchedulePaginationPlugin} from './PaginationPlugin';
+export {useScheduleViewSelectorPlugin} from './ViewSelectorPlugin';
+
+export const defaultSchedulePlugins: ReadonlyArray<SchedulePlugin> = [
+  defaultSchedulePaginationPlugin,
+];