@ankhorage/zora 1.4.8 → 1.4.10

package/src/patterns/chat-list-item/types.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ChatListAvatar {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  tone?: ZoraTone;
+}
+
+export interface ChatListItemProps extends ZoraBaseProps {
+  title: React.ReactNode;
+  preview?: React.ReactNode;
+  meta?: React.ReactNode;
+  timestamp?: React.ReactNode;
+  avatar?: ChatListAvatar;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  unread?: boolean;
+  unreadCount?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
+  accessibilityLabel?: string;
+  onPress?: () => void;
+}

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -0,0 +1,261 @@
+import { ButtonBase } from '@ankhorage/surface';
+import React from 'react';
+
+import { Avatar } from '../../components/avatar';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type {
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './types';
+
+function resolveAvatarName({
+  avatar,
+  authorName,
+}: {
+  avatar: MessageBubbleAvatar | undefined;
+  authorName: React.ReactNode | undefined;
+}): string | undefined {
+  if (avatar?.name) return avatar.name;
+  return typeof authorName === 'string' ? authorName : undefined;
+}
+
+function resolvePadding(compact: boolean) {
+  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveStatusLabel(status: MessageBubbleStatus): string {
+  switch (status) {
+    case 'sending':
+      return 'Sending';
+    case 'sent':
+      return 'Sent';
+    case 'delivered':
+      return 'Delivered';
+    case 'read':
+      return 'Read';
+    case 'failed':
+      return 'Failed';
+    default:
+      return status;
+  }
+}
+
+function isMessageBubbleStatus(
+  status: MessageBubbleProps['status'],
+): status is MessageBubbleStatus {
+  return (
+    status === 'sending' ||
+    status === 'sent' ||
+    status === 'delivered' ||
+    status === 'read' ||
+    status === 'failed'
+  );
+}
+
+function resolveStatus(status: MessageBubbleProps['status']) {
+  if (status == null) return null;
+  return isMessageBubbleStatus(status) ? resolveStatusLabel(status) : status;
+}
+
+function resolveBubbleStyles({
+  direction,
+  disabled,
+  hovered,
+  pressed,
+  selected,
+  theme,
+}: {
+  direction: MessageBubbleDirection;
+  disabled: boolean;
+  hovered: boolean;
+  pressed: boolean;
+  selected: boolean;
+  theme: ReturnType<typeof useZoraTheme>['theme'];
+}) {
+  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;
+
+  if (direction === 'system') {
+    return {
+      bg: selected ? theme.semantics.neutral.surface : 'transparent',
+      borderColor,
+      borderWidth: selected ? 1 : 0,
+      opacity: disabled ? 0.72 : 1,
+    };
+  }
+
+  const interactiveBg = pressed
+    ? theme.semantics.neutral.surfaceActive
+    : hovered
+      ? theme.semantics.neutral.surfaceHover
+      : undefined;
+
+  return {
+    bg:
+      interactiveBg ??
+      (direction === 'outgoing' ? theme.semantics.neutral.surface : theme.semantics.surface.raised),
+    borderColor,
+    borderWidth: selected ? 1 : 0,
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+function MessageAvatar({
+  avatar,
+  authorName,
+  compact,
+}: {
+  avatar: MessageBubbleAvatar;
+  authorName: React.ReactNode | undefined;
+  compact: boolean;
+}) {
+  const avatarName = resolveAvatarName({ avatar, authorName });
+
+  return (
+    <Avatar
+      initials={avatar.initials}
+      label={avatar.label ?? avatarName}
+      name={avatarName}
+      shape={avatar.shape}
+      size={avatar.size ?? (compact ? 'xs' : 's')}
+      source={avatar.source}
+      tone={avatar.tone}
+    />
+  );
+}
+
+function MessageBubbleInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  direction = 'incoming',
+  text,
+  children,
+  author,
+  timestamp,
+  meta,
+  status,
+  leading,
+  trailing,
+  footer,
+  selected = false,
+  disabled = false,
+  compact = false,
+  accessibilityLabel,
+  onPress,
+}: MessageBubbleProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolvePadding(compact);
+  const isInteractive = Boolean(onPress);
+  const isOutgoing = direction === 'outgoing';
+  const isSystem = direction === 'system';
+  const renderedStatus = resolveStatus(status);
+  const authorName = author?.name;
+  const authorAvatar = author?.avatar;
+  const hasAuthorName = authorName != null && !isOutgoing && !isSystem;
+  const hasAvatar = authorAvatar != null && !isOutgoing && !isSystem;
+  const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;
+
+  const renderBubble = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {
+    const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
+
+    return (
+      <Box
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius={isSystem ? 'm' : 'l'}
+        style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}
+      >
+        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
+          {hasAuthorName ? (
+            <Text tone="muted" variant="caption" weight="semiBold">
+              {authorName}
+            </Text>
+          ) : null}
+          {text != null ? (
+            <Text align={isSystem ? 'center' : undefined} tone={disabled ? 'muted' : 'default'}>
+              {text}
+            </Text>
+          ) : null}
+          {children != null ? <Box width="100%">{children}</Box> : null}
+          {hasMetaRow ? (
+            <Inline
+              align="center"
+              gap="xs"
+              justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}
+              wrap="wrap"
+            >
+              {timestamp != null ? (
+                <Text tone="subtle" variant="caption">
+                  {timestamp}
+                </Text>
+              ) : null}
+              {meta != null ? (
+                <Text tone="subtle" variant="caption">
+                  {meta}
+                </Text>
+              ) : null}
+              {renderedStatus != null ? (
+                <Text tone={status === 'failed' ? 'danger' : 'subtle'} variant="caption">
+                  {renderedStatus}
+                </Text>
+              ) : null}
+            </Inline>
+          ) : null}
+        </Stack>
+      </Box>
+    );
+  };
+
+  const bubbleContent = isInteractive ? (
+    <ButtonBase
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius={isSystem ? 'm' : 'l'}
+      testID={testID}
+    >
+      {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
+    </ButtonBase>
+  ) : (
+    <Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>
+  );
+
+  return (
+    <Stack gap="xs" style={{ width: '100%' }}>
+      <Inline
+        align="flex-end"
+        gap="s"
+        justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'}
+        wrap="nowrap"
+      >
+        {!isOutgoing && !isSystem ? (
+          <Box>
+            {leading ??
+              (hasAvatar ? (
+                <MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact} />
+              ) : null)}
+          </Box>
+        ) : null}
+        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}
+        {bubbleContent}
+        {isOutgoing && leading ? <Box>{leading}</Box> : null}
+        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}
+      </Inline>
+      {footer != null ? (
+        <Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>
+      ) : null}
+    </Stack>
+  );
+}
+
+export const MessageBubble = withZoraThemeScope(MessageBubbleInner);

