@ankhorage/zora 6.0.0 → 8.0.0

package/src/features/uploader/application/use-cases/validateUploadAsset.ts

@@ -0,0 +1,111 @@
+import type { ValidateUploadAssetInput } from '../../../../types/upload';
+
+/*** Validates a picked upload asset against MIME, extension, size, and caller rules. */
+export function validateUploadAsset({
+  asset,
+  accept,
+  maxSizeBytes,
+  validate,
+}: ValidateUploadAssetInput): string | undefined {
+  if (!isAccepted(asset.contentType, asset.fileName, accept)) {
+    return accept ? `File type not accepted. Expected ${accept}.` : 'File type not accepted.';
+  }
+
+  if (
+    maxSizeBytes !== undefined &&
+    Number.isFinite(maxSizeBytes) &&
+    maxSizeBytes > 0 &&
+    asset.sizeBytes !== undefined &&
+    Number.isFinite(asset.sizeBytes) &&
+    asset.sizeBytes > maxSizeBytes
+  ) {
+    return `File is too large (${formatBytes(asset.sizeBytes)}). Max ${formatBytes(maxSizeBytes)}.`;
+  }
+
+  return validate?.(asset);
+}
+
+/*** Returns whether available file metadata satisfies at least one accept token. */
+function isAccepted(
+  contentType: string | undefined,
+  fileName: string | undefined,
+  accept: string | undefined,
+): boolean {
+  const tokens = parseAccept(accept);
+  if (tokens.length === 0) {
+    return true;
+  }
+
+  let hadSignal = false;
+
+  for (const token of tokens) {
+    const matches = matchesAcceptToken(token, contentType, fileName);
+    if (matches === null) {
+      continue;
+    }
+
+    hadSignal = true;
+    if (matches) {
+      return true;
+    }
+  }
+
+  return !hadSignal;
+}
+
+/*** Matches one MIME or extension accept token against available file metadata. */
+function matchesAcceptToken(
+  token: string,
+  contentType: string | undefined,
+  fileName: string | undefined,
+): boolean | null {
+  const normalizedToken = token.toLowerCase();
+  const normalizedContentType = contentType?.toLowerCase();
+  const normalizedFileName = fileName?.toLowerCase();
+
+  if (normalizedToken.startsWith('.')) {
+    return normalizedFileName ? normalizedFileName.endsWith(normalizedToken) : null;
+  }
+
+  if (normalizedToken.endsWith('/*')) {
+    if (!normalizedContentType) {
+      return null;
+    }
+
+    return normalizedContentType.startsWith(normalizedToken.slice(0, -1));
+  }
+
+  return normalizedContentType ? normalizedContentType === normalizedToken : null;
+}
+
+/*** Parses a browser-style accept string into normalized non-empty tokens. */
+function parseAccept(accept: string | undefined): readonly string[] {
+  if (!accept) {
+    return [];
+  }
+
+  return accept
+    .split(',')
+    .map((token) => token.trim())
+    .filter((token) => token.length > 0);
+}
+
+/*** Formats a byte count for concise upload validation feedback. */
+function formatBytes(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB'] as const;
+  let size = value;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+
+  const unit = units.at(unitIndex) ?? 'B';
+  const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;
+  return `${rounded} ${unit}`;
+}

package/src/features/uploader/composition/createUploadPicker.ts

@@ -0,0 +1,14 @@
+import { pickDocumentOrFileAsync } from '../adapters/outbound/pickDocumentOrFileAsync';
+import { pickImageOrVideoAsync } from '../adapters/outbound/pickImageOrVideoAsync';
+import type { UploadPickerPort } from '../application/ports/outbound/UploadPickerPort';
+import { pickUploadAssetAsync } from '../application/use-cases/pickUploadAssetAsync';
+
+/*** Wires the Expo picker adapters into the generic upload picker use case. */
+export function createUploadPicker(): UploadPickerPort {
+  const imageOrVideoPicker: UploadPickerPort = { pickAsync: pickImageOrVideoAsync };
+  const documentOrFilePicker: UploadPickerPort = { pickAsync: pickDocumentOrFileAsync };
+
+  return {
+    pickAsync: (input) => pickUploadAssetAsync(input, imageOrVideoPicker, documentOrFilePicker),
+  };
+}

