@ankhorage/zora 13.0.0 → 14.0.1

package/src/features/date-picker/composition/DatePickerContent.tsx

@@ -0,0 +1,256 @@
+import React from 'react';
+
+import type { DatePickerProps } from '../../../types/date-picker';
+import { Button } from '../../button/public';
+import { Box, Stack } from '../../layout/public';
+import { Text } from '../../typography/public';
+import { formatLocalDate, parseLocalDate } from '../utils/localDate';
+
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
+const DAY_CELL_WIDTH = 42;
+
+/*** Renders the shared calendar content used by native BottomSheet and web Popover hosts. */
+export function DatePickerContent({
+  description,
+  interactionPolicy,
+  label,
+  maxDate,
+  minDate,
+  onDismiss,
+  onSelect,
+  testID,
+  value,
+}: DatePickerContentProps) {
+  const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
+  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+  const resolvedMaxDate = React.useMemo(() => parseLocalDate(maxDate), [maxDate]);
+  const resolvedMinDate = React.useMemo(() => parseLocalDate(minDate), [minDate]);
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-content` : undefined}>
+      <PickerHeader description={description} title={label ?? 'Choose date'} />
+      <DatePickerMonthNavigation
+        displayMonth={displayMonth}
+        interactionPolicy={interactionPolicy}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
+        onMonthChange={setDisplayMonth}
+      />
+      <DatePickerWeekdays />
+      <DatePickerCalendar
+        interactionPolicy={interactionPolicy}
+        maxDate={resolvedMaxDate}
+        minDate={resolvedMinDate}
+        monthDays={monthDays}
+        onSelect={onSelect}
+        testID={testID}
+        value={value}
+      />
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+interface DatePickerContentProps extends Pick<
+  DatePickerProps,
+  'description' | 'interactionPolicy' | 'label' | 'maxDate' | 'minDate' | 'testID' | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: Date) => void;
+}
+
+/*** Renders the shared title block used by picker overlays. */
+function PickerHeader({
+  description,
+  title,
+}: {
+  description: React.ReactNode | undefined;
+  title: React.ReactNode;
+}) {
+  return (
+    <Stack gap="xxs">
+      <Text align="center" variant="label" weight="semiBold">
+        {title}
+      </Text>
+      {description ? (
+        <Text align="center" emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+/*** Renders previous and next month controls for the calendar. */
+function DatePickerMonthNavigation({
+  displayMonth,
+  interactionPolicy,
+  maxDate,
+  minDate,
+  onMonthChange,
+}: {
+  displayMonth: Date;
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
+  onMonthChange: (month: Date) => void;
+}) {
+  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
+  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
+
+  return (
+    <Stack align="center" direction="row" justify="space-between">
+      <Button
+        disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(previousMonth)}
+        size="s"
+        variant="ghost"
+      >
+        Previous
+      </Button>
+      <Text align="center" variant="label" weight="semiBold">
+        {formatMonthLabel(displayMonth)}
+      </Text>
+      <Button
+        disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+        interactionPolicy={interactionPolicy}
+        onPress={() => onMonthChange(nextMonth)}
+        size="s"
+        variant="ghost"
+      >
+        Next
+      </Button>
+    </Stack>
+  );
+}
+
+/*** Renders weekday headings for the calendar grid. */
+function DatePickerWeekdays() {
+  return (
+    <Stack direction="row" justify="space-between">
+      {WEEKDAY_LABELS.map((weekday) => (
+        <Box key={weekday} width={DAY_CELL_WIDTH}>
+          <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
+            {weekday}
+          </Text>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+/*** Renders selectable day cells for the current calendar month. */
+function DatePickerCalendar({
+  interactionPolicy,
+  maxDate,
+  minDate,
+  monthDays,
+  onSelect,
+  testID,
+  value,
+}: {
+  interactionPolicy: DatePickerProps['interactionPolicy'];
+  maxDate: Date | undefined;
+  minDate: Date | undefined;
+  monthDays: readonly (Date | null)[];
+  onSelect: (value: Date) => void;
+  testID: string | undefined;
+  value: DatePickerProps['value'];
+}) {
+  return (
+    <Stack direction="row" gap="xs" wrap="wrap">
+      {monthDays.map((day, index) => {
+        if (!day) return <Box key={`empty-${index}`} width={DAY_CELL_WIDTH} />;
+        const selected = isSameLocalDay(value, day);
+        return (
+          <Box key={day.toISOString()} width={DAY_CELL_WIDTH}>
+            <Button
+              color={selected ? 'primary' : 'neutral'}
+              disabled={isDateDisabled(day, minDate, maxDate)}
+              interactionPolicy={interactionPolicy}
+              onPress={() => onSelect(day)}
+              size="s"
+              testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
+              variant={selected ? 'solid' : 'ghost'}
+            >
+              {day.getDate()}
+            </Button>
+          </Box>
+        );
+      })}
+    </Stack>
+  );
+}
+
+/*** Compares a serialized date to one local calendar day. */
+function isSameLocalDay(left: string | null, right: Date): boolean {
+  return left === formatLocalDate(right);
+}
+
+/*** Normalizes a Date to the start of its local calendar day. */
+function startOfLocalDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+
+/*** Reports whether one local calendar day precedes another. */
+function isBeforeLocalDay(left: Date, right: Date): boolean {
+  return startOfLocalDay(left).getTime() < startOfLocalDay(right).getTime();
+}
+
+/*** Reports whether one local calendar day follows another. */
+function isAfterLocalDay(left: Date, right: Date): boolean {
+  return startOfLocalDay(left).getTime() > startOfLocalDay(right).getTime();
+}
+
+/*** Reports whether a date falls outside the configured picker range. */
+function isDateDisabled(
+  value: Date,
+  minDate: Date | undefined,
+  maxDate: Date | undefined,
+): boolean {
+  if (minDate && isBeforeLocalDay(value, minDate)) return true;
+  if (maxDate && isAfterLocalDay(value, maxDate)) return true;
+  return false;
+}
+
+/*** Formats the current calendar month for the picker heading. */
+function formatMonthLabel(value: Date): string {
+  return value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+}
+
+/*** Builds the padded calendar grid for one month. */
+function createMonthDays(month: Date): (Date | null)[] {
+  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
+  const dayCount = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const populatedLength = firstDay.getDay() + dayCount;
+  const paddedLength = Math.ceil(populatedLength / 7) * 7;
+
+  return Array.from({ length: paddedLength }, (_, index) =>
+    index < firstDay.getDay()
+      ? null
+      : new Date(month.getFullYear(), month.getMonth(), index - firstDay.getDay() + 1),
+  );
+}
+
+/*** Resolves the month initially shown by the calendar. */
+function resolveInitialMonth(value: string | null, minDate: string | undefined): Date {
+  const base = parseLocalDate(value) ?? parseLocalDate(minDate) ?? new Date();
+  return new Date(base.getFullYear(), base.getMonth(), 1);
+}
+
+/*** Reports whether the configured range intersects a candidate month. */
+function canNavigateToMonth(
+  month: Date,
+  minDate: Date | undefined,
+  maxDate: Date | undefined,
+): boolean {
+  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
+  const lastDay = new Date(month.getFullYear(), month.getMonth() + 1, 0);
+
+  if (maxDate && isAfterLocalDay(firstDay, maxDate)) return false;
+  if (minDate && isBeforeLocalDay(lastDay, minDate)) return false;
+  return true;
+}

package/src/features/date-picker/composition/DatePickerField.tsx

@@ -0,0 +1,53 @@
+import { Field } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { DatePickerProps } from '../../../types/date-picker';
+import { Stack } from '../../layout/public';
+import { Text } from '../../typography/public';
+
+/*** Renders the shared DatePicker field frame around a platform-specific trigger. */
+export function DatePickerField({
+  children,
+  description,
+  disabled,
+  error,
+  label,
+  required,
+  testID,
+}: DatePickerFieldProps) {
+  return (
+    <Field
+      disabled={disabled}
+      errorText={error}
+      invalid={Boolean(error)}
+      label={label ? renderLabel(label, description) : undefined}
+      required={required}
+      testID={testID}
+    >
+      {children}
+    </Field>
+  );
+}
+
+interface DatePickerFieldProps extends Pick<
+  DatePickerProps,
+  'description' | 'disabled' | 'error' | 'label' | 'required' | 'testID'
+> {
+  children: React.ReactNode;
+}
+
+/*** Renders the picker label and optional supporting description. */
+function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
+  return (
+    <Stack gap="xs">
+      <Text variant="label" weight="semiBold">
+        {label}
+      </Text>
+      {description ? (
+        <Text emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}

package/src/features/date-picker/composition/DatePickerTrigger.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+
+import type { DatePickerProps } from '../../../types/date-picker';
+import { Button } from '../../button/public';
+import { parseLocalDate } from '../utils/localDate';
+
+/*** Renders the shared DatePicker trigger button for native and web hosts. */
+export function DatePickerTrigger({
+  disabled,
+  formatDate,
+  interactionPolicy,
+  onPress,
+  placeholder = 'Choose date',
+  testID,
+  value,
+}: DatePickerTriggerProps) {
+  const displayValue = value
+    ? formatDate
+      ? formatDate(value)
+      : formatDefaultDate(value)
+    : placeholder;
+
+  return (
+    <Button
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      onPress={onPress}
+      testID={testID ? `${testID}-trigger` : undefined}
+      trailingIcon={{ name: 'calendar-outline' }}
+      variant="outline"
+    >
+      {displayValue}
+    </Button>
+  );
+}
+
+interface DatePickerTriggerProps extends Pick<
+  DatePickerProps,
+  'disabled' | 'formatDate' | 'interactionPolicy' | 'placeholder' | 'testID' | 'value'
+> {
+  onPress: () => void;
+}
+
+/*** Formats a date using the current platform locale when no formatter is supplied. */
+function formatDefaultDate(value: string): React.ReactNode {
+  return parseLocalDate(value)?.toLocaleDateString() ?? value;
+}

package/src/features/date-picker/public.test.ts

@@ -2,14 +2,24 @@ import { expect, test } from 'bun:test';
 
 import { ZORA_COMPONENT_META } from '../../metadata/componentMeta';
 
-test('DatePicker exposes a serializable manifest contract through the shared BottomSheet', async () => {
-  const source = await Bun.file('src/features/date-picker/adapters/inbound/DatePicker.tsx').text();
+test('DatePicker keeps one manifest contract across native and web presentation hosts', async () => {
+  const nativeSource = await Bun.file(
+    'src/features/date-picker/adapters/inbound/DatePicker.native.tsx',
+  ).text();
+  const webSource = await Bun.file(
+    'src/features/date-picker/adapters/inbound/DatePicker.web.tsx',
+  ).text();
+  const contentSource = await Bun.file(
+    'src/features/date-picker/composition/DatePickerContent.tsx',
+  ).text();
   const meta = ZORA_COMPONENT_META.DatePicker;
 
   expect(meta.directManifestNode).toBe(true);
   expect(meta.props.value?.type).toBe('string');
   expect(meta.events?.valueChange?.eventType).toBe('datePicker.valueChange');
   expect(meta.bindings?.props?.value?.value.type).toBe('string');
-  expect(source).toContain('useBottomSheet()');
-  expect(source).toContain('formatLocalDate(date)');
+  expect(nativeSource).toContain('useBottomSheet()');
+  expect(webSource).toContain('<Popover');
+  expect(webSource).not.toContain('useBottomSheet');
+  expect(contentSource).toContain('DatePickerCalendar');
 });

package/src/features/time-picker/adapters/inbound/TimePicker.native.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { TimePickerProps } from '../../../../types/time-picker';
+import { useBottomSheet } from '../../../bottom-sheet/public';
+import { TimePickerContent } from '../../composition/TimePickerContent';
+import { TimePickerField } from '../../composition/TimePickerField';
+import { TimePickerTrigger } from '../../composition/TimePickerTrigger';
+
+/*** Renders TimePicker with native BottomSheet presentation. */
+export const TimePicker = withZoraThemeScope(TimePickerInner);
+
+/*** Connects the shared TimePicker field and content to the native BottomSheet host. */
+function TimePickerInner({ themeId: _themeId, mode: _mode, ...props }: TimePickerProps) {
+  const { dismiss, present } = useBottomSheet();
+
+  const openPicker = React.useCallback(() => {
+    if (props.interactionPolicy === 'passive') return;
+
+    present({
+      content: (
+        <TimePickerContent
+          description={props.description}
+          formatTime={props.formatTime}
+          interactionPolicy={props.interactionPolicy}
+          label={props.label}
+          maxTime={props.maxTime}
+          minTime={props.minTime}
+          onDismiss={dismiss}
+          onSelect={(time) => {
+            props.onValueChange?.(time);
+            dismiss();
+          }}
+          stepMinutes={props.stepMinutes}
+          testID={props.testID}
+          value={props.value}
+        />
+      ),
+    });
+  }, [dismiss, present, props]);
+
+  return (
+    <TimePickerField {...props}>
+      <TimePickerTrigger {...props} onPress={openPicker} />
+    </TimePickerField>
+  );
+}

package/src/features/time-picker/adapters/inbound/TimePicker.tsx

@@ -1,258 +1 @@
-import { Field } from '@ankhorage/surface';
-import React from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { TimePickerProps } from '../../../../types/time-picker';
-import { useBottomSheet } from '../../../bottom-sheet/public';
-import { Button } from '../../../button/public';
-import { Stack } from '../../../layout/public';
-import { Text } from '../../../typography/public';
-
-const MINUTES_PER_DAY = 24 * 60;
-const DEFAULT_STEP_MINUTES = 30;
-
-/*** Render the field label and optional supporting description. */
-function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
-  return (
-    <Stack gap="xs">
-      <Text variant="label" weight="semiBold">
-        {label}
-      </Text>
-      {description ? (
-        <Text emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </Stack>
-  );
-}
-
-/*** Parse one HH:mm value to minutes since midnight. */
-function parseTimeToMinutes(value: string | undefined): number | undefined {
-  if (!value) return undefined;
-  const match = /^(\d{2}):(\d{2})$/.exec(value);
-  if (!match) return undefined;
-
-  const hours = Number(match[1]);
-  const minutes = Number(match[2]);
-  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
-  return hours * 60 + minutes;
-}
-
-/*** Format minutes since midnight as HH:mm. */
-function formatMinutes(value: number): string {
-  const hours = Math.floor(value / 60);
-  const minutes = value % 60;
-  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
-}
-
-/*** Normalize the configured time step to a positive whole minute. */
-function resolveStepMinutes(stepMinutes: number | undefined): number {
-  if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
-    return DEFAULT_STEP_MINUTES;
-  }
-  return Math.max(1, Math.floor(stepMinutes));
-}
-
-/*** Generate selectable HH:mm values within the configured range. */
-function generateTimeOptions({
-  minTime,
-  maxTime,
-  stepMinutes,
-}: Pick<TimePickerProps, 'maxTime' | 'minTime' | 'stepMinutes'>): string[] {
-  const step = resolveStepMinutes(stepMinutes);
-  const min = parseTimeToMinutes(minTime) ?? 0;
-  const max = parseTimeToMinutes(maxTime) ?? MINUTES_PER_DAY - 1;
-  return Array.from({ length: Math.ceil(MINUTES_PER_DAY / step) }, (_, index) => index * step)
-    .filter((minute) => minute >= min && minute <= max)
-    .map(formatMinutes);
-}
-
-function TimePickerInner({
-  themeId: _themeId,
-  mode: _mode,
-  value,
-  onValueChange,
-  label,
-  description,
-  error,
-  placeholder = 'Choose time',
-  minTime,
-  maxTime,
-  stepMinutes,
-  disabled = false,
-  required = false,
-  formatTime,
-  testID,
-  interactionPolicy,
-}: TimePickerProps) {
-  const { dismiss, present } = useBottomSheet();
-  const passive = interactionPolicy === 'passive';
-  const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
-
-  /*** Present the time options through the shared BottomSheet controller. */
-  function openPicker() {
-    if (passive) return;
-    present({
-      content: (
-        <TimePickerSheet
-          description={description}
-          formatTime={formatTime}
-          interactionPolicy={interactionPolicy}
-          label={label}
-          maxTime={maxTime}
-          minTime={minTime}
-          onDismiss={dismiss}
-          onSelect={(time) => {
-            onValueChange?.(time);
-            dismiss();
-          }}
-          stepMinutes={stepMinutes}
-          testID={testID}
-          value={value}
-        />
-      ),
-    });
-  }
-
-  return (
-    <Field
-      disabled={disabled}
-      errorText={error}
-      invalid={Boolean(error)}
-      label={label ? renderLabel(label, description) : undefined}
-      required={required}
-      testID={testID}
-    >
-      <Button
-        disabled={disabled}
-        interactionPolicy={interactionPolicy}
-        onPress={openPicker}
-        testID={testID ? `${testID}-trigger` : undefined}
-        trailingIcon={{ name: 'chevron-down-outline' }}
-        variant="outline"
-      >
-        {displayValue}
-      </Button>
-    </Field>
-  );
-}
-
-interface TimePickerSheetProps extends Pick<
-  TimePickerProps,
-  | 'description'
-  | 'formatTime'
-  | 'interactionPolicy'
-  | 'label'
-  | 'maxTime'
-  | 'minTime'
-  | 'stepMinutes'
-  | 'testID'
-  | 'value'
-> {
-  onDismiss: () => void;
-  onSelect: (value: string) => void;
-}
-
-/*** Render time selection content inside the shared BottomSheet host. */
-function TimePickerSheet({
-  description,
-  formatTime,
-  interactionPolicy,
-  label,
-  maxTime,
-  minTime,
-  onDismiss,
-  onSelect,
-  stepMinutes,
-  testID,
-  value,
-}: TimePickerSheetProps) {
-  const options = React.useMemo(
-    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
-    [maxTime, minTime, stepMinutes],
-  );
-
-  return (
-    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
-      <PickerSheetHeader description={description} title={label ?? 'Choose time'} />
-      <ScrollView style={styles.options}>
-        <Stack gap="xxs">
-          {options.map((option) => (
-            <TimePickerOption
-              formatTime={formatTime}
-              interactionPolicy={interactionPolicy}
-              key={option}
-              onSelect={onSelect}
-              option={option}
-              selected={option === value}
-              testID={testID}
-            />
-          ))}
-        </Stack>
-      </ScrollView>
-      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
-        Cancel
-      </Button>
-    </Stack>
-  );
-}
-
-/*** Render the shared title block used by the time sheet. */
-function PickerSheetHeader({
-  description,
-  title,
-}: {
-  description: React.ReactNode | undefined;
-  title: React.ReactNode;
-}) {
-  return (
-    <Stack gap="xxs">
-      <Text align="center" variant="label" weight="semiBold">
-        {title}
-      </Text>
-      {description ? (
-        <Text align="center" emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </Stack>
-  );
-}
-
-/*** Render one accessible selectable time option. */
-function TimePickerOption({
-  formatTime,
-  interactionPolicy,
-  onSelect,
-  option,
-  selected,
-  testID,
-}: Pick<TimePickerSheetProps, 'formatTime' | 'interactionPolicy' | 'testID'> & {
-  onSelect: (value: string) => void;
-  option: string;
-  selected: boolean;
-}) {
-  return (
-    <Button
-      accessibilityState={{ selected }}
-      fullWidth
-      interactionPolicy={interactionPolicy}
-      onPress={() => onSelect(option)}
-      testID={testID ? `${testID}-option-${option}` : undefined}
-      variant={selected ? 'soft' : 'ghost'}
-    >
-      {formatTime ? formatTime(option) : option}
-    </Button>
-  );
-}
-
-const styles = StyleSheet.create({
-  options: { maxHeight: 360 },
-});
-
-/***
- * Time input control with bottom-sheet selection and formatted display value.
- */
-export const TimePicker = withZoraThemeScope(TimePickerInner);
+export { TimePicker } from './TimePicker.web';