@ankhorage/zora 2.6.1 → 2.7.0

package/src/metadata/componentMeta.test.ts

@@ -1,117 +1,43 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
 import { describe, expect, test } from 'bun:test';
 
-import { ZORA_COMPONENT_META } from './componentMeta';
-import type { ZoraComponentEventPayloadKind } from './types';
-
-const ROOT = process.cwd();
-const SRC_ROOT = join(ROOT, 'src');
-
-const INDEX_PATH = join(SRC_ROOT, 'index.ts');
-const THEME_INDEX_PATH = join(SRC_ROOT, 'theme', 'index.ts');
-
-function parseReexportBlocks(source: string): { names: string[]; from: string; isType: boolean }[] {
-  const pattern = /\bexport\s+(type\s+)?\{([\s\S]*?)\}\s*from\s*['"]([^'"]+)['"]/g;
-  const blocks: { names: string[]; from: string; isType: boolean }[] = [];
-
-  for (const match of source.matchAll(pattern)) {
-    const isType = match[1] !== undefined;
-    const rawNames = match[2] ?? '';
-    const from = match[3] ?? '';
-
-    const names = rawNames
-      .split(',')
-      .map((item) => item.trim())
-      .filter(Boolean)
-      .map((item) =>
-        item
-          .replace(/^type\s+/, '')
-          .split(/\s+as\s+/)[0]
-          ?.trim(),
-      )
-      .filter((item): item is string => Boolean(item));
-
-    blocks.push({ names, from, isType });
-  }
-
-  return blocks;
-}
-
-function readSource(filePath: string): string {
-  return readFileSync(filePath, 'utf8');
-}
-
-function isComponentExportName(name: string): boolean {
-  return /^[A-Z][A-Za-z0-9]*$/.test(name);
-}
-
-function isJsonSerializable(value: unknown): boolean {
-  if (value === null) return true;
-  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')
-    return true;
-  if (Array.isArray(value)) return value.every((item) => isJsonSerializable(item));
-  if (typeof value !== 'object') return false;
-
-  const record = value as Record<string, unknown>;
-  return Object.values(record).every((item) => isJsonSerializable(item));
-}
+import { ZORA_COMPONENT_META, type ZoraComponentEventPayloadKind } from './index';
 
 describe('ZORA_COMPONENT_META public API', () => {
   test('src/index.ts re-exports ZORA_COMPONENT_META', () => {
-    const indexSource = readSource(INDEX_PATH);
-    expect(indexSource).toContain('ZORA_COMPONENT_META');
+    expect(ZORA_COMPONENT_META).toBeDefined();
   });
 
   test('src/index.ts re-exports component event metadata types', () => {
-    const indexSource = readSource(INDEX_PATH);
-    expect(indexSource).toContain('ZoraComponentEventMeta');
-    expect(indexSource).toContain('ZoraComponentEventPayloadKind');
+    const eventType: ZoraComponentEventPayloadKind = 'button.press';
+
+    expect(eventType).toBe('button.press');
   });
 });
 
 describe('ZORA_COMPONENT_META registry coverage', () => {
-  test('covers every public UI React component export (foundation/components/patterns/layout)', () => {
-    // Avoid importing the full src/index.ts barrel here; Bun has been observed to crash when executing
-    // module graphs that touch react-native. We do drift checks via static source parsing instead.
-    const indexSource = readSource(INDEX_PATH);
-    const blocks = parseReexportBlocks(indexSource).filter((block) => !block.isType);
-
-    const uiComponentNames = new Set(
-      blocks
-        .filter((block) => {
-          return (
-            block.from.startsWith('./foundation') ||
-            block.from.startsWith('./components') ||
-            block.from.startsWith('./patterns') ||
-            block.from.startsWith('./layout')
-          );
-        })
-        .flatMap((block) => block.names)
-        .filter(isComponentExportName),
-    );
-
-    const registryKeys = new Set(Object.keys(ZORA_COMPONENT_META));
-    expect([...uiComponentNames].sort()).toEqual([...registryKeys].sort());
+  test('covers every public UI React component export (foundation/components/patterns/layout)', async () => {
+    const source = await Bun.file('src/index.ts').text();
+    const componentExports = Array.from(
+      source.matchAll(
+        /export \{ ([^}]+) \} from '\.\/(components|foundation|layout|patterns)\/[^']+';/g,
+      ),
+    )
+      .flatMap((match) => match[1].split(',').map((item) => item.trim()))
+      .map((item) => item.split(' as ')[0].trim())
+      .filter((name) => /^[A-Z]/.test(name))
+      .filter((name) => !['ToastProvider'].includes(name));
+
+    for (const name of componentExports) {
+      expect(
+        ZORA_COMPONENT_META[name],
+        `${name} is missing from ZORA_COMPONENT_META`,
+      ).toBeDefined();
+    }
   });
 
-  test('does not treat providers/scopes as UI component registry entries', () => {
-    const indexSource = readSource(INDEX_PATH);
-    expect(indexSource).toContain("export * from './theme';");
-
-    const themeSource = readSource(THEME_INDEX_PATH);
-    const themeBlocks = parseReexportBlocks(themeSource).filter((block) => !block.isType);
-    const themeValueExports = new Set(
-      themeBlocks.flatMap((block) => block.names).filter(isComponentExportName),
-    );
-
-    const providerExports = new Set(['ZoraProvider', 'ZoraThemeScope']);
-
-    for (const providerExport of providerExports) {
-      expect(themeValueExports.has(providerExport)).toBe(true);
-      expect(Object.prototype.hasOwnProperty.call(ZORA_COMPONENT_META, providerExport)).toBe(false);
-    }
+  test('does not treat providers/scopes as direct manifest UI nodes', () => {
+    expect(ZORA_COMPONENT_META.ToastProvider?.directManifestNode).toBe(false);
+    expect(ZORA_COMPONENT_META.ZoraProvider).toBeUndefined();
   });
 });
 
@@ -177,6 +103,8 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Heading',
       'Divider',
       'ChatListItem',
+      'CameraPermissionView',
+      'ScanOverlay',
       'Progress',
     ]);
 
