@campxdev/react-native-blueprint 0.1.23 → 0.1.24

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

@@ -0,0 +1,75 @@
+import figma from '@figma/code-connect';
+import { HomeParentPattern } from './HomeParentPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=283-22416';
+
+/**
+ * HomeParentPattern - Parent home screen layout pattern
+ *
+ * Use cases:
+ * - Parent portal home screens
+ * - Parental monitoring dashboards
+ * - Student progress tracking interfaces
+ * - Parent notification and update screens
+ *
+ * Features:
+ * - Personalized greeting with student info and overview
+ * - Overview metrics (Attendance, Fees status)
+ * - Action center for pending items and alerts
+ * - Academics section with semester and course information
+ * - Quick access dashboard (Attendance, Payments, Exam Scores, Services)
+ * - Teacher/Mentor information card
+ * - Announcements feed with file attachments for important documents
+ * - All sections are independently configurable
+ *
+ * Customization:
+ * - Show/hide individual sections
+ * - Customize titles, subtitles, and content
+ * - Configure button callbacks
+ * - Customize student/academic information
+ * - Add attachment details for announcements
+ * - Adapt data based on backend responses
+ */
+figma.connect(HomeParentPattern, FIGMA_URL, {
+  example: () => (
+    <HomeParentPattern
+      showGreeting={true}
+      greetingUserName="Mathers"
+      greetingText="Good Morning"
+      greetingSubtitle="Viewing : Marshall, CSE - B"
+      greetingOverviewText="Attendance : 84.6 % • Fees : Due in 3 days"
+      showScheduleButton={true}
+      showActionCenter={true}
+      actionCenterTitle="Action Center"
+      actionCenterSubtitle="Actions that need your attention"
+      actionCenterItems={['Fee Due']}
+      showAcademics={true}
+      academicsTitle="Academics"
+      semesterTitle="Semester 4"
+      courseCount="5 Courses"
+      showViewCoursesButton={true}
+      showCalendarButton={true}
+      showQuickAccess={true}
+      quickAccessItems={[
+        { title: 'Attendance', subtitle: '84.6 %' },
+        { title: 'Payments', subtitle: 'No Dues' },
+        { title: 'Exam Scores', subtitle: 'CGPA : 7.2' },
+        { title: 'Services', subtitle: '1 Active' },
+      ]}
+      showMentor={true}
+      mentorName="Dr. Dre"
+      mentorTitle="Professor, CSE Department"
+      showAnnouncements={true}
+      announcementTitle="Examination Timetable Out"
+      announcementAuthor="CSE HOD"
+      announcementSubtitle="CSE : Batch 2023-24"
+      announcementContent="Examination Timetable has been updated and Published. Students are requested to register before 24th of this Month."
+      showAttachmentDetails={true}
+      attachmentFileName="File Name"
+      attachmentPages="27 Pages"
+      attachmentSizeMB="3 MB"
+      attachmentType="PDF"
+    />
+  ),
+});

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

