@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { View, Animated } from 'react-native';
+import { cssInterop } from 'nativewind';
+import {
+  Alert,
+  type AlertProps,
+} from '../../../components/Feedback/Alert/Alert';
+
+cssInterop(View, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface AlertPatternProps {
+  /** Alert title/message */
+  title?: string;
+
+  /** Alert description text */
+  description?: string;
+
+  /** Alert variant */
+  variant?: AlertProps['variant'];
+
+  /** Whether to show the close button */
+  showClose?: boolean;
+
+  /** Whether the alert is visible */
+  visible?: boolean;
+
+  /** Callback when close button is pressed */
+  onClose?: () => void;
+
+  /** Auto-dismiss duration in milliseconds (0 to disable) */
+  autoDismiss?: number;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function AlertPattern({
+  title = 'This is the Success Message',
+  description = 'Alert description goes here. It can be one or two lines.',
+  variant = 'success',
+  showClose = true,
+  visible = true,
+  onClose,
+  autoDismiss = 0,
+}: AlertPatternProps) {
+  const slideAnim = useRef(new Animated.Value(100)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+
+  const handleDismiss = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 100,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onClose?.();
+    });
+  }, [slideAnim, opacityAnim, onClose]);
+
+  useEffect(() => {
+    if (visible) {
+      // Slide up and fade in animation
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      // Auto-dismiss if duration is set
+      if (autoDismiss > 0) {
+        const timer = setTimeout(() => {
+          handleDismiss();
+        }, autoDismiss);
+        return () => clearTimeout(timer);
+      }
+      return undefined;
+    } else {
+      // Slide down and fade out animation
+      Animated.parallel([
+        Animated.timing(slideAnim, {
+          toValue: 100,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, autoDismiss, slideAnim, opacityAnim, handleDismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <View
+      className="absolute inset-0 pointer-events-none"
+      style={{
+        zIndex: 9999,
+      }}
+    >
+      {/* Semi-transparent overlay background */}
+      <Animated.View
+        className="absolute inset-0 bg-black/40"
+        style={{
+          opacity: opacityAnim,
+          pointerEvents: visible ? 'auto' : 'none',
+        }}
+      />
+
+      {/* Alert container at bottom */}
+      <View className="absolute bottom-0 left-0 right-0 p-4 pointer-events-none">
+        <Animated.View
+          style={{
+            transform: [{ translateY: slideAnim }],
+            opacity: opacityAnim,
+            pointerEvents: visible ? 'auto' : 'none',
+          }}
+        >
+          <Alert
+            title={title}
+            description={description}
+            variant={variant}
+            showCloseIcon={showClose}
+            onClose={handleDismiss}
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+}
+
+AlertPattern.displayName = 'AlertPattern';
+
+export default AlertPattern;

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

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

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

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { BottomSheetPattern } from './BottomSheetPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3608';
+
+/**
+ * BottomSheetPattern - Pattern component for bottom sheets
+ *
+ * Use cases:
+ * - Form inputs that slide up from bottom
+ * - Action sheets with form fields
+ * - Mobile-optimized data entry
+ * - Quick actions and settings panels
+ *
+ * Features:
+ * - Slides up from bottom of screen
+ * - Semi-transparent overlay background
+ * - Rounded top corners
+ * - Configurable title and description
+ * - Primary and secondary action buttons
+ * - Form fields and inputs
+ * - Drag-to-dismiss capability
+ */
+figma.connect(BottomSheetPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,66 @@
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { BottomSheetDefault } from '../../../components/Layout/Bottomsheet/Bottom-Sheet';
+
+// NativeWind interop
+cssInterop(View, { className: 'style' });
+const StyledView = View as any;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface BottomSheetPatternProps {
+  /** Bottom sheet title */
+  titleText?: string;
+
+  /** Bottom sheet description */
+  descriptionText?: string;
+
+  /** Whether to show header */
+  showHeader?: boolean;
+
+  /** Whether to show description */
+  showDescription?: boolean;
+
+  /** Whether to show footer */
+  showFooter?: boolean;
+
+  /** Whether dismissable */
+  dismissable?: boolean;
+
+  /** Content type for sheet body */
+  sheetContentType?: 'placeholder' | 'form' | 'text';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function BottomSheetPattern({
+  titleText = 'Bottom Sheet Title',
+  descriptionText = 'Bottom Sheet Description',
+  showHeader = true,
+  showDescription = true,
+  showFooter = true,
+  dismissable = true,
+  sheetContentType = 'placeholder',
+}: BottomSheetPatternProps) {
+  return (
+    <StyledView className="bg-[rgba(18,18,18,0.6)] content-stretch flex flex-col h-full justify-end">
+      <BottomSheetDefault
+        titleText={titleText}
+        descriptionText={descriptionText}
+        showHeader={showHeader}
+        showDescription={showDescription}
+        showFooter={showFooter}
+        dismissable={dismissable}
+        sheetContentType={sheetContentType}
+      />
+    </StyledView>
+  );
+}
+
+BottomSheetPattern.displayName = 'BottomSheetPattern';
+
+export default BottomSheetPattern;

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

@@ -0,0 +1,79 @@
+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';
+
+/**
+ * CalendarPattern - Daily schedule calendar view pattern
+ *
+ * Use cases:
+ * - Daily schedule displays
+ * - Calendar event views
+ * - Timetable layouts
+ * - Meeting schedules
+ *
+ * Features:
+ * - Date selector showing week view
+ * - Vertical scrolling timeline
+ * - Multiple calendar items with different time spans
+ * - Color-coded events
+ * - Optional badges and trailing icons
+ * - Room/location information
+ */
+figma.connect(CalendarPattern, FIGMA_URL, {
+  example: () => (
+    <CalendarPattern
+      events={[
+        {
+          id: '1',
+          title: 'Web Technologies',
+          startTime: '09:00 AM',
+          endTime: '09:50 AM',
+          span: 1,
+          showTrailing: true,
+          color: 'cyan',
+        },
+        {
+          id: '2',
+          title: 'Digital Logic Design Lab',
+          startTime: '10:00 AM',
+          endTime: '10:50 AM',
+          span: 3,
+          showTrailing: true,
+          color: 'green',
+        },
+        {
+          id: '3',
+          title: 'Electrical Networks',
+          startTime: '02:00 PM',
+          endTime: '02:50 PM',
+          span: 1,
+          showTrailing: false,
+          color: 'pink',
+        },
+        {
+          id: '4',
+          title: 'Internal Exam - Digital Logic Design',
+          startTime: '03:00 PM',
+          endTime: '03:50 PM',
+          span: 2,
+          showBadge: true,
+          badgeText: 'Room No. 504',
+          showTrailing: false,
+          color: 'purple',
+        },
+        {
+          id: '5',
+          title: 'Control Systems',
+          startTime: '05:00 PM',
+          endTime: '05:50 PM',
+          span: 1,
+          showTrailing: false,
+          color: 'orange',
+        },
+      ]}
+      selectedDate="Mon 20"
+    />
+  ),
+});

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

@@ -0,0 +1,200 @@
+import * as React from 'react';
+import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+import {
+  CalendarItem,
+  type CalendarItemProps,
+} from '../../../components/DataDisplay/CalendarItem/CalendarItem';
+import { Text } from '../../../components/Input/Text/Text';
+import { Button } from '../../../components/Input/Button/Button';
+import { cn } from '../../../lib/utils';
+
+cssInterop(View, { className: 'style' });
+cssInterop(ScrollView, { className: 'style' });
+
+const View_ = View as React.ComponentType<
+  React.ComponentProps<typeof View> & { className?: string }
+>;
+
+const ScrollView_ = ScrollView as React.ComponentType<
+  React.ComponentProps<typeof ScrollView> & { className?: string }
+>;
+
+/**
+ * Calendar Pattern Component
+ *
+ * A complete calendar daily schedule pattern with date selector and event list.
+ * Displays calendar events organized by date with interactive date selection.
+ */
+
+export interface DateItem {
+  day: string;
+  date: number;
+  isActive?: boolean;
+  isToday?: boolean;
+}
+
+export interface CalendarEventItem extends Omit<CalendarItemProps, 'time'> {
+  time: string;
+}
+
+export interface CalendarPatternProps {
+  /** Array of dates to display in the selector */
+  dates?: DateItem[];
+  /** Currently selected date */
+  selectedDate?: number;
+  /** Callback when date is selected */
+  onDateSelect?: (date: number) => void;
+  /** Array of calendar events to display */
+  events?: CalendarEventItem[];
+  /** Custom style override */
+  style?: StyleProp<ViewStyle>;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// Default dates for the pattern
+const DEFAULT_DATES: DateItem[] = [
+  { day: 'Mon', date: 18, isActive: false, isToday: false },
+  { day: 'Tue', date: 19, isActive: false, isToday: false },
+  { day: 'Wed', date: 20, isActive: true, isToday: false },
+  { day: 'Thu', date: 21, isActive: false, isToday: true },
+  { day: 'Fri', date: 22, isActive: false, isToday: false },
+  { day: 'Sat', date: 23, isActive: false, isToday: false },
+  { day: 'Sun', date: 24, isActive: false, isToday: false },
+  { day: 'Mon', date: 25, isActive: false, isToday: false },
+  { day: 'Tue', date: 26, isActive: false, isToday: false },
+];
+
+// Default events
+const DEFAULT_EVENTS: CalendarEventItem[] = [
+  {
+    time: '09:00 AM',
+    eventName: 'Web Technologies',
+    eventTime: '09:00 AM - 09:50 AM',
+    span: 1,
+    showBadge: false,
+    showTrailing: false,
+  },
+  {
+    time: '10:00 AM',
+    eventName: 'Digital Logic Design Lab',
+    eventTime: '10:00 AM - 11:30 AM',
+    span: 3,
+    showBadge: false,
+    showTrailing: true,
+    badgeText: 'Lab',
+  },
+  {
+    time: '02:00 PM',
+    eventName: 'Electrical Networks',
+    eventTime: '02:00 PM - 02:50 PM',
+    span: 1,
+    showBadge: false,
+    showTrailing: false,
+  },
+  {
+    time: '03:00 PM',
+    eventName: 'Internal Exam',
+    eventTime: '03:00 PM - 05:00 PM',
+    span: 2,
+    showBadge: true,
+    showTrailing: false,
+    badgeText: 'Room No. 504',
+  },
+  {
+    time: '05:00 PM',
+    eventName: 'Control Systems',
+    eventTime: '05:00 PM - 05:50 PM',
+    span: 1,
+    showBadge: false,
+    showTrailing: false,
+  },
+];
+
+export function CalendarPattern({
+  dates = DEFAULT_DATES,
+  selectedDate: _selectedDate = 20,
+  onDateSelect,
+  events = DEFAULT_EVENTS,
+  style,
+  testID,
+}: CalendarPatternProps) {
+  return (
+    <View_
+      testID={testID ?? 'calendar-pattern'}
+      style={style}
+      className={cn('flex-1 bg-surface-page')}
+    >
+      {/* Date Selector */}
+      <ScrollView_ horizontal className="bg-white px-3">
+        <View_ className="flex-row gap-3 py-3">
+          {dates.map((dateItem) => (
+            <Button
+              key={dateItem.date}
+              variant={
+                dateItem.isActive
+                  ? 'default'
+                  : dateItem.isToday
+                    ? 'outline'
+                    : 'ghost'
+              }
+              onPress={() => onDateSelect?.(dateItem.date)}
+              className={cn(
+                'w-12 h-auto rounded-lg px-3 py-2',
+                dateItem.isActive && 'bg-highlight-purple',
+                dateItem.isToday && 'border border-border'
+              )}
+            >
+              <View_ className="flex-col gap-0.5 items-center">
+                <Text
+                  className={cn(
+                    'text-xs font-medium',
+                    dateItem.isActive
+                      ? 'text-text-muted'
+                      : dateItem.isToday
+                        ? 'text-text-secondary'
+                        : 'text-text-secondary'
+                  )}
+                >
+                  {dateItem.day}
+                </Text>
+                <Text
+                  className={cn(
+                    'text-base font-semibold',
+                    dateItem.isActive ? 'text-white' : 'text-text-primary'
+                  )}
+                >
+                  {dateItem.date}
+                </Text>
+              </View_>
+            </Button>
+          ))}
+        </View_>
+      </ScrollView_>
+
+      {/* Events List */}
+      <ScrollView_ className="flex-1">
+        <View_ className="flex-col gap-4 px-5 py-4">
+          {events.map((event, index) => (
+            <CalendarItem
+              key={index}
+              time={event.time}
+              eventName={event.eventName}
+              eventTime={event.eventTime}
+              span={event.span}
+              showBadge={event.showBadge}
+              showTrailing={event.showTrailing}
+              badgeText={event.badgeText}
+            />
+          ))}
+        </View_>
+      </ScrollView_>
+    </View_>
+  );
+}
+
+CalendarPattern.displayName = 'CalendarPattern';
+
+export default CalendarPattern;

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

@@ -0,0 +1,61 @@
+import figma from '@figma/code-connect';
+import { CardListPattern } from './CardListPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3665';
+
+/**
+ * CardListPattern - Pattern component for card list with optional chips and banners
+ *
+ * Use cases:
+ * - Product catalog pages
+ * - Content cards with media
+ * - Article or blog post listings
+ * - E-commerce product grids
+ *
+ * Features:
+ * - Optional BannerRow at top
+ * - Optional ChipsRow for filtering
+ * - Card list with rich content (media, badges, actions)
+ */
+figma.connect(CardListPattern, FIGMA_URL, {
+  props: {
+    showChips: figma.boolean('Show Chips'),
+    showBanners: figma.boolean('Show Banners'),
+  },
+  example: (props) => (
+    <CardListPattern
+      showChips={props.showChips}
+      showBanners={props.showBanners}
+      banners={[{ id: '1' }, { id: '2' }]}
+      chips={[
+        { id: '1', label: 'Chip Title 1' },
+        { id: '2', label: 'Chip Title 2' },
+        { id: '3', label: 'Chip Title 3' },
+        { id: '4', label: 'Chip Title 4' },
+      ]}
+      data={[
+        {
+          id: '1',
+          title: 'Card Title',
+          subtitle: 'Subtitle of the card goes here',
+          body: 'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          badge1Text: 'Badge',
+          badge2Text: 'Badge',
+          primaryActionText: 'Button',
+          secondaryActionText: 'Button',
+        },
+        {
+          id: '2',
+          title: 'Card Title',
+          subtitle: 'Subtitle of the card goes here',
+          body: 'The card may contain body content which can be truncated to 1-2 lines. Swap Content in Props.',
+          badge1Text: 'Badge',
+          badge2Text: 'Badge',
+          primaryActionText: 'Button',
+          secondaryActionText: 'Button',
+        },
+      ]}
+    />
+  ),
+});