@campxdev/react-native-blueprint 0.1.23 → 0.1.24

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

@@ -0,0 +1,264 @@
+// @ts-nocheck
+import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+import { FeedCard } from '../../../components/DataDisplay/FeedCard/FeedCard';
+import { FloatingActionButton } from '../../../components/Navigation/FloatingAction/Floating-Action';
+import {
+  ChipsRow,
+  type ChipItem,
+} from '../../../components/DataDisplay/ChipsRow/ChipsRow';
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export type FeedItem = {
+  id: string;
+  type: 'post' | 'announcement';
+  authorName: string;
+  postTitle: string;
+  subtitle?: string;
+  postContent?: string;
+  showMedia?: boolean;
+  showHeader?: boolean;
+  showPostContent?: boolean;
+  showBody?: boolean;
+  showBadges?: boolean;
+  showFooterActions?: boolean;
+  showLeading?: boolean;
+  showSubtitle?: boolean;
+  showSecondaryButton?: boolean;
+};
+
+export type FeedChip = ChipItem;
+
+export type FeedPatternProps = {
+  // Chips filter section
+  showChipsFilter?: boolean;
+  chips?: FeedChip[];
+  onChipSelect?: (chipId: string) => void;
+
+  // Feed items section
+  feedItems?: FeedItem[];
+  onFeedItemPress?: (itemId: string) => void;
+
+  // Floating Action Button
+  showFloatingActionButton?: boolean;
+  onFloatingActionPress?: () => void;
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * FeedPattern Component
+ *
+ * A comprehensive feed layout pattern that displays:
+ * - Horizontal scrollable chips for filtering
+ * - Vertical scrollable feed of posts and announcements
+ * - Multiple FeedCard variations (with/without media, badges, footer actions)
+ * - Floating action button for creating new posts
+ *
+ * @example
+ * ```tsx
+ * <FeedPattern
+ *   showChipsFilter={true}
+ *   showFloatingActionButton={true}
+ *   feedItems={[...]}
+ * />
+ * ```
+ */
+export function FeedPattern({
+  // Chips filter section
+  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 },
+  ],
+  onChipSelect,
+
+  // Feed items section
+  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,
+    },
+  ],
+  onFeedItemPress,
+
+  // Floating Action Button
+  showFloatingActionButton = true,
+  onFloatingActionPress,
+
+  // Styling
+  style,
+  testID,
+}: FeedPatternProps) {
+  return (
+    <View
+      testID={testID ?? 'feed-pattern'}
+      style={[{ flex: 1, backgroundColor: '#f7f8fa' }, style]}
+    >
+      {/* Floating Action Button */}
+      {showFloatingActionButton && (
+        <View className="absolute bottom-8 right-5 z-50">
+          <FloatingActionButton
+            variant="default"
+            size="md"
+            onPress={onFloatingActionPress}
+          />
+        </View>
+      )}
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingVertical: 20 }}
+      >
+        {/* Chips Filter Section */}
+        {showChipsFilter && chips.length > 0 && (
+          <View style={{ marginBottom: 16 }}>
+            <ChipsRow
+              chips={chips}
+              gap={8}
+              contentPadding={20}
+              showsScrollIndicator={false}
+              onChipPress={(chip) => onChipSelect?.(chip.id)}
+            />
+          </View>
+        )}
+
+        {/* Feed Items Section */}
+        <View style={{ gap: 16, paddingHorizontal: 20 }}>
+          {feedItems.map((item) => (
+            <View key={item.id} onTouchEnd={() => onFeedItemPress?.(item.id)}>
+              <FeedCard
+                type={item.type}
+                authorName={item.authorName}
+                postTitle={item.postTitle}
+                subtitle={item.subtitle}
+                postContent={item.postContent}
+                showMedia={item.showMedia}
+                showHeader={item.showHeader}
+                showPostContent={item.showPostContent}
+                showBody={item.showBody}
+                showBadges={item.showBadges}
+                showFooterActions={item.showFooterActions}
+                showLeading={item.showLeading}
+                showSubtitle={item.showSubtitle}
+                showSecondaryButton={item.showSecondaryButton}
+              />
+            </View>
+          ))}
+        </View>
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 150 }} />
+      </ScrollView>
+    </View>
+  );
+}
+
+FeedPattern.displayName = 'FeedPattern';
+
+export type { FeedPatternProps };

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

