@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/src/components/Layout/PageContent/PageContent.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import PageContent from './PageContent';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3691';
+
+/**
+ * PageContent - Scrollable content wrapper for page layouts
+ *
+ * Use cases:
+ * - Main content area within page layouts
+ * - Wrapping scrollable content or static views
+ * - Providing consistent keyboard avoiding behavior on iOS
+ *
+ * Features:
+ * - SafeAreaView wrapper for safe content display
+ * - KeyboardAvoidingView for iOS keyboard handling
+ * - Optional scroll mode with ScrollView
+ * - Optional header slot
+ */
+figma.connect(PageContent, FIGMA_URL, {
+  props: {
+    children: figma.instance('Instance'),
+  },
+  example: ({ children }) => <PageContent>{children}</PageContent>,
+});

package/src/components/Layout/PageContent/PageContent.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react';
+import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+interface PageContentProps {
+  children: ReactNode;
+  scroll?: boolean;
+  header?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * PageContent Component
+ *
+ * Main content area wrapper that provides SafeAreaView, KeyboardAvoidingView, and optional scrolling behavior.
+ * Automatically handles keyboard avoiding on iOS and provides consistent content wrapping.
+ */
+const PageContent = ({
+  children,
+  scroll = false,
+  header,
+  style,
+  contentContainerStyle,
+}: PageContentProps) => {
+  const Container: typeof ScrollView | typeof View = scroll ? ScrollView : View;
+
+  return (
+    <SafeAreaView edges={['top', 'bottom']}>
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <KeyboardAvoidingView
+          style={{ flex: 1 }}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        >
+          {header}
+
+          <Container
+            style={[{ flex: 1 }, style]}
+            contentContainerStyle={[
+              scroll
+                ? {
+                    padding: 16,
+                    gap: 16,
+                    flexGrow: 1,
+                  }
+                : undefined,
+              contentContainerStyle,
+            ]}
+            showsVerticalScrollIndicator={false}
+          >
+            {children}
+          </Container>
+        </KeyboardAvoidingView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export { PageContent };
+export default PageContent;

package/src/components/Layout/PageLayoutFocused/PageLayoutFocused.figma.tsx

@@ -0,0 +1,65 @@
+import figma from '@figma/code-connect';
+import { PageLayoutFocused } from './PageLayoutFocused';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3686';
+
+/**
+ * PageLayoutFocused - Focused page layout pattern
+ *
+ * Use cases:
+ * - Detail pages without bottom navigation
+ * - Forms and focused workflows
+ * - Modal-like full screen pages
+ *
+ * Features:
+ * - AppBar at top with configurable variants
+ * - Scrollable PageContent in middle
+ * - No NavBar - focused experience
+ */
+figma.connect(PageLayoutFocused, FIGMA_URL, {
+  props: {
+    // Map AppBar nested properties
+    appBarProps: figma.nestedProps('AppBar', {
+      variant: figma.enum('variant', {
+        default: 'default',
+        home: 'home',
+      }),
+      title: figma.string('Title'),
+      subtitle: figma.string('Subtitle'),
+      showLeading: figma.boolean('Show Leading'),
+      showTrailing: figma.boolean('Show Trailing'),
+      showSubtitle: figma.boolean('Show Subtitle'),
+      showHeaderBlock: figma.boolean('Show HeaderBlock'),
+    }),
+
+    // Try mapping HeaderBlock directly without parent path
+    headerBlockProps: figma.nestedProps('HeaderBlock', {
+      type: figma.enum('type', {
+        tabs: 'tabs',
+        search: 'search',
+      }),
+    }),
+
+    // Only capture PageContent
+    children: figma.children('PageContent'),
+  },
+  example: (props) => (
+    <PageLayoutFocused
+      appBarProps={{
+        variant: props.appBarProps.variant,
+        title: props.appBarProps.title,
+        subtitle: props.appBarProps.subtitle,
+        showLeading: props.appBarProps.showLeading,
+        showTrailing: props.appBarProps.showTrailing,
+        showSubtitle: props.appBarProps.showSubtitle,
+        showHeaderBlock: props.appBarProps.showHeaderBlock,
+        headerType: props.headerBlockProps?.type,
+        onLeadingPress: () => {},
+        onTrailingPress: () => {},
+      }}
+    >
+      {props.children}
+    </PageLayoutFocused>
+  ),
+});

package/src/components/Layout/PageLayoutFocused/PageLayoutFocused.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+import { AppBar, type AppBarProps } from '../../Navigation/Appbar/AppBar';
+import { PageContent } from '../PageContent/PageContent';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface PageLayoutFocusedProps {
+  /** Main content to render inside the layout */
+  children: ReactNode;
+
+  /** AppBar configuration */
+  appBarProps?: Omit<AppBarProps, 'useSafeArea'>;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * PageLayoutFocused Component
+ *
+ * Layout component for focused/detail screens with AppBar and scrollable content area.
+ * No bottom NavBar - used for detail pages, forms, or focused workflows.
+ *
+ * @param {React.ReactNode} children - Main content to render inside the layout
+ * @param {AppBarProps} appBarProps - Configuration for the top AppBar
+ *
+ * @returns {React.ReactElement} The page layout with AppBar and content area
+ *
+ * @example
+ * ```tsx
+ * <PageLayoutFocused
+ *   appBarProps={{
+ *     variant: 'default',
+ *     title: 'Page Title',
+ *     subtitle: 'This is the page Subtitle',
+ *     showLeading: true,
+ *     showTrailing: true,
+ *     headerType: 'tabs',
+ *   }}
+ * >
+ *   <YourPageContent />
+ * </PageLayoutFocused>
+ * ```
+ */
+export const PageLayoutFocused = ({
+  children,
+  appBarProps,
+}: PageLayoutFocusedProps) => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#F7F8FA' }}>
+      {/* AppBar - Top */}
+      <AppBar {...appBarProps} useSafeArea={false} />
+
+      {/* PageContent - Scrollable content area */}
+      <View style={{ flex: 1 }}>
+        <PageContent scroll>{children}</PageContent>
+      </View>
+    </View>
+  );
+};
+
+PageLayoutFocused.displayName = 'PageLayoutFocused';

package/src/components/Layout/PageLayoutShell/PageLayoutShell.figma.tsx

@@ -0,0 +1,39 @@
+import figma from '@figma/code-connect';
+import { PageLayoutShell } from './PageLayoutShell';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=224-3680';
+
+/**
+ * PageLayoutShell - Full page layout pattern
+ *
+ * Use cases:
+ * - Main app screens with navigation
+ * - Dashboard layouts
+ * - Content pages with header and footer
+ *
+ * Features:
+ * - AppBar at top with configurable variants
+ * - Scrollable PageContent in middle
+ * - NavBar at bottom with glow effect
+ * - SafeAreaView handling
+ */
+figma.connect(PageLayoutShell, FIGMA_URL, {
+  props: {
+    children: figma.children('PageContent'),
+  },
+  example: (props) => (
+    <PageLayoutShell
+      appBarProps={{
+        variant: 'home',
+        headerType: 'tabs',
+      }}
+      navBarProps={{
+        items: [],
+        activeIndex: 0,
+      }}
+    >
+      {props.children}
+    </PageLayoutShell>
+  ),
+});

package/src/components/Layout/PageLayoutShell/PageLayoutShell.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+import { AppBar, type AppBarProps } from '../../Navigation/Appbar/AppBar';
+import { PageContent } from '../PageContent/PageContent';
+import { NavBar, type NavBarProps } from '../../Navigation/Navbar/NavBar';
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export interface PageLayoutShellProps {
+  /** Main content to render inside the layout */
+  children: ReactNode;
+
+  /** AppBar configuration */
+  appBarProps?: Omit<AppBarProps, 'useSafeArea'>;
+
+  /** NavBar configuration */
+  navBarProps: NavBarProps;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * PageLayoutShell Component
+ *
+ * Main layout component for mobile screens that provides AppBar, scrollable content area, and bottom NavBar.
+ * This is the primary shell for app screens with navigation.
+ *
+ * @param {React.ReactNode} children - Main content to render inside the layout
+ * @param {AppBarProps} appBarProps - Configuration for the top AppBar
+ * @param {NavBarProps} navBarProps - Configuration for the bottom NavBar (required)
+ *
+ * @returns {React.ReactElement} The complete page layout with AppBar, content area, and NavBar
+ *
+ * @example
+ * ```tsx
+ * <PageLayoutShell
+ *   appBarProps={{
+ *     variant: 'home',
+ *     headerType: 'tabs',
+ *     logoSource: require('./assets/logo.png'),
+ *   }}
+ *   navBarProps={{
+ *     items: [
+ *       { key: 'home', icon: <HomeIcon /> },
+ *       { key: 'search', icon: <SearchIcon /> },
+ *       { key: 'cart', icon: <CartIcon /> },
+ *       { key: 'notifications', icon: <BellIcon /> },
+ *       { key: 'profile', icon: <UserIcon /> },
+ *     ],
+ *     activeIndex: 2,
+ *     showCenterGlow: true,
+ *   }}
+ * >
+ *   <YourPageContent />
+ * </PageLayoutShell>
+ * ```
+ */
+export const PageLayoutShell = ({
+  children,
+  appBarProps,
+  navBarProps,
+}: PageLayoutShellProps) => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#F7F8FA' }}>
+      {/* AppBar - Top */}
+      <AppBar {...appBarProps} useSafeArea={false} />
+
+      {/* PageContent - Scrollable content area */}
+      <View style={{ flex: 1 }}>
+        <PageContent scroll>{children}</PageContent>
+      </View>
+
+      {/* NavBar - Bottom */}
+      <View style={{ paddingHorizontal: 20, paddingBottom: 16, paddingTop: 8 }}>
+        <NavBar {...navBarProps} />
+      </View>
+    </View>
+  );
+};
+
+PageLayoutShell.displayName = 'PageLayoutShell';

package/src/components/Layout/PopoverContainer/Popover-Container.tsx

@@ -0,0 +1,300 @@
+import { NativeOnlyAnimatedView } from '../../ui/Native-Only-Animated-View';
+import { TextClassContext, Text } from '../../Input/Text/Text';
+import { Button } from '../../Input/Button/Button';
+import { cn } from '../../../lib/utils';
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as React from 'react';
+import { Platform, StyleSheet, View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+// NativeWind interop
+const View = cssInterop(RNView, { className: 'style' });
+
+/**
+ * Root component for popover - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button variant="outline">
+ *       <Text>Open Popover</Text>
+ *     </Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <Text>Popover content goes here</Text>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+const Popover = PopoverPrimitive.Root;
+
+/**
+ * Trigger component that opens the popover when pressed
+ *
+ * @component
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Content container for popover
+ *
+ * Displays content in a floating panel anchored to the trigger.
+ * Includes smooth animations and proper positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PopoverContent align="start" sideOffset={8}>
+ *   <View className="gap-2">
+ *     <Text className="font-semibold">Dimensions</Text>
+ *     <Text className="text-sm">Set the dimensions for the layer</Text>
+ *   </View>
+ * </PopoverContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Dismissible with escape key on web
+ * - Proper focus management
+ */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    portalHost?: string;
+    className?: string;
+  }
+>(
+  (
+    { className, align = 'center', sideOffset = 4, portalHost, ...props },
+    ref
+  ) => {
+    return (
+      <PopoverPrimitive.Portal hostName={portalHost}>
+        <FullWindowOverlay>
+          <PopoverPrimitive.Overlay
+            style={Platform.select({ native: StyleSheet.absoluteFill })}
+          >
+            <NativeOnlyAnimatedView
+              entering={FadeIn.duration(200)}
+              exiting={FadeOut}
+            >
+              <TextClassContext.Provider value="text-popover-foreground">
+                <PopoverPrimitive.Content
+                  ref={ref}
+                  align={align}
+                  sideOffset={sideOffset}
+                  className={cn(
+                    'bg-popover border-border outline-hidden z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5',
+                    Platform.select({
+                      web: cn(
+                        'animate-in fade-in-0 zoom-in-95 origin-(--radix-popover-content-transform-origin) cursor-auto',
+                        props.side === 'bottom' && 'slide-in-from-top-2',
+                        props.side === 'top' && 'slide-in-from-bottom-2'
+                      ),
+                    }),
+                    className
+                  )}
+                  {...props}
+                />
+              </TextClassContext.Provider>
+            </NativeOnlyAnimatedView>
+          </PopoverPrimitive.Overlay>
+        </FullWindowOverlay>
+      </PopoverPrimitive.Portal>
+    );
+  }
+);
+PopoverContent.displayName = 'PopoverContent';
+
+/* -----------------------------------------------------
+ * PopoverContainer Variants (match Figma props)
+ * --------------------------------------------------- */
+
+export const PopoverContainerVariants = {
+  size: ['lg', 'md'] as const,
+} as const;
+
+type PopoverSize = (typeof PopoverContainerVariants.size)[number];
+
+const rootVariants = cva(
+  cn(
+    'flex-col items-start',
+    'rounded-lg border border-border-default bg-surface-default',
+    'p-md gap-lg'
+  ),
+  {
+    variants: {
+      size: {
+        lg: 'self-stretch',
+        md: 'w-[300px] self-center',
+      },
+    },
+    defaultVariants: {
+      size: 'lg',
+    },
+  }
+);
+
+const headerVariants = cva(cn('flex-col items-start self-stretch', 'gap-xs'));
+
+const titleVariants = cva(cn('text-base font-bold', 'text-text-primary'));
+
+const descriptionVariants = cva(
+  cn('text-xs font-medium', 'text-text-secondary')
+);
+
+const contentRowVariants = cva(cn('flex-row items-start self-stretch'));
+
+const contentInnerVariants = cva('flex-1');
+
+const footerVariants = cva(cn('flex-row items-start self-stretch', 'gap-sm'));
+
+/* -----------------------------------------------------
+ * PopoverContainer Props
+ * --------------------------------------------------- */
+
+export type PopoverContainerProps = VariantProps<typeof rootVariants> & {
+  /** Popover description text */
+  description?: string;
+  /** Popover title text */
+  title?: string;
+  /** Size variant: lg (stretches to fill parent - wrap in container with px-5 for 20px padding), md (300px centered) */
+  size?: PopoverSize;
+  /** Show description text */
+  showDescription?: boolean;
+  /** Show footer with action buttons */
+  showFooter?: boolean;
+  /** Show header section (title + description) */
+  showHeader?: boolean;
+  /** Show secondary button in footer */
+  showSecondaryButton?: boolean;
+  /** Content to render inside the popover */
+  children?: React.ReactNode;
+  /** Primary button text */
+  primaryButtonText?: string;
+  /** Secondary button text */
+  secondaryButtonText?: string;
+  /** Primary button press handler */
+  onPrimaryPress?: () => void;
+  /** Secondary button press handler */
+  onSecondaryPress?: () => void;
+  /** Custom style override */
+  style?: any;
+  /** Test ID for testing */
+  testID?: string;
+};
+
+/* -----------------------------------------------------
+ * PopoverContainer Component
+ * --------------------------------------------------- */
+
+/**
+ * Styled container for popover content with header, body, and footer sections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PopoverContainer
+ *   size="md"
+ *   title="Popover Title"
+ *   description="Popover Description"
+ *   showHeader
+ *   showFooter
+ * >
+ *   <Text>Custom content here</Text>
+ * </PopoverContainer>
+ * ```
+ */
+export function PopoverContainer({
+  description = 'Popover Description',
+  title = 'Popover Title',
+  size = 'lg',
+  showDescription = true,
+  showFooter = true,
+  showHeader = true,
+  showSecondaryButton = true,
+  children,
+  primaryButtonText = 'Button',
+  secondaryButtonText = 'Button',
+  onPrimaryPress,
+  onSecondaryPress,
+  style,
+  testID,
+}: PopoverContainerProps) {
+  return (
+    <View
+      testID={testID ?? 'popover-container'}
+      className={cn(rootVariants({ size }))}
+      style={style}
+    >
+      {/* Header */}
+      {showHeader && (
+        <View testID="popover-header" className={cn(headerVariants())}>
+          <Text testID="popover-title" className={cn(titleVariants())}>
+            {title}
+          </Text>
+
+          {showDescription && (
+            <Text
+              testID="popover-description"
+              className={cn(descriptionVariants())}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {/* Content */}
+      <View testID="popover-content-row" className={cn(contentRowVariants())}>
+        <View className={cn(contentInnerVariants())}>
+          {children ?? (
+            <Text className="text-sm font-medium text-text-primary">
+              PopoverContent - Switch content type in Props
+            </Text>
+          )}
+        </View>
+      </View>
+
+      {/* Footer actions */}
+      {showFooter && (
+        <View testID="popover-footer" className={cn(footerVariants())}>
+          <Button
+            testID="popover-primary"
+            size="default"
+            variant="default"
+            onPress={onPrimaryPress}
+          >
+            {primaryButtonText}
+          </Button>
+
+          {showSecondaryButton && (
+            <Button
+              testID="popover-secondary"
+              size="default"
+              variant="secondary"
+              onPress={onSecondaryPress}
+            >
+              {secondaryButtonText}
+            </Button>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+PopoverContainer.displayName = 'PopoverContainer';
+
+export { Popover, PopoverContent, PopoverTrigger };

package/src/components/Layout/PopoverContainer/PopoverContainer.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { PopoverContainer } from './Popover-Container';
+
+figma.connect(
+  PopoverContainer,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=207-1188',
+  {
+    props: {
+      // Text content
+      title: figma.string('PopoverTitle'),
+      description: figma.string('PopoverDescription'),
+      // Size variant
+      size: figma.enum('size', {
+        lg: 'lg',
+        md: 'md',
+      }),
+      // Visibility toggles
+      showHeader: figma.boolean('Show HeaderContent'),
+      showTitle: figma.boolean('Show Title'),
+      showDescription: figma.boolean('Show Description'),
+      showFooter: figma.boolean('Show FooterActions'),
+      showSecondaryButton: figma.boolean('Show SecondaryButton'),
+    },
+    example: (props) => (
+      <PopoverContainer
+        title={props.title}
+        description={props.description}
+        size={props.size}
+        showHeader={props.showHeader}
+        showFooter={props.showFooter}
+        showSecondaryButton={props.showSecondaryButton}
+        showDescription={props.showDescription}
+      >
+        {/* Content goes here */}
+      </PopoverContainer>
+    ),
+  }
+);