@@ -0,0 +1,328 @@
+// @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 HomeParentPatternProps = {
+  // Header section
+  showGreeting?: boolean;
+  greetingUserName?: string;
+  greetingText?: string;
+  greetingSubtitle?: string;
+  greetingOverviewText?: string;
+  showScheduleButton?: boolean;
+  onSchedulePress?: () => void;
+
+  // Action Center section
+  showActionCenter?: boolean;
+  actionCenterTitle?: string;
+  actionCenterSubtitle?: string;
+  actionCenterItems?: string[];
+
+  // Academics section
+  showAcademics?: boolean;
+  academicsTitle?: string;
+  semesterTitle?: string;
+  courseCount?: string;
+  showViewCoursesButton?: boolean;
+  showCalendarButton?: boolean;
+
+  // Quick Access section
+  showQuickAccess?: boolean;
+  quickAccessItems?: Array<{
+    title: string;
+    subtitle: string;
+  }>;
+
+  // Mentor section
+  showMentor?: boolean;
+  mentorName?: string;
+  mentorTitle?: string;
+
+  // Announcements section
+  showAnnouncements?: boolean;
+  announcementTitle?: string;
+  announcementAuthor?: string;
+  announcementSubtitle?: string;
+  announcementContent?: string;
+  showAttachmentDetails?: boolean;
+  attachmentFileName?: string;
+  attachmentPages?: string;
+  attachmentSizeMB?: string;
+  attachmentType?: string;
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * HomeParentPattern Component
+ *
+ * A comprehensive parent home screen layout pattern that displays:
+ * - Personalized greeting with attendance overview and schedule
+ * - Action center for pending items and alerts
+ * - Academics section with semester and course information
+ * - Quick access dashboard (Attendance, Payments, Exam Scores, Services)
+ * - Mentor/Teacher information card
+ * - Announcements feed with file attachments
+ *
+ * @example
+ * ```tsx
+ * <HomeParentPattern
+ *   showGreeting={true}
+ *   showActionCenter={true}
+ *   showAcademics={true}
+ *   showQuickAccess={true}
+ *   showAnnouncements={true}
+ * />
+ * ```
+ */
+export function HomeParentPattern({
+  // Header section
+  showGreeting = true,
+  greetingUserName = 'Mathers',
+  greetingText = 'Good Morning',
+  greetingSubtitle = 'Viewing : Marshall, CSE - B',
+  greetingOverviewText = 'Attendance : 84.6 % • Fees : Due in 3 days',
+  _showScheduleButton = true,
+  onSchedulePress,
+
+  // Action Center section
+  showActionCenter = true,
+  actionCenterTitle = 'Action Center',
+  actionCenterSubtitle = 'Actions that need your attention',
+  actionCenterItems = ['Fee Due'],
+
+  // Academics section
+  showAcademics = true,
+  academicsTitle = 'Academics',
+  semesterTitle = 'Semester 4',
+  courseCount = '5 Courses',
+  showViewCoursesButton = true,
+  showCalendarButton = true,
+
+  // Quick Access section
+  showQuickAccess = true,
+  quickAccessItems = [
+    { title: 'Attendance', subtitle: '84.6 %' },
+    { title: 'Payments', subtitle: 'No Dues' },
+    { title: 'Exam Scores', subtitle: 'CGPA : 7.2' },
+    { title: 'Services', subtitle: '1 Active' },
+  ],
+
+  // Mentor section
+  showMentor = true,
+  mentorName = 'Dr. Dre',
+  mentorTitle = 'Professor, CSE Department',
+
+  // Announcements section
+  showAnnouncements = true,
+  announcementTitle = 'Examination Timetable Out',
+  announcementAuthor = 'CSE HOD',
+  announcementSubtitle = 'CSE : Batch 2023-24',
+  announcementContent = 'Examination Timetable has been updated and Published. Students are requested to register before 24th of this Month.',
+  showAttachmentDetails = true,
+  attachmentFileName = 'File Name',
+  attachmentPages = '27 Pages',
+  attachmentSizeMB = '3 MB',
+  attachmentType = 'PDF',
+
+  // Styling
+  style,
+  testID,
+}: HomeParentPatternProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'home-parent-pattern'}
+      style={style}
+      className="flex-1 bg-surface-page"
+      showsVerticalScrollIndicator={false}
+    >
+      <View className="gap-8 py-5 px-5">
+        {/* Header Section: Greeting with Overview */}
+        {showGreeting && (
+          <View className="gap-4">
+            <View className="gap-2">
+              <Greeting
+                userName={greetingUserName}
+                greetingText={greetingText}
+                subtitle={greetingSubtitle}
+                ctaLayout="icon"
+                showNextUp={true}
+                onSchedulePress={onSchedulePress}
+              />
+              <Text className="text-xs text-text-secondary px-0">
+                {greetingOverviewText}
+              </Text>
+            </View>
+          </View>
+        )}
+
+        {/* Action Center Section */}
+        {showActionCenter && (
+          <View className="gap-4">
+            <Banner
+              style="solid"
+              title={actionCenterTitle}
+              subtitle={actionCenterSubtitle}
+              showBadge={true}
+              badge1Text={`${actionCenterItems.length}`}
+              actionItem1={actionCenterItems[0] || 'Fee Due'}
+              showActionItem2={actionCenterItems.length > 1}
+              actionItem2={actionCenterItems[1] || ''}
+              showMoreLabel={actionCenterItems.length > 2}
+              moreLabel={`+ ${actionCenterItems.length - 2} more`}
+              showActionItems={true}
+              showTrailing={true}
+            />
+          </View>
+        )}
+
+        {/* Academics Section */}
+        {showAcademics && (
+          <View className="gap-2">
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              {academicsTitle}
+            </Text>
+
+            <View className="gap-2 px-5">
+              <Card
+                size="lg"
+                title={semesterTitle}
+                subtitle={courseCount}
+                showSubtitle={true}
+                showMedia={false}
+                showLeading={false}
+                showBadges={false}
+                showFooterActions={false}
+              />
+
+              <View className="flex-row gap-2">
+                {showViewCoursesButton && (
+                  <Button variant="default" size="default" className="flex-1">
+                    View Courses
+                  </Button>
+                )}
+                {showCalendarButton && (
+                  <Button variant="secondary" size="default" className="flex-1">
+                    Calendar
+                  </Button>
+                )}
+              </View>
+            </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>
+        )}
+
+        {/* Mentor Section */}
+        {showMentor && (
+          <View className="gap-2">
+            <Text className="text-sm font-semibold text-text-secondary px-5">
+              Mentor
+            </Text>
+
+            <View className="px-5">
+              <Card
+                size="sm"
+                title={mentorName}
+                subtitle={mentorTitle}
+                showSubtitle={true}
+                showMedia={false}
+                showLeading={true}
+                showBadges={false}
+                showFooterActions={false}
+                leadingType="avatar"
+                avatarInitials={mentorName.slice(0, 2).toUpperCase()}
+              />
+            </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}
+                mediaType={showAttachmentDetails ? 'file' : 'image'}
+                fileName={attachmentFileName}
+                filePages={attachmentPages}
+                fileSizeMB={attachmentSizeMB}
+                fileType={attachmentType}
+                showMedia={showAttachmentDetails}
+                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>
+  );
+}
+
+HomeParentPattern.displayName = 'HomeParentPattern';
+
+export type { HomeParentPatternProps };

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

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

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

