@ankhorage/zora 5.0.0 → 7.0.0

package/src/components/time-picker/TimePicker.tsx

@@ -1,10 +1,10 @@
 import { Field } from '@ankhorage/surface';
 import React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 
+import { useBottomSheet } from '../../features/bottom-sheet/public';
 import { Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { ActionSheet, ActionSheetItem } from '../action-sheet';
 import { Button } from '../button';
 import { Text } from '../text';
 import type { TimePickerProps } from './types';
@@ -12,6 +12,7 @@ import type { TimePickerProps } from './types';
 const MINUTES_PER_DAY = 24 * 60;
 const DEFAULT_STEP_MINUTES = 30;
 
+/*** Render the field label and optional supporting description. */
 function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
   return (
     <Stack gap="xs">
@@ -27,39 +28,34 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
   );
 }
 
+/*** Parse one HH:mm value to minutes since midnight. */
 function parseTimeToMinutes(value: string | undefined): number | undefined {
-  if (!value) {
-    return undefined;
-  }
-
+  if (!value) return undefined;
   const match = /^(\d{2}):(\d{2})$/.exec(value);
-  if (!match) {
-    return undefined;
-  }
+  if (!match) return undefined;
 
   const hours = Number(match[1]);
   const minutes = Number(match[2]);
-  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
-    return undefined;
-  }
-
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return undefined;
   return hours * 60 + minutes;
 }
 
