@campxdev/react-native-blueprint 0.1.12 → 0.1.14

package/src/lib/fonts.ts

@@ -1,11 +1,14 @@
-import { Platform } from 'react-native';
+import {
+  Poppins_400Regular,
+  Poppins_600SemiBold,
+  Poppins_800ExtraBold,
+} from '@expo-google-fonts/poppins';
+import { Heebo_400Regular, Heebo_600SemiBold } from '@expo-google-fonts/heebo';
 
 /**
  * Font configuration for CampX Design System
  *
- * This package uses system fonts by default for better compatibility with bare React Native CLI apps.
- *
- * Font Families:
+ * Fonts:
  * - Poppins: Used for headings, buttons, labels, subtitles
  * - Heebo: Used for body text, inputs, captions
  *
@@ -13,87 +16,13 @@ import { Platform } from 'react-native';
  * - 400 (Regular): Body text, labels, captions
  * - 600 (Semi Bold): Subtitles, buttons, emphasized body
  * - 800 (Extra Bold): Headings
- *
- * ## Using Custom Fonts
- *
- * ### Option 1: Expo Projects (Recommended for Expo users)
- * Install and use expo-font:
- * ```bash
- * npm install expo-font @expo-google-fonts/poppins @expo-google-fonts/heebo
- * ```
- *
- * Then load fonts in your app:
- * ```tsx
- * import { useFonts } from 'expo-font';
- * import { Poppins_400Regular, Poppins_600SemiBold } from '@expo-google-fonts/poppins';
- *
- * function App() {
- *   const [fontsLoaded] = useFonts({ Poppins_400Regular, Poppins_600SemiBold });
- *   if (!fontsLoaded) return null;
- *   // Your app
- * }
- * ```
- *
- * ### Option 2: Bare React Native CLI
- * 1. Add font files to:
- *    - `android/app/src/main/assets/fonts/`
- *    - `ios/[YourApp]/Fonts/`
- *
- * 2. Configure react-native.config.js:
- * ```js
- * module.exports = {
- *   assets: ['./assets/fonts/']
- * };
- * ```
- *
- * 3. Run: `npx react-native-asset`
- *
- * 4. Use font names directly in styles:
- * ```tsx
- * <Text style={{ fontFamily: 'Poppins-Regular' }}>Hello</Text>
- * ```
- *
- * ### Option 3: System Fonts (Default - No Setup Required)
- * The library works with system fonts out of the box.
- */
-
-// System font fallbacks for bare React Native
-const systemFonts = {
-  ios: {
-    regular: 'System',
-    semiBold: 'System',
-    bold: 'System',
-  },
-  android: {
-    regular: 'sans-serif',
-    semiBold: 'sans-serif-medium',
-    bold: 'sans-serif',
-  },
-  default: {
-    regular: 'System',
-    semiBold: 'System',
-    bold: 'System',
-  },
-};
-
-const platformFonts =
-  systemFonts[Platform.OS as keyof typeof systemFonts] || systemFonts.default;
-
-/**
- * Font configuration object
- * Returns font family names that work with system fonts by default
- *
- * If you've loaded custom fonts (Poppins/Heebo), the components will use them automatically
- * when you specify fontFamily in styles.
  */
 export const fonts = {
-  // Poppins fallbacks
-  Poppins_400Regular: platformFonts.regular,
-  Poppins_600SemiBold: platformFonts.semiBold,
-  Poppins_800ExtraBold: platformFonts.bold,
-  // Heebo fallbacks
-  Heebo_400Regular: platformFonts.regular,
-  Heebo_600SemiBold: platformFonts.semiBold,
+  Poppins_400Regular,
+  Poppins_600SemiBold,
+  Poppins_800ExtraBold,
+  Heebo_400Regular,
+  Heebo_600SemiBold,
 };
 
 export type FontName = keyof typeof fonts;

package/src/lib/theme.ts

