@ankhorage/surface 3.4.5 → 4.0.0

package/src/components/navigation/NavigationList.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../layout';
-import { NavigationItem } from './NavigationItem';
-import type { NavigationListProps } from './types';
-
-export function NavigationList({
-  items,
-  orientation = 'vertical',
-  compact = false,
-  testID,
-  interactionPolicy,
-}: NavigationListProps) {
-  return (
-    <Stack
-      direction={orientation === 'horizontal' ? 'row' : 'column'}
-      gap={compact ? 'xs' : 's'}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <NavigationItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Stack>
-  );
-}

package/src/components/navigation/TabBar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import { TabBarItem } from './TabBarItem';
-import type { TabBarProps } from './types';
-
-export function TabBar({ items, compact = false, testID, interactionPolicy }: TabBarProps) {
-  const { theme } = useTheme();
-
-  return (
-    <Box
-      style={{
-        flexDirection: 'row',
-        borderTopColor: theme.semantics.border.default,
-        borderTopWidth: 1,
-      }}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <TabBarItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Box>
-  );
-}

package/src/components/navigation/TabBarItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-import type { TabBarItemProps } from './types';
-
-export function TabBarItem({ item, compact = false, testID, interactionPolicy }: TabBarItemProps) {
-  const { theme } = useTheme();
-  const active = Boolean(item.active);
-  const disabled = Boolean(item.disabled);
-  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
-  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
-    active,
-    disabled,
-    item.accessibilityState,
-  );
-
-  return (
-    <ButtonBase
-      accessibilityLabel={item.accessibilityLabel}
-      accessibilityRole={item.accessibilityRole ?? 'tab'}
-      accessibilityState={resolvedAccessibilityState}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={item.onPress}
-      style={{ flex: 1 }}
-      testID={resolvedTestID}
-    >
-      {(state) => {
-        const presentation = resolveNavigationItemPresentation(theme, {
-          active,
-          disabled,
-          state,
-        });
-        const contentColor = disabled
-          ? theme.semantics.content.muted
-          : active
-            ? theme.semantics.action.primary.base
-            : theme.semantics.content.muted;
-
-        return (
-          <Box
-            px="m"
-            py={compact ? 's' : 'm'}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: presentation.backgroundColor,
-              opacity: presentation.opacity,
-            }}
-          >
-            {item.icon ? (
-              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
-                <Icon {...item.icon} color={contentColor} size={compact ? 's' : 'm'} />
-              </View>
-            ) : null}
-            {item.label ? (
-              <Text
-                color={active && !disabled ? 'primary' : undefined}
-                emphasis={active && !disabled ? 'default' : 'muted'}
-                numberOfLines={1}
-                variant={compact ? 'bodySmall' : 'label'}
-                weight="medium"
-              >
-                {item.label}
-              </Text>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/navigation/helpers.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { createTheme } from '../../theme/createTheme';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-
-describe('navigation helpers', () => {
-  it('forces selected and disabled when active/disabled are true', () => {
-    expect(
-      resolveNavigationAccessibilityState(true, true, {
-        selected: false,
-        disabled: false,
-      }),
-    ).toEqual({
-      selected: true,
-      disabled: true,
-    });
-  });
-
-  it('preserves user-provided state when not active/disabled', () => {
-    expect(
-      resolveNavigationAccessibilityState(false, false, {
-        disabled: false,
-        selected: false,
-        expanded: true,
-      }),
-    ).toEqual({
-      disabled: false,
-      selected: false,
-      expanded: true,
-    });
-  });
-
-  it('resolves active presentation via primary soft semantics', () => {
-    const theme = createTheme();
-    const state = { pressed: false, hovered: true, focused: false, disabled: false };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: true,
-      disabled: false,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softHover);
-    expect(resolved.contentColor).toBe(theme.semantics.action.primary.onSoftHoverText);
-    expect(resolved.opacity).toBe(1);
-  });
-
-  it('resolves inactive presentation via neutral hover/active semantics', () => {
-    const theme = createTheme();
-    const state = { pressed: true, hovered: true, focused: false, disabled: false };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: false,
-      disabled: false,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.neutral.surfaceActive);
-    expect(resolved.contentColor).toBe(theme.semantics.content.default);
-    expect(resolved.opacity).toBe(1);
-  });
-
-  it('ignores hover/pressed presentation when disabled', () => {
-    const theme = createTheme();
-    const state = { pressed: true, hovered: true, focused: false, disabled: true };
-    const resolved = resolveNavigationItemPresentation(theme, {
-      active: true,
-      disabled: true,
-      state,
-    });
-
-    expect(resolved.backgroundColor).toBe(theme.semantics.surface.disabled);
-    expect(resolved.contentColor).toBe(theme.semantics.content.disabled);
-    expect(resolved.opacity).toBe(1);
-  });
-});

package/src/components/navigation/helpers.ts

@@ -1,81 +0,0 @@
-import type { AccessibilityState } from 'react-native';
-
-import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
-import type { SurfaceTheme } from '../../theme/types';
-
-export function resolveNavigationAccessibilityState(
-  active: boolean,
-  disabled: boolean,
-  accessibilityState?: AccessibilityState,
-): AccessibilityState {
-  const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };
-
-  if (active) {
-    resolved.selected = true;
-  }
-
-  if (disabled) {
-    resolved.disabled = true;
-  }
-
-  return resolved;
-}
-
-export interface ResolvedNavigationItemPresentation {
-  backgroundColor: string;
-  contentColor: string;
-  opacity: number;
-}
-
-export function resolveNavigationItemPresentation(
-  theme: SurfaceTheme,
-  {
-    active,
-    disabled,
-    state,
-  }: {
-    active: boolean;
-    disabled: boolean;
-    state: InteractionState;
-  },
-): ResolvedNavigationItemPresentation {
-  const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
-
-  if (disabled) {
-    return {
-      backgroundColor: theme.semantics.surface.disabled,
-      contentColor: theme.semantics.content.disabled,
-      opacity: 1,
-    };
-  }
-
-  const contentColor = active
-    ? interactionState.pressed
-      ? theme.semantics.action.primary.onSoftActiveText
-      : interactionState.hovered
-        ? theme.semantics.action.primary.onSoftHoverText
-        : theme.semantics.action.primary.onSoftText
-    : theme.semantics.content.default;
-
-  if (active) {
-    return {
-      backgroundColor: interactionState.pressed
-        ? theme.semantics.action.primary.softActive
-        : interactionState.hovered
-          ? theme.semantics.action.primary.softHover
-          : theme.semantics.action.primary.softBg,
-      contentColor,
-      opacity: 1,
-    };
-  }
-
-  return {
-    backgroundColor: interactionState.pressed
-      ? theme.semantics.neutral.surfaceActive
-      : interactionState.hovered
-        ? theme.semantics.neutral.surfaceHover
-        : 'transparent',
-    contentColor,
-    opacity: 1,
-  };
-}

package/src/components/navigation/index.ts

@@ -1,16 +0,0 @@
-export { DrawerNavigation } from './DrawerNavigation';
-export { DrawerNavigationItem } from './DrawerNavigationItem';
-export { NavigationItem } from './NavigationItem';
-export { NavigationList } from './NavigationList';
-export { TabBar } from './TabBar';
-export { TabBarItem } from './TabBarItem';
-export type {
-  DrawerNavigationItemProps,
-  DrawerNavigationProps,
-  NavigationItemIcon,
-  NavigationItemProps,
-  NavigationItemSpec,
-  NavigationListProps,
-  TabBarItemProps,
-  TabBarProps,
-} from './types';

package/src/components/navigation/policy.test.ts

@@ -1,140 +0,0 @@
-import { readdirSync, readFileSync } from 'node:fs';
-import { extname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { describe, expect, it } from 'bun:test';
-
-const navigationDir = fileURLToPath(new URL('.', import.meta.url));
-
-const forbiddenPatterns = [
-  'expo-router',
-  '@react-navigation',
-  'AppManifest',
-  'NavigatorSpec',
-  'generated app',
-  'templates',
-] as const;
-
-function listNavigationSources() {
-  return readdirSync(navigationDir)
-    .filter((entry) => {
-      const extension = extname(entry);
-      if (!(extension === '.ts' || extension === '.tsx')) {
-        return false;
-      }
-
-      return !entry.includes('.test.');
-    })
-    .map((entry) => join(navigationDir, entry));
-}
-
-describe('navigation module boundaries', () => {
-  it('does not import routers, manifests, or generated app code', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    sources.forEach(({ content, path }) => {
-      forbiddenPatterns.forEach((pattern) => {
-        expect(content, path).not.toContain(pattern);
-      });
-    });
-  });
-});
-
-describe('navigation interaction policy', () => {
-  it('host component prop types include interactionPolicy', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    const hostComponents = [{ path: 'types.ts', prop: 'interactionPolicy?: InteractionPolicy' }];
-
-    sources.forEach(({ content, path }) => {
-      const component = hostComponents.find((host) => path.endsWith(host.path));
-      if (component) {
-        expect(content, path).toContain(component.prop);
-      }
-    });
-  });
-
-  it('navigation components accept interactionPolicy prop', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    const components = [
-      'NavigationItem.tsx',
-      'NavigationList.tsx',
-      'TabBar.tsx',
-      'TabBarItem.tsx',
-      'DrawerNavigation.tsx',
-      'DrawerNavigationItem.tsx',
-    ];
-
-    sources.forEach(({ content, path }) => {
-      const component = components.find((c) => path.endsWith(c));
-      if (component) {
-        expect(content, path).toContain('interactionPolicy');
-      }
-    });
-  });
-
-  it('direct ButtonBase owners forward interactionPolicy unchanged', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    const directButtonBaseOwners = ['NavigationItem.tsx', 'TabBarItem.tsx'];
-
-    sources.forEach(({ content, path }) => {
-      const component = directButtonBaseOwners.find((owner) => path.endsWith(owner));
-      if (component) {
-        expect(content, path).toContain('interactionPolicy={interactionPolicy}');
-      }
-    });
-  });
-
-  it('container components forward interactionPolicy to children', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    const forwardingMap: Record<string, string> = {
-      'NavigationList.tsx': 'NavigationItem',
-      'TabBar.tsx': 'TabBarItem',
-      'DrawerNavigation.tsx': 'DrawerNavigationItem',
-      'DrawerNavigationItem.tsx': 'NavigationItem',
-    };
-
-    sources.forEach(({ content, path }) => {
-      const filename = path.split('/').pop();
-      if (filename && forwardingMap[filename]) {
-        expect(content, path).toContain(`interactionPolicy={interactionPolicy}`);
-      }
-    });
-  });
-
-  it('does not map passive interactionPolicy to disabled in navigation components', () => {
-    const sources = listNavigationSources().map((path) => ({
-      path,
-      content: readFileSync(path, 'utf8'),
-    }));
-
-    const passiveToDisabledPatterns = [
-      /disabled=\{interactionPolicy === 'passive'\}/,
-      /disabled=\{passive/,
-    ];
-
-    sources.forEach(({ content, path }) => {
-      passiveToDisabledPatterns.forEach((pattern) => {
-        expect(content, path).not.toMatch(pattern);
-      });
-    });
-  });
-});

