@campxdev/react-native-blueprint 0.1.23 → 0.1.24

package/src/patterns/pattern-components/AccountPattern/AccountPattern.figma.tsx

@@ -0,0 +1,193 @@
+import figma from '@figma/code-connect';
+import { AccountPattern } from './AccountPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=417-194764';
+
+/**
+ * AccountPattern - Account/Profile screen layout pattern
+ *
+ * Use cases:
+ * - User account and profile management screens
+ * - Settings and preferences pages
+ * - Account information dashboards
+ * - Categorized account options (Academics, Finance, Utilities)
+ *
+ * Features:
+ * - User profile card at the top with name and ID
+ * - Multiple grouped sections with data list items
+ * - Support for custom sections (Academics, Finance, Utilities, etc.)
+ * - Full customization of section items and properties
+ * - Scrollable layout for long content
+ * - All sections independently configurable
+ *
+ * Customization:
+ * - Show/hide profile card
+ * - Customize user profile information
+ * - Add, remove, or customize sections
+ * - Configure each item's visibility toggles and actions
+ * - Set up callbacks for profile and item interactions
+ * - Adapt content based on user role or backend data
+ */
+figma.connect(AccountPattern, FIGMA_URL, {
+  example: () => (
+    <AccountPattern
+      showProfileCard={true}
+      userName="Marshall Mathers"
+      userID="3472732323"
+      avatarInitials="MM"
+      avatarType="image"
+      sections={[
+        {
+          id: 'academics',
+          title: 'Academics',
+          items: [
+            {
+              id: '1',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '2',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '3',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '4',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+        {
+          id: 'finance',
+          title: 'Finance',
+          items: [
+            {
+              id: '5',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '6',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '7',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+        {
+          id: 'utilities',
+          title: 'Utilities',
+          items: [
+            {
+              id: '8',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '9',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+            {
+              id: '10',
+              title: 'Data List Row Title',
+              subtitle: 'Data List Row Subtitle',
+              meta: 'Meta Content',
+              density: 'comfortable',
+              state: 'default',
+              showSubtitle: true,
+              showLeading: true,
+              showTrailing: true,
+              showDivider: true,
+              leadingImage: { uri: 'https://example.com/avatar.png' },
+            },
+          ],
+        },
+      ]}
+      onProfilePress={() => console.log('Profile pressed')}
+    />
+  ),
+});

package/src/patterns/pattern-components/AccountPattern/AccountPattern.tsx

@@ -0,0 +1,301 @@
+// @ts-nocheck
+import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+import { ProfileCard } from '../../../components/DataDisplay/ProfileCard/ProfileCard';
+import { DataListItem } from '../../../components/DataDisplay/DataListItem/DataListItem';
+import { Text } from '../../../components/Input/Text/Text';
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export type AccountSectionItem = {
+  id: string;
+  title: string;
+  subtitle: string;
+  meta?: string;
+  density?: 'comfortable' | 'compact';
+  state?: 'default' | 'pressed' | 'selected' | 'disabled';
+  showSubtitle?: boolean;
+  showLeading?: boolean;
+  showTrailing?: boolean;
+  showDivider?: boolean;
+  leadingImage?: { uri: string };
+  leadingIcon?: any;
+};
+
+export type AccountSection = {
+  id: string;
+  title: string;
+  items: AccountSectionItem[];
+};
+
+export type AccountPatternProps = {
+  // Profile section
+  showProfileCard?: boolean;
+  userName?: string;
+  userID?: string;
+  avatarInitials?: string;
+  avatarType?: 'image' | 'initials';
+  onProfilePress?: () => void;
+
+  // Sections
+  sections?: AccountSection[];
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * AccountPattern Component
+ *
+ * A comprehensive account/profile layout pattern that displays:
+ * - User profile card at the top with name and ID
+ * - Multiple grouped sections with DataList items
+ * - Support for Academics, Finance, Utilities, and custom sections
+ * - Full customization of sections and items
+ *
+ * @example
+ * ```tsx
+ * <AccountPattern
+ *   showProfileCard={true}
+ *   userName="Marshall Mathers"
+ *   userID="3472732323"
+ *   sections={[...]}
+ * />
+ * ```
+ */
+export function AccountPattern({
+  // Profile section
+  showProfileCard = true,
+  userName = 'Marshall Mathers',
+  userID = '3472732323',
+  avatarInitials = 'MM',
+  avatarType = 'image',
+  onProfilePress,
+
+  // Sections
+  sections = [
+    {
+      id: 'academics',
+      title: 'Academics',
+      items: [
+        {
+          id: '1',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '2',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '3',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '4',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+      ],
+    },
+    {
+      id: 'finance',
+      title: 'Finance',
+      items: [
+        {
+          id: '5',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '6',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '7',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+      ],
+    },
+    {
+      id: 'utilities',
+      title: 'Utilities',
+      items: [
+        {
+          id: '8',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '9',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+        {
+          id: '10',
+          title: 'Data List Row Title',
+          subtitle: 'Data List Row Subtitle',
+          meta: 'Meta Content',
+          density: 'comfortable',
+          state: 'default',
+          showSubtitle: true,
+          showLeading: true,
+          showTrailing: true,
+          showDivider: true,
+          leadingImage: { uri: 'https://example.com/avatar.png' },
+        },
+      ],
+    },
+  ],
+
+  // Styling
+  style,
+  testID,
+}: AccountPatternProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'account-pattern'}
+      style={[{ flex: 1, backgroundColor: '#f7f8fa' }, style]}
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={{ paddingVertical: 20 }}
+    >
+      <View className="gap-8 px-5">
+        {/* Profile Card Section */}
+        {showProfileCard && (
+          <View>
+            <ProfileCard
+              userName={userName}
+              userID={userID}
+              avatarInitials={avatarInitials}
+              avatarType={avatarType}
+              onPress={onProfilePress}
+            />
+          </View>
+        )}
+
+        {/* Sections */}
+        {sections.map((section) => (
+          <View key={section.id} className="gap-2">
+            {/* Section Title */}
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              {section.title}
+            </Text>
+
+            {/* Section Items */}
+            <View className="gap-3 px-5">
+              {section.items.map((item) => (
+                <View key={item.id}>
+                  <DataListItem
+                    title={item.title}
+                    subtitle={item.subtitle}
+                    meta={item.meta}
+                    density={item.density || 'comfortable'}
+                    state={item.state || 'default'}
+                    showSubtitle={item.showSubtitle}
+                    showLeading={item.showLeading}
+                    showTrailing={item.showTrailing}
+                    showDivider={item.showDivider}
+                    leadingImage={item.leadingImage}
+                    leadingIcon={item.leadingIcon}
+                    onPress={() => {}}
+                  />
+                </View>
+              ))}
+            </View>
+          </View>
+        ))}
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 150 }} />
+      </View>
+    </ScrollView>
+  );
+}
+
+AccountPattern.displayName = 'AccountPattern';
+
+export type { AccountPatternProps };

package/src/patterns/pattern-components/AccountPattern/index.ts

@@ -0,0 +1 @@
+export * from './AccountPattern';

package/src/patterns/pattern-components/CalendarPattern/CalendarPattern.figma.tsx

@@ -3,7 +3,7 @@ import figma from '@figma/code-connect';
 import { CalendarPattern } from './CalendarPattern';
 
 const FIGMA_URL =
-  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=314-6537';
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=416-3544';
 
 /**
  * CalendarPattern - Daily schedule calendar view pattern

package/src/patterns/pattern-components/CardListPattern/CardListPattern.tsx

@@ -53,11 +53,8 @@ export interface CardListPatternProps {
   /** Data for CardList */
   data: CardItem[];
 
-  /** Card density variant */
-  cardDensity?: CardProps['density'];
-
-  /** Card tone variant */
-  cardTone?: CardProps['tone'];
+  /** Card size variant */
+  cardSize?: CardProps['size'];
 }
 
 /* -----------------------------------------------------
@@ -97,8 +94,7 @@ export const CardListPattern = ({
   chips = [],
   banners = [],
   data,
-  cardDensity = 'comfortable',
-  cardTone = 'default',
+  cardSize = 'lg',
 }: CardListPatternProps) => {
   return (
     <View style={{ flex: 1, gap: 16 }}>
@@ -111,6 +107,7 @@ export const CardListPattern = ({
         {data.map((item) => (
           <Card
             key={item.id}
+            size={cardSize}
             title={item.title}
             subtitle={item.subtitle}
             body={item.body}
@@ -124,8 +121,6 @@ export const CardListPattern = ({
             showFooterActions={item.showFooterActions ?? true}
             showLeading={item.showLeading ?? true}
             showOverflowMenu={item.showOverflowMenu ?? true}
-            density={cardDensity}
-            tone={cardTone}
             onPrimaryActionPress={item.onPrimaryActionPress}
             onSecondaryActionPress={item.onSecondaryActionPress}
             onOverflowPress={item.onOverflowPress}

package/src/patterns/pattern-components/FeedPattern/FeedPattern.figma.tsx

@@ -0,0 +1,146 @@
+import figma from '@figma/code-connect';
+import { FeedPattern } from './FeedPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=347-117374';
+
+/**
+ * FeedPattern - Social feed layout pattern
+ *
+ * Use cases:
+ * - Social media feeds (announcements, posts, updates)
+ * - News feeds and content discovery
+ * - Community boards and discussion forums
+ * - Activity feeds for notifications and updates
+ * - Multiple content type feeds (announcements, posts, events)
+ *
+ * Features:
+ * - Horizontal scrollable chips filter for content categories
+ * - Vertical scrollable feed with multiple content types
+ * - Multiple FeedCard variations (with/without media, badges, actions)
+ * - Support for both announcement and post types
+ * - Floating action button for creating new content
+ * - Fully customizable feed items and chip filters
+ * - All sections independently configurable
+ *
+ * Customization:
+ * - Show/hide chips filter and floating action button
+ * - Customize chip labels and selection state
+ * - Add, remove, or customize feed items
+ * - Configure each feed item's visibility toggles
+ * - Set up callbacks for chip selection and item interaction
+ * - Adapt content based on user selection or backend data
+ */
+figma.connect(FeedPattern, FIGMA_URL, {
+  example: () => (
+    <FeedPattern
+      showChipsFilter={true}
+      chips={[
+        { id: '1', label: 'Announcements', state: 'selected' as const },
+        { id: '2', label: 'Posts', state: 'default' as const },
+        { id: '3', label: 'Events', state: 'default' as const },
+        { id: '4', label: 'Updates', state: 'default' as const },
+      ]}
+      showFloatingActionButton={true}
+      feedItems={[
+        {
+          id: '1',
+          type: 'announcement',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showHeader: true,
+          showPostContent: true,
+          showBody: true,
+          showBadges: true,
+          showFooterActions: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+        {
+          id: '2',
+          type: 'post',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showMedia: true,
+          showHeader: true,
+          showPostContent: true,
+          showBadges: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+        {
+          id: '3',
+          type: 'announcement',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showPostContent: true,
+          showBody: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+        {
+          id: '4',
+          type: 'post',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showMedia: true,
+          showHeader: true,
+          showBadges: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+        {
+          id: '5',
+          type: 'announcement',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showHeader: true,
+          showPostContent: true,
+          showBody: true,
+          showBadges: true,
+          showFooterActions: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+        {
+          id: '6',
+          type: 'post',
+          authorName: 'Author Name',
+          postTitle: 'Post Title',
+          subtitle: 'Subtitle of the card goes here',
+          postContent:
+            'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          showMedia: true,
+          showHeader: true,
+          showPostContent: true,
+          showBody: true,
+          showBadges: true,
+          showFooterActions: true,
+          showLeading: true,
+          showSubtitle: true,
+          showSecondaryButton: true,
+        },
+      ]}
+    />
+  ),
+});