@ankhorage/zora 2.4.4 → 2.4.6

package/src/components/data-table/types.ts

@@ -0,0 +1,57 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+import type { MenuActionIntent } from '../menu';
+
+export type DataTableColumnAlign = 'start' | 'center' | 'end';
+export type DataTableDensity = 'comfortable' | 'compact';
+export type DataTableSortDirection = 'asc' | 'desc';
+
+export interface DataTableSortState {
+  columnId: string;
+  direction: DataTableSortDirection;
+}
+
+export interface DataTableCellContext<TRow extends object> {
+  row: TRow;
+  rowIndex: number;
+  column: DataTableColumn<TRow>;
+  value: unknown;
+}
+
+export interface DataTableColumn<TRow extends object> {
+  id: string;
+  header: React.ReactNode;
+  accessor?: keyof TRow;
+  align?: DataTableColumnAlign;
+  width?: number;
+  minWidth?: number;
+  sortable?: boolean;
+  renderCell?: (context: DataTableCellContext<TRow>) => React.ReactNode;
+}
+
+export interface DataTableRowAction<TRow extends object> {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: ButtonIconSpec;
+  intent?: MenuActionIntent;
+  disabled?: boolean;
+  onPress?: (row: TRow) => void;
+}
+
+export interface DataTableProps<TRow extends object> extends ZoraBaseProps {
+  columns: readonly DataTableColumn<TRow>[];
+  rows: readonly TRow[];
+  rowId: (row: TRow, index: number) => string;
+  rowActions?: (row: TRow, index: number) => readonly DataTableRowAction<TRow>[];
+  sort?: DataTableSortState;
+  onSortChange?: (sort: DataTableSortState) => void;
+  loading?: boolean;
+  loadingRows?: number;
+  emptyTitle?: React.ReactNode;
+  emptyDescription?: React.ReactNode;
+  density?: DataTableDensity;
+  testID?: string;
+}

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/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;
+}

package/src/index.ts

@@ -24,6 +24,19 @@ export type { ChipProps } from './components/chip';
 export { Chip } from './components/chip';
 export type { ChipGroupItem, ChipGroupProps } from './components/chip-group';
 export { ChipGroup } from './components/chip-group';
+export type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableColumnAlign,
+  DataTableDensity,
+  DataTableProps,
+  DataTableRowAction,
+  DataTableSortDirection,
+  DataTableSortState,
+} from './components/data-table';
+export { DataTable } from './components/data-table';
+export type { DatePickerProps, DatePickerValue } from './components/date-picker';
+export { DatePicker } from './components/date-picker';
 export type { DrawerProps } from './components/drawer';
 export { Drawer } from './components/drawer';
 export type {
@@ -121,6 +134,8 @@ export type {
 export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
+export type { TimePickerProps, TimePickerValue } from './components/time-picker';
+export { TimePicker } from './components/time-picker';
 export type { ToastOptions, ToastProps, ToastProviderProps, ToastStatus } from './components/toast';
 export { Toast, ToastProvider, useToast } from './components/toast';
 export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';

package/src/metadata/componentMeta.ts

@@ -9,6 +9,8 @@ import { cardMeta } from '../components/card/meta';
 import { checkboxGroupMeta, checkboxMeta } from '../components/checkbox/meta';
 import { chipMeta } from '../components/chip/meta';
 import { chipGroupMeta } from '../components/chip-group/meta';
+import { dataTableMeta } from '../components/data-table/meta';
+import { datePickerMeta } from '../components/date-picker/meta';
 import { drawerMeta } from '../components/drawer/meta';
 import { formActionsMeta, formErrorMeta, formFieldMeta, formMeta } from '../components/form/meta';
 import { headingMeta } from '../components/heading/meta';
@@ -36,6 +38,7 @@ import {
 import { tabsMeta } from '../components/tabs/meta';
 import { textMeta } from '../components/text/meta';
 import { textareaMeta } from '../components/textarea/meta';
+import { timePickerMeta } from '../components/time-picker/meta';
 import { toastMeta, toastProviderMeta } from '../components/toast/meta';
 import { toolbarActionMeta, toolbarMeta } from '../components/toolbar/meta';
 import { foundationMetas } from '../foundation/meta';
@@ -94,6 +97,8 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   CheckboxGroup: checkboxGroupMeta,
   Chip: chipMeta,
   ChipGroup: chipGroupMeta,
+  DataTable: dataTableMeta,
+  DatePicker: datePickerMeta,
   Drawer: drawerMeta,
   DropdownMenu: dropdownMenuMeta,
   Form: formMeta,
@@ -124,6 +129,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Tabs: tabsMeta,
   Text: textMeta,
   Textarea: textareaMeta,
+  TimePicker: timePickerMeta,
   Toast: toastMeta,
   ToastProvider: toastProviderMeta,
   Toolbar: toolbarMeta,