@ankhorage/zora 6.0.0 → 8.0.0

package/src/patterns/content-rail/resolveContentRailItemWidth.ts

@@ -1,39 +0,0 @@
-import type { ContentRailItemSize } from './types';
-
-export function resolveContentRailItemWidth({
-  gap,
-  itemCount,
-  itemSize,
-  padding,
-  peek,
-  viewportWidth,
-}: {
-  gap: number;
-  itemCount: number;
-  itemSize: ContentRailItemSize;
-  padding: number;
-  peek: number;
-  viewportWidth: number;
-}): number {
-  const availableWidth = Math.max(0, viewportWidth - padding * 2);
-  if (availableWidth === 0 || itemCount === 0) return 0;
-
-  const fixedWidth = resolveFixedItemWidth(itemSize);
-  if (fixedWidth !== undefined) return Math.min(fixedWidth, availableWidth);
-
-  const slots = viewportWidth >= 1024 ? 4 : viewportWidth >= 768 ? 3 : viewportWidth >= 480 ? 2 : 1;
-  const fullItems = Math.min(slots, itemCount);
-  const overflows = itemCount > fullItems;
-  const resolvedPeek = overflows ? Math.min(Math.max(0, peek), availableWidth / 2) : 0;
-  const gaps = overflows ? fullItems : Math.max(0, fullItems - 1);
-  const resolved = (availableWidth - resolvedPeek - gap * gaps) / fullItems;
-
-  return Math.min(280, Math.max(Math.min(96, availableWidth), Math.floor(resolved)));
-}
-
-function resolveFixedItemWidth(itemSize: ContentRailItemSize): number | undefined {
-  if (itemSize === 'compact') return 144;
-  if (itemSize === 'regular') return 200;
-  if (itemSize === 'wide') return 280;
-  return undefined;
-}

package/src/patterns/content-rail/types.ts

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export type ContentRailDirection = 'auto' | 'ltr' | 'rtl';
-export type ContentRailItemSize = 'compact' | 'regular' | 'wide' | 'responsive';
-export type ContentRailMotion = 'system' | 'animated' | 'reduced';
-export type ContentRailSpacing = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
-
-export interface ContentRailControlPressEvent {
-  direction: 'previous' | 'next';
-  targetIndex: number;
-}
-
-export interface ContentRailVisibleRangeChangeEvent {
-  firstVisibleIndex: number;
-  lastVisibleIndex: number;
-  itemCount: number;
-}
-
-export interface ContentRailProps extends ZoraBaseProps {
-  children?: ReactNode;
-  itemSize?: ContentRailItemSize;
-  gap?: ContentRailSpacing;
-  padding?: ContentRailSpacing;
-  peek?: number;
-  showControls?: boolean;
-  direction?: ContentRailDirection;
-  motion?: ContentRailMotion;
-  accessibilityLabel?: string;
-  previousLabel?: string;
-  nextLabel?: string;
-  onControlPress?: (event: ContentRailControlPressEvent) => void | Promise<void>;
-  onVisibleRangeChange?: (event: ContentRailVisibleRangeChangeEvent) => void | Promise<void>;
-}

package/src/patterns/content-rail/useContentRailReducedMotion.ts

@@ -1,28 +0,0 @@
-import React from 'react';
-import { AccessibilityInfo } from 'react-native';
-
-import type { ContentRailMotion } from './types';
-
-export function useContentRailReducedMotion(motion: ContentRailMotion): boolean {
-  const [systemReducedMotion, setSystemReducedMotion] = React.useState(false);
-
-  React.useEffect(() => {
-    if (motion !== 'system') return;
-
-    let active = true;
-    void AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-      if (active) setSystemReducedMotion(enabled);
-    });
-    const subscription = AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      setSystemReducedMotion,
-    );
-
-    return () => {
-      active = false;
-      subscription.remove();
-    };
-  }, [motion]);
-
-  return motion === 'reduced' || (motion === 'system' && systemReducedMotion);
-}

