@ankhorage/zora 1.0.9 → 1.0.10

package/src/patterns/zora-drawer-content/ZoraDrawerContent.tsx

@@ -0,0 +1,53 @@
+import { DrawerNavigation as SurfaceDrawerNavigation } from '@ankhorage/surface';
+import React from 'react';
+
+import {
+  createDrawerItemPressHandler,
+  resolveNavigationItems,
+} from '../../internal/resolveZoraNavigationItems';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraDrawerContentProps } from './types';
+
+function ZoraDrawerContentInner({
+  themeId: _themeId,
+  mode: _mode,
+  state,
+  navigation,
+  descriptors,
+  routeMap,
+  compact = false,
+  header,
+  footer,
+  testID,
+}: ZoraDrawerContentProps) {
+  const resolved = resolveNavigationItems({
+    state,
+    descriptors,
+    routeMap,
+    kind: 'drawer',
+  });
+
+  const items = resolved.map((item) => ({
+    id: item.route.key,
+    label: item.label,
+    icon: item.metadata?.icon,
+    badge: item.metadata?.badge,
+    active: item.active,
+    disabled: item.disabled,
+    onPress: createDrawerItemPressHandler({ item, navigation }),
+    accessibilityLabel: item.metadata?.accessibilityLabel,
+    testID: item.metadata?.testID,
+  }));
+
+  return (
+    <SurfaceDrawerNavigation
+      compact={compact}
+      footer={footer}
+      header={header}
+      items={items}
+      testID={testID}
+    />
+  );
+}
+
+export const ZoraDrawerContent = withZoraThemeScope(ZoraDrawerContentInner);

package/src/patterns/zora-drawer-content/index.ts

@@ -0,0 +1,2 @@
+export type { ZoraDrawerContentProps } from './types';
+export { ZoraDrawerContent } from './ZoraDrawerContent';

package/src/patterns/zora-drawer-content/types.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import type { ZoraNavigationRouteMap } from '../../components/navigation-list';
+import type {
+  ZoraDrawerNavigation,
+  ZoraNavigationDescriptors,
+  ZoraNavigationState,
+} from '../../internal/resolveZoraNavigationItems';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ZoraDrawerContentProps extends ZoraBaseProps {
+  state: ZoraNavigationState;
+  navigation: ZoraDrawerNavigation;
+  descriptors?: ZoraNavigationDescriptors | undefined;
+  routeMap?: ZoraNavigationRouteMap | undefined;
+  compact?: boolean;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  testID?: string;
+}

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -0,0 +1,55 @@
+import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
+import React from 'react';
+
+import { Surface } from '../../foundation';
+import {
+  createTabBarItemPressHandler,
+  resolveNavigationItems,
+} from '../../internal/resolveZoraNavigationItems';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraTabBarProps } from './types';
+
+function ZoraTabBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  state,
+  navigation,
+  descriptors,
+  routeMap,
+  compact = false,
+  chrome = 'raised',
+  testID,
+}: ZoraTabBarProps) {
+  const resolved = resolveNavigationItems({
+    state,
+    descriptors,
+    routeMap,
+    kind: 'tab',
+  });
+
+  const items = resolved.map((item) => ({
+    id: item.route.key,
+    label: item.label,
+    icon: item.metadata?.icon,
+    badge: item.metadata?.badge,
+    active: item.active,
+    disabled: item.disabled,
+    onPress: createTabBarItemPressHandler({ item, navigation }),
+    accessibilityLabel: item.metadata?.accessibilityLabel,
+    testID: item.metadata?.testID,
+  }));
+
+  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;
+
+  if (chrome === 'none') {
+    return content;
+  }
+
+  return (
+    <Surface variant="raised" testID={testID ? `${testID}-chrome` : undefined}>
+      {content}
+    </Surface>
+  );
+}
+
+export const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);

package/src/patterns/zora-tab-bar/index.ts

@@ -0,0 +1,2 @@
+export type { ZoraTabBarProps } from './types';
+export { ZoraTabBar } from './ZoraTabBar';

package/src/patterns/zora-tab-bar/types.ts

@@ -0,0 +1,18 @@
+import type { ZoraNavigationRouteMap } from '../../components/navigation-list';
+import type {
+  ZoraNavigationDescriptors,
+  ZoraNavigationState,
+  ZoraTabBarNavigation,
+} from '../../internal/resolveZoraNavigationItems';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ZoraTabBarProps extends ZoraBaseProps {
+  state: ZoraNavigationState;
+  navigation: ZoraTabBarNavigation;
+  descriptors?: ZoraNavigationDescriptors | undefined;
+  insets?: { top?: number; bottom?: number; left?: number; right?: number } | undefined;
+  routeMap?: ZoraNavigationRouteMap | undefined;
+  compact?: boolean;
+  chrome?: 'none' | 'raised';
+  testID?: string;
+}

package/src/showcaseCoverage.test.ts

@@ -38,6 +38,8 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'MediaCard',
     'MetricCard',
     'Modal',
+    'NavigationItem',
+    'NavigationList',
     'Progress',
     'Radio',
     'RadioGroup',
@@ -98,6 +100,8 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'TileGrid',
     'TreeItem',
     'TreeView',
+    'ZoraDrawerContent',
+    'ZoraTabBar',
   ],
 } as const;