@ankhorage/zora 2.4.3 → 2.4.5

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -0,0 +1,32 @@
+import { ActionSheetItem as SurfaceActionSheetItem } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Icon } from '../icon';
+import type { ActionSheetItemProps } from './types';
+
+function ActionSheetItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  icon,
+  leading,
+  ...props
+}: ActionSheetItemProps) {
+  const { theme } = useZoraTheme();
+  const resolvedLeading =
+    leading ??
+    (icon ? (
+      <Icon
+        color={theme.semantics.content.muted}
+        name={icon.name}
+        provider={icon.provider}
+        size={resolveIconSize('s')}
+      />
+    ) : undefined);
+
+  return <SurfaceActionSheetItem {...props} leading={resolvedLeading} />;
+}
+
+export const ActionSheetItem = withZoraThemeScope(ActionSheetItemInner);

package/src/components/action-sheet/index.ts

@@ -0,0 +1,3 @@
+export { ActionSheet } from './ActionSheet';
+export { ActionSheetItem } from './ActionSheetItem';
+export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/meta.ts

@@ -0,0 +1,19 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const actionSheetMeta = {
+  name: 'ActionSheet',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Surface-backed contextual action sheet; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const actionSheetItemMeta = {
+  name: 'ActionSheetItem',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Surface-backed contextual action sheet row; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/action-sheet/types.ts

@@ -0,0 +1,23 @@
+import type {
+  ActionSheetItemProps as SurfaceActionSheetItemProps,
+  ActionSheetProps as SurfaceActionSheetProps,
+  ButtonIconSpec,
+} from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraColor } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ActionSheetProps
+  extends ZoraBaseProps, Omit<SurfaceActionSheetProps, 'children' | 'mode' | 'themeId'> {
+  children?: React.ReactNode;
+}
+
+export interface ActionSheetItemProps
+  extends
+    ZoraBaseProps,
+    Omit<SurfaceActionSheetItemProps, 'color' | 'leading' | 'mode' | 'themeId'> {
+  color?: ZoraColor;
+  icon?: ButtonIconSpec;
+  leading?: React.ReactNode;
+}

package/src/components/data-table/DataTable.tsx

@@ -0,0 +1,388 @@
+import React from 'react';
+import { ScrollView, type ViewStyle } from 'react-native';
+
+import { Box, Show, Stack } from '../../foundation';
+import { EmptyState } from '../../patterns/empty-state';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Button } from '../button';
+import { Card } from '../card';
+import { IconButton } from '../icon-button';
+import { DropdownMenu, type MenuAction } from '../menu';
+import { SkeletonList } from '../skeleton';
+import { Text, type TextAlign } from '../text';
+import type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableColumnAlign,
+  DataTableDensity,
+  DataTableProps,
+  DataTableRowAction,
+  DataTableSortDirection,
+} from './types';
+
+function resolveTextAlign(align: DataTableColumnAlign | undefined): TextAlign {
+  switch (align) {
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'right';
+    case 'start':
+    default:
+      return 'left';
+  }
+}
+
+function resolveCellJustify(align: DataTableColumnAlign | undefined): ViewStyle['alignItems'] {
+  switch (align) {
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'flex-end';
+    case 'start':
+    default:
+      return 'flex-start';
+  }
+}
+
+function resolveCellStyle<TRow extends object>(column: DataTableColumn<TRow>): ViewStyle {
+  return {
+    alignItems: resolveCellJustify(column.align),
+    flexGrow: column.width === undefined ? 1 : 0,
+    flexShrink: 0,
+    minWidth: column.minWidth ?? 140,
+    width: column.width,
+  };
+}
+
+function resolveRowPadding(density: DataTableDensity) {
+  return density === 'compact'
+    ? { px: 'm' as const, py: 's' as const }
+    : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveAccessorValue<TRow extends object>(row: TRow, column: DataTableColumn<TRow>) {
+  if (column.accessor === undefined) {
+    return undefined;
+  }
+
+  return row[column.accessor];
+}
+
+function renderDefaultCell(value: unknown): React.ReactNode {
+  if (value === null || value === undefined) {
+    return '—';
+  }
+
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+
+  if (typeof value === 'bigint') {
+    return value.toString();
+  }
+
+  if (value instanceof Date) {
+    return value.toLocaleDateString();
+  }
+
+  return '—';
+}
+
+function createCellContext<TRow extends object>(
+  column: DataTableColumn<TRow>,
+  row: TRow,
+  rowIndex: number,
+): DataTableCellContext<TRow> {
+  return {
+    column,
+    row,
+    rowIndex,
+    value: resolveAccessorValue(row, column),
+  };
+}
+
+function renderCell<TRow extends object>(
+  column: DataTableColumn<TRow>,
+  row: TRow,
+  rowIndex: number,
+) {
+  const context = createCellContext(column, row, rowIndex);
+  return column.renderCell ? column.renderCell(context) : renderDefaultCell(context.value);
+}
+
+function renderTableCell<TRow extends object>(
+  column: DataTableColumn<TRow>,
+  row: TRow,
+  rowIndex: number,
+) {
+  if (column.renderCell) {
+    return column.renderCell(createCellContext(column, row, rowIndex));
+  }
+
+  return (
+    <Text align={resolveTextAlign(column.align)} variant="bodySmall">
+      {renderDefaultCell(resolveAccessorValue(row, column))}
+    </Text>
+  );
+}
+
+function resolveNextSortDirection(
+  current: DataTableSortDirection | undefined,
+): DataTableSortDirection {
+  return current === 'asc' ? 'desc' : 'asc';
+}
+
+function mapRowActions<TRow extends object>(
+  row: TRow,
+  actions: readonly DataTableRowAction<TRow>[],
+): readonly MenuAction[] {
+  return actions.map((action) => ({
+    description: action.description,
+    disabled: action.disabled,
+    icon: action.icon,
+    id: action.id,
+    intent: action.intent,
+    onPress: action.onPress ? () => action.onPress?.(row) : undefined,
+    title: action.title,
+  }));
+}
+
+function renderRowActions<TRow extends object>({
+  row,
+  rowIndex,
+  rowActions,
+  testID,
+}: {
+  row: TRow;
+  rowIndex: number;
+  rowActions: DataTableProps<TRow>['rowActions'];
+  testID?: string;
+}) {
+  const actions = rowActions?.(row, rowIndex) ?? [];
+
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu
+      actions={mapRowActions(row, actions)}
+      trigger={
+        <IconButton
+          icon={{ name: 'ellipsis-horizontal' }}
+          label="Row actions"
+          size="s"
+          variant="ghost"
+        />
+      }
+      testID={testID ? `${testID}-row-actions-${rowIndex}` : undefined}
+    />
+  );
+}
+
+function DataTableHeader<TRow extends object>({
+  columns,
+  sort,
+  onSortChange,
+  density,
+}: Pick<DataTableProps<TRow>, 'columns' | 'density' | 'onSortChange' | 'sort'>) {
+  const padding = resolveRowPadding(density ?? 'comfortable');
+
+  return (
+    <Box bg="subtle" borderColor="border" borderWidth={1} radius="m">
+      <Stack direction="row" align="center">
+        {columns.map((column) => {
+          const currentDirection = sort?.columnId === column.id ? sort.direction : undefined;
+          const sortable = Boolean(column.sortable && onSortChange);
+          const directionLabel =
+            currentDirection === undefined ? '' : currentDirection === 'asc' ? ' ↑' : ' ↓';
+
+          return (
+            <Box key={column.id} px={padding.px} py={padding.py} style={resolveCellStyle(column)}>
+              {sortable ? (
+                <Button
+                  color="primary"
+                  onPress={() =>
+                    onSortChange?.({
+                      columnId: column.id,
+                      direction: resolveNextSortDirection(currentDirection),
+                    })
+                  }
+                  size="s"
+                  variant="ghost"
+                >
+                  {column.header}
+                  {directionLabel}
+                </Button>
+              ) : (
+                <Text
+                  align={resolveTextAlign(column.align)}
+                  emphasis="muted"
+                  variant="caption"
+                  weight="semiBold"
+                >
+                  {column.header}
+                </Text>
+              )}
+            </Box>
+          );
+        })}
+        <Box px={padding.px} py={padding.py} style={{ minWidth: 56, width: 56 }}>
+          <Text align="right" emphasis="muted" variant="caption" weight="semiBold">
+            Actions
+          </Text>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+function DataTableDesktop<TRow extends object>({
+  columns,
+  rows,
+  rowActions,
+  rowId,
+  sort,
+  onSortChange,
+  density,
+  testID,
+}: DataTableProps<TRow>) {
+  const padding = resolveRowPadding(density ?? 'comfortable');
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <Box minWidth={720} style={{ width: '100%' }}>
+        <Stack gap="xs">
+          <DataTableHeader
+            columns={columns}
+            density={density}
+            onSortChange={onSortChange}
+            sort={sort}
+          />
+          <Stack gap="xs">
+            {rows.map((row, rowIndex) => (
+              <Box
+                bg="surface"
+                borderColor="border"
+                borderWidth={1}
+                key={rowId(row, rowIndex)}
+                radius="m"
+                testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+              >
+                <Stack direction="row" align="center">
+                  {columns.map((column) => (
+                    <Box
+                      key={column.id}
+                      px={padding.px}
+                      py={padding.py}
+                      style={resolveCellStyle(column)}
+                    >
+                      {renderTableCell(column, row, rowIndex)}
+                    </Box>
+                  ))}
+                  <Box
+                    px={padding.px}
+                    py={padding.py}
+                    style={{ alignItems: 'flex-end', minWidth: 56, width: 56 }}
+                  >
+                    {renderRowActions({ row, rowActions, rowIndex, testID })}
+                  </Box>
+                </Stack>
+              </Box>
+            ))}
+          </Stack>
+        </Stack>
+      </Box>
+    </ScrollView>
+  );
+}
+
+function DataTableMobile<TRow extends object>({
+  columns,
+  rows,
+  rowActions,
+  rowId,
+  testID,
+}: DataTableProps<TRow>) {
+  const [primaryColumn, ...detailColumns] = columns;
+
+  return (
+    <Stack gap="s">
+      {rows.map((row, rowIndex) => {
+        const title = primaryColumn
+          ? renderCell(primaryColumn, row, rowIndex)
+          : `Row ${rowIndex + 1}`;
+        const actions = renderRowActions({ row, rowActions, rowIndex, testID });
+
+        return (
+          <Card
+            actions={actions}
+            compact
+            key={rowId(row, rowIndex)}
+            testID={testID ? `${testID}-card-${rowIndex}` : undefined}
+            title={title}
+          >
+            <Stack gap="s">
+              {detailColumns.map((column) => (
+                <Stack gap="xxs" key={column.id}>
+                  <Text emphasis="muted" variant="caption" weight="semiBold">
+                    {column.header}
+                  </Text>
+                  {column.renderCell ? (
+                    renderCell(column, row, rowIndex)
+                  ) : (
+                    <Text variant="bodySmall">
+                      {renderDefaultCell(resolveAccessorValue(row, column))}
+                    </Text>
+                  )}
+                </Stack>
+              ))}
+            </Stack>
+          </Card>
+        );
+      })}
+    </Stack>
+  );
+}
+
+function DataTableInner<TRow extends object>({
+  themeId: _themeId,
+  mode: _mode,
+  rows,
+  loading = false,
+  loadingRows = 5,
+  emptyTitle = 'No data',
+  emptyDescription = 'There are no rows to display.',
+  testID,
+  density = 'comfortable',
+  ...props
+}: DataTableProps<TRow>) {
+  if (loading) {
+    return <SkeletonList rows={loadingRows} variant="card" testID={testID} />;
+  }
+
+  if (rows.length === 0) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} />;
+  }
+
+  const tableProps: DataTableProps<TRow> = {
+    ...props,
+    density,
+    emptyDescription,
+    emptyTitle,
+    loading,
+    loadingRows,
+    rows,
+    testID,
+  };
+
+  return (
+    <Box testID={testID}>
+      <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps} />}>
+        <DataTableDesktop {...tableProps} />
+      </Show>
+    </Box>
+  );
+}
+
+export const DataTable = withZoraThemeScope(DataTableInner);

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

