@ankhorage/zora 18.0.1 → 19.0.1

package/src/features/scanner/adapters/inbound/BarcodeScannerView.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { BarcodeScannerViewProps } from '../../../../types/scanner';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { Text } from '../../../typography/public';
+import { CameraPermissionView } from './CameraPermissionView';
+import { ScanOverlay } from './ScanOverlay';
+
+function BarcodeScannerViewInner({
+  themeId: _themeId,
+  interactionPolicy,
+  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}
+        interactionPolicy={interactionPolicy}
+      />
+    );
+  }
+
+  return (
+    <Card
+      compact
+      description={description}
+      eyebrow="Scanner"
+      interactionPolicy={interactionPolicy}
+      testID={testID}
+      title={title}
+      tone="subtle"
+    >
+      <View gap="m">
+        <View>
+          <View style={[styles.viewport, viewportStyle]}>
+            {camera ? (
+              <View style={styles.cameraSlot}>{camera}</View>
+            ) : (
+              <View style={[styles.placeholder, placeholderStyle]} />
+            )}
+            <View style={[styles.overlay, { pointerEvents: 'none' }]}>
+              <ScanOverlay
+                cornerLabel={cornerLabel}
+                description={overlayDescription}
+                title={overlayTitle}
+              />
+            </View>
+          </View>
+        </View>
+        {children ? <View>{children}</View> : null}
+        <Text emphasis="muted" variant="caption">
+          Native scanning belongs to an app adapter such as expo-camera. ZORA owns this visible
+          scanner surface.
+        </Text>
+      </View>
+    </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/features/scanner/adapters/inbound/CameraPermissionView.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import type { CameraPermissionViewProps } from '../../../../types/scanner';
+import { Button } from '../../../button/public';
+import { Card } from '../../../card/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { Text } from '../../../typography/public';
+
+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,
+  interactionPolicy,
+  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"
+      interactionPolicy={interactionPolicy}
+      testID={testID}
+      title={title ?? copy.title}
+      tone="subtle"
+    >
+      <View gap="m">
+        <Text emphasis="muted" variant="bodySmall">
+          Permission state: {status}
+        </Text>
+        <View direction={{ base: 'column', md: 'row' }} gap="s">
+          {handleRequestPermission ? (
+            <Button
+              color="primary"
+              disabled={status === 'requesting'}
+              onPress={handleRequestPermission}
+              {...requestButtonProps}
+              interactionPolicy={interactionPolicy}
+            >
+              {primaryLabel}
+            </Button>
+          ) : null}
+          {handleManualEntry ? (
+            <Button
+              color="neutral"
+              onPress={handleManualEntry}
+              variant="soft"
+              {...manualEntryButtonProps}
+              interactionPolicy={interactionPolicy}
+            >
+              {manualEntryLabel}
+            </Button>
+          ) : null}
+        </View>
+      </View>
+    </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/features/scanner/adapters/inbound/ScanOverlay.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import type { ScanOverlayProps } from '../../../../types/scanner';
+import { Badge } from '../../../badge/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { Text } from '../../../typography/public';
+
+function ScanOverlayInner({
+  themeId: _themeId,
+  interactionPolicy: _interactionPolicy,
+  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 (
+    <View testID={testID}>
+      <View 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>
+        <View gap="xs">
+          <Text align="center" variant="label" weight="semiBold">
+            {title}
+          </Text>
+          <Text align="center" emphasis="muted" variant="bodySmall">
+            {description}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+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/features/scanner/meta.ts

@@ -0,0 +1,197 @@
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+
+export const scanOverlayMeta = {
+  name: 'ScanOverlay',
+  category: 'pattern',
+  description: 'Camera-agnostic scan frame overlay for barcode and QR scanning flows.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Scan overlay',
+    defaultProps: {
+      title: 'Align the barcode',
+      description: 'Hold the barcode inside the frame. Scanning starts automatically.',
+      cornerLabel: 'SCAN',
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Align the barcode',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Hold the barcode inside the frame. Scanning starts automatically.',
+    },
+    cornerLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Corner label',
+      default: 'SCAN',
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const cameraPermissionViewMeta = {
+  name: 'CameraPermissionView',
+  category: 'pattern',
+  description: 'ZORA-owned camera permission state for scanner flows.',
+  directManifestNode: true,
+  allowedChildren: [],
+  requirements: {
+    permissions: [{ permission: 'camera' }],
+  },
+  blueprint: {
+    label: 'Camera permission',
+    defaultProps: {
+      status: 'unknown',
+      requestLabel: 'Allow camera access',
+      manualEntryLabel: 'Enter barcode manually',
+    },
+  },
+  props: {
+    status: {
+      type: 'enum',
+      category: 'State',
+      label: 'Permission status',
+      enum: ['unknown', 'requesting', 'denied'],
+      default: 'unknown',
+    },
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+    },
+    requestLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Request label',
+      default: 'Allow camera access',
+    },
+    deniedLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Denied label',
+      default: 'Open settings',
+    },
+    manualEntryLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Manual entry label',
+      default: 'Enter barcode manually',
+    },
+    onRequestPermission: {
+      type: 'action',
+      category: 'Events',
+      label: 'Request permission action',
+    },
+    onManualEntry: {
+      type: 'action',
+      category: 'Events',
+      label: 'Manual entry action',
+    },
+  },
+} as const satisfies ZoraComponentMeta;
+
+export const barcodeScannerViewMeta = {
+  name: 'BarcodeScannerView',
+  category: 'pattern',
+  description:
+    'Composed scanner shell with permission, camera slot, scan overlay, and manual entry affordance.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  requirements: {
+    permissions: [{ permission: 'camera' }],
+    capabilities: [{ capability: 'barcodeScanner' }],
+  },
+  blueprint: {
+    label: 'Barcode scanner',
+    defaultProps: {
+      permissionStatus: 'unknown',
+      title: 'Scan barcode',
+      description: 'Point the camera at a barcode to continue.',
+    },
+  },
+  events: {
+    onBarcodeScanned: {
+      label: 'Barcode scanned',
+      eventType: 'scan',
+      description: 'Emitted by the app camera adapter after a barcode has been scanned.',
+      payloadFields: [
+        { path: 'value', type: 'string', label: 'Barcode value' },
+        { path: 'type', type: 'string', label: 'Barcode type' },
+      ],
+    },
+  },
+  slots: {
+    camera: {
+      label: 'Camera adapter',
+      allowedChildren: [],
+    },
+    children: {
+      label: 'Scanner footer',
+      allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+    },
+  },
+  props: {
+    permissionStatus: {
+      type: 'enum',
+      category: 'State',
+      label: 'Permission status',
+      enum: ['unknown', 'requesting', 'granted', 'denied'],
+      default: 'unknown',
+    },
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Scan barcode',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Point the camera at a barcode to continue.',
+    },
+    overlayTitle: {
+      type: 'string',
+      category: 'Content',
+      label: 'Overlay title',
+    },
+    overlayDescription: {
+      type: 'string',
+      category: 'Content',
+      label: 'Overlay description',
+    },
+    requestPermissionLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Request permission label',
+    },
+    manualEntryLabel: {
+      type: 'string',
+      category: 'Content',
+      label: 'Manual entry label',
+    },
+    onRequestPermission: {
+      type: 'action',
+      category: 'Events',
+      label: 'Request permission action',
+    },
+    onManualEntry: {
+      type: 'action',
+      category: 'Events',
+      label: 'Manual entry action',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/scanner/public.ts

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

package/src/features/section/adapters/inbound/ScreenSection.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { ScreenSectionProps } from '../../../../types/section';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { SectionHeader } from './SectionHeader';
+
+function ScreenSectionInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  title,
+  description,
+  actions,
+  children,
+  testID,
+}: ScreenSectionProps) {
+  return (
+    <View gap="m" testID={testID}>
+      {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}
+      {children}
+    </View>
+  );
+}
+
+/*** Screen section with optional heading, description, actions, and content. */
+export const ScreenSection = withZoraThemeScope(ScreenSectionInner);