@@ -0,0 +1,2 @@
+export { FeedPattern } from './FeedPattern';
+export type { FeedPatternProps, FeedItem, FeedChip } from './FeedPattern';

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

@@ -0,0 +1,66 @@
+import figma from '@figma/code-connect';
+import { HomeFacultyPattern } from './HomeFacultyPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=231-5885';
+
+/**
+ * HomeFacultyPattern - Faculty home screen layout pattern
+ *
+ * Use cases:
+ * - Faculty dashboard home screens
+ * - Educational app faculty portals
+ * - Instructor management interfaces
+ * - Faculty resource discovery screens
+ *
+ * Features:
+ * - Personalized greeting with schedule quick access
+ * - Action center for pending items, requests, and feedback
+ * - Next class preparation section with attendance marking
+ * - Quick access dashboard (Requests, My Kiosk, Mentees, New Post)
+ * - Campus life shortcuts (Clubs, Events)
+ * - Faculty announcements and updates feed
+ * - All sections are independently configurable
+ *
+ * Customization:
+ * - Show/hide individual sections
+ * - Customize titles, subtitles, and content
+ * - Configure button callbacks
+ * - Adapt data based on backend responses
+ */
+figma.connect(HomeFacultyPattern, FIGMA_URL, {
+  example: () => (
+    <HomeFacultyPattern
+      showGreeting={true}
+      greetingUserName="Mathers"
+      greetingText="Good Morning"
+      greetingSubtitle="You have 3 Classes today"
+      showScheduleButton={true}
+      showActionCenter={true}
+      actionCenterTitle="Action Center"
+      actionCenterSubtitle="Actions that need your attention"
+      actionCenterItems={[
+        'Class Reassignment Request',
+        'Pending Feedback Submission',
+      ]}
+      showNextClass={true}
+      nextClassTitle="Microprocessors Lab"
+      nextClassTime="10:00 AM - 11:00 AM"
+      showMarkAttendanceButton={true}
+      showResourcesButton={true}
+      showQuickAccess={true}
+      quickAccessItems={[
+        { title: 'Requests', subtitle: '1 Request Pending' },
+        { title: 'My Kiosk', subtitle: 'Employee Portal' },
+        { title: 'Mentees', subtitle: '12 Students' },
+        { title: 'New Post', subtitle: 'Notice Board' },
+      ]}
+      showCampusLife={true}
+      showAnnouncements={true}
+      announcementTitle="Faculty Development Program"
+      announcementAuthor="Admin"
+      announcementSubtitle="23 March, 2026 from 02:00 PM to 03:00 PM"
+      announcementContent="Examination Timetable has been updated and Published. Students are requested to register before 24th of this Month."
+    />
+  ),
+});

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