package/src/patterns/image-preview/ImagePreview.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import { Image } from '../../components/image';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { useZoraTheme } from '../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { ImagePreviewProps, ZoraImageAsset } from './types';
-
-function resolveRenderableUrl(asset: ZoraImageAsset | null | undefined): string | null {
-  if (!asset) return null;
-
-  if (asset.kind === 'url') {
-    return asset.url;
-  }
-
-  return asset.publicUrl ?? null;
-}
-
-function resolveSafeAspectRatio(value: number | undefined): number {
-  if (!value || !Number.isFinite(value) || value <= 0) {
-    return 1;
-  }
-
-  return value;
-}
-
-function ImagePreviewInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  asset,
-  aspectRatio,
-  fit = 'cover',
-  emptyTitle = 'No image',
-  emptyDescription = 'Select an image to preview it here.',
-  interactionPolicy: _interactionPolicy,
-}: ImagePreviewProps) {
-  const { theme } = useZoraTheme();
-  const renderableUrl = resolveRenderableUrl(asset);
-  const resolvedAspectRatio = resolveSafeAspectRatio(aspectRatio);
-
-  return (
-    <Box
-      bg={theme.semantics.neutral.surface}
-      borderColor={theme.semantics.neutral.divider}
-      borderWidth={1}
-      radius="l"
-      testID={testID}
-      style={{ overflow: 'hidden' }}
-    >
-      {renderableUrl ? (
-        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
-          <Image
-            alt={asset?.alt}
-            fit={fit}
-            source={renderableUrl}
-            style={{ height: '100%', width: '100%' }}
-          />
-        </Box>
-      ) : (
-        <Box p="l">
-          <Stack gap="xs">
-            <Text variant="label" weight="semiBold">
-              {emptyTitle}
-            </Text>
-            <Text emphasis="muted" variant="bodySmall">
-              {emptyDescription}
-            </Text>
-          </Stack>
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-/***
- * Preview pattern for showing an image with optional metadata and actions.
- *
- 
- */
-export const ImagePreview = withZoraThemeScope(ImagePreviewInner);

package/src/patterns/image-preview/index.ts

@@ -1,2 +0,0 @@
-export { ImagePreview } from './ImagePreview';
-export type { ImagePreviewProps, ZoraImageAsset, ZoraImageMetadata } from './types';

package/src/patterns/image-preview/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const imagePreviewMeta = {
-  name: 'ImagePreview',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Media pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/image-preview/types.ts

@@ -1,41 +0,0 @@
-import type React from 'react';
-
-import type { ImageFit } from '../../components/image';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ZoraImageMetadata {
-  fileName?: string;
-  sizeBytes?: number;
-  createdAt?: string;
-}
-
-export type ZoraImageAsset =
-  | {
-      kind: 'url';
-      url: string;
-      alt?: string;
-      width?: number;
-      height?: number;
-      contentType?: string;
-      metadata?: ZoraImageMetadata;
-    }
-  | {
-      kind: 'storage';
-      storageId?: string;
-      bucket: string;
-      path: string;
-      publicUrl?: string;
-      alt?: string;
-      width?: number;
-      height?: number;
-      contentType?: string;
-      metadata?: ZoraImageMetadata;
-    };
-
-export interface ImagePreviewProps extends ZoraBaseProps {
-  asset?: ZoraImageAsset | null;
-  aspectRatio?: number;
-  fit?: ImageFit;
-  emptyTitle?: React.ReactNode;
-  emptyDescription?: React.ReactNode;
-}

package/src/patterns/image-upload-field/ImageUploadField.tsx

@@ -1,319 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../components/button';
-import { Modal } from '../../components/modal';
-import { Progress } from '../../components/progress';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { FormField } from '../form-field';
-import { ImagePreview } from '../image-preview';
-import type { ImageUploadFieldProps } from './types';
-import {
-  createOptimisticAssetFromPicked,
-  formatAcceptHint,
-  formatMaxSizeHint,
-  resolveRenderableUrl,
-  validatePickedImage,
-} from './uploadFlow';
-
-function clampProgress(value: number | null): number | null {
-  if (value === null) return null;
-  if (!Number.isFinite(value)) return null;
-  return Math.max(0, Math.min(1, value));
-}
-
-function formatUnknownError(error: unknown): string {
-  if (error instanceof Error && error.message) return error.message;
-  if (typeof error === 'string' && error.trim().length > 0) return error;
-  return 'Something went wrong.';
-}
-
-function ImageUploadFieldInner({
-  themeId: _themeId,
-  mode: _mode,
-  testID,
-  value,
-  onChange,
-  label,
-  description,
-  helperText,
-  errorText,
-  required,
-  disabled = false,
-  readOnly = false,
-  accept,
-  maxSizeBytes,
-  validatePicked,
-  onPick,
-  onUpload,
-  onRemove,
-  aspectRatio = 1,
-  previewTitle = 'Image preview',
-  previewDescription,
-  interactionPolicy,
-}: ImageUploadFieldProps) {
-  const passive = interactionPolicy === 'passive';
-  const [internalError, setInternalError] = React.useState<string | undefined>(undefined);
-  const [uploading, setUploading] = React.useState(false);
-  const [removing, setRemoving] = React.useState(false);
-  const [progress, setProgress] = React.useState<number | null>(null);
-  const [previewOpen, setPreviewOpen] = React.useState(false);
-  const isMountedRef = React.useRef(true);
-
-  React.useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
-  const renderableUrl = resolveRenderableUrl(value);
-  const isRenderable = renderableUrl !== null;
-  const actionsDisabled = disabled || readOnly;
-
-  const effectiveError = errorText ?? internalError;
-  const invalid = Boolean(effectiveError);
-
-  const acceptHint = formatAcceptHint(accept);
-  const maxSizeHint = formatMaxSizeHint(maxSizeBytes);
-
-  const setProgressSafe = React.useCallback((next: number | null) => {
-    if (!isMountedRef.current) return;
-    setProgress(clampProgress(next));
-  }, []);
-
-  const clearTransientState = React.useCallback(() => {
-    if (!isMountedRef.current) return;
-    setUploading(false);
-    setRemoving(false);
-    setProgress(null);
-  }, []);
-
-  const handleReplace = React.useCallback(async () => {
-    if (passive || actionsDisabled || uploading || removing) return;
-
-    setInternalError(undefined);
-    let picked;
-    try {
-      picked = await onPick();
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      return;
-    }
-    if (!picked) return;
-
-    const validationError = validatePickedImage({
-      picked,
-      accept,
-      maxSizeBytes,
-      validatePicked,
-    });
-
-    if (validationError) {
-      setInternalError(validationError);
-      return;
-    }
-
-    if (!onUpload) {
-      onChange(createOptimisticAssetFromPicked(picked));
-      return;
-    }
-
-    const optimisticAsset = createOptimisticAssetFromPicked(picked);
-    onChange(optimisticAsset);
-    setUploading(true);
-    setProgressSafe(0);
-
-    try {
-      const uploaded = await onUpload(picked, { setProgress: setProgressSafe });
-      if (!isMountedRef.current) return;
-      onChange(uploaded);
-      setInternalError(undefined);
-      clearTransientState();
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      setUploading(false);
-      setProgress(null);
-    }
-  }, [
-    accept,
-    actionsDisabled,
-    clearTransientState,
-    maxSizeBytes,
-    onChange,
-    onPick,
-    onUpload,
-    passive,
-    removing,
-    setProgressSafe,
-    uploading,
-    validatePicked,
-  ]);
-
-  const handleRemove = React.useCallback(async () => {
-    if (passive || actionsDisabled || uploading || removing) return;
-    if (!value) {
-      onChange(null);
-      return;
-    }
-
-    setInternalError(undefined);
-
-    if (!onRemove) {
-      onChange(null);
-      return;
-    }
-
-    setRemoving(true);
-    try {
-      await onRemove(value);
-      if (!isMountedRef.current) return;
-      onChange(null);
-      setRemoving(false);
-    } catch (error) {
-      if (!isMountedRef.current) return;
-      setInternalError(formatUnknownError(error));
-      setRemoving(false);
-    }
-  }, [actionsDisabled, onChange, onRemove, passive, removing, uploading, value]);
-
-  const handlePreview = React.useCallback(() => {
-    if (passive || !isRenderable) return;
-    setPreviewOpen(true);
-  }, [isRenderable, passive]);
-
-  const closePreview = React.useCallback(() => {
-    if (passive) return;
-    setPreviewOpen(false);
-  }, [passive]);
-
-  return (
-    <>
-      <FormField
-        description={description}
-        disabled={disabled}
-        errorText={effectiveError}
-        helperText={helperText}
-        interactionPolicy={interactionPolicy}
-        invalid={invalid}
-        label={label}
-        readOnly={readOnly}
-        required={required}
-        testID={testID}
-      >
-        <Stack gap="m">
-          <ImagePreview
-            aspectRatio={aspectRatio}
-            asset={value}
-            emptyDescription={actionsDisabled ? 'No image available.' : undefined}
-          />
-
-          {acceptHint || maxSizeHint ? (
-            <Stack gap="xs">
-              {acceptHint ? (
-                <Text emphasis="muted" variant="caption">
-                  {acceptHint}
-                </Text>
-              ) : null}
-              {maxSizeHint ? (
-                <Text emphasis="muted" variant="caption">
-                  {maxSizeHint}
-                </Text>
-              ) : null}
-            </Stack>
-          ) : null}
-
-          {uploading ? (
-            <Stack gap="xs">
-              <Text emphasis="muted" variant="caption">
-                Uploading…
-              </Text>
-              {progress !== null ? <Progress max={1} value={progress} /> : null}
-            </Stack>
-          ) : null}
-
-          <Stack direction={{ base: 'column', md: 'row' }} gap="s">
-            <Button
-              disabled={actionsDisabled || uploading || removing}
-              interactionPolicy={interactionPolicy}
-              onPress={() => {
-                void handleReplace();
-              }}
-            >
-              {value ? 'Replace image' : 'Select image'}
-            </Button>
-
-            {value ? (
-              <Button
-                disabled={actionsDisabled || uploading || removing}
-                variant="outline"
-                loading={removing}
-                color="danger"
-                interactionPolicy={interactionPolicy}
-                onPress={() => {
-                  void handleRemove();
-                }}
-              >
-                Remove
-              </Button>
-            ) : null}
-
-            {isRenderable ? (
-              <Button
-                disabled={false}
-                interactionPolicy={interactionPolicy}
-                variant="soft"
-                color="neutral"
-                onPress={handlePreview}
-              >
-                Preview
-              </Button>
-            ) : null}
-          </Stack>
-
-          {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (
-            <Box>
-              <Text emphasis="muted" variant="caption">
-                This image is stored, but no preview URL is available yet.
-              </Text>
-            </Box>
-          ) : null}
-        </Stack>
-      </FormField>
-
-      {isRenderable ? (
-        <Modal
-          closeOnBackdrop
-          description={previewDescription}
-          interactionPolicy={interactionPolicy}
-          onDismiss={closePreview}
-          title={previewTitle}
-          visible={previewOpen}
-        >
-          <Stack gap="m">
-            <ImagePreview asset={value} aspectRatio={aspectRatio} />
-            <Stack direction="row" justify="flex-end">
-              <Button
-                interactionPolicy={interactionPolicy}
-                variant="soft"
-                color="neutral"
-                onPress={closePreview}
-              >
-                Close
-              </Button>
-            </Stack>
-          </Stack>
-        </Modal>
-      ) : null}
-    </>
-  );
-}
-
-/***
- * Form field pattern for picking, previewing, and uploading an image.
- *
- 
- */
-export const ImageUploadField = withZoraThemeScope(ImageUploadFieldInner);

package/src/patterns/image-upload-field/index.ts

@@ -1,2 +0,0 @@
-export { ImageUploadField } from './ImageUploadField';
-export type { ImageUploadFieldProps, ImageUploadProgressContext, ZoraPickedImage } from './types';

package/src/patterns/image-upload-field/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const imageUploadFieldMeta = {
-  name: 'ImageUploadField',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Media upload pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/image-upload-field/types.ts

@@ -1,41 +0,0 @@
-import type React from 'react';
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-import type { ZoraImageAsset } from '../image-preview';
-
-export interface ZoraPickedImage {
-  uri: string;
-  fileName?: string;
-  sizeBytes?: number;
-  contentType?: string;
-  width?: number;
-  height?: number;
-}
-
-export interface ImageUploadProgressContext {
-  setProgress: (progress: number | null) => void;
-}
-
-export interface ImageUploadFieldProps extends ZoraBaseProps {
-  value: ZoraImageAsset | null;
-  onChange: (next: ZoraImageAsset | null) => void;
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  helperText?: React.ReactNode;
-  errorText?: React.ReactNode;
-  required?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  accept?: string;
-  maxSizeBytes?: number;
-  validatePicked?: (picked: ZoraPickedImage) => string | undefined;
-  onPick: () => Promise<ZoraPickedImage | null>;
-  onUpload?: (
-    picked: ZoraPickedImage,
-    context: ImageUploadProgressContext,
-  ) => Promise<ZoraImageAsset>;
-  onRemove?: (current: ZoraImageAsset) => void | Promise<void>;
-  aspectRatio?: number;
-  previewTitle?: React.ReactNode;
-  previewDescription?: React.ReactNode;
-}