@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,139 @@
+import { View, ScrollView } from 'react-native';
+
+import {
+  ChipsRow,
+  type ChipItem,
+} from '../../../components/DataDisplay/ChipsRow/ChipsRow';
+import {
+  BannerRow,
+  type BannerItem,
+} from '../../../components/DataDisplay/BannerRow/BannerRow';
+import {
+  Card,
+  type CardProps,
+} from '../../../components/DataDisplay/Card/Card';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface CardItem {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  body?: string;
+  badge1Text?: string;
+  badge2Text?: string;
+  primaryActionText?: string;
+  secondaryActionText?: string;
+  showMedia?: boolean;
+  showSubtitle?: boolean;
+  showBadges?: boolean;
+  showFooterActions?: boolean;
+  showLeading?: boolean;
+  showOverflowMenu?: boolean;
+  onPrimaryActionPress?: () => void;
+  onSecondaryActionPress?: () => void;
+  onOverflowPress?: () => void;
+}
+
+export interface CardListPatternProps {
+  /** Whether to show the chips row */
+  showChips?: boolean;
+
+  /** Whether to show the banner row */
+  showBanners?: boolean;
+
+  /** Chips data for ChipsRow */
+  chips?: ChipItem[];
+
+  /** Banners data for BannerRow */
+  banners?: BannerItem[];
+
+  /** Data for CardList */
+  data: CardItem[];
+
+  /** Card density variant */
+  cardDensity?: CardProps['density'];
+
+  /** Card tone variant */
+  cardTone?: CardProps['tone'];
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * CardListPattern Component
+ *
+ * A pattern component that composes BannerRow, ChipsRow, and a list of Cards.
+ * BannerRow and ChipsRow visibility is controlled by boolean props.
+ *
+ * Order:
+ * 1. ChipsRow (optional)
+ * 2. BannerRow (optional)
+ * 3. Card list (always shown)
+ *
+ * @example
+ * ```tsx
+ * <CardListPattern
+ *   showBanners={true}
+ *   showChips={true}
+ *   banners={[{ id: '1' }, { id: '2' }]}
+ *   chips={[
+ *     { id: '1', label: 'Chip 1' },
+ *     { id: '2', label: 'Chip 2' },
+ *   ]}
+ *   data={[
+ *     { id: '1', title: 'Card Title', subtitle: 'Subtitle', body: 'Card body content' },
+ *   ]}
+ * />
+ * ```
+ */
+export const CardListPattern = ({
+  showChips = false,
+  showBanners = false,
+  chips = [],
+  banners = [],
+  data,
+  cardDensity = 'comfortable',
+  cardTone = 'default',
+}: CardListPatternProps) => {
+  return (
+    <View style={{ flex: 1, gap: 16 }}>
+      {showChips && chips.length > 0 && <ChipsRow chips={chips} />}
+      {showBanners && banners.length > 0 && <BannerRow banners={banners} />}
+      <ScrollView
+        contentContainerStyle={{ gap: 16, paddingHorizontal: 16 }}
+        showsVerticalScrollIndicator={false}
+      >
+        {data.map((item) => (
+          <Card
+            key={item.id}
+            title={item.title}
+            subtitle={item.subtitle}
+            body={item.body}
+            badge1Text={item.badge1Text}
+            badge2Text={item.badge2Text}
+            primaryActionText={item.primaryActionText}
+            secondaryActionText={item.secondaryActionText}
+            showMedia={item.showMedia ?? true}
+            showSubtitle={item.showSubtitle ?? true}
+            showBadges={item.showBadges ?? true}
+            showFooterActions={item.showFooterActions ?? true}
+            showLeading={item.showLeading ?? true}
+            showOverflowMenu={item.showOverflowMenu ?? true}
+            density={cardDensity}
+            tone={cardTone}
+            onPrimaryActionPress={item.onPrimaryActionPress}
+            onSecondaryActionPress={item.onSecondaryActionPress}
+            onOverflowPress={item.onOverflowPress}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+CardListPattern.displayName = 'CardListPattern';

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

@@ -0,0 +1,2 @@
+export { CardListPattern } from './CardListPattern';
+export type { CardListPatternProps, CardItem } from './CardListPattern';

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

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { DashboardPattern } from './DashboardPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3697';
+
+/**
+ * DashboardPattern - Analytics dashboard layout pattern
+ *
+ * Use cases:
+ * - Analytics dashboards
+ * - Metrics and KPI displays
+ * - Data visualization layouts
+ * - Admin panels
+ *
+ * Features:
+ * - Data cards grid (2x2) showing key metrics
+ * - Bar chart section for categorical comparisons
+ * - Line chart section for trend analysis
+ * - Configurable section visibility and labels
+ *
+ * Note: Chart visualizations are placeholders. Integrate with your preferred
+ * charting library (e.g., react-native-chart-kit, victory-native).
+ */
+figma.connect(DashboardPattern, FIGMA_URL, {
+  example: () => (
+    <DashboardPattern
+      showDataCardsSection={true}
+      dataCardsSectionLabel="Section Label"
+      dataCards={[
+        { title: 'Data Card Title', value: 'Value' },
+        { title: 'Data Card Title', value: 'Value' },
+        { title: 'Data Card Title', value: 'Value' },
+        { title: 'Data Card Title', value: 'Value' },
+      ]}
+      showBarChartSection={true}
+      barChartSectionLabel="Section Label"
+      barChartTitle="Bar Chart - Active"
+      barChartSubtitle="January - June 2024"
+      barChartTrend="Trending up by 5.2% this month"
+      barChartTrendDescription="Showing total visitors for the last 6 months"
+      showLineChartSection={true}
+      lineChartSectionLabel="Section Label"
+      lineChartTitle="Line Chart - Dots"
+      lineChartSubtitle="January - June 2024"
+      lineChartTrend="Trending up by 5.2% this month"
+      lineChartTrendDescription="Showing total visitors for the last 6 months"
+    />
+  ),
+});

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

@@ -0,0 +1,295 @@
+import { View, Text as RNText } from 'react-native';
+
+import { DataCard } from '../../../components/DataDisplay/DataCard/DataCard';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface DashboardPatternProps {
+  // Data Cards Section
+  showDataCardsSection?: boolean;
+  dataCardsSectionLabel?: string;
+  dataCards?: Array<{
+    title?: string;
+    value?: string;
+  }>;
+
+  // Bar Chart Section
+  showBarChartSection?: boolean;
+  barChartSectionLabel?: string;
+  barChartTitle?: string;
+  barChartSubtitle?: string;
+  barChartTrend?: string;
+  barChartTrendDescription?: string;
+
+  // Line Chart Section
+  showLineChartSection?: boolean;
+  lineChartSectionLabel?: string;
+  lineChartTitle?: string;
+  lineChartSubtitle?: string;
+  lineChartTrend?: string;
+  lineChartTrendDescription?: string;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * DashboardPattern Component
+ *
+ * A comprehensive dashboard layout pattern that combines multiple data visualization
+ * components to create a cohesive analytics dashboard.
+ *
+ * Layout:
+ * 1. Data Cards grid (2x2) - Key metrics
+ * 2. Bar Chart section - Categorical data comparison
+ * 3. Line Chart section - Time series trends
+ *
+ * @example
+ * ```tsx
+ * <DashboardPattern
+ *   showDataCardsSection={true}
+ *   showBarChartSection={true}
+ *   showLineChartSection={true}
+ * />
+ * ```
+ */
+export const DashboardPattern = ({
+  // Data Cards Section
+  showDataCardsSection = true,
+  dataCardsSectionLabel = 'Section Label',
+  dataCards = [
+    { title: 'Data Card Title', value: 'Value' },
+    { title: 'Data Card Title', value: 'Value' },
+    { title: 'Data Card Title', value: 'Value' },
+    { title: 'Data Card Title', value: 'Value' },
+  ],
+
+  // Bar Chart Section
+  showBarChartSection = true,
+  barChartSectionLabel = 'Section Label',
+  barChartTitle = 'Bar Chart - Active',
+  barChartSubtitle = 'January - June 2024',
+  barChartTrend = 'Trending up by 5.2% this month',
+  barChartTrendDescription = 'Showing total visitors for the last 6 months',
+
+  // Line Chart Section
+  showLineChartSection = true,
+  lineChartSectionLabel = 'Section Label',
+  lineChartTitle = 'Line Chart - Dots',
+  lineChartSubtitle = 'January - June 2024',
+  lineChartTrend = 'Trending up by 5.2% this month',
+  lineChartTrendDescription = 'Showing total visitors for the last 6 months',
+}: DashboardPatternProps) => {
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Data Cards Section */}
+      {showDataCardsSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {dataCardsSectionLabel}
+          </RNText>
+
+          {/* Data Cards Grid (2x2) */}
+          <View
+            style={{
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: 12,
+              width: '100%',
+            }}
+          >
+            {dataCards.map((card, index) => (
+              <View key={`data-card-${index}`} style={{ width: '48%' }}>
+                <DataCard title={card.title} value={card.value} />
+              </View>
+            ))}
+          </View>
+        </View>
+      )}
+
+      {/* Bar Chart Section */}
+      {showBarChartSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {barChartSectionLabel}
+          </RNText>
+
+          {/* Chart Card */}
+          <View
+            style={{
+              backgroundColor: '#ffffff',
+              borderRadius: 12,
+              borderWidth: 1,
+              borderColor: '#e5e7eb',
+              padding: 16,
+              gap: 12,
+            }}
+          >
+            <RNText
+              style={{
+                fontSize: 16,
+                fontWeight: '600',
+                color: '#121212',
+              }}
+            >
+              {barChartTitle}
+            </RNText>
+
+            <RNText
+              style={{
+                fontSize: 14,
+                color: '#6a7282',
+              }}
+            >
+              {barChartSubtitle}
+            </RNText>
+
+            {/* Chart Placeholder */}
+            <View
+              style={{
+                height: 200,
+                backgroundColor: '#f7f8fa',
+                borderRadius: 8,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <RNText style={{ color: '#9ca3af', fontSize: 12 }}>
+                Bar Chart Visualization
+              </RNText>
+            </View>
+
+            {/* Trend Info */}
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+            >
+              <RNText
+                style={{
+                  fontSize: 14,
+                  fontWeight: '500',
+                  color: '#121212',
+                }}
+              >
+                {barChartTrend}
+              </RNText>
+            </View>
+
+            <RNText
+              style={{
+                fontSize: 14,
+                color: '#6a7282',
+              }}
+            >
+              {barChartTrendDescription}
+            </RNText>
+          </View>
+        </View>
+      )}
+
+      {/* Line Chart Section */}
+      {showLineChartSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {lineChartSectionLabel}
+          </RNText>
+
+          {/* Chart Card */}
+          <View
+            style={{
+              backgroundColor: '#ffffff',
+              borderRadius: 12,
+              borderWidth: 1,
+              borderColor: '#e5e7eb',
+              padding: 16,
+              gap: 12,
+            }}
+          >
+            <RNText
+              style={{
+                fontSize: 16,
+                fontWeight: '600',
+                color: '#121212',
+              }}
+            >
+              {lineChartTitle}
+            </RNText>
+
+            <RNText
+              style={{
+                fontSize: 14,
+                color: '#6a7282',
+              }}
+            >
+              {lineChartSubtitle}
+            </RNText>
+
+            {/* Chart Placeholder */}
+            <View
+              style={{
+                height: 200,
+                backgroundColor: '#f7f8fa',
+                borderRadius: 8,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <RNText style={{ color: '#9ca3af', fontSize: 12 }}>
+                Line Chart Visualization
+              </RNText>
+            </View>
+
+            {/* Trend Info */}
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
+            >
+              <RNText
+                style={{
+                  fontSize: 14,
+                  fontWeight: '500',
+                  color: '#121212',
+                }}
+              >
+                {lineChartTrend}
+              </RNText>
+            </View>
+
+            <RNText
+              style={{
+                fontSize: 14,
+                color: '#6a7282',
+              }}
+            >
+              {lineChartTrendDescription}
+            </RNText>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+DashboardPattern.displayName = 'DashboardPattern';

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

@@ -0,0 +1,45 @@
+import figma from '@figma/code-connect';
+import { DataListPattern } from './DataListPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3592';
+
+/**
+ * DataListPattern - Pattern component for data list with optional chips and banners
+ *
+ * Use cases:
+ * - List pages with filtering chips
+ * - List pages with promotional banners
+ * - Contact lists, product lists, etc.
+ *
+ * Features:
+ * - Optional BannerRow at top
+ * - Optional ChipsRow for filtering
+ * - DataList always visible
+ */
+figma.connect(DataListPattern, FIGMA_URL, {
+  props: {
+    showChips: figma.boolean('Show Chips'),
+    showBanners: figma.boolean('Show Banners'),
+  },
+  example: (props) => (
+    <DataListPattern
+      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={[
+        { name: 'Mark Anthony', subtitle: '237237823', avatarUrl: '' },
+        { name: 'Marshall Mathers', subtitle: '4732428323', avatarUrl: '' },
+        { name: 'Roy Harper', subtitle: '3435343434', avatarUrl: '' },
+        { name: 'Denzel Washington', subtitle: '4348783423', avatarUrl: '' },
+        { name: 'Monica Bellucci', subtitle: '342323243', avatarUrl: '' },
+      ]}
+    />
+  ),
+});

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

@@ -0,0 +1,88 @@
+import { View } from 'react-native';
+
+import {
+  ChipsRow,
+  type ChipItem,
+} from '../../../components/DataDisplay/ChipsRow/ChipsRow';
+import {
+  BannerRow,
+  type BannerItem,
+} from '../../../components/DataDisplay/BannerRow/BannerRow';
+import {
+  DataList,
+  type DataListProps,
+} from '../../../components/DataDisplay/Datalist/Datalist';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface DataListPatternProps {
+  /** Whether to show the chips row */
+  showChips?: boolean;
+
+  /** Whether to show the banner row */
+  showBanners?: boolean;
+
+  /** Chips data for ChipsRow */
+  chips?: ChipItem[];
+
+  /** Banners data for BannerRow */
+  banners?: BannerItem[];
+
+  /** Data for DataList */
+  data: DataListProps['data'];
+
+  /** Style variant for DataList */
+  listStyle?: DataListProps['style'];
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * DataListPattern Component
+ *
+ * A pattern component that composes BannerRow, ChipsRow, and DataList.
+ * BannerRow and ChipsRow visibility is controlled by boolean props.
+ *
+ * Order:
+ * 1. BannerRow (optional)
+ * 2. ChipsRow (optional)
+ * 3. DataList (always shown)
+ *
+ * @example
+ * ```tsx
+ * <DataListPattern
+ *   showBanners={true}
+ *   showChips={true}
+ *   banners={[{ id: '1' }, { id: '2' }]}
+ *   chips={[
+ *     { id: '1', label: 'Chip 1' },
+ *     { id: '2', label: 'Chip 2' },
+ *   ]}
+ *   data={[
+ *     { name: 'John Doe', subtitle: '123456789', avatarUrl: '' },
+ *   ]}
+ * />
+ * ```
+ */
+export const DataListPattern = ({
+  showChips = false,
+  showBanners = false,
+  chips = [],
+  banners = [],
+  data,
+  listStyle,
+}: DataListPatternProps) => {
+  return (
+    <View style={{ gap: 16 }}>
+      {showBanners && banners.length > 0 && <BannerRow banners={banners} />}
+      {showChips && chips.length > 0 && <ChipsRow chips={chips} />}
+      <DataList data={data} style={listStyle} />
+    </View>
+  );
+};
+
+DataListPattern.displayName = 'DataListPattern';

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

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

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

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import { DialogPattern } from './DialogPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3606';
+
+/**
+ * DialogPattern - Pattern component for modal dialogs
+ *
+ * Use cases:
+ * - Form dialogs with multiple input fields
+ * - Multi-step workflows in modal context
+ * - Content-heavy dialogs with scrolling
+ * - Data entry and editing forms
+ *
+ * Features:
+ * - Modal overlay background
+ * - Centered dialog positioning
+ * - Configurable title and description
+ * - Primary and secondary action buttons
+ * - Form fields and inputs
+ * - Close button in top right
+ */
+figma.connect(DialogPattern, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});