@@ -0,0 +1,66 @@
+import figma from '@figma/code-connect';
+import { HomeStudentPattern } from './HomeStudentPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/YTb27Onq7Zk8OV16fHptxJ/Campx-App?node-id=178-2147';
+
+/**
+ * HomeStudentPattern - Student home screen layout pattern
+ *
+ * Use cases:
+ * - Student dashboard home screens
+ * - Educational app main screens
+ * - Course management interfaces
+ * - Campus life discovery screens
+ *
+ * Features:
+ * - Personalized greeting with schedule quick access
+ * - Action center for pending items and alerts
+ * - Next class preparation section with course details
+ * - Quick access dashboard (Attendance, Payments, Scores, Services)
+ * - Campus life shortcuts (Clubs, Events)
+ * - Mentor information card
+ * - Announcements feed with latest updates
+ * - 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(HomeStudentPattern, FIGMA_URL, {
+  example: () => (
+    <HomeStudentPattern
+      showGreeting={true}
+      greetingUserName="Marshall"
+      greetingText="Good Morning"
+      greetingSubtitle="You have 3 Classes today"
+      showScheduleButton={true}
+      showActionCenter={true}
+      actionCenterTitle="Action Center"
+      actionCenterSubtitle="Actions that need your attention"
+      actionCenterItems={['Fee Due', 'Feedback Submission Pending']}
+      showNextClass={true}
+      nextClassTitle="Microprocessors Lab"
+      nextClassTime="10:00 AM - 11:00 AM"
+      showCourseButton={true}
+      showResourcesButton={true}
+      showQuickAccess={true}
+      quickAccessItems={[
+        { title: 'Attendance', subtitle: '84.6 %' },
+        { title: 'Payments', subtitle: 'No Dues' },
+        { title: 'Exam Scores', subtitle: 'CGPA : 7.2' },
+        { title: 'Services', subtitle: '1 Active' },
+      ]}
+      showCampusLife={true}
+      showMentor={true}
+      mentorName="Dr. Dre"
+      mentorTitle="Professor, CSE Department"
+      showAnnouncements={true}
+      announcementTitle="Examination Timetable Out"
+      announcementAuthor="CSE HOD"
+      announcementContent="Examination Timetable has been updated and Published. Students are requested to register before 24th of this Month."
+    />
+  ),
+});