package/src/features/uploader/public.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'bun:test';
+
+describe('ZORA Uploader public contract', () => {
+  test('publishes the generic uploader through root and explicit subpath APIs', async () => {
+    const packageJson = (await Bun.file('package.json').json()) as {
+      dependencies: Readonly<Record<string, string>>;
+      exports: Readonly<Record<string, unknown>>;
+    };
+    const [rootSource, publicSource] = await Promise.all([
+      Bun.file('src/index.ts').text(),
+      Bun.file('src/features/uploader/public.ts').text(),
+    ]);
+
+    expect(packageJson.exports['./uploader']).toBeDefined();
+    expect(packageJson.dependencies['expo-image-picker']).toMatch(/^~57\./u);
+    expect(packageJson.dependencies['expo-document-picker']).toMatch(/^~57\./u);
+    expect(rootSource).toContain("from './features/uploader/public'");
+    expect(publicSource).toContain('export { Uploader }');
+    expect(publicSource).toContain('export { validateUploadAsset }');
+  });
+
+  test('removes the superseded image preview and upload field APIs', async () => {
+    const [rootSource, registrySource, metadataSource] = await Promise.all([
+      Bun.file('src/index.ts').text(),
+      Bun.file('src/registry.ts').text(),
+      Bun.file('src/metadata/componentMeta.ts').text(),
+    ]);
+    const publicSurface = `${rootSource}\n${registrySource}\n${metadataSource}`;
+
+    expect(publicSurface).not.toContain('ImagePreview');
+    expect(publicSurface).not.toContain('ImageUploadField');
+    expect(publicSurface).toContain('Uploader');
+  });
+});

package/src/features/uploader/public.ts

@@ -0,0 +1,10 @@
+export type {
+  UploadAsset,
+  UploadAssetBase,
+  UploaderProps,
+  UploadProgressContext,
+  UploadType,
+  ValidateUploadAssetInput,
+} from '../../types/upload';
+export { Uploader } from './adapters/inbound/Uploader';
+export { validateUploadAsset } from './application/use-cases/validateUploadAsset';