package/src/patterns/message-bubble/index.ts

@@ -0,0 +1,8 @@
+export { MessageBubble } from './MessageBubble';
+export type {
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './types';

package/src/patterns/message-bubble/meta.ts

@@ -0,0 +1,68 @@
+import type { ZoraComponentMeta } from '../../metadata';
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+
+export const messageBubbleMeta = {
+  name: 'MessageBubble',
+  category: 'pattern',
+  description:
+    'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',
+  directManifestNode: true,
+  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+  blueprint: {
+    label: 'Message bubble',
+    icon: { name: 'chatbubble-outline' },
+    defaultProps: {
+      direction: 'incoming',
+      text: 'Can you review the latest message pattern?',
+      timestamp: '10:41',
+    },
+  },
+  props: {
+    direction: {
+      type: 'enum',
+      category: 'Content',
+      label: 'Direction',
+      enum: ['incoming', 'outgoing', 'system'],
+      default: 'incoming',
+    },
+    text: {
+      type: 'string',
+      category: 'Content',
+      label: 'Text',
+    },
+    timestamp: {
+      type: 'string',
+      category: 'Content',
+      label: 'Timestamp',
+    },
+    meta: {
+      type: 'string',
+      category: 'Content',
+      label: 'Meta',
+    },
+    status: {
+      type: 'enum',
+      category: 'Content',
+      label: 'Status',
+      enum: ['sending', 'sent', 'delivered', 'read', 'failed'],
+    },
+    selected: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Selected',
+      default: false,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/patterns/message-bubble/types.ts

@@ -0,0 +1,43 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';
+export type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+type MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;
+
+export interface MessageBubbleAvatar {
+  source?: ImageSourcePropType;
+  name?: string;
+  initials?: string;
+  label?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  tone?: ZoraTone;
+}
+
+export interface MessageBubbleAuthor {
+  name?: React.ReactNode;
+  avatar?: MessageBubbleAvatar;
+}
+
+export interface MessageBubbleProps extends ZoraBaseProps {
+  direction?: MessageBubbleDirection;
+  text?: React.ReactNode;
+  children?: React.ReactNode;
+  author?: MessageBubbleAuthor;
+  timestamp?: React.ReactNode;
+  meta?: React.ReactNode;
+  status?: MessageBubbleStatusContent;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  footer?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
+  accessibilityLabel?: string;
+  onPress?: () => void;
+}