@@ -1,4 +1,5 @@
 import { DarkTheme, DefaultTheme, type Theme } from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
 
 /**
  * Custom theme colors based on your Figma design tokens
@@ -19,6 +20,8 @@ export const THEME = {
     card: 'hsl(0, 0%, 100%)', // #FFFFFF
     popover: 'hsl(0, 0%, 100%)', // #FFFFFF
     muted: 'hsl(0, 0%, 100%)', // #FFFFFF
+    surfaceDefault: '#FFFFFFFF',
+    surfaceSubtle: '#E6EAF1',
 
     // === 2. TEXT ===
     foreground: 'hsl(0, 0%, 7%)', // #121212
@@ -30,6 +33,10 @@ export const THEME = {
     primary: 'hsl(200, 13%, 11%)', // #161A1D - Near black
     primaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
 
+    // === BRAND COLORS (for buttons) ===
+    brandPrimary: '#121212', // --colors-brand-primary
+    brandSecondary: '#FFFFFF', // --colors-brand-secondary
+
     // === 4. SECONDARY (Secondary buttons) ===
     secondary: 'hsl(218, 14%, 53%)', // #64748B
     secondaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
@@ -71,6 +78,8 @@ export const THEME = {
     card: 'hsl(180, 14%, 13%)', // #1D2727
     popover: 'hsl(180, 14%, 13%)', // #1D2727
     muted: 'hsl(180, 14%, 13%)', // #1D2727
+    surfaceDefault: '#161A1D',
+    surfaceSubtle: '#293640',
 
     // === 2. TEXT ===
     foreground: 'hsl(0, 0%, 100%)', // #FFFFFF
@@ -82,6 +91,10 @@ export const THEME = {
     primary: 'hsl(210, 13%, 85%)', // #D0D5D9 - Light grey (softer than white)
     primaryForeground: 'hsl(200, 13%, 11%)', // #161A1D - Dark text
 
+    // === BRAND COLORS (for buttons) ===
+    brandPrimary: '#FFFFFF', // --colors-brand-primary
+    brandSecondary: '#121212', // --colors-brand-secondary
+
     // === 4. SECONDARY (Secondary buttons) ===
     secondary: 'hsl(218, 14%, 53%)', // #64748B
     secondaryForeground: 'hsl(0, 0%, 100%)', // #FFFFFF
@@ -149,3 +162,12 @@ export const NAV_THEME: Record<'light' | 'dark', Theme> = {
     },
   },
 };
+
+/**
+ * Hook to get theme colors based on current color scheme
+ * Returns the appropriate light or dark theme colors
+ */
+export function useThemeColors() {
+  const colorScheme = useColorScheme();
+  return colorScheme === 'dark' ? THEME.dark : THEME.light;
+}

package/src/patterns/MonthlyCalendarPattern.tsx