package/src/features/section/adapters/inbound/SectionHeader.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import type { SectionHeaderProps } from '../../../../types/section';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
+
+function SectionHeaderInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  title,
+  description,
+  eyebrow,
+  actions,
+  testID,
+}: SectionHeaderProps) {
+  return (
+    <View
+      align={{ base: 'flex-start', md: 'center' }}
+      direction={{ base: 'column', md: 'row' }}
+      gap="m"
+      justify="space-between"
+      testID={testID}
+    >
+      <View flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+        <View gap="xs">
+          {eyebrow ? (
+            <Text emphasis="muted" variant="caption" weight="semiBold">
+              {eyebrow}
+            </Text>
+          ) : null}
+          <Heading level={3}>{title}</Heading>
+          {description ? (
+            <Text emphasis="muted" variant="bodySmall">
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+      {actions ? <View>{actions}</View> : null}
+    </View>
+  );
+}
+
+/***
+ * Section heading pattern with optional description and action slot.
+ *
+ 
+ */
+export const SectionHeader = withZoraThemeScope(SectionHeaderInner);

package/src/features/section/public.ts

@@ -0,0 +1,3 @@
+export type { ScreenSectionProps, SectionHeaderProps } from '../../types/section';
+export { ScreenSection } from './adapters/inbound/ScreenSection';
+export { SectionHeader } from './adapters/inbound/SectionHeader';

package/src/features/section/screenSectionMeta.ts

@@ -0,0 +1,30 @@
+import type { ZoraComponentMeta } from '../authoring';
+import { SCREEN_SECTION_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+
+export const screenSectionMeta = {
+  name: 'ScreenSection',
+  category: 'layout',
+  directManifestNode: true,
+  allowedChildren: [...SCREEN_SECTION_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Screen section',
+    defaultProps: {
+      title: 'Section',
+      description: 'Section description.',
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Section',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Section description.',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/section/sectionHeaderMeta.ts

@@ -0,0 +1,34 @@
+import type { ZoraComponentMeta } from '../authoring';
+
+export const sectionHeaderMeta = {
+  name: 'SectionHeader',
+  category: 'pattern',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Section header',
+    defaultProps: {
+      title: 'Section title',
+      description: 'Short description.',
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Section title',
+    },
+    description: {
+      type: 'string',
+      category: 'Content',
+      label: 'Description',
+      default: 'Short description.',
+    },
+    eyebrow: {
+      type: 'string',
+      category: 'Content',
+      label: 'Eyebrow',
+    },
+  },
+} as const satisfies ZoraComponentMeta;