@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,71 @@
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Dialog } from '../../../components/Navigation/Dialog/Dialog';
+
+// NativeWind interop
+cssInterop(View, { className: 'style' });
+const StyledView = View as any;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface DialogPatternProps {
+  /** Dialog title */
+  title?: string;
+
+  /** Dialog description */
+  description?: string;
+
+  /** Whether to show dialog header */
+  showDialogHeader?: boolean;
+
+  /** Whether to show title */
+  showTitle?: boolean;
+
+  /** Whether to show description */
+  showDescription?: boolean;
+
+  /** Whether to show close icon */
+  showCloseIcon?: boolean;
+
+  /** Whether to show footer actions */
+  showFooterActions?: boolean;
+
+  /** Content type for dialog body */
+  dialogContentType?: 'placeholder' | 'form' | 'text' | 'list';
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function DialogPattern({
+  title = 'Dialog Title',
+  description = 'Dialog Description goes here.',
+  showDialogHeader = true,
+  showTitle = true,
+  showDescription = true,
+  showCloseIcon = true,
+  showFooterActions = true,
+  dialogContentType = 'placeholder',
+}: DialogPatternProps) {
+  return (
+    <StyledView className="bg-[rgba(18,18,18,0.6)] content-stretch flex flex-col h-full items-center justify-center p-5">
+      <Dialog
+        title={title}
+        description={description}
+        showDialogHeader={showDialogHeader}
+        showTitle={showTitle}
+        showDescription={showDescription}
+        showCloseIcon={showCloseIcon}
+        showFooterActions={showFooterActions}
+        dialogContentType={dialogContentType}
+      />
+    </StyledView>
+  );
+}
+
+DialogPattern.displayName = 'DialogPattern';
+
+export default DialogPattern;

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

@@ -0,0 +1 @@
+export { DialogPattern } from './DialogPattern';

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

@@ -0,0 +1,34 @@
+import figma from '@figma/code-connect';
+
+import { EmptyState } from './EmptyState';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3711';
+
+/**
+ * EmptyState Pattern - Figma Code Connect
+ *
+ * Displays an empty state with Lottie animation, title, description,
+ * and optional action button.
+ */
+figma.connect(EmptyState, FIGMA_URL, {
+  props: {
+    type: figma.enum('type', {
+      'no content': 'no-content',
+      'no activity': 'no-task',
+      'no search items': 'no-search',
+      'page not found': '404',
+      'unauthorized': 'no-profile',
+      'network error': 'no-connection',
+      'no internet': 'no-wifi',
+    }),
+    showButton: figma.boolean('Show Button'),
+  },
+  example: (props) => (
+    <EmptyState
+      type={props.type}
+      showButton={props.showButton}
+      onButtonPress={() => {}}
+    />
+  ),
+});

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

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { View as RNView, Text as RNText } from 'react-native';
+import LottieView from 'lottie-react-native';
+import { cssInterop } from 'nativewind';
+
+import { Button } from '../../../components/Input/Button/Button';
+import { Lotties } from '../../../assets';
+import { cn } from '../../../lib/utils';
+
+// NativeWind interop
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+
+const View = RNView as any;
+const Text = RNText as any;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export const EmptyStateTypes = [
+  'no-content',
+  'no-connection',
+  'no-profile',
+  'no-search',
+  'no-task',
+  'no-wifi',
+  'empty-document',
+  '404',
+] as const;
+
+export type EmptyStateType = (typeof EmptyStateTypes)[number];
+
+export interface EmptyStateProps {
+  /** Type of empty state to display */
+  type: EmptyStateType;
+  /** Whether to show the action button */
+  showButton?: boolean;
+  /** Custom button text (optional) */
+  buttonText?: string;
+  /** Button press handler */
+  onButtonPress?: () => void;
+  /** Custom title (optional - defaults based on type) */
+  title?: string;
+  /** Custom description (optional - defaults based on type) */
+  description?: string;
+  /** className should not be passed */
+  className?: never;
+}
+
+/* -----------------------------------------------------
+ * Content Config
+ * --------------------------------------------------- */
+
+const emptyStateConfig: Record<
+  EmptyStateType,
+  { lottie: any; title: string; description: string; buttonText: string }
+> = {
+  'no-content': {
+    lottie: Lotties.noContent,
+    title: 'No Content',
+    description: "There's nothing here yet. Check back later!",
+    buttonText: 'Refresh',
+  },
+  'no-connection': {
+    lottie: Lotties.noConnection,
+    title: 'No Connection',
+    description: 'Please check your internet connection and try again.',
+    buttonText: 'Retry',
+  },
+  'no-profile': {
+    lottie: Lotties.noProfile,
+    title: 'No Profile Found',
+    description: "We couldn't find the profile you're looking for.",
+    buttonText: 'Go Back',
+  },
+  'no-search': {
+    lottie: Lotties.noSearch,
+    title: 'No Results Found',
+    description: 'Try adjusting your search or filters.',
+    buttonText: 'Clear Filters',
+  },
+  'no-task': {
+    lottie: Lotties.noTask,
+    title: 'No Tasks',
+    description: "You're all caught up! No tasks to complete.",
+    buttonText: 'Add Task',
+  },
+  'no-wifi': {
+    lottie: Lotties.noWifi,
+    title: 'No WiFi',
+    description: 'Connect to WiFi to continue.',
+    buttonText: 'Open Settings',
+  },
+  'empty-document': {
+    lottie: Lotties.emptyDocument,
+    title: 'No Documents',
+    description: "You don't have any documents yet.",
+    buttonText: 'Create Document',
+  },
+  '404': {
+    lottie: Lotties.notFound,
+    title: 'Page Not Found',
+    description: "The page you're looking for doesn't exist.",
+    buttonText: 'Go Home',
+  },
+};
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * EmptyState Component
+ *
+ * Displays an empty state with a Lottie animation, title, description,
+ * and optional action button. Used for various empty/error states in the app.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   type="no-content"
+ *   showButton={true}
+ *   onButtonPress={() => console.log('Refresh')}
+ * />
+ * ```
+ */
+export function EmptyState({
+  type,
+  showButton = false,
+  buttonText,
+  onButtonPress,
+  title,
+  description,
+}: EmptyStateProps) {
+  const config = emptyStateConfig[type];
+
+  return (
+    <View className={cn('flex-1 items-center justify-center px-6 py-8')}>
+      {/* Lottie Animation */}
+      <View className={cn('w-64 h-64 mb-6')}>
+        <LottieView
+          source={config.lottie}
+          autoPlay
+          loop
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+
+      {/* Title */}
+      <Text
+        className={cn('text-xl font-semibold text-foreground text-center mb-2')}
+      >
+        {title ?? config.title}
+      </Text>
+
+      {/* Description */}
+      <Text
+        className={cn('text-sm text-muted-foreground text-center mb-6')}
+        style={{ maxWidth: 280 }}
+      >
+        {description ?? config.description}
+      </Text>
+
+      {/* Action Button */}
+      {showButton && (
+        <Button variant="default" onPress={onButtonPress}>
+          {buttonText ?? config.buttonText}
+        </Button>
+      )}
+    </View>
+  );
+}
+
+EmptyState.displayName = 'EmptyState';

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

@@ -0,0 +1,2 @@
+export { EmptyState, EmptyStateTypes } from './EmptyState';
+export type { EmptyStateProps, EmptyStateType } from './EmptyState';

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { EntityPatternGuided } from './EntityPatternGuided';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=309-7648';
+
+/**
+ * EntityPatternGuided - Pattern component combining Card and Stepper
+ *
+ * Use cases:
+ * - Guided workflows with step-by-step processes
+ * - Multi-step entity setup flows
+ * - Onboarding with progress tracking
+ * - Entity configuration wizards
+ *
+ * Features:
+ * - Composed of Card and Stepper components
+ * - Configurable visibility for all sections
+ * - Support for multiple step states (pending, active, completed, error)
+ * - Integrated with existing Button and Radio components
+ */
+figma.connect(EntityPatternGuided, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,163 @@
+import { View, Text as RNText } from 'react-native';
+
+import {
+  Card,
+  type CardProps,
+} from '../../../components/DataDisplay/Card/Card';
+import {
+  Stepper,
+  type StepperProps,
+} from '../../../components/Feedback/Stepper/Stepper';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface EntityPatternGuidedProps
+  extends Partial<CardProps>,
+    Partial<StepperProps> {
+  // Card visibility
+  showCard?: boolean;
+
+  // Stepper section visibility
+  showStepperSection?: boolean;
+  stepperSectionLabel?: string;
+
+  // Stepper props
+  showStepper?: boolean;
+  stepperActiveIndex?: number;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * EntityPatternGuided Component
+ *
+ * A pattern component that combines Card and Stepper components
+ * to create guided entity workflows with step-by-step processes.
+ *
+ * Layout:
+ * 1. Card section (optional - header with image, title, subtitle)
+ * 2. Stepper section (optional - titled section with step-by-step progression)
+ *
+ * @example
+ * ```tsx
+ * <EntityPatternGuided
+ *   title="Entity Title"
+ *   subtitle="Entity Subtitle"
+ *   showCard={true}
+ *   showStepperSection={true}
+ *   stepperSectionLabel="Setup Steps"
+ * />
+ * ```
+ */
+export const EntityPatternGuided = ({
+  // Card props
+  title = 'Card Title',
+  subtitle = 'Subtitle of the card goes here',
+  showCard = true,
+  showMedia = true,
+  showSubtitle = true,
+  showLeading = true,
+
+  // Stepper section
+  showStepperSection = true,
+  stepperSectionLabel = 'Section Label',
+
+  // Stepper props
+  showStepper = true,
+  stepperActiveIndex = 2,
+  steps = [
+    {
+      state: 'completed',
+      title: 'Step Item Title',
+      subtitle: 'This is the step item description',
+      showSubtitle: true,
+      showStepperContent: false,
+    },
+    {
+      state: 'error',
+      title: 'Step Item Title',
+      subtitle:
+        'This step has an error description. Fix the error by clicking on the Primary Action button below',
+      showSubtitle: true,
+      showStepperContent: false,
+      primaryButtonLabel: 'Primary Action',
+    },
+    {
+      state: 'active',
+      title: 'Step Item Title',
+      subtitle: 'This is the step item description',
+      showSubtitle: true,
+      showStepperContent: true,
+      showSecondaryButton: true,
+      secondaryButtonLabel: 'Secondary Action',
+      primaryButtonLabel: 'Primary Action',
+    },
+    {
+      state: 'pending',
+      title: 'Step Item Title',
+      subtitle: 'This is the step item description',
+      showSubtitle: true,
+      showStepperContent: false,
+    },
+    {
+      state: 'pending',
+      title: 'Step Item Title',
+      subtitle: 'This is the step item description',
+      showSubtitle: true,
+      showStepperContent: false,
+    },
+  ],
+
+  ...restProps
+}: EntityPatternGuidedProps) => {
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Card Section */}
+      {showCard && (
+        <Card
+          title={title}
+          subtitle={subtitle}
+          showMedia={showMedia}
+          showSubtitle={showSubtitle}
+          showLeading={showLeading}
+          showBadges={true}
+          showBody={false}
+          showFooterActions={false}
+          showOverflowMenu={false}
+          {...(restProps as CardProps)}
+        />
+      )}
+
+      {/* Stepper Section */}
+      {showStepperSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {stepperSectionLabel}
+          </RNText>
+
+          {/* Stepper Component */}
+          {showStepper && (
+            <Stepper
+              steps={steps}
+              activeIndex={stepperActiveIndex}
+              {...(restProps as StepperProps)}
+            />
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+EntityPatternGuided.displayName = 'EntityPatternGuided';

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

@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { EntityPatternOverview } from './EntityPatternOverview';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3610';
+
+/**
+ * EntityPatternOverview - Pattern component combining Card, DataListItem, and Buttons
+ *
+ * Use cases:
+ * - Entity/Profile overview pages
+ * - Detailed information displays
+ * - Mixed content layouts with cards and lists
+ * - Entity management interfaces
+ *
+ * Features:
+ * - Composed of Card and DataListItem components
+ * - Configurable visibility for all sections
+ * - Flexible data list item count
+ * - Optional footer action buttons
+ */
+figma.connect(EntityPatternOverview, FIGMA_URL, {
+  props: {
+    children: figma.children('*'),
+  },
+  example: (props) => <>{props.children}</>,
+});

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

@@ -0,0 +1,174 @@
+import { View, Text as RNText } from 'react-native';
+
+import {
+  Card,
+  type CardProps,
+} from '../../../components/DataDisplay/Card/Card';
+import {
+  DataListItem,
+  type DataListItemProps,
+} from '../../../components/DataDisplay/DataListItem/DataListItem';
+import { Button } from '../../../components/Input/Button/Button';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface EntityPatternOverviewProps
+  extends Partial<CardProps>,
+    Partial<DataListItemProps> {
+  // Card visibility
+  showCard?: boolean;
+
+  // DataList section visibility
+  showDataListSection?: boolean;
+  dataListSectionLabel?: string;
+
+  // DataList item visibility
+  showDataListItems?: boolean;
+  dataListItemCount?: number;
+
+  // Footer actions
+  showFooterActions?: boolean;
+  primaryActionText?: string;
+  secondaryActionText?: string;
+  onPrimaryActionPress?: () => void;
+  onSecondaryActionPress?: () => void;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * EntityPatternOverview Component
+ *
+ * A pattern component that combines Card, DataListItem, and Button components
+ * to create entity overview layouts with detailed information.
+ *
+ * Layout:
+ * 1. Card section (optional - header with image, title, subtitle)
+ * 2. Data List section (optional - titled section with list items)
+ * 3. Footer actions (optional - primary and secondary buttons)
+ *
+ * @example
+ * ```tsx
+ * <EntityPatternOverview
+ *   title="Entity Title"
+ *   subtitle="Entity Subtitle"
+ *   showCard={true}
+ *   showDataListSection={true}
+ *   showFooterActions={true}
+ *   dataListItemCount={2}
+ * />
+ * ```
+ */
+export const EntityPatternOverview = ({
+  // Card props
+  title = 'Card Title',
+  subtitle = 'Subtitle of the card goes here',
+  showCard = true,
+  showMedia = true,
+  showSubtitle = true,
+  showLeading = true,
+
+  // DataList section
+  showDataListSection = true,
+  dataListSectionLabel = 'Section Label',
+
+  // DataList item props
+  showDataListItems = true,
+  dataListItemCount = 2,
+  showMeta = true,
+  showDivider = false,
+
+  // Footer actions
+  showFooterActions = true,
+  primaryActionText = 'Primary Action',
+  secondaryActionText = 'Secondary Action',
+  onPrimaryActionPress,
+  onSecondaryActionPress,
+
+  ...restProps
+}: EntityPatternOverviewProps) => {
+  return (
+    <View style={{ gap: 24 }}>
+      {/* Card Section */}
+      {showCard && (
+        <Card
+          title={title}
+          subtitle={subtitle}
+          showMedia={showMedia}
+          showSubtitle={showSubtitle}
+          showLeading={showLeading}
+          showBadges={false}
+          showFooterActions={false}
+          showOverflowMenu={false}
+          {...(restProps as CardProps)}
+        />
+      )}
+
+      {/* DataList Section */}
+      {showDataListSection && (
+        <View style={{ gap: 8 }}>
+          {/* Section Label */}
+          <RNText
+            style={{
+              fontSize: 14,
+              fontWeight: '500',
+              color: '#6a7282',
+            }}
+          >
+            {dataListSectionLabel}
+          </RNText>
+
+          {/* DataList Items */}
+          {showDataListItems && (
+            <View style={{ gap: 16 }}>
+              {Array.from({ length: dataListItemCount }).map((_, i) => (
+                <DataListItem
+                  key={`data-list-item-${i}`}
+                  title="Section Title"
+                  subtitle="Section Description"
+                  meta="Meta Content for this section can be placed here"
+                  showLeading={false}
+                  showTrailing={false}
+                  showMeta={showMeta}
+                  showDivider={showDivider}
+                  {...(restProps as DataListItemProps)}
+                />
+              ))}
+            </View>
+          )}
+        </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>
+  );
+};
+
+EntityPatternOverview.displayName = 'EntityPatternOverview';

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

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