@@ -0,0 +1,404 @@
+import * as React from 'react';
+import { View, Text as RNText, ScrollView } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(View, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+cssInterop(ScrollView, { className: 'style' });
+
+const View_ = View as React.ComponentType<
+  React.ComponentProps<typeof View> & { className?: string }
+>;
+
+const Text_ = RNText as React.ComponentType<
+  React.ComponentProps<typeof RNText> & { className?: string }
+>;
+
+const ScrollView_ = ScrollView as React.ComponentType<
+  React.ComponentProps<typeof ScrollView> & { className?: string }
+>;
+
+// Design tokens from Figma
+const COLORS = {
+  textPrimary: '#121212',
+  textSecondary: '#6a7282',
+  textMuted: '#b4b8c1',
+  borderDefault: '#cbd5e1',
+  highlightBlue: '#4baabe',
+  highlightGreen: '#88b053',
+  highlightPurple: '#573dab',
+  highlightOrange: '#ed9035',
+  highlightPink: '#ea4a6b',
+  white: '#ffffff',
+  surfacePage: '#f7f8fa',
+};
+
+const SPACING = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  lg: 16,
+  xl: 20,
+  huge: 32,
+};
+
+const RADIUS = {
+  rounded: 48,
+};
+
+interface EventCategory {
+  id: string;
+  label: string;
+  color: string;
+}
+
+interface EventDot {
+  categoryId: string;
+}
+
+interface CalendarDate {
+  date: number;
+  events?: EventDot[];
+  isSelected?: boolean;
+  isEmpty?: boolean;
+  hasNoEvents?: boolean;
+}
+
+// Event categories with their associated colors
+const EVENT_CATEGORIES: EventCategory[] = [
+  { id: 'theory', label: 'Theory Class', color: COLORS.highlightBlue },
+  { id: 'practical', label: 'Practical', color: COLORS.highlightGreen },
+  { id: 'exam', label: 'Exam', color: COLORS.highlightPurple },
+  { id: 'submission', label: 'Submission', color: COLORS.highlightOrange },
+  { id: 'event', label: 'Event', color: COLORS.highlightPink },
+];
+
+const EventCategoryBadge: React.FC<{ category: EventCategory }> = ({
+  category,
+}) => (
+  <View_
+    style={{
+      flexDirection: 'row',
+      gap: SPACING.xs,
+      paddingHorizontal: SPACING.sm,
+      paddingVertical: SPACING.xs,
+      borderRadius: RADIUS.rounded,
+      borderWidth: 1,
+      borderColor: COLORS.borderDefault,
+      alignItems: 'center',
+    }}
+  >
+    <View_
+      style={{
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: category.color,
+      }}
+    />
+    <Text_
+      className="text-xs font-medium"
+      style={{ color: COLORS.textSecondary }}
+    >
+      {category.label}
+    </Text_>
+  </View_>
+);
+
+const EventDots: React.FC<{ events?: EventDot[] }> = ({ events }) => {
+  if (!events || events.length === 0) return null;
+
+  const displayEvents = events.slice(0, 3);
+  const overflow = Math.max(0, events.length - 3);
+
+  return (
+    <View_
+      style={{ flexDirection: 'row', alignItems: 'center', gap: 2, height: 8 }}
+    >
+      {displayEvents.map((event, idx) => {
+        const category = EVENT_CATEGORIES.find(
+          (c) => c.id === event.categoryId
+        );
+        return (
+          <View_
+            key={idx}
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: category?.color || COLORS.textSecondary,
+            }}
+          />
+        );
+      })}
+      {overflow > 0 && (
+        <Text_
+          className="text-2xs font-medium"
+          style={{ color: COLORS.textSecondary, marginLeft: 2 }}
+        >
+          +{overflow}
+        </Text_>
+      )}
+    </View_>
+  );
+};
+
+const CalendarItem: React.FC<{
+  date: CalendarDate;
+}> = ({ date }) => {
+  const { date: dateNum, events, isSelected, isEmpty, hasNoEvents } = date;
+
+  if (isEmpty) {
+    return (
+      <View_
+        style={{
+          width: 60,
+          height: 60,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      />
+    );
+  }
+
+  return (
+    <View_
+      style={{
+        width: 60,
+        height: 60,
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: SPACING.sm,
+      }}
+    >
+      {isSelected ? (
+        <View_
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: RADIUS.rounded,
+            backgroundColor: COLORS.highlightPurple,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Text_
+            className="font-semibold text-base text-center"
+            style={{ color: COLORS.white }}
+          >
+            {dateNum}
+          </Text_>
+        </View_>
+      ) : (
+        <Text_
+          className="font-semibold text-base text-center"
+          style={{ color: COLORS.textPrimary }}
+        >
+          {dateNum}
+        </Text_>
+      )}
+
+      {hasNoEvents ? (
+        <Text_
+          className="text-2xs font-medium text-center"
+          style={{ color: COLORS.textSecondary }}
+        >
+          No Events
+        </Text_>
+      ) : (
+        <EventDots events={events} />
+      )}
+    </View_>
+  );
+};
+
+const Divider: React.FC = () => (
+  <View_
+    style={{
+      height: 1,
+      backgroundColor: COLORS.borderDefault,
+      width: '100%',
+    }}
+  />
+);
+
+const DateRow: React.FC<{ dates: CalendarDate[] }> = ({ dates }) => (
+  <View_
+    style={{
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      width: '100%',
+    }}
+  >
+    {dates.map((date, idx) => (
+      <CalendarItem key={idx} date={date} />
+    ))}
+  </View_>
+);
+
+const MonthCalendar: React.FC<{ month: string }> = ({ month }) => {
+  const dateRows: CalendarDate[][] = [
+    [
+      { date: 29, isEmpty: true },
+      { date: 30, isEmpty: true },
+      { date: 31, isEmpty: true },
+      {
+        date: 1,
+        events: [{ categoryId: 'theory' }, { categoryId: 'practical' }],
+      },
+      {
+        date: 2,
+        events: [
+          { categoryId: 'theory' },
+          { categoryId: 'exam' },
+          { categoryId: 'practical' },
+        ],
+      },
+      {
+        date: 3,
+        events: [{ categoryId: 'theory' }, { categoryId: 'practical' }],
+      },
+      { date: 4, events: [{ categoryId: 'exam' }] },
+    ],
+    [
+      { date: 5, events: [{ categoryId: 'theory' }] },
+      { date: 6, events: [{ categoryId: 'exam' }] },
+      { date: 7 },
+      { date: 8 },
+      {
+        date: 9,
+        events: [{ categoryId: 'theory' }, { categoryId: 'practical' }],
+      },
+      { date: 10, events: [{ categoryId: 'exam' }] },
+      { date: 11, events: [{ categoryId: 'theory' }] },
+    ],
+    [
+      { date: 12 },
+      { date: 13, events: [{ categoryId: 'exam' }] },
+      { date: 14 },
+      { date: 15, events: [{ categoryId: 'exam' }] },
+      { date: 16, events: [{ categoryId: 'theory' }, { categoryId: 'exam' }] },
+      { date: 17 },
+      { date: 18, events: [{ categoryId: 'theory' }] },
+    ],
+    [
+      {
+        date: 19,
+        events: [{ categoryId: 'theory' }, { categoryId: 'practical' }],
+      },
+      { date: 20, hasNoEvents: true },
+      { date: 21, hasNoEvents: true },
+      { date: 22, hasNoEvents: true },
+      { date: 23, hasNoEvents: true },
+      { date: 24, events: [{ categoryId: 'exam' }] },
+      { date: 25 },
+    ],
+    [
+      { date: 26, isSelected: true, events: [{ categoryId: 'practical' }] },
+      { date: 27, events: [{ categoryId: 'exam' }, { categoryId: 'theory' }] },
+      {
+        date: 28,
+        events: [{ categoryId: 'theory' }, { categoryId: 'practical' }],
+      },
+      {
+        date: 29,
+        events: [
+          { categoryId: 'theory' },
+          { categoryId: 'practical' },
+          { categoryId: 'event' },
+        ],
+      },
+      { date: 30, events: [{ categoryId: 'exam' }] },
+      { date: 31 },
+      { date: 25, isEmpty: true },
+    ],
+  ];
+
+  return (
+    <View_ style={{ gap: SPACING.lg }}>
+      <View_
+        style={{ paddingHorizontal: SPACING.lg, paddingVertical: SPACING.xs }}
+      >
+        <Text_
+          className="font-semibold text-lg"
+          style={{ color: COLORS.textPrimary }}
+        >
+          {month}
+        </Text_>
+      </View_>
+
+      <View_ style={{ gap: SPACING.xs }}>
+        <View_
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            paddingHorizontal: SPACING.lg,
+          }}
+        >
+          {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
+            <View_ key={day} style={{ width: 60 }}>
+              <Text_
+                className="text-xs font-medium text-center"
+                style={{ color: COLORS.textMuted }}
+              >
+                {day}
+              </Text_>
+            </View_>
+          ))}
+        </View_>
+
+        <View_ style={{ gap: SPACING.lg }}>
+          {dateRows.map((row, rowIdx) => (
+            <React.Fragment key={rowIdx}>
+              <Divider />
+              <DateRow dates={row} />
+            </React.Fragment>
+          ))}
+        </View_>
+      </View_>
+    </View_>
+  );
+};
+
+export const MonthlyCalendarPattern: React.FC = () => {
+  return (
+    <ScrollView_
+      className="flex-1"
+      style={{ backgroundColor: COLORS.surfacePage }}
+    >
+      <View_
+        style={{
+          gap: SPACING.lg,
+          paddingVertical: SPACING.xl,
+        }}
+      >
+        {/* Event Category Badges */}
+        <ScrollView_
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={{
+            paddingHorizontal: SPACING.xl,
+            gap: SPACING.sm,
+          }}
+          contentContainerStyle={{
+            gap: SPACING.sm,
+          }}
+        >
+          {EVENT_CATEGORIES.map((category) => (
+            <EventCategoryBadge key={category.id} category={category} />
+          ))}
+        </ScrollView_>
+
+        {/* Months */}
+        <View_ style={{ gap: SPACING.huge }}>
+          <MonthCalendar month="January" />
+          <MonthCalendar month="February" />
+          <MonthCalendar month="March" />
+        </View_>
+      </View_>
+    </ScrollView_>
+  );
+};
+
+export default MonthlyCalendarPattern;

