@ankhorage/zora 4.4.1 → 5.0.0

package/src/components/navigation-list/NavigationList.tsx

@@ -1,68 +0,0 @@
-import {
-  DrawerNavigation as SurfaceDrawerNavigation,
-  NavigationList as SurfaceNavigationList,
-} from '@ankhorage/surface';
-import React from 'react';
-
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { NavigationListProps } from './types';
-
-function NavigationListInner({
-  themeId: _themeId,
-  mode: _mode,
-  routes,
-  routeMap,
-  activeRouteKey,
-  orientation = 'vertical',
-  compact = false,
-  onRoutePress,
-  header,
-  footer,
-  testID,
-  interactionPolicy,
-}: NavigationListProps) {
-  const items = routes.map((route) => {
-    const metadata = routeMap?.[route.name];
-    const active = activeRouteKey ? route.key === activeRouteKey : false;
-
-    return {
-      id: route.key,
-      label: metadata?.label ?? route.name,
-      icon: metadata?.icon,
-      badge: metadata?.badge,
-      active,
-      disabled: metadata?.disabled,
-      onPress: metadata?.disabled ? undefined : () => onRoutePress?.(route),
-      accessibilityLabel: metadata?.accessibilityLabel,
-      testID: metadata?.testID,
-    };
-  });
-
-  if (header || footer) {
-    return (
-      <SurfaceDrawerNavigation
-        compact={compact}
-        footer={footer}
-        header={header}
-        interactionPolicy={interactionPolicy}
-        items={items}
-        testID={testID}
-      />
-    );
-  }
-
-  return (
-    <SurfaceNavigationList
-      compact={compact}
-      interactionPolicy={interactionPolicy}
-      items={items}
-      orientation={orientation}
-      testID={testID}
-    />
-  );
-}
-
-/***
- * Renders a navigation list from route metadata with active state mapping.
- */
-export const NavigationList = withZoraThemeScope(NavigationListInner);

package/src/components/navigation-list/index.ts

@@ -1,2 +0,0 @@
-export { NavigationList } from './NavigationList';
-export type { NavigationListProps, ZoraNavigationRouteMap } from './types';

package/src/components/navigation-list/meta.ts

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

package/src/components/navigation-list/types.ts

@@ -1,17 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { ZoraNavigationRouteMetadata, ZoraNavigationRouteState } from '../navigation-item';
-
-export type ZoraNavigationRouteMap = Partial<Record<string, ZoraNavigationRouteMetadata>>;
-
-export interface NavigationListProps extends ZoraBaseProps {
-  routes: readonly ZoraNavigationRouteState[];
-  routeMap?: ZoraNavigationRouteMap;
-  activeRouteKey?: string;
-  orientation?: 'vertical' | 'horizontal';
-  compact?: boolean;
-  onRoutePress?: (route: ZoraNavigationRouteState) => void;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-}

package/src/internal/resolveZoraNavigationItems.test.ts

