@ankhorage/zora 1.4.6 → 1.4.8

package/src/patterns/post-card/PostCard.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata';
+
+describe('PostCard', () => {
+  test('is registered as a public ZORA pattern', () => {
+    expect(ZORA_COMPONENT_META.PostCard?.name).toBe('PostCard');
+    expect(ZORA_COMPONENT_META.PostCard?.category).toBe('pattern');
+    expect(ZORA_COMPONENT_META.PostCard?.directManifestNode).toBe(true);
+  });
+});

package/src/patterns/post-card/PostCard.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { Image as ReactNativeImage } from 'react-native';
+
+import { Avatar } from '../../components/avatar';
+import { Button } from '../../components/button';
+import { Card } from '../../components/card';
+import { Text } from '../../components/text';
+import { Box, Divider, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type {
+  PostAction,
+  PostAuthor,
+  PostCardMedia,
+  PostCardProps,
+  PostCommentPreview,
+} from './types';
+
+function resolveAuthorName(author: PostAuthor): string | undefined {
+  return typeof author.name === 'string' ? author.name : author.avatar?.name;
+}
+
+function resolveMediaAspectRatio(aspectRatio: number | undefined): number {
+  if (aspectRatio === undefined || !Number.isFinite(aspectRatio) || aspectRatio <= 0) {
+    return 16 / 9;
+  }
+
+  return aspectRatio;
+}
+
+function isPostCardMediaList(
+  media: NonNullable<PostCardProps['media']>,
+): media is readonly PostCardMedia[] {
+  return Array.isArray(media);
+}
+
+function normalizeMedia(media: PostCardProps['media']): readonly PostCardMedia[] {
+  if (!media) {
+    return [];
+  }
+
+  if (isPostCardMediaList(media)) {
+    return media;
+  }
+
+  return [media];
+}
+
+function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compact?: boolean }) {
+  const avatarName = resolveAuthorName(author);
+  const { avatar } = author;
+
+  return (
+    <Inline align="center" gap="s" wrap="nowrap">
+      <Avatar
+        initials={avatar?.initials}
+        label={avatar?.label ?? avatarName}
+        name={avatarName}
+        shape={avatar?.shape}
+        size={avatar?.size ?? (compact ? 's' : 'm')}
+        source={avatar?.source}
+        tone={avatar?.tone}
+      />
+      <Box flex={1}>
+        <Stack gap="xxs">
+          <Text variant="bodySmall" weight="semiBold">
+            {author.name}
+          </Text>
+          {author.subtitle ? (
+            <Text tone="muted" variant="caption">
+              {author.subtitle}
+            </Text>
+          ) : null}
+        </Stack>
+      </Box>
+    </Inline>
+  );
+}
+
+function PostCardMediaItem({ media }: { media: PostCardMedia }) {
+  const { theme } = useZoraTheme();
+  const aspectRatio = resolveMediaAspectRatio(media.aspectRatio);
+
+  if (!('source' in media)) {
+    return (
+      <Box radius="m" style={{ overflow: 'hidden' }}>
+        {media.children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+      <Box style={{ aspectRatio, width: '100%' }}>
+        <ReactNativeImage
+          accessibilityLabel={media.label}
+          source={media.source}
+          style={{ height: '100%', width: '100%' }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+function PostActionLabel({ action }: { action: PostAction }) {
+  if (!action.count) {
+    return <>{action.label}</>;
+  }
+
+  return (
+    <>
+      {action.label} {action.count}
+    </>
+  );
+}
+
+function PostCardActions({ actions }: { actions: readonly PostAction[] }) {
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <Inline align="center" gap="s" wrap="wrap">
+      {actions.map((action) => (
+        <Button
+          key={action.id}
+          disabled={action.disabled}
+          emphasis={action.selected ? 'soft' : 'ghost'}
+          leadingIcon={action.icon}
+          onPress={action.onPress}
+          size="s"
+          tone={action.selected ? 'primary' : 'neutral'}
+        >
+          <PostActionLabel action={action} />
+        </Button>
+      ))}
+    </Inline>
+  );
+}
+
+function PostCommentPreviewItem({ comment }: { comment: PostCommentPreview }) {
+  return (
+    <Inline align="flex-start" gap="s" wrap="nowrap">
+      {comment.author ? <PostCardAuthor author={comment.author} compact /> : null}
+      <Box flex={1}>
+        <Stack gap="xxs">
+          <Text variant="bodySmall">{comment.text}</Text>
+          {comment.meta ? (
+            <Text tone="subtle" variant="caption">
+              {comment.meta}
+            </Text>
+          ) : null}
+          {comment.action ? <Box>{comment.action}</Box> : null}
+        </Stack>
+      </Box>
+    </Inline>
+  );
+}
+
+function PostCardComments({ comments }: { comments: readonly PostCommentPreview[] }) {
+  if (comments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Stack gap="s">
+      {comments.map((comment) => (
+        <PostCommentPreviewItem key={comment.id} comment={comment} />
+      ))}
+    </Stack>
+  );
+}
+
+function PostCardInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  author,
+  text,
+  children,
+  media,
+  actions = [],
+  comments = [],
+  headerAction,
+  footer,
+  tone = 'default',
+  compact = false,
+  onPress,
+}: PostCardProps) {
+  const mediaItems = normalizeMedia(media);
+  const gap = compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !headerAction;
+  const hasBody = text != null || children != null || mediaItems.length > 0;
+  const hasEngagement = actions.length > 0 || comments.length > 0;
+
+  return (
+    <Card
+      compact={compact}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      tone={tone}
+    >
+      <Stack gap={gap}>
+        <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
+          <Box flex={1}>
+            <PostCardAuthor author={author} compact={compact} />
+          </Box>
+          {headerAction ? <Box>{headerAction}</Box> : null}
+        </Inline>
+
+        {hasBody ? (
+          <Stack gap={gap}>
+            {text ? <Text variant="body">{text}</Text> : null}
+            {children ? <Box>{children}</Box> : null}
+            {mediaItems.length > 0 ? (
+              <Stack gap="s">
+                {mediaItems.map((item, index) => (
+                  <PostCardMediaItem key={`${index}`} media={item} />
+                ))}
+              </Stack>
+            ) : null}
+          </Stack>
+        ) : null}
+
+        {hasEngagement ? <Divider /> : null}
+        <PostCardActions actions={actions} />
+        <PostCardComments comments={comments} />
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </Card>
+  );
+}
+
+export const PostCard = withZoraThemeScope(PostCardInner);

package/src/patterns/post-card/index.ts

@@ -0,0 +1,9 @@
+export { PostCard } from './PostCard';
+export type {
+  PostAction,
+  PostAuthor,
+  PostAuthorAvatar,
+  PostCardMedia,
+  PostCardProps,
+  PostCommentPreview,
+} from './types';

package/src/patterns/post-card/meta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+
+export const postCardMeta = {
+  name: 'PostCard',
+  category: 'pattern',
+  description:
+    'Social/content post card with author identity, body, media, actions, and comment previews.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Post card',
+    icon: { name: 'chatbubble-ellipses-outline' },
+    defaultProps: {
+      author: {
+        name: 'Ada Lovelace',
+        subtitle: '@ada · 2h',
+        avatar: {
+          name: 'Ada Lovelace',
+        },
+      },
+      text: 'Share an update, image, or announcement with a reusable ZORA PostCard.',
+    },
+  },
+  props: {
+    author: {
+      type: 'array',
+      category: 'Content',
+      label: 'Author',
+      itemSchema: [
+        {
+          key: 'name',
+          schema: {
+            type: 'string',
+            category: 'Content',
+            label: 'Name',
+          },
+        },
+        {
+          key: 'subtitle',
+          schema: {
+            type: 'string',
+            category: 'Content',
+            label: 'Subtitle',
+          },
+        },
+      ],
+    },
+    text: {
+      type: 'string',
+      category: 'Content',
+      label: 'Text',
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+    tone: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Tone',
+      enum: ['default', 'subtle', 'outline'],
+      default: 'default',
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/post-card/types.ts

@@ -0,0 +1,71 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface PostAuthorAvatar {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  tone?: ZoraTone;
+}
+
+export interface PostAuthor {
+  name: React.ReactNode;
+  subtitle?: React.ReactNode;
+  avatar?: PostAuthorAvatar;
+}
+
+interface PostCardSourceMedia {
+  source: ImageSourcePropType;
+  label: string;
+  aspectRatio?: number;
+  children?: never;
+}
+
+interface PostCardCustomMedia {
+  children: React.ReactNode;
+  label?: string;
+  aspectRatio?: number;
+  source?: never;
+}
+
+export type PostCardMedia = PostCardSourceMedia | PostCardCustomMedia;
+
+export interface PostAction {
+  id: string;
+  label: string;
+  icon?: ButtonIconSpec;
+  count?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+export interface PostCommentPreview {
+  id: string;
+  author?: PostAuthor;
+  text: React.ReactNode;
+  meta?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export interface PostCardProps extends ZoraBaseProps {
+  author: PostAuthor;
+  text?: React.ReactNode;
+  children?: React.ReactNode;
+  media?: PostCardMedia | readonly PostCardMedia[];
+  actions?: readonly PostAction[];
+  comments?: readonly PostCommentPreview[];
+  headerAction?: React.ReactNode;
+  footer?: React.ReactNode;
+  tone?: ZoraCardTone;
+  compact?: boolean;
+  onPress?: () => void;
+}