@ankhorage/zora 1.0.9 → 1.1.0

package/src/internal/resolveZoraNavigationItems.test.ts

@@ -0,0 +1,163 @@
+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' });
+  });
+});
+
+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

@@ -0,0 +1,156 @@
+import type React from 'react';
+
+import type {
+  ZoraNavigationRouteMetadata,
+  ZoraNavigationRouteState,
+} from '../components/navigation-item';
+import type { ZoraNavigationRouteMap } from '../components/navigation-list';
+
+export interface ZoraNavigationDescriptorOptions {
+  title?: string;
+  tabBarLabel?: string | React.ReactNode;
+  drawerLabel?: string | React.ReactNode;
+}
+
+export interface ZoraNavigationDescriptor {
+  options?: ZoraNavigationDescriptorOptions;
+}
+
+export type ZoraNavigationDescriptors = Readonly<
+  Record<string, ZoraNavigationDescriptor | undefined>
+>;
+
+export interface ZoraNavigationState {
+  index: number;
+  routes: readonly ZoraNavigationRouteState[];
+}
+
+export interface ZoraTabPressEvent {
+  type: 'tabPress';
+  target: string;
+  canPreventDefault: true;
+}
+
+export 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 fallback =
+    kind === 'tab'
+      ? (options?.tabBarLabel ?? options?.title)
+      : (options?.drawerLabel ?? options?.title);
+
+  if (fallback !== undefined) {
+    return { label: fallback, 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

@@ -0,0 +1,15 @@
+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/image-preview/ImagePreview.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Image } from '../../components/image';
+import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ImagePreviewProps, ZoraImageAsset } from './types';
+
+function resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {
+  if (!asset) return null;
+
+  if (asset.kind === 'url') {
+    return asset.url;
+  }
+
+  return asset.publicUrl ?? null;
+}
+
+function resolveSafeAspectRatio(value: number | undefined): number {
+  if (!value || !Number.isFinite(value) || value <= 0) {
+    return 1;
+  }
+
+  return value;
+}
+
+function ImagePreviewInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  asset,
+  aspectRatio,
+  fit = 'cover',
+  emptyTitle = 'No image',
+  emptyDescription = 'Select an image to preview it here.',
+}: ImagePreviewProps) {
+  const { theme } = useZoraTheme();
+  const renderableUrl = resolveRenderableUrl(asset);
+  const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);
+
+  return (
+    <Box
+      bg={theme.semantics.neutral.surface}
+      borderColor={theme.semantics.neutral.divider}
+      borderWidth={1}
+      radius="l"
+      testID={testID}
+      style={{ overflow: 'hidden' }}
+    >
+      {renderableUrl ? (
+        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+          <Image
+            alt={asset?.alt}
+            fit={fit}
+            source={renderableUrl}
+            style={{ height: '100%', width: '100%' }}
+          />
+        </Box>
+      ) : (
+        <Box p="l">
+          <Stack gap="xs">
+            <Text variant="label" weight="semiBold">
+              {emptyTitle}
+            </Text>
+            <Text tone="muted" variant="bodySmall">
+              {emptyDescription}
+            </Text>
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export const ImagePreview = withZoraThemeScope(ImagePreviewInner);

package/src/patterns/image-preview/index.ts

@@ -0,0 +1,2 @@
+export { ImagePreview } from './ImagePreview';
+export type { ImagePreviewProps, ZoraImageAsset, ZoraImageMetadata } from './types';

package/src/patterns/image-preview/types.ts

@@ -0,0 +1,41 @@
+import type React from 'react';
+
+import type { ImageFit } from '../../components/image';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ZoraImageMetadata {
+  fileName?: string;
+  sizeBytes?: number;
+  createdAt?: string;
+}
+
+export type ZoraImageAsset =
+  | {
+      kind: 'url';
+      url: string;
+      alt?: string;
+      width?: number;
+      height?: number;
+      contentType?: string;
+      metadata?: ZoraImageMetadata;
+    }
+  | {
+      kind: 'storage';
+      storageId?: string;
+      bucket: string;
+      path: string;
+      publicUrl?: string;
+      alt?: string;
+      width?: number;
+      height?: number;
+      contentType?: string;
+      metadata?: ZoraImageMetadata;
+    };
+
+export interface ImagePreviewProps extends ZoraBaseProps {
+  asset?: ZoraImageAsset | null;
+  aspectRatio?: number;
+  fit?: ImageFit;
+  emptyTitle?: React.ReactNode;
+  emptyDescription?: React.ReactNode;
+}