+/*** Format minutes since midnight as HH:mm. */
 function formatMinutes(value: number): string {
   const hours = Math.floor(value / 60);
   const minutes = value % 60;
   return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 
+/*** Normalize the configured time step to a positive whole minute. */
 function resolveStepMinutes(stepMinutes: number | undefined): number {
   if (stepMinutes === undefined || !Number.isFinite(stepMinutes) || stepMinutes <= 0) {
     return DEFAULT_STEP_MINUTES;
   }
-
   return Math.max(1, Math.floor(stepMinutes));
 }
 
+/*** Generate selectable HH:mm values within the configured range. */
 function generateTimeOptions({
   minTime,
   maxTime,
@@ -71,11 +67,8 @@ function generateTimeOptions({
   const options: string[] = [];
 
   for (let minute = 0; minute < MINUTES_PER_DAY; minute += step) {
-    if (minute >= min && minute <= max) {
-      options.push(formatMinutes(minute));
-    }
+    if (minute >= min && minute <= max) options.push(formatMinutes(minute));
   }
-
   return options;
 }
 
@@ -97,18 +90,33 @@ function TimePickerInner({
   testID,
   interactionPolicy,
 }: TimePickerProps) {
+  const { dismiss, present } = useBottomSheet();
   const passive = interactionPolicy === 'passive';
-  const [visible, setVisible] = React.useState(false);
-  const options = React.useMemo(
-    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
-    [maxTime, minTime, stepMinutes],
-  );
   const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
 
+  /*** Present the time options through the shared BottomSheet controller. */
   function openPicker() {
     if (passive) return;
-
-    setVisible(true);
+    present({
+      content: (
+        <TimePickerSheet
+          description={description}
+          formatTime={formatTime}
+          interactionPolicy={interactionPolicy}
+          label={label}
+          maxTime={maxTime}
+          minTime={minTime}
+          onDismiss={dismiss}
+          onSelect={(time) => {
+            onValueChange?.(time);
+            dismiss();
+          }}
+          stepMinutes={stepMinutes}
+          testID={testID}
+          value={value}
+        />
+      ),
+    });
   }
 
   return (
@@ -130,45 +138,124 @@ function TimePickerInner({
       >
         {displayValue}
       </Button>
-      <ActionSheet
-        description={description}
-        interactionPolicy={interactionPolicy}
-        onDismiss={() => {
-          if (passive) return;
-
-          setVisible(false);
-        }}
-        testID={testID ? `${testID}-sheet` : undefined}
-        title={label ?? 'Choose time'}
-        visible={visible}
-      >
-        <ScrollView style={{ maxHeight: 360 }}>
-          <Stack gap="xxs">
-            {options.map((option) => (
-              <ActionSheetItem
-                interactionPolicy={interactionPolicy}
-                key={option}
-                label={formatTime ? formatTime(option) : option}
-                onPress={() => {
-                  if (passive) return;
-
-                  onValueChange?.(option);
-                  setVisible(false);
-                }}
-                selected={option === value}
-                testID={testID ? `${testID}-option-${option}` : undefined}
-              />
-            ))}
-          </Stack>
-        </ScrollView>
-      </ActionSheet>
     </Field>
   );
 }
 
+interface TimePickerSheetProps extends Pick<
+  TimePickerProps,
+  | 'description'
+  | 'formatTime'
+  | 'interactionPolicy'
+  | 'label'
+  | 'maxTime'
+  | 'minTime'
+  | 'stepMinutes'
+  | 'testID'
+  | 'value'
+> {
+  onDismiss: () => void;
+  onSelect: (value: string) => void;
+}
+
+/*** Render time selection content inside the shared BottomSheet host. */
+function TimePickerSheet({
+  description,
+  formatTime,
+  interactionPolicy,
+  label,
+  maxTime,
+  minTime,
+  onDismiss,
+  onSelect,
+  stepMinutes,
+  testID,
+  value,
+}: TimePickerSheetProps) {
+  const options = React.useMemo(
+    () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
+    [maxTime, minTime, stepMinutes],
+  );
+
+  return (
+    <Stack gap="m" p="m" testID={testID ? `${testID}-sheet` : undefined}>
+      <PickerSheetHeader description={description} title={label ?? 'Choose time'} />
+      <ScrollView style={styles.options}>
+        <Stack gap="xxs">
+          {options.map((option) => (
+            <TimePickerOption
+              formatTime={formatTime}
+              interactionPolicy={interactionPolicy}
+              key={option}
+              onSelect={onSelect}
+              option={option}
+              selected={option === value}
+              testID={testID}
+            />
+          ))}
+        </Stack>
+      </ScrollView>
+      <Button fullWidth interactionPolicy={interactionPolicy} onPress={onDismiss} variant="ghost">
+        Cancel
+      </Button>
+    </Stack>
+  );
+}
+
+/*** Render the shared title block used by the time sheet. */
+function PickerSheetHeader({
+  description,
+  title,
+}: {
+  description: React.ReactNode | undefined;
+  title: React.ReactNode;
+}) {
+  return (
+    <Stack gap="xxs">
+      <Text align="center" variant="label" weight="semiBold">
+        {title}
+      </Text>
+      {description ? (
+        <Text align="center" emphasis="muted" variant="bodySmall">
+          {description}
+        </Text>
+      ) : null}
+    </Stack>
+  );
+}
+
+/*** Render one accessible selectable time option. */
+function TimePickerOption({
+  formatTime,
+  interactionPolicy,
+  onSelect,
+  option,
+  selected,
+  testID,
+}: Pick<TimePickerSheetProps, 'formatTime' | 'interactionPolicy' | 'testID'> & {
+  onSelect: (value: string) => void;
+  option: string;
+  selected: boolean;
+}) {
+  return (
+    <Button
+      accessibilityState={{ selected }}
+      fullWidth
+      interactionPolicy={interactionPolicy}
+      onPress={() => onSelect(option)}
+      testID={testID ? `${testID}-option-${option}` : undefined}
+      variant={selected ? 'soft' : 'ghost'}
+    >
+      {formatTime ? formatTime(option) : option}
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  options: { maxHeight: 360 },
+});
+
 /***
- * Time input control with wheel selection and formatted display value.
- *
- 
+ * Time input control with bottom-sheet selection and formatted display value.
  */
 export const TimePicker = withZoraThemeScope(TimePickerInner);

package/src/components/time-picker/meta.ts

@@ -5,6 +5,6 @@ export const timePickerMeta = {
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing ActionSheet-backed time picker; not represented as a manifest node in v1.',
+  note: 'Code-facing BottomSheet-backed time picker; not represented as a manifest node in v1.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/expo57Migration.test.ts

@@ -14,6 +14,14 @@ const EXPO_EXAMPLE_DIRS = [
   'examples/social_community/private-messaging',
   'examples/social_community/visual-discovery',
 ] as const;
+const ROUTER_EXAMPLE_DIRS = EXPO_EXAMPLE_DIRS.filter(
+  (directory) => directory !== 'examples/expo-showcase',
+);
+const ZORA_PROVIDER_HOSTS = [
+  ['examples/basic-app', 'App.tsx'],
+  ['examples/expo-showcase', 'App.tsx'],
+  ...ROUTER_EXAMPLE_DIRS.map((directory) => [directory, 'app', '_layout.tsx'] as const),
+] as const;
 const RNVI_PLUGINS = [
   '@react-native-vector-icons/fontawesome',
   '@react-native-vector-icons/fontawesome5',
@@ -63,6 +71,9 @@ describe('portable ZORA package boundary', () => {
     expect(readValue(peers, 'react-native-svg')).toBe('15.15.4');
     expect(readValue(development, 'react-native-svg')).toBe('15.15.4');
     expect(readValue(peers, 'react-native-web')).toMatch(TILDE_SEMVER_RANGE);
+    expect(readValue(peers, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+    expect(readValue(peers, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+    expect(readValue(peers, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
     expect(development.typescript).toMatch(TILDE_SEMVER_RANGE);
 
     for (const expoPackage of ['@expo/vector-icons', 'expo-font', 'expo-linear-gradient']) {
@@ -101,6 +112,9 @@ describe('Expo 57 example boundary', () => {
       expect(expoVersion).toMatch(EXACT_SEMVER_VERSION);
       expect(dependencies.react).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+      expect(readValue(dependencies, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
       expect(readValue(dependencies, 'react-native-web')).toMatch(TILDE_SEMVER_RANGE);
       expect(development.typescript).toMatch(TILDE_SEMVER_RANGE);
       expect(readValue(dependencies, '@expo/vector-icons')).toBeUndefined();
@@ -117,6 +131,48 @@ describe('Expo 57 example boundary', () => {
       'utf8',
     );
     expect(scaffoldSource).toContain(`expo: '${expoVersion}',`);
+    expect(scaffoldSource).toContain("navigator: '^3.2.3'");
+    expect(scaffoldSource).toContain("from 'expo-router/unstable-native-tabs'");
+    expect(scaffoldSource).toContain('<GestureHandlerRootView style={{ flex: 1 }}>');
+    expect(scaffoldSource).not.toContain('ZoraTabBar');
+  });
+
+  test('uses Navigator native tabs in every router example', () => {
+    for (const directory of ROUTER_EXAMPLE_DIRS) {
+      const packageJson = readExamplePackage(directory);
+      const dependencies = readRecord(packageJson, 'dependencies');
+      const layoutSource = readFileSync(
+        join(ROOT, directory, 'app', '(tabs)', '_layout.tsx'),
+        'utf8',
+      );
+
+      expect(readValue(dependencies, '@ankhorage/navigator')).toMatch(CARET_SEMVER_RANGE);
+      expect(layoutSource).toContain("from '@ankhorage/navigator/tabs/native-icons'");
+      expect(layoutSource).toContain("from 'expo-router/unstable-native-tabs'");
+      expect(layoutSource).toContain("Platform.OS === 'web'");
+      expect(layoutSource).toContain('Promise.resolve(null)');
+      expect(layoutSource).toContain('<NativeTabs>');
+      expect(layoutSource).not.toContain('ZoraTabBar');
+      expect(layoutSource).not.toContain('ZoraNavigationRouteMap');
+    }
+  });
+
+  test('keeps GestureHandlerRootView outside ZoraProvider in every host app', () => {
+    for (const sourcePath of ZORA_PROVIDER_HOSTS) {
+      const [directory] = sourcePath;
+      const source = readFileSync(join(ROOT, ...sourcePath), 'utf8');
+      const packageJson = readExamplePackage(directory);
+      const dependencies = readRecord(packageJson, 'dependencies');
+      const gestureRootPosition = source.indexOf('<GestureHandlerRootView');
+      const zoraProviderPosition = source.indexOf('<ZoraProvider');
+
+      expect(readValue(dependencies, 'react-native-gesture-handler')).toMatch(TILDE_SEMVER_RANGE);
+      expect(readValue(dependencies, 'react-native-reanimated')).toMatch(EXACT_SEMVER_VERSION);
+      expect(readValue(dependencies, 'react-native-worklets')).toMatch(EXACT_SEMVER_VERSION);
+      expect(source).toContain("from 'react-native-gesture-handler'");
+      expect(gestureRootPosition).toBeGreaterThan(-1);
+      expect(zoraProviderPosition).toBeGreaterThan(gestureRootPosition);
+    }
   });
 
   test('registers all scoped RNVI packages in each Expo app config', () => {

package/src/features/bottom-sheet/public.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test';
+
+describe('ZORA BottomSheet public contract', () => {
+  test('publishes an explicit ZORA subpath backed by Surface', async () => {
+    const packageJson = (await Bun.file('package.json').json()) as {
+      dependencies: Readonly<Record<string, string>>;
+      exports: Readonly<Record<string, unknown>>;
+      peerDependencies: Readonly<Record<string, string>>;
+    };
+    const source = await Bun.file('src/features/bottom-sheet/public.ts').text();
+
+    expect(packageJson.exports['./bottom-sheet']).toBeDefined();
+    expect(packageJson.dependencies['@ankhorage/surface']).toMatch(/^\^4\./u);
+    expect(source).toContain("from '@ankhorage/surface/bottom-sheet'");
+    const {
+      'react-native-gesture-handler': gestureHandlerPeer,
+      'react-native-reanimated': reanimatedPeer,
+      'react-native-worklets': workletsPeer,
+    } = packageJson.peerDependencies;
+    expect(gestureHandlerPeer).toBeDefined();
+    expect(reanimatedPeer).toBeDefined();
+    expect(workletsPeer).toBeDefined();
+  });
+
+  test('installs the shared provider and removes picker ActionSheet dependencies', async () => {
+    const [provider, datePicker, timePicker] = await Promise.all([
+      Bun.file('src/theme/ZoraProvider.tsx').text(),
+      Bun.file('src/components/date-picker/DatePicker.tsx').text(),
+      Bun.file('src/components/time-picker/TimePicker.tsx').text(),
+    ]);
+
+    expect(provider).toContain('<BottomSheetProvider>{children}</BottomSheetProvider>');
+    expect(provider).not.toContain('GestureHandlerRootView');
+    expect(datePicker).toContain('useBottomSheet()');
+    expect(timePicker).toContain('useBottomSheet()');
+    expect(datePicker).not.toContain("from '../action-sheet'");
+    expect(timePicker).not.toContain("from '../action-sheet'");
+  });
+});

package/src/features/bottom-sheet/public.ts

@@ -0,0 +1,5 @@
+export type {
+  BottomSheetController,
+  BottomSheetPresentOptions,
+} from '@ankhorage/surface/bottom-sheet';
+export { useBottomSheet } from '@ankhorage/surface/bottom-sheet';