@@ -0,0 +1,11 @@
+export { DataTable } from './DataTable';
+export type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableColumnAlign,
+  DataTableDensity,
+  DataTableProps,
+  DataTableRowAction,
+  DataTableSortDirection,
+  DataTableSortState,
+} from './types';

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

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

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/menu/DropdownMenu.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Menu } from './Menu';
+import type { DropdownMenuProps } from './types';
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <Menu {...props} />;
+}

package/src/components/menu/Menu.tsx

@@ -0,0 +1,63 @@
+import { Menu as SurfaceMenu, type MenuAction as SurfaceMenuAction } from '@ankhorage/surface';
+import React, { useMemo } from 'react';
+
+import { Box } from '../../foundation';
+import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { Icon } from '../icon';
+import type { MenuAction, MenuProps } from './types';
+
+function renderActionLeading(action: MenuAction, iconColor: string) {
+  if (action.leading) {
+    return action.leading;
+  }
+
+  if (!action.icon) {
+    return undefined;
+  }
+
+  return (
+    <Icon
+      color={iconColor}
+      name={action.icon.name}
+      provider={action.icon.provider}
+      size={resolveIconSize('s')}
+    />
+  );
+}
+
+function renderActionTrailing(action: MenuAction) {
+  if (!action.trailing) {
+    return undefined;
+  }
+
+  return <Box>{action.trailing}</Box>;
+}
+
+function toSurfaceAction(action: MenuAction, iconColor: string): SurfaceMenuAction {
+  return {
+    activate: action.onPress,
+    description: action.description,
+    disabled: action.disabled,
+    id: action.id,
+    intent: action.intent,
+    leading: renderActionLeading(action, iconColor),
+    selected: action.selected,
+    title: action.title,
+    trailing: renderActionTrailing(action),
+  };
+}
+
+function MenuInner({ themeId: _themeId, mode: _mode, actions, onDismiss, ...props }: MenuProps) {
+  const { theme } = useZoraTheme();
+  const iconColor = theme.semantics.content.muted;
+  const surfaceActions = useMemo(
+    () => actions.map((action) => toSurfaceAction(action, iconColor)),
+    [actions, iconColor],
+  );
+
+  return <SurfaceMenu {...props} actions={surfaceActions} dismiss={onDismiss} />;
+}
+
+export const Menu = withZoraThemeScope(MenuInner);

