@campxdev/react-native-blueprint 0.1.13 → 0.1.15

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>
+    ),
+  }
+);

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

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import figma from '@figma/code-connect';
+import { TabItem } from './Tabs';
+
+figma.connect(
+  TabItem,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=89-326', // Replace with actual node ID
+  {
+    props: {
+      variant: figma.enum('variant', {
+        inactive: 'inactive',
+        active: 'active',
+        disabled: 'disabled',
+      }),
+      showBadge: figma.boolean('Show Badge'),
+    },
+
+    example: ({ variant, showBadge }) => (
+      <TabItem variant={variant} showBadge={showBadge} />
+    ),
+  }
+);

package/src/components/Layout/Tabs/Tabs.tsx

@@ -0,0 +1,171 @@
+// @ts-nocheck
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Badge } from '../../DataDisplay/Badge/Badge';
+
+// NativeWind interop (className -> style)
+cssInterop(View, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva(
+  'w-full flex-row items-center rounded-md bg-muted p-1',
+  {
+    variants: {
+      size: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+const tabSlotVariants = cva('flex-1', {
+  variants: {
+    active: {
+      false: '',
+      true: 'bg-background rounded-md',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+});
+
+/* -----------------------------------------------------
+ * TabItem
+ * --------------------------------------------------- */
+
+const tabItemVariants = cva(
+  'flex-row pt-2 pb-2 pl-6 pr-6 justify-center items-center gap-2 rounded-md',
+  {
+    variants: {
+      variant: {
+        Inactive: '',
+        Active: 'bg-background',
+        Disabled: 'opacity-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'Inactive',
+    },
+  }
+);
+
+const tabTextVariants = cva('text-center text-sm font-semibold font-[Geist]', {
+  variants: {
+    variant: {
+      Inactive: 'text-muted-foreground',
+      Active: 'text-foreground',
+      Disabled: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'Inactive',
+  },
+});
+
+export type TabItemProps = VariantProps<typeof tabItemVariants> & {
+  showBadge?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+export function TabItem({ variant, showBadge, style, testID }: TabItemProps) {
+  return (
+    <View
+      testID={testID}
+      className={cn(tabItemVariants({ variant }))}
+      style={style}
+    >
+      <Text className={cn(tabTextVariants({ variant }))}>TabItem</Text>
+      {showBadge && (
+        <Badge
+          text="03"
+          size="sm"
+          variant="outline"
+          showRightIcon={false}
+          className={cn(
+            'border-border',
+            variant === 'Active' && 'bg-muted',
+            variant === 'Disabled' && 'bg-muted'
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+export type TabsProps = Omit<VariantProps<typeof rootVariants>, 'size'> & {
+  /** Used to override the default root style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Used to locate this view in end-to-end tests. */
+  testID?: string;
+
+  /** Prevent passing className */
+  className?: never;
+};
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Tabs(props: TabsProps) {
+  const { style, testID } = props;
+  const [activeTab, setActiveTab] = React.useState<number>(1);
+
+  return (
+    <View
+      testID={testID ?? 'tabs'}
+      className={cn(rootVariants())}
+      style={style}
+    >
+      <Pressable
+        className={cn(tabSlotVariants({ active: activeTab === 0 }))}
+        onPress={() => setActiveTab(0)}
+      >
+        <TabItem
+          testID="tab-item-1"
+          variant={activeTab === 0 ? 'Active' : 'Inactive'}
+          showBadge
+        />
+      </Pressable>
+
+      <Pressable
+        className={cn(tabSlotVariants({ active: activeTab === 1 }))}
+        onPress={() => setActiveTab(1)}
+      >
+        <TabItem
+          testID="tab-item-2"
+          variant={activeTab === 1 ? 'Active' : 'Inactive'}
+          showBadge
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+Tabs.displayName = 'Tabs';
+
+export { rootVariants, tabSlotVariants };
+export type { TabsProps };