@ankhorage/zora 6.0.0 → 8.0.0

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

@@ -1,408 +0,0 @@
-import type { InteractionPolicy } from '@ankhorage/surface';
-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,
-  interactionPolicy,
-}: {
-  row: TRow;
-  rowIndex: number;
-  rowActions: DataTableProps<TRow>['rowActions'];
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}): React.ReactNode {
-  const actions = rowActions?.(row, rowIndex) ?? [];
-
-  if (actions.length === 0) {
-    return null;
-  }
-
-  return (
-    <DropdownMenu
-      actions={mapRowActions(row, actions)}
-      interactionPolicy={interactionPolicy}
-      testID={testID ? `${testID}-row-actions-${rowIndex}` : undefined}
-      trigger={
-        <IconButton
-          icon={{ name: 'ellipsis-horizontal' }}
-          label="Row actions"
-          size="s"
-          variant="ghost"
-        />
-      }
-    />
-  );
-}
-
-function DataTableHeader<TRow extends object>({
-  columns,
-  sort,
-  onSortChange,
-  density,
-  interactionPolicy,
-}: Pick<DataTableProps<TRow>, 'columns' | 'density' | 'onSortChange' | 'sort'> & {
-  interactionPolicy?: InteractionPolicy;
-}) {
-  const padding = resolveRowPadding(density ?? 'comfortable');
-  const passive = interactionPolicy === 'passive';
-
-  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"
-                  interactionPolicy={interactionPolicy}
-                  onPress={() => {
-                    if (passive) return;
-
-                    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,
-  interactionPolicy,
-}: 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}
-            interactionPolicy={interactionPolicy}
-            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, interactionPolicy })}
-                  </Box>
-                </Stack>
-              </Box>
-            ))}
-          </Stack>
-        </Stack>
-      </Box>
-    </ScrollView>
-  );
-}
-
-function DataTableMobile<TRow extends object>({
-  columns,
-  rows,
-  rowActions,
-  rowId,
-  testID,
-  interactionPolicy,
-}: 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, interactionPolicy });
-
-        return (
-          <Card
-            actions={actions}
-            compact
-            interactionPolicy={interactionPolicy}
-            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',
-  interactionPolicy,
-  ...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,
-    interactionPolicy,
-    loading,
-    loadingRows,
-    rows,
-    testID,
-  };
-
-  return (
-    <Box testID={testID}>
-      <Show when={{ base: false, md: true }} fallback={<DataTableMobile {...tableProps} />}>
-        <DataTableDesktop {...tableProps} />
-      </Show>
-    </Box>
-  );
-}
-
-/***
- * Displays structured tabular data with responsive desktop/mobile layouts.
- */
-export const DataTable = withZoraThemeScope(DataTableInner);

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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/heading/Heading.tsx

