@campxdev/react-native-blueprint 0.1.23 → 0.1.24

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

@@ -0,0 +1,355 @@
+// @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 HomeStudentPatternProps = {
+  // 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;
+  showCourseButton?: boolean;
+  showResourcesButton?: boolean;
+
+  // Quick Access section
+  showQuickAccess?: boolean;
+  quickAccessItems?: Array<{
+    title: string;
+    subtitle: string;
+  }>;
+
+  // Campus Life section
+  showCampusLife?: boolean;
+
+  // Mentor section
+  showMentor?: boolean;
+  mentorName?: string;
+  mentorTitle?: string;
+
+  // Announcements section
+  showAnnouncements?: boolean;
+  announcementTitle?: string;
+  announcementAuthor?: string;
+  announcementContent?: string;
+
+  // Styling
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  className?: never;
+};
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * HomeStudentPattern Component
+ *
+ * A comprehensive student home screen layout pattern that displays:
+ * - Personalized greeting with schedule quick access
+ * - Action center for pending items
+ * - Next class preparation section
+ * - Quick access dashboard (Attendance, Payments, Scores, Services)
+ * - Campus life shortcuts (Clubs, Events)
+ * - Mentor information
+ * - Announcements feed
+ *
+ * @example
+ * ```tsx
+ * <HomeStudentPattern
+ *   showGreeting={true}
+ *   showActionCenter={true}
+ *   showNextClass={true}
+ *   showQuickAccess={true}
+ *   showAnnouncements={true}
+ * />
+ * ```
+ */
+export function HomeStudentPattern({
+  // Header section
+  showGreeting = true,
+  greetingUserName = 'Marshall',
+  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 = ['Fee Due', 'Feedback Submission Pending'],
+
+  // Next Class section
+  showNextClass = true,
+  nextClassTitle = 'Microprocessors Lab',
+  nextClassTime = '10:00 AM - 11:00 AM',
+  showCourseButton = true,
+  showResourcesButton = 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' },
+  ],
+
+  // Campus Life section
+  showCampusLife = true,
+
+  // Mentor section
+  showMentor = true,
+  mentorName = 'Dr. Dre',
+  mentorTitle = 'Professor, CSE Department',
+
+  // Announcements section
+  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.',
+
+  // Styling
+  style,
+  testID,
+}: HomeStudentPatternProps) {
+  return (
+    <ScrollView
+      testID={testID ?? 'home-student-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] || 'Fee Due'}
+              showActionItem2={actionCenterItems.length > 1}
+              actionItem2={
+                actionCenterItems[1] || 'Feedback Submission Pending'
+              }
+              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">
+              Prep for 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">
+                {showCourseButton && (
+                  <Button variant="default" size="default" className="flex-1">
+                    Open Course
+                  </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 Courses →
+              </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>
+        )}
+
+        {/* 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}
+                postContent={announcementContent}
+                showMedia={true}
+                showHeader={true}
+                showPostContent={true}
+                showBody={true}
+                showFooterActions={true}
+                showLeading={true}
+                showSubtitle={false}
+                showBadges={false}
+                showSecondaryButton={false}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Bottom Spacer */}
+        <View style={{ height: 96 }} />
+      </View>
+    </ScrollView>
+  );
+}
+
+HomeStudentPattern.displayName = 'HomeStudentPattern';
+
+export type { HomeStudentPatternProps };

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

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

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

@@ -14,3 +14,8 @@ export * from './EntityPatternStructured';
 export * from './EntityPatternGuided';
 export * from './CalendarPattern';
 export * from './MonthlyCalendarPattern';
+export * from './HomeStudentPattern';
+export * from './HomeFacultyPattern';
+export * from './HomeParentPattern';
+export * from './FeedPattern';
+export * from './AccountPattern';