@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { EntityPatternStructured } from './EntityPatternStructured';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3620';
+
+/**
+ * EntityPatternStructured - Pattern component combining Card, Accordion, AccordionItem, and Buttons
+ *
+ * Use cases:
+ * - Structured entity/profile pages with collapsible sections
+ * - Settings and preferences screens with grouped options
+ * - FAQ or documentation layouts
+ * - Entity management interfaces with expandable details
+ *
+ * Features:
+ * - Composed of Card and Accordion components
+ * - Configurable visibility for all sections
+ * - Flexible accordion item count
+ * - Optional footer action buttons
+ */
+figma.connect(EntityPatternStructured, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,187 @@
+import { View, Text as RNText } from 'react-native';
+
+import {
+  Card,
+  type CardProps,
+} from '../../../components/DataDisplay/Card/Card';
+import {
+  Accordion,
+  type AccordionProps,
+} from '../../../components/DataDisplay/Accordion/Accordion';
+import {
+  AccordionItem,
+  type AccordionItemProps,
+} from '../../../components/DataDisplay/AccordionItem/AccordionItem';
+import { Button } from '../../../components/Input/Button/Button';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface EntityPatternStructuredProps
+  extends Partial<CardProps>,
+    Partial<AccordionProps>,
+    Partial<AccordionItemProps> {
+  // Card visibility
+  showCard?: boolean;
+
+  // Accordion section visibility
+  showAccordionSection?: boolean;
+  accordionSectionLabel?: string;
+
+  // Accordion items
+  showAccordionItems?: boolean;
+  accordionItemCount?: number;
+
+  // Footer actions
+  showFooterActions?: boolean;
+  primaryActionText?: string;
+  secondaryActionText?: string;
+  onPrimaryActionPress?: () => void;
+  onSecondaryActionPress?: () => void;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * EntityPatternStructured Component
+ *
+ * A pattern component that combines Card, Accordion, AccordionItem, and Button components
+ * to create structured entity layouts with collapsible sections.
+ *
+ * Layout:
+ * 1. Card section (optional - header with title, subtitle, badges, leading)
+ * 2. Accordion section (optional - titled section with accordion items)
+ * 3. Footer actions (optional - primary and secondary buttons)
+ *
+ * @example
+ * ```tsx
+ * <EntityPatternStructured
+ *   title="Entity Title"
+ *   subtitle="Entity Subtitle"
+ *   showCard={true}
+ *   showAccordionSection={true}
+ *   accordionItemCount={3}
+ *   showFooterActions={true}
+ * />
+ * ```
+ */
+export const EntityPatternStructured = ({
+  // Card props
+  title = 'Card Title',
+  subtitle = 'Subtitle of the card goes here',
+  showCard = true,
+  showMedia = false,
+  showSubtitle = true,
+  showLeading = true,
+  showBadges = true,
+
+  // Accordion section
+  showAccordionSection = true,
+  accordionSectionLabel = 'Section Label',
+
+  // Accordion items
+  showAccordionItems = true,
+  accordionItemCount = 3,
+  spacing = 'default',
+  state = 'open',
+  type = 'multiple',
+
+  // AccordionItem props
+  accordianTitle = 'Accordian',
+  accordianSubtitle = 'This is the Accordian Subtitle. Any Content related to the drop down can be placed here.',
+
+  // Footer actions
+  showFooterActions = true,
+  primaryActionText = 'Primary Action',
+  secondaryActionText = 'Secondary Action',
+  onPrimaryActionPress,
+  onSecondaryActionPress,
+
+  ...restProps
+}: EntityPatternStructuredProps) => {
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Card Section */}
+      {showCard && (
+        <Card
+          title={title}
+          subtitle={subtitle}
+          showMedia={showMedia}
+          showSubtitle={showSubtitle}
+          showLeading={showLeading}
+          showBadges={showBadges}
+          showFooterActions={false}
+          showOverflowMenu={false}
+          showBody={false}
+          {...(restProps as CardProps)}
+        />
+      )}
+
+      {/* Accordion Section */}
+      {showAccordionSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {accordionSectionLabel}
+          </RNText>
+
+          {/* Accordion Items */}
+          {showAccordionItems && (
+            <Accordion
+              spacing={spacing as any}
+              state={state as any}
+              type={type as any}
+              {...(restProps as AccordionProps)}
+            >
+              {Array.from({ length: accordionItemCount }).map((_, i) => (
+                <AccordionItem
+                  key={`accordion-item-${i}`}
+                  accordianTitle={accordianTitle}
+                  accordianSubtitle={accordianSubtitle}
+                  state="close"
+                  {...(restProps as AccordionItemProps)}
+                />
+              ))}
+            </Accordion>
+          )}
+        </View>
+      )}
+
+      {/* Footer Actions */}
+      {showFooterActions && (
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          <View style={{ flex: 1 }}>
+            <Button
+              variant="secondary"
+              size="default"
+              onPress={onSecondaryActionPress}
+            >
+              {secondaryActionText}
+            </Button>
+          </View>
+
+          <View style={{ flex: 1 }}>
+            <Button
+              variant="default"
+              size="default"
+              onPress={onPrimaryActionPress}
+            >
+              {primaryActionText}
+            </Button>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+EntityPatternStructured.displayName = 'EntityPatternStructured';

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

@@ -0,0 +1,2 @@
+export * from './EntityPatternStructured';
+export type { EntityPatternStructuredProps } from './EntityPatternStructured';

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { FormPattern } from './FormPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3654';
+
+/**
+ * FormPattern - Pattern component combining form fields
+ *
+ * Use cases:
+ * - User registration and login forms
+ * - Settings and preference forms
+ * - Data entry and configuration screens
+ * - Multi-field form layouts
+ *
+ * Features:
+ * - Composed of Select, TextField, and Button components
+ * - Each component maintains its own Code Connect configuration
+ * - Flexible form layouts
+ * - Reusable pattern for consistent form experiences
+ */
+figma.connect(FormPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,138 @@
+import { View } from 'react-native';
+
+import { TextField } from '../../../components/Input/TextField/Textfield';
+import { Select } from '../../../components/Input/Select/Select';
+import { Button } from '../../../components/Input/Button/Button';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface FormPatternProps {
+  // Select props
+  showSelectLabel?: boolean;
+  showSelectHelpText?: boolean;
+  showSelectLeftIcon?: boolean;
+
+  // TextField props
+  showTextFieldLabel?: boolean;
+  showTextFieldHelpText?: boolean;
+  showTextFieldLeftIcon?: boolean;
+  showTextFieldRightIcon?: boolean;
+
+  // TextField state variants
+  textFieldState?: 'default' | 'focused' | 'error' | 'success' | 'disabled';
+  textFieldContent?: 'filled' | 'placeholder';
+  textFieldType?: 'text' | 'search' | 'ai' | 'composer';
+
+  // Action buttons
+  showSecondaryButton?: boolean;
+  showPrimaryButton?: boolean;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * FormPattern Component
+ *
+ * A pattern component that composes Select and TextField components to create
+ * common form layouts.
+ *
+ * Layout:
+ * 1. Select field (with optional label and help text)
+ * 2. TextField field (with optional label and help text)
+ * 3. Action buttons row (optional primary/secondary buttons)
+ *
+ * @example
+ * ```tsx
+ * <FormPattern
+ *   showSelectLabel={true}
+ *   showSelectHelpText={true}
+ *   showTextFieldLabel={true}
+ *   showTextFieldHelpText={true}
+ *   textFieldState="default"
+ *   showPrimaryButton={true}
+ * />
+ * ```
+ */
+export const FormPattern = ({
+  // Select props
+  showSelectLabel = true,
+  showSelectHelpText = true,
+  showSelectLeftIcon = false,
+
+  // TextField props
+  showTextFieldLabel = true,
+  showTextFieldHelpText = true,
+  showTextFieldLeftIcon = false,
+  showTextFieldRightIcon = false,
+
+  // TextField state
+  textFieldState = 'default',
+  textFieldContent = 'placeholder',
+  textFieldType = 'text',
+
+  // Action buttons
+  showSecondaryButton = true,
+  showPrimaryButton = true,
+}: FormPatternProps) => {
+  return (
+    <View style={{ gap: 16 }}>
+      {/* Select Field */}
+      <Select
+        state="default"
+        open="false"
+        value="placeholder"
+        showLabel={showSelectLabel}
+        showHelpText={showSelectHelpText}
+        showLeftIcon={showSelectLeftIcon}
+        label="Select Field"
+        helperText="Choose an option"
+        placeholderText="Select an item"
+      />
+
+      {/* TextField */}
+      <TextField
+        state={textFieldState}
+        content={textFieldContent}
+        type={textFieldType}
+        showLabel={showTextFieldLabel}
+        showHelpText={showTextFieldHelpText}
+        showLeftIcon={showTextFieldLeftIcon}
+        showRightIcon={showTextFieldRightIcon}
+        label="Text Field"
+        helpText="Enter text here"
+        errorMessage="This field has an error"
+        successMessage="This field is valid"
+        inputProps={{
+          placeholder: 'Enter text',
+        }}
+      />
+
+      {/* Action Buttons Row */}
+      {(showSecondaryButton || showPrimaryButton) && (
+        <View style={{ flexDirection: 'row', gap: 12, marginTop: 8 }}>
+          {showSecondaryButton && (
+            <View style={{ flex: 1 }}>
+              <Button variant="secondary" size="md">
+                Cancel
+              </Button>
+            </View>
+          )}
+
+          {showPrimaryButton && (
+            <View style={{ flex: 1 }}>
+              <Button variant="primary" size="md">
+                Submit
+              </Button>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+FormPattern.displayName = 'FormPattern';

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

@@ -0,0 +1,2 @@
+export * from './FormPattern';
+export type { FormPatternProps } from './FormPattern';

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

@@ -0,0 +1,39 @@
+import figma from '@figma/code-connect';
+import { MonthlyCalendarPattern } from './MonthlyCalendarPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=326-8692';
+
+/**
+ * MonthlyCalendarPattern - Pattern component for displaying multiple months with event legend
+ *
+ * Use cases:
+ * - Academic calendars showing classes, exams, and submissions
+ * - Event calendars with different event types color-coded
+ * - Scheduling applications with multi-month views
+ * - Calendar-based itineraries and planning tools
+ *
+ * Features:
+ * - Legend badges showing event types with color indicators
+ * - Multiple MonthCalendar components
+ * - Customizable event types and colors
+ * - Support for event dots and count badges per date
+ */
+figma.connect(MonthlyCalendarPattern, FIGMA_URL, {
+  props: {
+    showLegend: figma.boolean('Show Legend'),
+  },
+  example: (props) => (
+    <MonthlyCalendarPattern
+      months={['January', 'February', 'March']}
+      showLegend={props.showLegend}
+      legendItems={[
+        { label: 'Theory Class', color: '#4baabe' },
+        { label: 'Practical', color: '#88b053' },
+        { label: 'Exam', color: '#573dab' },
+        { label: 'Submission', color: '#ed9035' },
+        { label: 'Event', color: '#e74c3c' },
+      ]}
+    />
+  ),
+});

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

@@ -0,0 +1,139 @@
+import { View, Text as RNText } from 'react-native';
+import { MonthCalendar } from '../../../components/DataDisplay/MonthCalendar/MonthCalendar';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface LegendItemProps {
+  label: string;
+  color: string;
+}
+
+export interface MonthlyCalendarPatternProps {
+  /** Months to display */
+  months?: string[];
+
+  /** Whether to show legend */
+  showLegend?: boolean;
+
+  /** Custom legend items */
+  legendItems?: LegendItemProps[];
+
+  /** Spacing between elements */
+  spacing?: number;
+}
+
+/* -----------------------------------------------------
+ * Sub-Components
+ * --------------------------------------------------- */
+
+const LegendBadge: React.FC<LegendItemProps> = ({ label, color }) => (
+  <View
+    style={{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: 8,
+      backgroundColor: '#ffffff',
+      borderWidth: 1,
+      borderColor: '#cbd5e1',
+    }}
+  >
+    <View
+      style={{
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: color,
+      }}
+    />
+    <RNText
+      style={{
+        color: '#121212',
+        fontSize: 12,
+        fontWeight: '500',
+      }}
+      numberOfLines={1}
+    >
+      {label}
+    </RNText>
+  </View>
+);
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * MonthlyCalendarPattern Component
+ *
+ * A pattern component that displays multiple months with an event legend.
+ *
+ * Layout:
+ * 1. Legend badges (optional) showing event types
+ * 2. Multiple MonthCalendar components for different months
+ *
+ * @example
+ * ```tsx
+ * <MonthlyCalendarPattern
+ *   months={['January', 'February', 'March']}
+ *   showLegend={true}
+ *   legendItems={[
+ *     { label: 'Theory Class', color: '#4baabe' },
+ *     { label: 'Practical', color: '#88b053' },
+ *   ]}
+ * />
+ * ```
+ */
+export const MonthlyCalendarPattern = ({
+  months = ['January', 'February', 'March'],
+  showLegend = true,
+  legendItems = [
+    { label: 'Theory Class', color: '#4baabe' },
+    { label: 'Practical', color: '#88b053' },
+    { label: 'Exam', color: '#573dab' },
+    { label: 'Submission', color: '#ed9035' },
+    { label: 'Event', color: '#e74c3c' },
+  ],
+  spacing = 16,
+}: MonthlyCalendarPatternProps) => {
+  return (
+    <View style={{ gap: spacing }}>
+      {/* Legend Section */}
+      {showLegend && (
+        <View
+          style={{
+            paddingHorizontal: spacing,
+            gap: 8,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: 8,
+            }}
+          >
+            {legendItems.map((item, idx) => (
+              <LegendBadge key={idx} {...item} />
+            ))}
+          </View>
+        </View>
+      )}
+
+      {/* Calendars Section */}
+      {months.map((month, idx) => (
+        <View key={idx}>
+          <MonthCalendar month={month} />
+        </View>
+      ))}
+    </View>
+  );
+};
+
+MonthlyCalendarPattern.displayName = 'MonthlyCalendarPattern';
+
+export default MonthlyCalendarPattern;

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

@@ -0,0 +1,5 @@
+export {
+  MonthlyCalendarPattern,
+  type MonthlyCalendarPatternProps,
+} from './MonthlyCalendarPattern';
+export { default } from './MonthlyCalendarPattern';

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { SkeletonPattern } from './SkeletonPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3640';
+
+/**
+ * SkeletonPattern - Pattern component for loading placeholders
+ *
+ * Use cases:
+ * - Page loading states
+ * - Content placeholders while fetching data
+ * - Card and list item loading states
+ * - Skeleton screens for improved perceived performance
+ *
+ * Features:
+ * - Composed of multiple Skeleton components
+ * - Shows typical content structure (header, avatar, text, footer)
+ * - Configurable by swapping individual Skeleton instances
+ * - Reusable pattern for consistent loading states
+ */
+figma.connect(SkeletonPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,100 @@
+import { View } from 'react-native';
+
+import { Skeleton } from '../../../components/DataDisplay/Skeleton/Skeleton';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface SkeletonPatternProps {
+  /** Whether to show the large header skeleton */
+  showHeader?: boolean;
+
+  /** Whether to show the avatar and text skeleton */
+  showAvatarWithText?: boolean;
+
+  /** Whether to show the text lines skeleton */
+  showTextLines?: boolean;
+
+  /** Number of text lines to show */
+  textLineCount?: number;
+
+  /** Whether to show footer skeleton */
+  showFooter?: boolean;
+
+  /** Custom spacing between skeleton items */
+  spacing?: number;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * SkeletonPattern Component
+ *
+ * A pattern component that composes multiple Skeleton variants to create
+ * common loading placeholder layouts.
+ *
+ * Order:
+ * 1. Large header rectangle (optional)
+ * 2. Avatar circle with text line (optional)
+ * 3. Multiple text lines (optional)
+ * 4. Footer rectangle (optional)
+ *
+ * @example
+ * ```tsx
+ * <SkeletonPattern
+ *   showHeader={true}
+ *   showAvatarWithText={true}
+ *   showTextLines={true}
+ *   textLineCount={4}
+ *   showFooter={true}
+ * />
+ * ```
+ */
+export const SkeletonPattern = ({
+  showHeader = true,
+  showAvatarWithText = true,
+  showTextLines = true,
+  textLineCount = 4,
+  showFooter = true,
+  spacing = 16,
+}: SkeletonPatternProps) => {
+  return (
+    <View style={{ gap: spacing }}>
+      {/* Large header rectangle */}
+      {showHeader && <Skeleton variant="rectangle" size="lg" />}
+
+      {/* Avatar with text */}
+      {showAvatarWithText && (
+        <View
+          style={{ flexDirection: 'row', gap: 8, alignItems: 'flex-start' }}
+        >
+          {/* Avatar circle */}
+          <Skeleton variant="circle" size="xl" />
+
+          {/* Text lines */}
+          <View style={{ flex: 1, gap: 8 }}>
+            <Skeleton variant="text" size="lg" />
+            <Skeleton variant="text" size="md" />
+          </View>
+        </View>
+      )}
+
+      {/* Multiple text lines */}
+      {showTextLines && (
+        <View style={{ gap: 8 }}>
+          {Array.from({ length: textLineCount }).map((_, i) => (
+            <Skeleton key={`skeleton-text-${i}`} variant="text" size="lg" />
+          ))}
+        </View>
+      )}
+
+      {/* Footer rectangle */}
+      {showFooter && <Skeleton variant="rectangle" size="md" />}
+    </View>
+  );
+};
+
+SkeletonPattern.displayName = 'SkeletonPattern';