package/src/components/menu/index.ts

@@ -0,0 +1,3 @@
+export { DropdownMenu } from './DropdownMenu';
+export { Menu } from './Menu';
+export type { DropdownMenuProps, MenuAction, MenuActionIntent, MenuProps } from './types';

package/src/components/menu/meta.ts

@@ -0,0 +1,19 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const menuMeta = {
+  name: 'Menu',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Surface-backed action menu; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;
+
+export const dropdownMenuMeta = {
+  name: 'DropdownMenu',
+  category: 'component',
+  directManifestNode: false,
+  allowedChildren: [],
+  note: 'Product-facing alias for Menu trigger/action composition; not represented as a manifest node in v1.',
+  props: {},
+} as const satisfies ZoraComponentMeta;

package/src/components/menu/types.ts

@@ -0,0 +1,31 @@
+import type {
+  ButtonIconSpec,
+  MenuActionIntent as SurfaceMenuActionIntent,
+  MenuProps as SurfaceMenuProps,
+} from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type MenuActionIntent = SurfaceMenuActionIntent;
+
+export interface MenuAction {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: ButtonIconSpec;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  intent?: MenuActionIntent;
+  disabled?: boolean;
+  selected?: boolean;
+  onPress?: () => void;
+}
+
+export interface MenuProps
+  extends ZoraBaseProps, Omit<SurfaceMenuProps, 'actions' | 'dismiss' | 'mode' | 'themeId'> {
+  actions: readonly MenuAction[];
+  onDismiss?: () => void;
+}
+
+export type DropdownMenuProps = MenuProps;