@ankhorage/zora 2.4.5 → 2.4.7

package/src/components/date-picker/DatePicker.tsx

@@ -0,0 +1,242 @@
+import { Field } from '@ankhorage/surface';
+import React from 'react';
+
+import { Box, Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { ActionSheet } from '../action-sheet';
+import { Button } from '../button';
+import { Text } from '../text';
+import type { DatePickerProps } from './types';
+
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const;
+const DAY_CELL_WIDTH = 42;
+
+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>
+  );
+}
+
+function startOfLocalDay(value: Date): Date {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+
+function isSameLocalDay(left: Date | null, right: Date): boolean {
+  if (!left) {
+    return false;
+  }
+
+  return startOfLocalDay(left).getTime() === startOfLocalDay(right).getTime();
+}
+
+function isBeforeLocalDay(left: Date, right: Date): boolean {
+  return startOfLocalDay(left).getTime() < startOfLocalDay(right).getTime();
+}
+
+function isAfterLocalDay(left: Date, right: Date): boolean {
+  return startOfLocalDay(left).getTime() > startOfLocalDay(right).getTime();
+}
+
+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;
+}
+
+function formatMonthLabel(value: Date): string {
+  return value.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+}
+
+function formatDefaultDate(value: Date): string {
+  return value.toLocaleDateString();
+}
+
+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 days: (Date | null)[] = [];
+
+  for (let offset = 0; offset < firstDay.getDay(); offset += 1) {
+    days.push(null);
+  }
+
+  for (let day = 1; day <= dayCount; day += 1) {
+    days.push(new Date(month.getFullYear(), month.getMonth(), day));
+  }
+
+  while (days.length % 7 !== 0) {
+    days.push(null);
+  }
+
+  return days;
+}
+
+function resolveInitialMonth(value: Date | null, minDate: Date | undefined): Date {
+  const base = value ?? minDate ?? new Date();
+  return new Date(base.getFullYear(), base.getMonth(), 1);
+}
+
+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;
+}
+
+function DatePickerInner({
+  themeId: _themeId,
+  mode: _mode,
+  value,
+  onValueChange,
+  label,
+  description,
+  error,
+  placeholder = 'Choose date',
+  minDate,
+  maxDate,
+  disabled = false,
+  required = false,
+  formatDate,
+  testID,
+}: DatePickerProps) {
+  const [visible, setVisible] = React.useState(false);
+  const [displayMonth, setDisplayMonth] = React.useState(() => resolveInitialMonth(value, minDate));
+  const monthDays = React.useMemo(() => createMonthDays(displayMonth), [displayMonth]);
+  const previousMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() - 1, 1);
+  const nextMonth = new Date(displayMonth.getFullYear(), displayMonth.getMonth() + 1, 1);
+  const displayValue = value
+    ? formatDate
+      ? formatDate(value)
+      : formatDefaultDate(value)
+    : placeholder;
+
+  React.useEffect(() => {
+    if (visible) {
+      setDisplayMonth(resolveInitialMonth(value, minDate));
+    }
+  }, [minDate, value, visible]);
+
+  return (
+    <Field
+      disabled={disabled}
+      errorText={error}
+      invalid={Boolean(error)}
+      label={label ? renderLabel(label, description) : undefined}
+      required={required}
+      testID={testID}
+    >
+      <Button
+        disabled={disabled}
+        onPress={() => setVisible(true)}
+        testID={testID ? `${testID}-trigger` : undefined}
+        trailingIcon={{ name: 'calendar-outline' }}
+        variant="outline"
+      >
+        {displayValue}
+      </Button>
+      <ActionSheet
+        description={description}
+        onDismiss={() => setVisible(false)}
+        testID={testID ? `${testID}-sheet` : undefined}
+        title={label ?? 'Choose date'}
+        visible={visible}
+      >
+        <Stack gap="m">
+          <Stack align="center" direction="row" justify="space-between">
+            <Button
+              disabled={!canNavigateToMonth(previousMonth, minDate, maxDate)}
+              onPress={() => setDisplayMonth(previousMonth)}
+              size="s"
+              variant="ghost"
+            >
+              Previous
+            </Button>
+            <Text align="center" variant="label" weight="semiBold">
+              {formatMonthLabel(displayMonth)}
+            </Text>
+            <Button
+              disabled={!canNavigateToMonth(nextMonth, minDate, maxDate)}
+              onPress={() => setDisplayMonth(nextMonth)}
+              size="s"
+              variant="ghost"
+            >
+              Next
+            </Button>
+          </Stack>
+
+          <Stack direction="row" justify="space-between">
+            {WEEKDAY_LABELS.map((weekday) => (
+              <Box key={weekday} style={{ width: DAY_CELL_WIDTH }}>
+                <Text align="center" emphasis="muted" variant="caption" weight="semiBold">
+                  {weekday}
+                </Text>
+              </Box>
+            ))}
+          </Stack>
+
+          <Stack direction="row" gap="xs" style={{ flexWrap: 'wrap' }}>
+            {monthDays.map((day, index) => {
+              if (!day) {
+                return <Box key={`empty-${index}`} style={{ width: DAY_CELL_WIDTH }} />;
+              }
+
+              const selected = isSameLocalDay(value, day);
+              const dayDisabled = isDateDisabled(day, minDate, maxDate);
+
+              return (
+                <Box key={day.toISOString()} style={{ width: DAY_CELL_WIDTH }}>
+                  <Button
+                    color={selected ? 'primary' : 'neutral'}
+                    disabled={dayDisabled}
+                    onPress={() => {
+                      onValueChange?.(startOfLocalDay(day));
+                      setVisible(false);
+                    }}
+                    size="s"
+                    testID={testID ? `${testID}-day-${day.getDate()}` : undefined}
+                    variant={selected ? 'solid' : 'ghost'}
+                  >
+                    {day.getDate()}
+                  </Button>
+                </Box>
+              );
+            })}
+          </Stack>
+        </Stack>
+      </ActionSheet>
+    </Field>
+  );
+}
+
+export const DatePicker = withZoraThemeScope(DatePickerInner);