@@ -1,174 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-import React from 'react';
-
-import {
-  createDrawerItemPressHandler,
-  createTabBarItemPressHandler,
-  resolveNavigationItems,
-  resolveRouteLabel,
-  type ZoraNavigationDescriptor,
-  type ZoraNavigationState,
-  type ZoraResolvedNavigationItem,
-  type ZoraRouteLabelSource,
-} from './resolveZoraNavigationItems';
-
-describe('resolveRouteLabel', () => {
-  test('prefers routeMap label over descriptor label', () => {
-    const descriptor: ZoraNavigationDescriptor = {
-      options: {
-        title: 'Home Title',
-        tabBarLabel: 'Home Tab',
-      },
-    };
-
-    const result = resolveRouteLabel({
-      kind: 'tab',
-      route: { key: 'k1', name: 'home' },
-      metadata: { label: 'Home Map' },
-      descriptor,
-    });
-
-    const expectedSource: ZoraRouteLabelSource = 'routeMap';
-    expect(result).toEqual({ label: 'Home Map', source: expectedSource });
-  });
-
-  test('uses descriptor label/title as fallback for label only', () => {
-    const descriptor: ZoraNavigationDescriptor = {
-      options: {
-        title: 'Settings Title',
-        tabBarLabel: undefined,
-      },
-    };
-
-    const result = resolveRouteLabel({
-      kind: 'tab',
-      route: { key: 'k2', name: 'settings' },
-      metadata: undefined,
-      descriptor,
-    });
-
-    expect(result).toEqual({ label: 'Settings Title', source: 'descriptor' });
-  });
-
-  test('falls back to route name if nothing else provided', () => {
-    const result = resolveRouteLabel({
-      kind: 'drawer',
-      route: { key: 'k3', name: 'profile' },
-      metadata: undefined,
-      descriptor: undefined,
-    });
-
-    expect(result).toEqual({ label: 'profile', source: 'name' });
-  });
-
-  test('uses descriptor title instead of invoking a callable Expo tab label', () => {
-    const result = resolveRouteLabel({
-      route: { key: 'k4', name: 'home' },
-      metadata: undefined,
-      descriptor: { options: { tabBarLabel: () => 'callable', title: 'Home title' } },
-      kind: 'tab',
-    });
-
-    expect(result).toEqual({ label: 'Home title', source: 'descriptor' });
-  });
-});
-
-describe('resolveNavigationItems', () => {
-  test('maps active index + routeMap disabled state without using descriptors for icons/badges', () => {
-    const state: ZoraNavigationState = {
-      index: 1,
-      routes: [
-        { key: 'r1', name: 'home' },
-        { key: 'r2', name: 'settings' },
-      ],
-    };
-
-    const items = resolveNavigationItems({
-      state,
-      kind: 'tab',
-      descriptors: {
-        r1: { options: { tabBarLabel: 'Home Opt', title: 'Home Title' } },
-        r2: { options: { tabBarLabel: 'Settings Opt' } },
-      },
-      routeMap: {
-        settings: { disabled: true, badge: React.createElement('span', null, '3') },
-      },
-    });
-
-    expect(items).toHaveLength(2);
-    expect(items[0]).toMatchObject({ active: false, disabled: false });
-    expect(items[1]).toMatchObject({ active: true, disabled: true });
-    expect(items[1]?.metadata?.badge).toBeDefined();
-  });
-});
-
-describe('press handler helpers', () => {
-  test('tab press handler is undefined for disabled or active items', () => {
-    const handlerDisabled = createTabBarItemPressHandler({
-      item: {
-        route: { key: 'k1', name: 'home' },
-        metadata: { disabled: true },
-        label: 'Home',
-        active: false,
-        disabled: true,
-      },
-      navigation: { navigate: () => undefined },
-    });
-    expect(handlerDisabled).toBeUndefined();
-
-    const handlerActive = createTabBarItemPressHandler({
-      item: {
-        route: { key: 'k1', name: 'home' },
-        metadata: undefined,
-        label: 'Home',
-        active: true,
-        disabled: false,
-      },
-      navigation: { navigate: () => undefined },
-    });
-    expect(handlerActive).toBeUndefined();
-  });
-
-  test('tab press handler respects preventDefault', () => {
-    let navigatedTo: string | null = null;
-    const handler = createTabBarItemPressHandler({
-      item: {
-        route: { key: 'k1', name: 'home' },
-        metadata: undefined,
-        label: 'Home',
-        active: false,
-        disabled: false,
-      },
-      navigation: {
-        emit: () => ({ defaultPrevented: true }),
-        navigate: (name) => {
-          navigatedTo = name;
-        },
-      },
-    });
-
-    expect(handler).toBeDefined();
-    handler?.();
-    expect(navigatedTo).toBeNull();
-  });
-
-  test('drawer press handler navigates and closes drawer', () => {
-    const calls: string[] = [];
-    const handler = createDrawerItemPressHandler({
-      item: {
-        route: { key: 'k1', name: 'home' },
-        metadata: undefined,
-        label: 'Home',
-        active: false,
-        disabled: false,
-      } satisfies ZoraResolvedNavigationItem,
-      navigation: {
-        navigate: (name) => calls.push(`navigate:${name}`),
-        closeDrawer: () => calls.push('close'),
-      },
-    });
-
-    handler?.();
-    expect(calls).toEqual(['navigate:home', 'close']);
-  });
-});

package/src/internal/resolveZoraNavigationItems.ts

