@campxdev/react-native-blueprint 0.1.23 → 0.1.24

package/src/components/DataDisplay/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,404 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  View,
+  Text as RNText,
+  Image as RNImage,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type ImageSourcePropType,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+
+import { Avatar } from '../Avatar/Avatar';
+import { Badge } from '../Badge/Badge';
+
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+cssInterop(RNImage, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+const View_ = View as any;
+const Text = RNText as any;
+const Image = RNImage as any;
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export type ChatBubbleType = 'incoming' | 'outgoing';
+export type ChatBubbleVariant = 'default' | 'ai';
+
+export interface ChatBubbleQuotedMessage {
+  author: string;
+  text: string;
+}
+
+export interface ChatBubbleAttachment {
+  type: 'image' | 'link';
+  uri?: string;
+  title?: string;
+  description?: string;
+  url?: string;
+}
+
+export interface ChatBubbleProps {
+  type?: ChatBubbleType;
+  variant?: ChatBubbleVariant;
+  message?: string;
+  userName?: string;
+  userAvatar?: ImageSourcePropType;
+  timestamp?: string;
+  showUser?: boolean;
+  showMessage?: boolean;
+  showEditedIndication?: boolean;
+  showQuotedReply?: boolean;
+  quotedMessage?: ChatBubbleQuotedMessage;
+  showMessageAttachment?: boolean;
+  attachment?: ChatBubbleAttachment;
+  showReactions?: boolean;
+  reactions?: string[];
+  showActions?: boolean;
+  onCopy?: () => void;
+  onLike?: () => void;
+  onDislike?: () => void;
+  onRegenerate?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * ChatBubble Component
+ *
+ * A comprehensive chat message bubble component for chat interfaces.
+ * Supports incoming/outgoing messages with default and AI variants.
+ *
+ * @example
+ * ```tsx
+ * <ChatBubble
+ *   type="incoming"
+ *   variant="default"
+ *   message="Hello!"
+ *   userName="John"
+ *   timestamp="09:10 PM"
+ * />
+ * ```
+ */
+export function ChatBubble({
+  type = 'incoming',
+  variant = 'default',
+  message = 'This is the Message bubble content. This will have truncated content and we can fix the width as 300px.',
+  userName = 'User Name',
+  _userAvatar,
+  timestamp = '09:10 PM',
+  showUser = true,
+  showMessage = true,
+  showEditedIndication = true,
+  showQuotedReply = true,
+  quotedMessage = {
+    author: 'John Doe',
+    text: 'This is a quoted reply section',
+  },
+  showMessageAttachment = true,
+  attachment,
+  showReactions = true,
+  reactions = ['👍', '❤️'],
+  showActions = true,
+  onCopy,
+  onLike,
+  onDislike,
+  onRegenerate,
+  style,
+  testID,
+}: ChatBubbleProps) {
+  const isIncoming = type === 'incoming';
+  const isOutgoing = type === 'outgoing';
+  const isAi = variant === 'ai';
+  const isDefault = variant === 'default';
+
+  if (isIncoming && isDefault) {
+    return (
+      <View_
+        testID={testID ?? 'chat-bubble'}
+        style={style}
+        className="flex-row gap-2 px-5 py-2 items-end"
+      >
+        {/* Avatar */}
+        {showUser && (
+          <Avatar
+            size="sm"
+            type="initials"
+            initials={userName?.slice(0, 2).toUpperCase() ?? 'AK'}
+            showRing={true}
+          />
+        )}
+
+        {/* Content */}
+        <View_ className="flex-1 gap-1">
+          {/* Meta */}
+          <View_ className="flex-row items-center justify-between px-4">
+            <Text className="text-xs font-medium text-text-secondary">
+              {userName}
+            </Text>
+            <View_ className="flex-row items-center gap-1">
+              {showEditedIndication && (
+                <>
+                  <Text className="text-xs font-medium text-text-secondary">
+                    Edited
+                  </Text>
+                  <View_ className="w-0.5 h-0.5 rounded-full bg-text-secondary" />
+                </>
+              )}
+              <Text className="text-xs font-medium text-text-secondary">
+                {timestamp}
+              </Text>
+            </View_>
+          </View_>
+
+          {/* Bubble */}
+          <View_ className="rounded-3xl rounded-bl-none bg-white px-4 py-3 gap-3">
+            {/* Quoted Reply */}
+            {showQuotedReply && quotedMessage && (
+              <View_ className="bg-white rounded-xl border-l-4 border-l-highlight-purple px-3 py-2 gap-0.5">
+                <Text className="text-xs font-semibold text-text-primary">
+                  {quotedMessage.author}
+                </Text>
+                <Text className="text-xs font-medium text-text-secondary">
+                  {quotedMessage.text}
+                </Text>
+              </View_>
+            )}
+
+            {/* Message */}
+            {showMessage && (
+              <Text className="text-sm font-medium text-text-primary leading-5">
+                {message}
+              </Text>
+            )}
+
+            {/* Image */}
+            {showMessageAttachment &&
+              attachment?.type === 'image' &&
+              attachment.uri && (
+                <Image
+                  source={{ uri: attachment.uri }}
+                  style={{
+                    width: '100%',
+                    height: 160,
+                    borderRadius: 16,
+                  }}
+                  resizeMode="cover"
+                />
+              )}
+          </View_>
+
+          {/* Reactions */}
+          {showReactions && reactions && reactions.length > 0 && (
+            <View_ className="flex-row gap-1 px-4 pt-1">
+              {reactions.map((reaction, idx) => (
+                <Badge
+                  key={idx}
+                  variant="default"
+                  size="sm"
+                  className="rounded-full"
+                >
+                  <Text className="text-sm">{reaction}</Text>
+                </Badge>
+              ))}
+            </View_>
+          )}
+        </View_>
+      </View_>
+    );
+  }
+
+  if (isOutgoing && isDefault) {
+    return (
+      <View_
+        testID={testID ?? 'chat-bubble'}
+        style={style}
+        className="flex-row-reverse gap-2 px-5 py-2 items-end"
+      >
+        {/* Avatar */}
+        {showUser && (
+          <Avatar
+            size="sm"
+            type="image"
+            initials={userName?.slice(0, 2).toUpperCase() ?? 'AK'}
+            showRing={true}
+          />
+        )}
+
+        {/* Content */}
+        <View_ className="flex-1 gap-1">
+          {/* Meta */}
+          <View_ className="flex-row items-center justify-between px-4">
+            <View_ className="flex-row items-center gap-1">
+              <Text className="text-xs font-medium text-text-secondary">
+                {timestamp}
+              </Text>
+              {showEditedIndication && (
+                <>
+                  <View_ className="w-0.5 h-0.5 rounded-full bg-text-secondary" />
+                  <Text className="text-xs font-medium text-text-secondary">
+                    Edited
+                  </Text>
+                </>
+              )}
+            </View_>
+            <Text className="text-xs font-medium text-text-secondary">You</Text>
+          </View_>
+
+          {/* Bubble */}
+          <View_ className="rounded-3xl rounded-br-none bg-surface-subtle px-4 py-3 gap-3">
+            {/* Quoted Reply */}
+            {showQuotedReply && quotedMessage && (
+              <View_ className="bg-surface-default rounded-xl border-l-4 border-l-white px-3 py-2 gap-0.5">
+                <Text className="text-xs font-semibold text-text-primary">
+                  {quotedMessage.author}
+                </Text>
+                <Text className="text-xs font-medium text-text-secondary">
+                  {quotedMessage.text}
+                </Text>
+              </View_>
+            )}
+
+            {/* Message */}
+            {showMessage && (
+              <Text className="text-sm font-medium text-text-primary leading-5">
+                {message}
+              </Text>
+            )}
+
+            {/* Link Attachment */}
+            {showMessageAttachment && attachment?.type === 'link' && (
+              <View_ className="gap-2">
+                <View_ className="bg-white rounded-2xl px-3 py-2 gap-1">
+                  <Text className="text-xs font-semibold text-text-primary">
+                    {attachment.title}
+                  </Text>
+                  <Text className="text-xs font-medium text-text-muted">
+                    {attachment.description}
+                  </Text>
+                  <Text className="text-xs font-medium text-text-secondary">
+                    {attachment.url}
+                  </Text>
+                </View_>
+                <Pressable>
+                  <Text className="text-xs font-medium text-highlight-purple underline">
+                    {attachment.url && `https://${attachment.url}/home`}
+                  </Text>
+                </Pressable>
+              </View_>
+            )}
+          </View_>
+
+          {/* Footer */}
+          <View_ className="flex-row items-center justify-between px-4 pt-1">
+            {showReactions && reactions && reactions.length > 0 && (
+              <View_ className="flex-row gap-1">
+                {reactions.map((reaction, idx) => (
+                  <Badge
+                    key={idx}
+                    variant="default"
+                    size="sm"
+                    className="rounded-full"
+                  >
+                    <Text className="text-sm">{reaction}</Text>
+                  </Badge>
+                ))}
+              </View_>
+            )}
+
+            <View_ className="flex-row items-center gap-1">
+              <View_ className="w-3 h-3 rounded-full bg-text-muted" />
+              <Text className="text-xs font-medium text-text-muted">Sent</Text>
+            </View_>
+          </View_>
+        </View_>
+      </View_>
+    );
+  }
+
+  if (isIncoming && isAi) {
+    return (
+      <View_
+        testID={testID ?? 'chat-bubble'}
+        style={style}
+        className="flex-row gap-2 px-5 py-2 items-end"
+      >
+        {/* Avatar */}
+        {showUser && (
+          <Avatar size="sm" type="icon" initials="AI" showRing={true} />
+        )}
+
+        {/* Content */}
+        <View_ className="flex-1 gap-1">
+          {/* Meta */}
+          <View_ className="flex-row items-center justify-between px-4">
+            <Text className="text-lg">✨</Text>
+            <Text className="text-xs font-medium text-text-secondary">
+              {timestamp}
+            </Text>
+          </View_>
+
+          {/* Bubble */}
+          <View_ className="rounded-3xl rounded-bl-none bg-white px-4 py-3 gap-3">
+            {/* Message */}
+            {showMessage && (
+              <Text className="text-sm font-medium text-text-primary leading-5">
+                {message}
+              </Text>
+            )}
+
+            {/* Image */}
+            {showMessageAttachment &&
+              attachment?.type === 'image' &&
+              attachment.uri && (
+                <Image
+                  source={{ uri: attachment.uri }}
+                  style={{
+                    width: '100%',
+                    height: 160,
+                    borderRadius: 16,
+                  }}
+                  resizeMode="cover"
+                />
+              )}
+          </View_>
+
+          {/* Actions */}
+          <View_ className="flex-row items-center gap-5 px-4 pt-2">
+            {showActions && (
+              <>
+                <Pressable onPress={onCopy}>
+                  <Text className="text-base">📋</Text>
+                </Pressable>
+                <Pressable onPress={onLike}>
+                  <Text className="text-base">👍</Text>
+                </Pressable>
+                <Pressable onPress={onDislike}>
+                  <Text className="text-base">👎</Text>
+                </Pressable>
+                <Pressable onPress={onRegenerate}>
+                  <Text className="text-base">🔄</Text>
+                </Pressable>
+              </>
+            )}
+          </View_>
+        </View_>
+      </View_>
+    );
+  }
+
+  return null;
+}
+
+ChatBubble.displayName = 'ChatBubble';
+
+export type { ChatBubbleProps };

package/src/components/DataDisplay/ChatBubble/index.ts

@@ -0,0 +1,8 @@
+export { ChatBubble } from './ChatBubble';
+export type {
+  ChatBubbleProps,
+  ChatBubbleType,
+  ChatBubbleVariant,
+  ChatBubbleQuotedMessage,
+  ChatBubbleAttachment,
+} from './ChatBubble';

package/src/components/DataDisplay/FeedCard/AttachmentDetails.tsx

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import {
+  View as RNView,
+  Text as RNTextBase,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const RNText = cssInterop(RNTextBase, { className: 'style' });
+
+export type AttachmentDetailsProps = {
+  /** File name */
+  fileName?: string;
+
+  /** Number of pages */
+  pages?: number;
+
+  /** File size in MB */
+  sizeMB?: number;
+
+  /** File type (e.g., PDF, DOC) */
+  fileType?: string;
+
+  /** Styling */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/**
+ * AttachmentDetails - Displays file attachment metadata
+ *
+ * Shows file name, pages, size, and file type in a compact card format
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AttachmentDetails
+ *   fileName="Document"
+ *   pages={27}
+ *   sizeMB={3}
+ *   fileType="PDF"
+ * />
+ * ```
+ */
+export function AttachmentDetails({
+  fileName = 'File Name',
+  pages = 27,
+  sizeMB = 3,
+  fileType = 'Pdf',
+  style,
+  testID,
+}: AttachmentDetailsProps) {
+  return (
+    <View
+      testID={testID ?? 'attachment-details'}
+      className="bg-surface-subtle rounded-lg px-4 py-3 flex-col gap-1 w-full"
+      style={style}
+    >
+      {/* File Name */}
+      <RNText
+        testID="attachment-file-name"
+        numberOfLines={1}
+        className="text-sm font-semibold text-text-primary"
+      >
+        {fileName}
+      </RNText>
+
+      {/* Meta Information */}
+      <View testID="attachment-meta" className="flex-row items-center gap-2">
+        <RNText className="text-xs font-medium text-text-secondary">
+          {pages} Pages
+        </RNText>
+
+        {/* Divider dot */}
+        <View className="w-1 h-1 rounded-full bg-text-secondary" />
+
+        <RNText className="text-xs font-medium text-text-secondary">
+          {sizeMB} MB
+        </RNText>
+
+        {/* Divider dot */}
+        <View className="w-1 h-1 rounded-full bg-text-secondary" />
+
+        <RNText className="text-xs font-medium text-text-secondary">
+          {fileType}
+        </RNText>
+      </View>
+    </View>
+  );
+}
+
+AttachmentDetails.displayName = 'AttachmentDetails';

package/src/components/DataDisplay/FeedCard/FeedCard.figma.tsx

@@ -10,34 +10,36 @@ figma.connect(FeedCard, FIGMA_URL, {
       post: 'post',
       announcement: 'announcement',
     }),
-    authorName: figma.string('authorName'),
-    postTitle: figma.string('postTitle'),
-    subtitle: figma.string('subtitle'),
-    postContent: figma.string('postContent'),
-    showHeader: figma.boolean('Show Header'),
-    showLeading: figma.boolean('Show Leading'),
     showMedia: figma.boolean('Show Media'),
-    showPostContent: figma.boolean('Show PostContent'),
-    showSubtitle: figma.boolean('Show Subtitle'),
+    showHeader: figma.boolean('Show Header'),
+    showPostContent: figma.boolean('Show Post Content'),
+    showBody: figma.boolean('Show Body'),
     showBadges: figma.boolean('Show Badges'),
     showFooterActions: figma.boolean('Show FooterActions'),
+    showLeading: figma.boolean('Show Leading'),
+    showSubtitle: figma.boolean('Show Subtitle'),
     showSecondaryButton: figma.boolean('Show SecondaryButton'),
+    authorName: figma.string('Author Name'),
+    postTitle: figma.string('Post Title'),
+    subtitle: figma.string('Subtitle'),
+    postContent: figma.string('Post Content'),
   },
   example: (props) => (
     <FeedCard
       type={props.type}
-      authorName={props.authorName}
-      postTitle={props.postTitle}
-      subtitle={props.subtitle}
-      postContent={props.postContent}
-      showHeader={props.showHeader}
-      showLeading={props.showLeading}
       showMedia={props.showMedia}
+      showHeader={props.showHeader}
       showPostContent={props.showPostContent}
-      showSubtitle={props.showSubtitle}
+      showBody={props.showBody}
       showBadges={props.showBadges}
       showFooterActions={props.showFooterActions}
+      showLeading={props.showLeading}
+      showSubtitle={props.showSubtitle}
       showSecondaryButton={props.showSecondaryButton}
+      authorName={props.authorName}
+      postTitle={props.postTitle}
+      subtitle={props.subtitle}
+      postContent={props.postContent}
     />
   ),
 });