package/src/features/uploader/uploaderMeta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../metadata/types';
+
+export const uploaderMeta = {
+  name: 'Uploader',
+  category: 'pattern',
+  directManifestNode: true,
+  allowedChildren: [],
+  description:
+    'Selects files with Expo pickers; bind upload and removal requests to application actions.',
+  bindings: {
+    props: {
+      value: {
+        value: {
+          type: 'object',
+          fields: [
+            { path: 'kind', type: 'string' },
+            { path: 'uri', type: 'string' },
+            { path: 'url', type: 'string' },
+            { path: 'fileName', type: 'string' },
+            { path: 'contentType', type: 'string' },
+            { path: 'sizeBytes', type: 'number' },
+            { path: 'bucket', type: 'string' },
+            { path: 'path', type: 'string' },
+            { path: 'publicUrl', type: 'string' },
+          ],
+        },
+        acceptsFallback: true,
+      },
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'uploader.valueChange',
+      payloadFields: [{ path: 'value', type: 'object' }],
+    },
+    uploadRequest: {
+      label: 'Upload request',
+      eventType: 'uploader.uploadRequest',
+      payloadFields: [{ path: 'asset', type: 'object' }],
+    },
+    removeRequest: {
+      label: 'Remove request',
+      eventType: 'uploader.removeRequest',
+      payloadFields: [{ path: 'asset', type: 'object' }],
+    },
+    validationError: {
+      label: 'Validation error',
+      eventType: 'uploader.validationError',
+      payloadFields: [{ path: 'message', type: 'string' }],
+    },
+  },
+  props: {
+    type: { type: 'enum', category: 'Selection', enum: ['image', 'video', 'document', 'file'] },
+    accept: { type: 'string', category: 'Validation' },
+    maxSizeBytes: { type: 'number', category: 'Validation' },
+    required: { type: 'boolean', category: 'Validation' },
+    disabled: { type: 'boolean', category: 'State' },
+    readOnly: { type: 'boolean', category: 'State' },
+    label: { type: 'string', category: 'Content' },
+    description: { type: 'string', category: 'Content' },
+    helperText: { type: 'string', category: 'Content' },
+    errorText: { type: 'string', category: 'State' },
+    uploadState: { type: 'enum', category: 'State', enum: ['idle', 'uploading', 'removing'] },
+    uploadProgress: { type: 'number', category: 'State' },
+    aspectRatio: { type: 'number', category: 'Layout' },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/foundation/index.test.ts

@@ -9,16 +9,11 @@ const rootIndex = readFileSync(join(import.meta.dir, '..', 'index.ts'), 'utf8');
 describe('foundation exports', () => {
   it('defines a narrow ZORA foundation export layer', () => {
     expect(foundationIndex).toMatch(/export type \{/);
-    expect(foundationIndex).toMatch(/BoxProps/);
-    expect(foundationIndex).toMatch(/ContainerProps/);
-    expect(foundationIndex).toMatch(/GridProps/);
-    expect(foundationIndex).toMatch(/StackProps/);
-    expect(foundationIndex).toMatch(/SurfaceProps/);
-    expect(foundationIndex).toMatch(/Box/);
-    expect(foundationIndex).toMatch(/Container/);
-    expect(foundationIndex).toMatch(/Grid/);
-    expect(foundationIndex).toMatch(/Stack/);
-    expect(foundationIndex).toMatch(/Surface/);
+    expect(foundationIndex).toMatch(/CenterProps/);
+    expect(foundationIndex).toMatch(/InlineProps/);
+    expect(foundationIndex).toMatch(/ShowProps/);
+    expect(foundationIndex).toMatch(/SpacerProps/);
+    expect(foundationIndex).not.toMatch(/Box|Container|Grid|Stack|Surface/);
     expect(foundationIndex).not.toMatch(/@ankhorage\/surface/);
     expect(foundationIndex).not.toMatch(/Heading/);
     expect(foundationIndex).not.toMatch(/Text/);

package/src/foundation/index.ts

@@ -1,20 +1,8 @@
-export type { BoxProps } from './Box';
-export { Box } from './Box';
 export type { CenterProps } from './Center';
 export { Center } from './Center';
-export type { ContainerProps } from './Container';
-export { Container } from './Container';
-export type { DividerProps } from './Divider';
-export { Divider } from './Divider';
-export type { GridProps } from './Grid';
-export { Grid } from './Grid';
 export type { InlineProps } from './Inline';
 export { Inline } from './Inline';
 export type { ShowProps } from './Show';
 export { Show } from './Show';
 export type { SpacerProps } from './Spacer';
 export { Spacer } from './Spacer';
-export type { StackProps } from './Stack';
-export { Stack } from './Stack';
-export type { SurfaceProps, SurfaceVariant } from './Surface';
-export { Surface } from './Surface';

package/src/foundation/meta.ts

@@ -1,15 +1,6 @@
 import type { ZoraComponentMetaRegistry } from '../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../metadata/allowedChildren';
 
 export const foundationMetas = {
-  Box: {
-    name: 'Box',
-    category: 'foundation',
-    directManifestNode: true,
-    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-    blueprint: { label: 'Box' },
-    props: {},
-  },
   Center: {
     name: 'Center',
     category: 'foundation',
@@ -18,30 +9,6 @@ export const foundationMetas = {
     note: 'Layout helper component; not represented as a manifest node in v1.',
     props: {},
   },
-  Container: {
-    name: 'Container',
-    category: 'foundation',
-    directManifestNode: true,
-    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-    blueprint: { label: 'Container' },
-    props: {},
-  },
-  Divider: {
-    name: 'Divider',
-    category: 'foundation',
-    directManifestNode: true,
-    allowedChildren: [],
-    blueprint: { label: 'Divider' },
-    props: {},
-  },
-  Grid: {
-    name: 'Grid',
-    category: 'foundation',
-    directManifestNode: true,
-    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-    blueprint: { label: 'Grid' },
-    props: {},
-  },
   Inline: {
     name: 'Inline',
     category: 'foundation',
@@ -66,20 +33,4 @@ export const foundationMetas = {
     note: 'Spacing utility component; not represented as a manifest node in v1.',
     props: {},
   },
-  Stack: {
-    name: 'Stack',
-    category: 'foundation',
-    directManifestNode: true,
-    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
-    blueprint: { label: 'Stack' },
-    props: {},
-  },
-  Surface: {
-    name: 'Surface',
-    category: 'foundation',
-    directManifestNode: false,
-    allowedChildren: [],
-    note: 'Low-level surface wrapper; not represented as a manifest node in v1.',
-    props: {},
-  },
 } as const satisfies ZoraComponentMetaRegistry;

package/src/index.ts

@@ -1,40 +1,9 @@
 export type { AppBarMode, AppBarOverflowAction, AppBarProps } from './components/app-bar';
 export { AppBar } from './components/app-bar';
-export type { AvatarProps, AvatarShape, AvatarSize } from './components/avatar';
-export { Avatar, resolveAvatarInitials } from './components/avatar';
-export type { AvatarGroupItem, AvatarGroupProps } from './components/avatar-group';
-export { AvatarGroup } from './components/avatar-group';
-export type { BadgeProps } from './components/badge';
-export { Badge } from './components/badge';
 export type { BreadcrumbItem, BreadcrumbsProps } from './components/breadcrumbs';
 export { Breadcrumbs } from './components/breadcrumbs';
-export type { ButtonProps } from './components/button';
-export { Button } from './components/button';
-export type {
-  ButtonGroupAlign,
-  ButtonGroupOrientation,
-  ButtonGroupProps,
-} from './components/button-group';
-export { ButtonGroup } from './components/button-group';
-export type { CardProps } from './components/card';
-export { Card } from './components/card';
 export type { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps } from './components/checkbox';
 export { Checkbox, CheckboxGroup } from './components/checkbox';
-export type { ChipProps } from './components/chip';
-export { Chip } from './components/chip';
-export type { ChipGroupItem, ChipGroupProps } from './components/chip-group';
-export { ChipGroup } from './components/chip-group';
-export type {
-  DataTableCellContext,
-  DataTableColumn,
-  DataTableColumnAlign,
-  DataTableDensity,
-  DataTableProps,
-  DataTableRowAction,
-  DataTableSortDirection,
-  DataTableSortState,
-} from './components/data-table';
-export { DataTable } from './components/data-table';
 export type { DatePickerProps, DatePickerValue } from './components/date-picker';
 export { DatePicker } from './components/date-picker';
 export type {
@@ -75,30 +44,10 @@ export type {
   GradientRendererProviderProps,
 } from './components/gradient';
 export { Gradient, GradientRendererProvider } from './components/gradient';
-export type {
-  HeadingAlign,
-  HeadingColor,
-  HeadingEmphasis,
-  HeadingLevel,
-  HeadingProps,
-  HeadingSize,
-  HeadingWeight,
-} from './components/heading';
-export { Heading } from './components/heading';
-export type { IconProps } from './components/icon';
-export { Icon } from './components/icon';
-export type { IconButtonProps } from './components/icon-button';
-export { IconButton } from './components/icon-button';
-export type { ImageFit, ImageProps, SurfaceImageSource } from './components/image';
-export { Image } from './components/image';
 export type { InputProps, InputTrailingAction } from './components/input';
 export { Input } from './components/input';
-export type { MediaCardImageProps, MediaCardProps } from './components/media-card';
-export { MediaCard } from './components/media-card';
 export type { DropdownMenuProps, MenuAction, MenuActionIntent, MenuProps } from './components/menu';
 export { DropdownMenu, Menu } from './components/menu';
-export type { MetricCardProps } from './components/metric-card';
-export { MetricCard } from './components/metric-card';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
 export type { PaginationProps } from './components/pagination';
@@ -123,19 +72,8 @@ export type {
   SkeletonTextProps,
 } from './components/skeleton';
 export { Skeleton, SkeletonCard, SkeletonList, SkeletonText } from './components/skeleton';
-export type { SplashScreenLogoShape, SplashScreenProps } from './components/splash-screen';
-export { SplashScreen } from './components/splash-screen';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
-export type {
-  TextAlign,
-  TextColor,
-  TextEmphasis,
-  TextProps,
-  TextVariant,
-  TextWeight,
-} from './components/text';
-export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
 export type { TimePickerProps, TimePickerValue } from './components/time-picker';
@@ -146,31 +84,117 @@ export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './compon
 export { Toolbar, ToolbarAction } from './components/toolbar';
 export { ZORA_CORE_PLUGIN } from './corePlugin';
 export { ZORA_CORE_PLUGIN_METADATA } from './corePluginMetadata';
+export type { AvatarProps, AvatarShape, AvatarSize } from './features/avatar/public';
+export type { AvatarGroupItem, AvatarGroupProps } from './features/avatar/public';
+export { Avatar, resolveAvatarInitials } from './features/avatar/public';
+export { AvatarGroup } from './features/avatar/public';
+export type { BadgeProps } from './features/badge/public';
+export { Badge } from './features/badge/public';
+export type { BottomSheetProps } from './features/bottom-sheet/public';
+export { BottomSheet } from './features/bottom-sheet/public';
+export type { ButtonProps } from './features/button/public';
+export type {
+  ButtonGroupAlign,
+  ButtonGroupOrientation,
+  ButtonGroupProps,
+} from './features/button/public';
+export type { IconButtonProps } from './features/button/public';
+export { Button } from './features/button/public';
+export { ButtonGroup } from './features/button/public';
+export { IconButton } from './features/button/public';
+export type { CardProps } from './features/card/public';
+export type { MediaCardImageProps, MediaCardProps } from './features/card/public';
+export type { MetricCardProps } from './features/card/public';
+export type {
+  PostAction,
+  PostAuthor,
+  PostAuthorAvatar,
+  PostCardMedia,
+  PostCardProps,
+} from './features/card/public';
+export type { ProductCardProps } from './features/card/public';
+export { Card } from './features/card/public';
+export { MediaCard } from './features/card/public';
+export { MetricCard } from './features/card/public';
+export { PostCard } from './features/card/public';
+export { ProductCard } from './features/card/public';
+export type { ChipProps } from './features/chip/public';
+export type { ChipGroupItem, ChipGroupProps } from './features/chip/public';
+export { Chip } from './features/chip/public';
+export { ChipGroup } from './features/chip/public';
+export type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableColumnAlign,
+  DataTableDensity,
+  DataTableProps,
+  DataTableRowAction,
+  DataTableSortDirection,
+  DataTableSortState,
+} from './features/data-table/public';
+export { DataTable } from './features/data-table/public';
+export type { IconProps } from './features/icon/public';
+export { Icon } from './features/icon/public';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './features/image/public';
+export { Image } from './features/image/public';
 export type {
   BoxProps,
-  CenterProps,
   ContainerProps,
   DividerProps,
   GridProps,
-  InlineProps,
-  ShowProps,
-  SpacerProps,
   StackProps,
-  SurfaceProps,
-  SurfaceVariant,
-} from './foundation';
-export {
-  Box,
-  Center,
-  Container,
-  Divider,
-  Grid,
-  Inline,
-  Show,
-  Spacer,
-  Stack,
-  Surface,
-} from './foundation';
+} from './features/layout/public';
+export type {
+  ContentRailControlPressEvent,
+  ContentRailDirection,
+  ContentRailItemSize,
+  ContentRailMotion,
+  ContentRailProps,
+  ContentRailSpacing,
+  ContentRailVisibleRangeChangeEvent,
+} from './features/layout/public';
+export { Box, Container, Divider, Grid, Stack } from './features/layout/public';
+export { ContentRail } from './features/layout/public';
+export type {
+  ManifestListProps,
+  ManifestListSection,
+  ManifestSectionListProps,
+} from './features/list/public';
+export { FlatList, SectionList } from './features/list/public';
+export type { SplashScreenLogoShape, SplashScreenProps } from './features/splash-screen/public';
+export { SplashScreen } from './features/splash-screen/public';
+export type { SurfaceProps, SurfaceVariant } from './features/surface/public';
+export { Surface } from './features/surface/public';
+export type {
+  HeadingAlign,
+  HeadingColor,
+  HeadingEmphasis,
+  HeadingLevel,
+  HeadingProps,
+  HeadingSize,
+  HeadingWeight,
+} from './features/typography/public';
+export type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextProps,
+  TextVariant,
+  TextWeight,
+} from './features/typography/public';
+export { Heading } from './features/typography/public';
+export { Text } from './features/typography/public';
+export type {
+  UploadAsset,
+  UploadAssetBase,
+  UploaderProps,
+  UploadProgressContext,
+  UploadType,
+  ValidateUploadAssetInput,
+} from './features/uploader/public';
+export { Uploader, validateUploadAsset } from './features/uploader/public';
+export type { CenterProps, InlineProps, ShowProps, SpacerProps } from './foundation';
+export { Center, Inline, Show, Spacer } from './foundation';
 export type {
   ZoraColor,
   ZoraEmphasis,
@@ -266,16 +290,6 @@ export type {
 export { CollectionEditor } from './patterns/collection-editor';
 export type { ConfirmDialogProps } from './patterns/confirm-dialog';
 export { ConfirmDialog } from './patterns/confirm-dialog';
-export type {
-  ContentRailControlPressEvent,
-  ContentRailDirection,
-  ContentRailItemSize,
-  ContentRailMotion,
-  ContentRailProps,
-  ContentRailSpacing,
-  ContentRailVisibleRangeChangeEvent,
-} from './patterns/content-rail';
-export { ContentRail } from './patterns/content-rail';
 export type { DisclosureSectionProps } from './patterns/disclosure-section';
 export { DisclosureSection } from './patterns/disclosure-section';
 export type { EmptyStateAction, EmptyStateProps } from './patterns/empty-state';
@@ -284,18 +298,6 @@ export type { FilterBarProps } from './patterns/filter-bar';
 export { FilterBar } from './patterns/filter-bar';
 export type { HeroAction, HeroAlign, HeroLayout, HeroProps, HeroTone } from './patterns/hero';
 export { Hero } from './patterns/hero';
-export type {
-  ImagePreviewProps,
-  ZoraImageAsset,
-  ZoraImageMetadata,
-} from './patterns/image-preview';
-export { ImagePreview } from './patterns/image-preview';
-export type {
-  ImageUploadFieldProps,
-  ImageUploadProgressContext,
-  ZoraPickedImage,
-} from './patterns/image-upload-field';
-export { ImageUploadField } from './patterns/image-upload-field';
 export type { InspectorFieldProps } from './patterns/inspector-field';
 export { InspectorField } from './patterns/inspector-field';
 export type {
@@ -320,16 +322,6 @@ export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';
 export { Panel } from './patterns/panel';
-export type {
-  PostAction,
-  PostAuthor,
-  PostAuthorAvatar,
-  PostCardMedia,
-  PostCardProps,
-} from './patterns/post-card';
-export { PostCard } from './patterns/post-card';
-export type { ProductCardProps } from './patterns/product-card';
-export { ProductCard } from './patterns/product-card';
 export type {
   ReaderColorScheme,
   ReaderDocumentFormat,