@@ -1,157 +0,0 @@
-import type React from 'react';
-
-import type {
-  ZoraNavigationRouteMetadata,
-  ZoraNavigationRouteState,
-} from '../components/navigation-item';
-import type { ZoraNavigationRouteMap } from '../components/navigation-list';
-
-interface ZoraNavigationDescriptorOptions {
-  title?: string;
-  tabBarLabel?: unknown;
-  drawerLabel?: unknown;
-}
-
-export interface ZoraNavigationDescriptor {
-  options?: ZoraNavigationDescriptorOptions;
-}
-
-export type ZoraNavigationDescriptors = Readonly<
-  Record<string, ZoraNavigationDescriptor | undefined>
->;
-
-export interface ZoraNavigationState {
-  index: number;
-  routes: readonly ZoraNavigationRouteState[];
-}
-
-interface ZoraTabPressEvent {
-  type: 'tabPress';
-  target: string;
-  canPreventDefault: true;
-}
-
-interface ZoraTabPressEventResult {
-  defaultPrevented: boolean;
-}
-
-export interface ZoraTabBarNavigation {
-  emit?: (event: ZoraTabPressEvent) => ZoraTabPressEventResult;
-  navigate: (name: string) => void;
-}
-
-export interface ZoraDrawerNavigation {
-  navigate: (name: string) => void;
-  closeDrawer?: () => void;
-}
-
-export interface ZoraResolvedNavigationItem {
-  route: ZoraNavigationRouteState;
-  metadata?: ZoraNavigationRouteMetadata;
-  label: React.ReactNode;
-  active: boolean;
-  disabled: boolean;
-}
-
-export type ZoraRouteLabelSource = 'routeMap' | 'descriptor' | 'name';
-
-export function resolveRouteLabel({
-  route,
-  metadata,
-  descriptor,
-  kind,
-}: {
-  route: ZoraNavigationRouteState;
-  metadata: ZoraNavigationRouteMetadata | undefined;
-  descriptor: ZoraNavigationDescriptor | undefined;
-  kind: 'tab' | 'drawer';
-}): { label: React.ReactNode; source: ZoraRouteLabelSource } {
-  if (metadata?.label !== undefined) {
-    return { label: metadata.label, source: 'routeMap' };
-  }
-
-  const options = descriptor?.options;
-  const configuredLabel = kind === 'tab' ? options?.tabBarLabel : options?.drawerLabel;
-  const fallback =
-    configuredLabel === undefined || typeof configuredLabel === 'function'
-      ? options?.title
-      : configuredLabel;
-
-  if (fallback !== undefined) {
-    return { label: fallback as React.ReactNode, source: 'descriptor' };
-  }
-
-  return { label: route.name, source: 'name' };
-}
-
-export function resolveNavigationItems({
-  state,
-  descriptors,
-  routeMap,
-  kind,
-}: {
-  state: ZoraNavigationState;
-  descriptors?: ZoraNavigationDescriptors | undefined;
-  routeMap?: ZoraNavigationRouteMap | undefined;
-  kind: 'tab' | 'drawer';
-}): readonly ZoraResolvedNavigationItem[] {
-  const activeRoute = state.routes[state.index];
-
-  return state.routes.map((route) => {
-    const metadata = routeMap?.[route.name];
-    const descriptor = descriptors?.[route.key];
-    const { label } = resolveRouteLabel({ route, metadata, descriptor, kind });
-    const disabled = Boolean(metadata?.disabled);
-
-    return {
-      route,
-      metadata,
-      label,
-      active: activeRoute ? activeRoute.key === route.key : false,
-      disabled,
-    };
-  });
-}
-
-export function createTabBarItemPressHandler({
-  item,
-  navigation,
-}: {
-  item: ZoraResolvedNavigationItem;
-  navigation: ZoraTabBarNavigation;
-}): (() => void) | undefined {
-  if (item.disabled || item.active) {
-    return undefined;
-  }
-
-  return () => {
-    const result = navigation.emit?.({
-      type: 'tabPress',
-      target: item.route.key,
-      canPreventDefault: true,
-    });
-
-    if (result?.defaultPrevented) {
-      return;
-    }
-
-    navigation.navigate(item.route.name);
-  };
-}
-
-export function createDrawerItemPressHandler({
-  item,
-  navigation,
-}: {
-  item: ZoraResolvedNavigationItem;
-  navigation: ZoraDrawerNavigation;
-}): (() => void) | undefined {
-  if (item.disabled) {
-    return undefined;
-  }
-
-  return () => {
-    navigation.navigate(item.route.name);
-    navigation.closeDrawer?.();
-  };
-}

package/src/navigationExports.test.ts

@@ -1,15 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-import { describe, expect, test } from 'bun:test';
-
-describe('navigation exports', () => {
-  test('exports navigation chrome from src/index.ts', () => {
-    const source = readFileSync(join(process.cwd(), 'src', 'index.ts'), 'utf8');
-
-    expect(source).toContain('export { NavigationItem }');
-    expect(source).toContain('export { NavigationList }');
-    expect(source).toContain('export { ZoraTabBar }');
-    expect(source).toContain('export { ZoraDrawerContent }');
-  });
-});