package/src/components/date-picker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerValue } from './types';

package/src/components/date-picker/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const datePickerMeta = {
+  name: 'DatePicker',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Code-facing ActionSheet-backed date picker; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/date-picker/types.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type DatePickerValue = Date | null;
+
+export interface DatePickerProps extends ZoraBaseProps {
+  value: DatePickerValue;
+  onValueChange?: (value: DatePickerValue) => void;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: React.ReactNode;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  required?: boolean;
+  formatDate?: (value: Date) => React.ReactNode;
+  testID?: string;
+}

package/src/components/pagination/Pagination.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Button } from '../button';
+import { Text } from '../text';
+import type { PaginationProps } from './types';
+
+type PaginationItem = number | 'ellipsis';
+
+function clampInteger(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+
+  return Math.min(Math.max(Math.trunc(value), min), max);
+}
+
+function createRange(start: number, end: number): number[] {
+  if (end < start) {
+    return [];
+  }
+
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+
+function normalizeCount(value: number | undefined, fallback: number): number {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.max(0, Math.trunc(value));
+}
+
+function createPaginationItems({
+  page,
+  pageCount,
+  siblingCount,
+  boundaryCount,
+  compact,
+}: {
+  page: number;
+  pageCount: number;
+  siblingCount: number;
+  boundaryCount: number;
+  compact: boolean;
+}): readonly PaginationItem[] {
+  if (pageCount <= 0) {
+    return [];
+  }
+
+  if (compact) {
+    return [page];
+  }
+
+  const boundaries = createRange(1, Math.min(boundaryCount, pageCount));
+  const trailingBoundaries = createRange(Math.max(pageCount - boundaryCount + 1, 1), pageCount);
+  const siblings = createRange(
+    Math.max(page - siblingCount, 1),
+    Math.min(page + siblingCount, pageCount),
+  );
+  const pages = [...new Set([...boundaries, ...siblings, ...trailingBoundaries])].sort(
+    (left, right) => left - right,
+  );
+  const items: PaginationItem[] = [];
+
+  pages.forEach((nextPage, index) => {
+    const previousPage = pages[index - 1];
+    if (previousPage !== undefined && nextPage - previousPage > 1) {
+      items.push('ellipsis');
+    }
+
+    items.push(nextPage);
+  });
+
+  return items;
+}
+
+function PaginationInner({
+  themeId: _themeId,
+  mode: _mode,
+  page,
+  pageCount,
+  onPageChange,
+  disabled = false,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showFirstLast = false,
+  previousLabel = 'Previous',
+  nextLabel = 'Next',
+  firstLabel = 'First',
+  lastLabel = 'Last',
+  compact = false,
+  testID,
+}: PaginationProps) {
+  const normalizedPageCount = Math.max(0, Math.trunc(Number.isFinite(pageCount) ? pageCount : 0));
+  const currentPage = clampInteger(page, 1, Math.max(normalizedPageCount, 1));
+  const safeSiblingCount = normalizeCount(siblingCount, 1);
+  const safeBoundaryCount = normalizeCount(boundaryCount, 1);
+  const items = createPaginationItems({
+    boundaryCount: safeBoundaryCount,
+    compact,
+    page: currentPage,
+    pageCount: normalizedPageCount,
+    siblingCount: safeSiblingCount,
+  });
+  const canGoPrevious = currentPage > 1;
+  const canGoNext = currentPage < normalizedPageCount;
+  const navigationDisabled = disabled || normalizedPageCount <= 1;
+
+  const changePage = (nextPage: number) => {
+    const clampedPage = clampInteger(nextPage, 1, Math.max(normalizedPageCount, 1));
+    if (disabled || clampedPage === currentPage) {
+      return;
+    }
+
+    onPageChange?.(clampedPage);
+  };
+
+  return (
+    <Stack align="center" direction="row" gap="xs" testID={testID}>
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || currentPage === 1}
+          onPress={() => changePage(1)}
+          size="s"
+          testID={testID ? `${testID}-first` : undefined}
+          variant="ghost"
+        >
+          {firstLabel}
+        </Button>
+      ) : null}
+
+      <Button
+        disabled={navigationDisabled || !canGoPrevious}
+        onPress={() => changePage(currentPage - 1)}
+        size="s"
+        testID={testID ? `${testID}-previous` : undefined}
+        variant="ghost"
+      >
+        {previousLabel}
+      </Button>
+
+      {items.map((item, index) =>
+        item === 'ellipsis' ? (
+          <Text key={`ellipsis-${index}`} emphasis="muted" variant="bodySmall">
+            …
+          </Text>
+        ) : (
+          <Button
+            color={item === currentPage ? 'primary' : 'neutral'}
+            disabled={disabled}
+            key={item}
+            onPress={() => changePage(item)}
+            size="s"
+            testID={testID ? `${testID}-page-${item}` : undefined}
+            variant={item === currentPage ? 'solid' : 'ghost'}
+          >
+            {item}
+          </Button>
+        ),
+      )}
+
+      <Button
+        disabled={navigationDisabled || !canGoNext}
+        onPress={() => changePage(currentPage + 1)}
+        size="s"
+        testID={testID ? `${testID}-next` : undefined}
+        variant="ghost"
+      >
+        {nextLabel}
+      </Button>
+
+      {showFirstLast ? (
+        <Button
+          disabled={navigationDisabled || currentPage === normalizedPageCount}
+          onPress={() => changePage(normalizedPageCount)}
+          size="s"
+          testID={testID ? `${testID}-last` : undefined}
+          variant="ghost"
+        >
+          {lastLabel}
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}
+
+export const Pagination = withZoraThemeScope(PaginationInner);

package/src/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './types';

package/src/components/pagination/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const paginationMeta = {
+  name: 'Pagination',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Code-facing controlled pagination component; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/pagination/types.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PaginationProps extends ZoraBaseProps {
+  page: number;
+  pageCount: number;
+  onPageChange?: (page: number) => void;
+  disabled?: boolean;
+  siblingCount?: number;
+  boundaryCount?: number;
+  showFirstLast?: boolean;
+  previousLabel?: React.ReactNode;
+  nextLabel?: React.ReactNode;
+  firstLabel?: React.ReactNode;
+  lastLabel?: React.ReactNode;
+  compact?: boolean;
+  testID?: string;
+}

package/src/components/time-picker/TimePicker.tsx

@@ -0,0 +1,152 @@
+import { Field } from '@ankhorage/surface';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { ActionSheet, ActionSheetItem } from '../action-sheet';
+import { Button } from '../button';
+import { Text } from '../text';
+import type { TimePickerProps } from './types';
+
+const MINUTES_PER_DAY = 24 * 60;
+const DEFAULT_STEP_MINUTES = 30;
+
+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>
+  );
+}
+
+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;
+}
+
+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')}`;
+}
+
+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));
+}
+
+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;
+  const options: string[] = [];
+
+  for (let minute = 0; minute < MINUTES_PER_DAY; minute += step) {
+    if (minute >= min && minute <= max) {
+      options.push(formatMinutes(minute));
+    }
+  }
+
+  return options;
+}
+
+function TimePickerInner({
+  themeId: _themeId,
+  mode: _mode,
+  value,
+  onValueChange,
+  label,
+  description,
+  error,
+  placeholder = 'Choose time',
+  minTime,
+  maxTime,
+  stepMinutes,
+  disabled = false,
+  required = false,
+  formatTime,
+  testID,
+}: TimePickerProps) {
+  const [visible, setVisible] = React.useState(false);
+  const options = React.useMemo(
+    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
+    [maxTime, minTime, stepMinutes],
+  );
+  const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
+
+  return (
+    <Field
+      disabled={disabled}
+      errorText={error}
+      invalid={Boolean(error)}
+      label={label ? renderLabel(label, description) : undefined}
+      required={required}
+      testID={testID}
+    >
+      <Button
+        disabled={disabled}
+        onPress={() => setVisible(true)}
+        testID={testID ? `${testID}-trigger` : undefined}
+        trailingIcon={{ name: 'chevron-down-outline' }}
+        variant="outline"
+      >
+        {displayValue}
+      </Button>
+      <ActionSheet
+        description={description}
+        onDismiss={() => setVisible(false)}
+        testID={testID ? `${testID}-sheet` : undefined}
+        title={label ?? 'Choose time'}
+        visible={visible}
+      >
+        <ScrollView style={{ maxHeight: 360 }}>
+          <Stack gap="xxs">
+            {options.map((option) => (
+              <ActionSheetItem
+                key={option}
+                label={formatTime ? formatTime(option) : option}
+                onPress={() => {
+                  onValueChange?.(option);
+                  setVisible(false);
+                }}
+                selected={option === value}
+                testID={testID ? `${testID}-option-${option}` : undefined}
+              />
+            ))}
+          </Stack>
+        </ScrollView>
+      </ActionSheet>
+    </Field>
+  );
+}
+
+export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/time-picker/index.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps, TimePickerValue } from './types';

package/src/components/time-picker/meta.ts

@@ -0,0 +1,10 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const timePickerMeta = {
+  name: 'TimePicker',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Code-facing ActionSheet-backed time picker; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/time-picker/types.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type TimePickerValue = string | null;
+
+export interface TimePickerProps extends ZoraBaseProps {
+  value: TimePickerValue;
+  onValueChange?: (value: TimePickerValue) => void;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: React.ReactNode;
+  minTime?: string;
+  maxTime?: string;
+  stepMinutes?: number;
+  disabled?: boolean;
+  required?: boolean;
+  formatTime?: (value: string) => React.ReactNode;
+  testID?: string;
+}