@@ -0,0 +1,326 @@
+// @ts-nocheck
+import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Greeting } from '../../../components/DataDisplay/Greeting/Greeting';
+import { Banner } from '../../../components/DataDisplay/Banner/Banner';
+import { Card } from '../../../components/DataDisplay/Card/Card';
+import { FeedCard } from '../../../components/DataDisplay/FeedCard/FeedCard';
+import { Text } from '../../../components/Input/Text/Text';
+import { Button } from '../../../components/Input/Button/Button';
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export type HomeFacultyPatternProps = {
+  // Header section
+  showGreeting?: boolean;
+  greetingUserName?: string;
+  greetingText?: string;
+  greetingSubtitle?: string;
+  showScheduleButton?: boolean;
+  onSchedulePress?: () => void;
+
+  // Action Center section
+  showActionCenter?: boolean;
+  actionCenterTitle?: string;
+  actionCenterSubtitle?: string;
+  actionCenterItems?: string[];
+
+  // Next Class section
+  showNextClass?: boolean;
+  nextClassTitle?: string;
+  nextClassTime?: string;
+  showMarkAttendanceButton?: boolean;
+  showResourcesButton?: boolean;
+
+  // Quick Access section
+  showQuickAccess?: boolean;
+  quickAccessItems?: Array<{
+    title: string;
+    subtitle: string;
+  }>;
+
+  // Campus Life section
+  showCampusLife?: boolean;
+
+  // Announcements section
+  showAnnouncements?: boolean;
+  announcementTitle?: string;
+  announcementAuthor?: string;
+  announcementSubtitle?: string;
+  announcementContent?: string;
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * HomeFacultyPattern Component
+ *
+ * A comprehensive faculty home screen layout pattern that displays:
+ * - Personalized greeting with schedule quick access
+ * - Action center for pending items and requests
+ * - Next class preparation section with attendance marking
+ * - Quick access dashboard (Requests, My Kiosk, Mentees, New Post)
+ * - Campus life shortcuts (Clubs, Events)
+ * - Announcements feed for faculty updates
+ *
+ * @example
+ * ```tsx
+ * <HomeFacultyPattern
+ *   showGreeting={true}
+ *   showActionCenter={true}
+ *   showNextClass={true}
+ *   showQuickAccess={true}
+ *   showAnnouncements={true}
+ * />
+ * ```
+ */
+export function HomeFacultyPattern({
+  // Header section
+  showGreeting = true,
+  greetingUserName = 'Mathers',
+  greetingText = 'Good Morning',
+  greetingSubtitle = 'You have 3 Classes today',
+  _showScheduleButton = true,
+  onSchedulePress,
+
+  // Action Center section
+  showActionCenter = true,
+  actionCenterTitle = 'Action Center',
+  actionCenterSubtitle = 'Actions that need your attention',
+  actionCenterItems = [
+    'Class Reassignment Request',
+    'Pending Feedback Submission',
+  ],
+
+  // Next Class section
+  showNextClass = true,
+  nextClassTitle = 'Microprocessors Lab',
+  nextClassTime = '10:00 AM - 11:00 AM',
+  showMarkAttendanceButton = true,
+  showResourcesButton = true,
+
+  // Quick Access section
+  showQuickAccess = true,
+  quickAccessItems = [
+    { title: 'Requests', subtitle: '1 Request Pending' },
+    { title: 'My Kiosk', subtitle: 'Employee Portal' },
+    { title: 'Mentees', subtitle: '12 Students' },
+    { title: 'New Post', subtitle: 'Notice Board' },
+  ],
+
+  // Campus Life section
+  showCampusLife = true,
+
+  // Announcements section
+  showAnnouncements = true,
+  announcementTitle = 'Faculty Development Program',
+  announcementAuthor = 'Admin',
+  announcementSubtitle = '23 March, 2026 from 02:00 PM to 03:00 PM',
+  announcementContent = 'Examination Timetable has been updated and Published. Students are requested to register before 24th of this Month.',
+
+  // Styling
+  style,
+  testID,
+}: HomeFacultyPatternProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'home-faculty-pattern'}
+      style={style}
+      className="flex-1 bg-surface-page"
+      showsVerticalScrollIndicator={false}
+    >
+      <View className="gap-8 py-5 px-5">
+        {/* Header Section: Greeting */}
+        {showGreeting && (
+          <View className="gap-4">
+            <Greeting
+              userName={greetingUserName}
+              greetingText={greetingText}
+              subtitle={greetingSubtitle}
+              ctaLayout="icon"
+              showNextUp={false}
+              onSchedulePress={onSchedulePress}
+            />
+          </View>
+        )}
+
+        {/* Action Center Section */}
+        {showActionCenter && (
+          <View className="gap-4">
+            <Banner
+              style="solid"
+              title={actionCenterTitle}
+              subtitle={actionCenterSubtitle}
+              showBadge={true}
+              badge1Text={`${actionCenterItems.length}`}
+              actionItem1={actionCenterItems[0] || 'Class Reassignment Request'}
+              showActionItem2={actionCenterItems.length > 1}
+              actionItem2={
+                actionCenterItems[1] || 'Pending Feedback Submission'
+              }
+              showMoreLabel={actionCenterItems.length > 2}
+              moreLabel={`+ ${actionCenterItems.length - 2} more`}
+              showActionItems={true}
+              showTrailing={true}
+            />
+          </View>
+        )}
+
+        {/* Next Class Section */}
+        {showNextClass && (
+          <View className="gap-2">
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              Your Next Class
+            </Text>
+
+            <View className="gap-2 px-5">
+              <Card
+                size="lg"
+                title={nextClassTitle}
+                subtitle={nextClassTime}
+                showSubtitle={true}
+                showMedia={false}
+                showLeading={false}
+                showBadges={false}
+                showFooterActions={false}
+              />
+
+              <View className="flex-row gap-2">
+                {showMarkAttendanceButton && (
+                  <Button variant="default" size="default" className="flex-1">
+                    Mark Attendance
+                  </Button>
+                )}
+                {showResourcesButton && (
+                  <Button variant="secondary" size="default" className="flex-1">
+                    Resources
+                  </Button>
+                )}
+              </View>
+
+              <Text className="text-center text-sm font-semibold text-text-primary py-3">
+                View All Classes →
+              </Text>
+            </View>
+          </View>
+        )}
+
+        {/* Quick Access Section */}
+        {showQuickAccess && (
+          <View className="gap-2">
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              Quick Access
+            </Text>
+
+            <View className="flex-row flex-wrap gap-2 px-5 justify-between">
+              {quickAccessItems.map((item, index) => (
+                <View key={index} style={{ width: '48%' }}>
+                  <Card
+                    size="sm"
+                    title={item.title}
+                    subtitle={item.subtitle}
+                    showSubtitle={true}
+                    showMedia={false}
+                    showLeading={true}
+                    showBadges={false}
+                    showFooterActions={false}
+                    leadingType="avatar"
+                    avatarInitials={item.title.slice(0, 2).toUpperCase()}
+                  />
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
+
+        {/* Campus Life Section */}
+        {showCampusLife && (
+          <View className="gap-2">
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              Campus Life
+            </Text>
+
+            <View className="flex-row gap-2 px-5">
+              <View style={{ flex: 1 }}>
+                <Card
+                  size="sm"
+                  title="Clubs"
+                  subtitle="22 Clubs Available"
+                  showSubtitle={true}
+                  showMedia={false}
+                  showLeading={true}
+                  showBadges={false}
+                  showFooterActions={false}
+                  leadingType="avatar"
+                  avatarInitials="CL"
+                />
+              </View>
+
+              <View style={{ flex: 1 }}>
+                <Card
+                  size="sm"
+                  title="Events"
+                  subtitle="2 New Events"
+                  showSubtitle={true}
+                  showMedia={false}
+                  showLeading={true}
+                  showBadges={false}
+                  showFooterActions={false}
+                  leadingType="avatar"
+                  avatarInitials="EV"
+                />
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* Announcements Section */}
+        {showAnnouncements && (
+          <View className="gap-2">
+            <View className="flex-row justify-between items-center px-5">
+              <Text className="text-sm font-semibold text-text-secondary">
+                Announcements
+              </Text>
+              <Text className="text-xs">→</Text>
+            </View>
+
+            <View className="px-5">
+              <FeedCard
+                type="announcement"
+                authorName={announcementAuthor}
+                postTitle={announcementTitle}
+                subtitle={announcementSubtitle}
+                postContent={announcementContent}
+                showMedia={true}
+                showHeader={true}
+                showPostContent={true}
+                showBody={true}
+                showFooterActions={true}
+                showLeading={true}
+                showSubtitle={true}
+                showBadges={false}
+                showSecondaryButton={false}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 96 }} />
+      </View>
+    </ScrollView>
+  );
+}
+
+HomeFacultyPattern.displayName = 'HomeFacultyPattern';
+
+export type { HomeFacultyPatternProps };

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

@@ -0,0 +1,2 @@
+export { HomeFacultyPattern } from './HomeFacultyPattern';
+export type { HomeFacultyPatternProps } from './HomeFacultyPattern';