package/src/patterns/responsive-panel/ResponsivePanel.tsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-
-import { Drawer } from '../../components/drawer';
-import { Modal } from '../../components/modal';
-import type { ZoraContentWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Panel } from '../panel';
-import type { ResponsivePanelProps, ResponsivePanelScroll, ResponsivePanelSize } from './types';
-
-function resolvePanelWidth(size: ResponsivePanelSize): number {
-  switch (size) {
-    case 'compact':
-      return 300;
-    case 'wide':
-      return 420;
-    case 'extraWide':
-      return 560;
-    case 'default':
-    default:
-      return 360;
-  }
-}
-
-function resolveModalWidth(size: ResponsivePanelSize | undefined): ZoraContentWidth | undefined {
-  switch (size) {
-    case 'compact':
-      return 'narrow';
-    case 'wide':
-    case 'extraWide':
-      return 'wide';
-    case 'default':
-      return 'default';
-    default:
-      return undefined;
-  }
-}
-
-function renderPanelBody(children: React.ReactNode, scroll: ResponsivePanelScroll) {
-  if (children == null) return null;
-
-  if (scroll === 'content') {
-    return (
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator
-        style={styles.scrollBody}
-      >
-        {children}
-      </ScrollView>
-    );
-  }
-
-  return children;
-}
-
-function ResponsivePanelInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  actions,
-  footer,
-  children,
-  open,
-  onOpenChange,
-  side = 'right',
-  desktopMode = 'inline',
-  mobileMode = 'drawer',
-  compact = true,
-  size,
-  scroll = 'none',
-  testID,
-  interactionPolicy,
-}: ResponsivePanelProps) {
-  if (!open) return null;
-
-  const passive = interactionPolicy === 'passive';
-  const body = renderPanelBody(children, scroll);
-
-  // For now, we assume desktopMode determines the rendering.
-  // In a real app, this would react to window size.
-  if (desktopMode === 'floating') {
-    if (mobileMode === 'modal') {
-      const modalWidth = resolveModalWidth(size);
-
-      return (
-        <Modal
-          description={description}
-          footer={footer}
-          interactionPolicy={interactionPolicy}
-          onDismiss={() => {
-            if (passive) return;
-
-            onOpenChange(false);
-          }}
-          testID={testID}
-          title={title}
-          visible={open}
-          width={modalWidth}
-        >
-          {body}
-        </Modal>
-      );
-    }
-
-    return (
-      <Drawer
-        description={description}
-        footer={footer}
-        interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
-
-          onOpenChange(false);
-        }}
-        position={side}
-        testID={testID}
-        title={title}
-        visible={open}
-      >
-        {body}
-      </Drawer>
-    );
-  }
-
-  const panel = (
-    <Panel
-      actions={actions}
-      compact={compact}
-      description={description}
-      footer={footer}
-      interactionPolicy={interactionPolicy}
-      testID={testID}
-      title={title}
-    >
-      {body}
-    </Panel>
-  );
-
-  if (size === undefined) return panel;
-
-  return <View style={[styles.inlineSizedPanel, { width: resolvePanelWidth(size) }]}>{panel}</View>;
-}
-
-const styles = StyleSheet.create({
-  inlineSizedPanel: {
-    maxWidth: '100%',
-  },
-  scrollBody: {
-    flexGrow: 0,
-    maxHeight: '100%',
-  },
-  scrollContent: {
-    flexGrow: 1,
-  },
-});
-
-/***
- * Adaptive secondary surface that can render as an inline panel, drawer, or modal.
- *
- * Use `ResponsivePanel` for tool panes and admin/detail flows that need the same
- * content to work across compact mobile screens and wider desktop layouts.
- *
- 
- * @example Scrollable wide panel
- * ```tsx
- * <ResponsivePanel open title="APIs" size="wide" scroll="content">...</ResponsivePanel>
- * ```
- */
-export const ResponsivePanel = withZoraThemeScope(ResponsivePanelInner);

package/src/patterns/responsive-panel/index.ts

@@ -1,2 +0,0 @@
-export * from './ResponsivePanel';
-export * from './types';

package/src/patterns/responsive-panel/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const responsivePanelMeta = {
-  name: 'ResponsivePanel',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Responsive panel pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/responsive-panel/types.ts

@@ -1,25 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ResponsivePanelSide = 'left' | 'right';
-export type ResponsivePanelDesktopMode = 'inline' | 'floating';
-export type ResponsivePanelMobileMode = 'drawer' | 'modal';
-export type ResponsivePanelSize = 'compact' | 'default' | 'wide' | 'extraWide';
-export type ResponsivePanelScroll = 'none' | 'content';
-
-export interface ResponsivePanelProps extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  actions?: React.ReactNode;
-  footer?: React.ReactNode;
-  children?: React.ReactNode;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  side?: ResponsivePanelSide;
-  desktopMode?: ResponsivePanelDesktopMode;
-  mobileMode?: ResponsivePanelMobileMode;
-  compact?: boolean;
-  size?: ResponsivePanelSize;
-  scroll?: ResponsivePanelScroll;
-}