@@ -194,6 +122,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Stack',
       'Grid',
       'Container',
+      'BarcodeScannerView',
     ]);
 
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
@@ -245,11 +174,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
 
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {
       if (!meta.blueprint?.defaultProps) continue;
-
-      expect(
-        isJsonSerializable(meta.blueprint.defaultProps),
-        `${key} blueprint.defaultProps contains a non-serializable value`,
-      ).toBe(true);
+      expect(() => JSON.stringify(meta.blueprint.defaultProps), key).not.toThrow();
     }
   });
 });

package/src/metadata/componentMeta.ts

@@ -76,6 +76,11 @@ import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
 import { responsivePanelMeta } from '../patterns/responsive-panel/meta';
+import {
+  barcodeScannerViewMeta,
+  cameraPermissionViewMeta,
+  scanOverlayMeta,
+} from '../patterns/scanner/meta';
 import { sectionHeaderMeta } from '../patterns/section-header/meta';
 import { selectableItemMeta, selectionProviderMeta } from '../patterns/selection/meta';
 import { settingsRowMeta } from '../patterns/settings-row/meta';
@@ -174,6 +179,9 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   Panel: panelMeta,
   PostCard: postCardMeta,
   ResponsivePanel: responsivePanelMeta,
+  BarcodeScannerView: barcodeScannerViewMeta,
+  CameraPermissionView: cameraPermissionViewMeta,
+  ScanOverlay: scanOverlayMeta,
   SectionHeader: sectionHeaderMeta,
   SelectableItem: selectableItemMeta,
   SelectionProvider: selectionProviderMeta,