@@ -1,114 +0,0 @@
-import { resolveResponsive, useResponsiveRuntime } from '@ankhorage/surface';
-import React from 'react';
-import { Platform, Text as ReactNativeText, type TextStyle } from 'react-native';
-
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { useZoraThemeRecipe } from '../../theme/useZoraThemeRecipe';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { resolveHeadingRecipe, resolveHeadingSizeFromLevel } from './resolveHeadingRecipe';
-import { resolveHeadingThemeRecipe } from './resolveHeadingThemeRecipe';
-import type { HeadingProps } from './types';
-
-const headingLayoutStyle = {
-  flexShrink: 1,
-  maxWidth: '100%',
-  minWidth: 0,
-  ...(Platform.OS === 'web'
-    ? {
-        overflowWrap: 'break-word',
-        whiteSpace: 'normal',
-        wordBreak: 'normal',
-      }
-    : null),
-} as unknown as TextStyle;
-
-function resolveHeadingContent({
-  children,
-  text,
-  i18nKey,
-}: Pick<HeadingProps, 'children' | 'text' | 'i18nKey'>) {
-  if (children !== undefined) return children;
-  if (text !== undefined) return text;
-  if (i18nKey === undefined || i18nKey === '') return null;
-  return i18nKey;
-}
-
-function HeadingInner({
-  themeId: _themeId,
-  mode: _mode,
-  children,
-  text,
-  i18nKey,
-  level = 2,
-  size,
-  color,
-  emphasis,
-  align,
-  weight,
-  italic,
-  numberOfLines,
-  ellipsizeMode,
-  selectable,
-  style,
-  accessibilityLabel,
-  accessibilityHint,
-  accessibilityRole,
-  nativeID,
-  testID,
-  interactionPolicy: _interactionPolicy,
-}: HeadingProps) {
-  const { theme } = useZoraTheme();
-  const { breakpoint } = useResponsiveRuntime();
-  const themeRecipe = resolveHeadingThemeRecipe(useZoraThemeRecipe('Heading'));
-  const content = resolveHeadingContent({ children, text, i18nKey });
-  const resolvedSize =
-    resolveResponsive(size ?? themeRecipe.size, breakpoint) ?? resolveHeadingSizeFromLevel(level);
-  const resolvedColor = resolveResponsive(color ?? themeRecipe.color, breakpoint);
-  const resolvedEmphasis =
-    resolveResponsive(emphasis ?? themeRecipe.emphasis, breakpoint) ?? 'default';
-  const resolvedAlign = resolveResponsive(align ?? themeRecipe.align, breakpoint);
-  const resolvedWeight = resolveResponsive(weight ?? themeRecipe.weight, breakpoint);
-
-  if (content === null) return null;
-
-  return (
-    <ReactNativeText
-      accessibilityHint={accessibilityHint}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole ?? 'header'}
-      ellipsizeMode={ellipsizeMode}
-      nativeID={nativeID}
-      numberOfLines={numberOfLines}
-      selectable={selectable}
-      testID={testID}
-      style={[
-        headingLayoutStyle,
-        resolveHeadingRecipe(theme, {
-          align: resolvedAlign,
-          italic: italic ?? themeRecipe.italic ?? false,
-          level,
-          size: resolvedSize,
-          color: resolvedColor,
-          emphasis: resolvedEmphasis,
-          weight: resolvedWeight,
-        }),
-        style,
-      ]}
-    >
-      {content}
-    </ReactNativeText>
-  );
-}
-
-/***
- * Structured title primitive for accessible page, section, and card headings.
- *
- * `Heading` gives consumers a ZORA-owned title API with semantic levels,
- * responsive sizes, and theme-aware emphasis while preserving header semantics.
- *
- * @example Section title
- * ```tsx
- * <Heading level={2} size="xl">Account settings</Heading>
- * ```
- */
-export const Heading = withZoraThemeScope(HeadingInner);

package/src/components/heading/index.ts

@@ -1,10 +0,0 @@
-export { Heading } from './Heading';
-export type {
-  HeadingAlign,
-  HeadingColor,
-  HeadingEmphasis,
-  HeadingLevel,
-  HeadingProps,
-  HeadingSize,
-  HeadingWeight,
-} from './types';

package/src/components/heading/meta.ts

@@ -1,82 +0,0 @@
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
-import type { ZoraComponentMeta } from '../../metadata';
-
-const themeAuthoring = {
-  authority: 'theme',
-  scope: 'component',
-  allowInstanceOverride: true,
-} as const;
-
-export const headingMeta = {
-  name: 'Heading',
-  category: 'component',
-  directManifestNode: true,
-  allowedChildren: [],
-  blueprint: { label: 'Heading', defaultProps: { text: 'Heading', level: 2 } },
-  i18n: { fields: [{ keyProp: 'i18nKey', defaultTextProp: 'text' }] },
-  props: {
-    text: {
-      type: 'string',
-      category: 'Content',
-      label: 'Text',
-      default: 'Heading',
-      authoring: { authority: 'instance' },
-    },
-    i18nKey: {
-      type: 'string',
-      category: 'Content',
-      label: 'i18n key',
-      authoring: { authority: 'instance' },
-    },
-    level: {
-      type: 'enum',
-      category: 'Semantics',
-      label: 'Level',
-      enum: [1, 2, 3, 4, 5, 6],
-      default: 2,
-      authoring: { authority: 'instance' },
-    },
-    size: {
-      type: 'enum',
-      category: 'Typography',
-      label: 'Size',
-      enum: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      authoring: themeAuthoring,
-    },
-    color: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Color',
-      enum: ZORA_COLORS,
-      authoring: themeAuthoring,
-    },
-    emphasis: {
-      type: 'enum',
-      category: 'Style',
-      label: 'Emphasis',
-      enum: ZORA_EMPHASES,
-      authoring: themeAuthoring,
-    },
-    align: {
-      type: 'enum',
-      category: 'Layout',
-      label: 'Align',
-      enum: ['auto', 'left', 'right', 'center', 'justify'],
-      authoring: themeAuthoring,
-    },
-    weight: {
-      type: 'enum',
-      category: 'Typography',
-      label: 'Weight',
-      enum: ['regular', 'medium', 'semiBold', 'bold'],
-      authoring: themeAuthoring,
-    },
-    italic: { type: 'boolean', category: 'Typography', label: 'Italic', authoring: themeAuthoring },
-    numberOfLines: {
-      type: 'number',
-      category: 'Layout',
-      label: 'Line clamp',
-      authoring: { authority: 'instance' },
-    },
-  },
-} as const satisfies ZoraComponentMeta;