package/src/patterns/index.ts

@@ -0,0 +1,2 @@
+// Pattern Components
+export * from './pattern-components';

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

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { AlertDialogPattern } from './AlertDialogPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3663';
+
+/**
+ * AlertDialogPattern - Pattern component for modal alert dialogs
+ *
+ * Use cases:
+ * - Confirm destructive actions (delete, remove, clear)
+ * - Request critical user decisions
+ * - Alert users to important information requiring acknowledgment
+ * - System notifications requiring immediate response
+ *
+ * Features:
+ * - Modal overlay background
+ * - Configurable title and description
+ * - Confirm and optional cancel buttons
+ * - Intent variants (default and destructive)
+ * - Toggleable description and secondary action visibility
+ */
+figma.connect(AlertDialogPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,73 @@
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import {
+  AlertDialog,
+  type AlertDialogProps,
+} from '../../../components/Feedback/AlertDialog/Alert-Dialog';
+
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface AlertDialogPatternProps {
+  /** Alert dialog title */
+  title?: string;
+
+  /** Alert dialog description */
+  description?: string;
+
+  /** Intent/variant of the alert (default or destructive) */
+  intent?: AlertDialogProps['intent'];
+
+  /** Whether to show the description text */
+  showDescription?: boolean;
+
+  /** Whether to show the secondary (Cancel) action button */
+  showSecondaryAction?: boolean;
+
+  /** Callback when confirm button is pressed */
+  onConfirm?: () => void;
+
+  /** Callback when cancel button is pressed */
+  onCancel?: () => void;
+
+  /** Primary action button text */
+  confirmText?: string;
+
+  /** Secondary action button text */
+  cancelText?: string;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function AlertDialogPattern({
+  title = 'Are you absolutely sure?',
+  description = 'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
+  intent = 'default',
+  showDescription = true,
+  showSecondaryAction = true,
+  onConfirm: _onConfirm,
+  onCancel: _onCancel,
+  confirmText: _confirmText = 'Confirm',
+  cancelText: _cancelText = 'Cancel',
+}: AlertDialogPatternProps) {
+  return (
+    <View className="bg-[rgba(18,18,18,0.6)] content-stretch flex flex-col h-full items-center justify-center p-5">
+      <AlertDialog
+        title={title}
+        description={description}
+        intent={intent}
+        showDescription={showDescription}
+        showSecondaryAction={showSecondaryAction}
+      />
+    </View>
+  );
+}
+
+AlertDialogPattern.displayName = 'AlertDialogPattern';
+
+export default AlertDialogPattern;

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

@@ -0,0 +1,4 @@
+export {
+  AlertDialogPattern,
+  type AlertDialogPatternProps,
+} from './AlertDialogPattern';

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

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { AlertPattern } from './AlertPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3695';
+
+/**
+ * AlertPattern - Pattern component for displaying animated alerts
+ */
+figma.connect(AlertPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});