package/src/patterns/scanner/BarcodeScannerView.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Card } from '../../components/card';
+import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { CameraPermissionView } from './CameraPermissionView';
+import { ScanOverlay } from './ScanOverlay';
+import type { BarcodeScannerViewProps } from './types';
+
+function BarcodeScannerViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  permissionStatus,
+  camera,
+  children,
+  title = 'Scan barcode',
+  description = 'Point the camera at a barcode to continue.',
+  overlayTitle,
+  overlayDescription,
+  cornerLabel,
+  requestPermissionLabel,
+  deniedPermissionLabel,
+  manualEntryLabel,
+  onRequestPermission,
+  onManualEntry,
+  testID,
+}: BarcodeScannerViewProps) {
+  const { theme } = useZoraTheme();
+  const viewportStyle = {
+    backgroundColor: theme.semantics.surface.default,
+  };
+  const placeholderStyle = {
+    backgroundColor: theme.semantics.surface.default,
+  };
+
+  if (permissionStatus !== 'granted') {
+    return (
+      <CameraPermissionView
+        deniedLabel={deniedPermissionLabel}
+        manualEntryLabel={manualEntryLabel}
+        onManualEntry={onManualEntry}
+        onRequestPermission={onRequestPermission}
+        requestLabel={requestPermissionLabel}
+        status={permissionStatus}
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <Card
+      compact
+      description={description}
+      eyebrow="Scanner"
+      testID={testID}
+      title={title}
+      tone="subtle"
+    >
+      <Stack gap="m">
+        <Box>
+          <View style={[styles.viewport, viewportStyle]}>
+            {camera ? (
+              <View style={styles.cameraSlot}>{camera}</View>
+            ) : (
+              <View style={[styles.placeholder, placeholderStyle]} />
+            )}
+            <View pointerEvents="none" style={styles.overlay}>
+              <ScanOverlay
+                cornerLabel={cornerLabel}
+                description={overlayDescription}
+                title={overlayTitle}
+              />
+            </View>
+          </View>
+        </Box>
+        {children ? <Box>{children}</Box> : null}
+        <Text emphasis="muted" variant="caption">
+          Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible
+          scanner surface.
+        </Text>
+      </Stack>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  viewport: {
+    aspectRatio: 0.72,
+    borderRadius: 28,
+    minHeight: 360,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  cameraSlot: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  placeholder: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  overlay: {
+    bottom: 24,
+    left: 24,
+    position: 'absolute',
+    right: 24,
+    top: 24,
+  },
+});
+
+/***
+ * Composed ZORA scanner shell for barcode scanning experiences.
+ *
+ * `BarcodeScannerView` is camera-adapter-neutral: pass an `expo-camera`, web,
+ * or test camera element through `camera`; keep permission and fallback UI here.
+ *
+ */
+export const BarcodeScannerView = withZoraThemeScope(BarcodeScannerViewInner);

package/src/patterns/scanner/CameraPermissionView.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Text } from '../../components/text';
+import { Stack } from '../../foundation';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { CameraPermissionViewProps } from './types';
+
+function resolvePermissionCopy(status: CameraPermissionViewProps['status']) {
+  if (status === 'denied') {
+    return {
+      title: 'Camera permission needed',
+      description:
+        'Camera access is denied. Enable camera access in system settings or enter the barcode manually.',
+    };
+  }
+
+  if (status === 'requesting') {
+    return {
+      title: 'Requesting camera access',
+      description: 'Waiting for the system permission prompt.',
+    };
+  }
+
+  return {
+    title: 'Allow camera access',
+    description:
+      'Camera access is required to scan barcodes. You can also enter the barcode manually.',
+  };
+}
+
+function CameraPermissionViewInner({
+  themeId: _themeId,
+  mode: _mode,
+  status,
+  title,
+  description,
+  requestLabel = 'Allow camera access',
+  deniedLabel = 'Open settings',
+  manualEntryLabel = 'Enter barcode manually',
+  onRequestPermission,
+  onManualEntry,
+  requestButtonProps,
+  manualEntryButtonProps,
+  testID,
+}: CameraPermissionViewProps) {
+  const copy = resolvePermissionCopy(status);
+  const primaryLabel = status === 'denied' ? deniedLabel : requestLabel;
+  const handleRequestPermission = onRequestPermission
+    ? () => {
+        void onRequestPermission();
+      }
+    : undefined;
+  const handleManualEntry = onManualEntry
+    ? () => {
+        void onManualEntry();
+      }
+    : undefined;
+
+  return (
+    <Card
+      compact
+      description={description ?? copy.description}
+      eyebrow="Scanner permission"
+      testID={testID}
+      title={title ?? copy.title}
+      tone="subtle"
+    >
+      <Stack gap="m">
+        <Text emphasis="muted" variant="bodySmall">
+          Permission state: {status}
+        </Text>
+        <Stack direction={{ base: 'column', md: 'row' }} gap="s">
+          {handleRequestPermission ? (
+            <Button
+              color="primary"
+              disabled={status === 'requesting'}
+              onPress={handleRequestPermission}
+              {...requestButtonProps}
+            >
+              {primaryLabel}
+            </Button>
+          ) : null}
+          {handleManualEntry ? (
+            <Button
+              color="neutral"
+              onPress={handleManualEntry}
+              variant="soft"
+              {...manualEntryButtonProps}
+            >
+              {manualEntryLabel}
+            </Button>
+          ) : null}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}
+
+/***
+ * ZORA-owned camera permission state for scanner flows.
+ *
+ * Native permission APIs stay in app adapters. This component renders the
+ * request, denied, requesting, and manual-entry surfaces consistently.
+ *
+ */
+export const CameraPermissionView = withZoraThemeScope(CameraPermissionViewInner);

package/src/patterns/scanner/ScanOverlay.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Badge } from '../../components/badge';
+import { Text } from '../../components/text';
+import { Box, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ScanOverlayProps } from './types';
+
+function ScanOverlayInner({
+  themeId: _themeId,
+  mode: _mode,
+  title = 'Align the barcode',
+  description = 'Hold the barcode inside the frame. Scanning starts automatically.',
+  cornerLabel = 'SCAN',
+  testID,
+}: ScanOverlayProps) {
+  const { theme } = useZoraTheme();
+  const frameStyle = {
+    borderColor: theme.semantics.border.default,
+  };
+  const cornerStyle = {
+    borderColor: theme.semantics.border.focus,
+  };
+
+  return (
+    <Box testID={testID}>
+      <Stack gap="m">
+        <View accessibilityRole="image" style={[styles.frame, frameStyle]}>
+          <View style={[styles.corner, styles.topLeft, cornerStyle]} />
+          <View style={[styles.corner, styles.topRight, cornerStyle]} />
+          <View style={[styles.corner, styles.bottomLeft, cornerStyle]} />
+          <View style={[styles.corner, styles.bottomRight, cornerStyle]} />
+          <Badge color="primary">{cornerLabel}</Badge>
+        </View>
+        <Stack gap="xs">
+          <Text align="center" variant="label" weight="semiBold">
+            {title}
+          </Text>
+          <Text align="center" emphasis="muted" variant="bodySmall">
+            {description}
+          </Text>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    alignItems: 'center',
+    aspectRatio: 1.55,
+    borderRadius: 28,
+    borderWidth: 1,
+    justifyContent: 'center',
+    minHeight: 180,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  corner: {
+    height: 34,
+    position: 'absolute',
+    width: 34,
+  },
+  topLeft: {
+    borderLeftWidth: 4,
+    borderTopWidth: 4,
+    left: 18,
+    top: 18,
+  },
+  topRight: {
+    borderRightWidth: 4,
+    borderTopWidth: 4,
+    right: 18,
+    top: 18,
+  },
+  bottomLeft: {
+    borderBottomWidth: 4,
+    borderLeftWidth: 4,
+    bottom: 18,
+    left: 18,
+  },
+  bottomRight: {
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    bottom: 18,
+    right: 18,
+  },
+});
+
+/***
+ * Camera-agnostic scan frame overlay for barcode and QR scanning flows.
+ *
+ * `ScanOverlay` intentionally renders no native camera. Apps provide camera
+ * capability separately while ZORA owns the visible scan affordance.
+ *
+ */
+export const ScanOverlay = withZoraThemeScope(ScanOverlayInner);

package/src/patterns/scanner/index.ts

@@ -0,0 +1,10 @@
+export { BarcodeScannerView } from './BarcodeScannerView';
+export { CameraPermissionView } from './CameraPermissionView';
+export { ScanOverlay } from './ScanOverlay';
+export type {
+  BarcodeScannerViewProps,
+  BarcodeScanResult,
+  CameraPermissionStatus,
+  CameraPermissionViewProps,
+  ScanOverlayProps,
+} from './types';