package/src/components/navigation/types.ts

@@ -1,66 +0,0 @@
-import type React from 'react';
-import type { AccessibilityRole, AccessibilityState } from 'react-native';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-import type { IconSource } from '../../primitives/icon';
-
-export type NavigationItemIcon = IconSource;
-
-export interface NavigationItemSpec {
-  id: string;
-  label: React.ReactNode;
-  icon?: NavigationItemIcon;
-  badge?: React.ReactNode;
-  active?: boolean;
-  disabled?: boolean;
-  onPress?: (() => void) | undefined;
-  accessibilityLabel?: string;
-  accessibilityRole?: AccessibilityRole;
-  accessibilityState?: AccessibilityState;
-  testID?: string;
-}
-
-export interface NavigationItemProps {
-  item: NavigationItemSpec;
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}
-
-export interface NavigationListProps {
-  items: readonly NavigationItemSpec[];
-  orientation?: 'vertical' | 'horizontal';
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}
-
-export interface TabBarProps {
-  items: readonly NavigationItemSpec[];
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}
-
-export interface TabBarItemProps {
-  item: NavigationItemSpec;
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}
-
-export interface DrawerNavigationProps {
-  items: readonly NavigationItemSpec[];
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}
-
-export interface DrawerNavigationItemProps {
-  item: NavigationItemSpec;
-  compact?: boolean;
-  testID?: string;
-  interactionPolicy?: InteractionPolicy;
-}