@campxdev/react-native-blueprint 0.1.13 → 0.1.14

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

@@ -0,0 +1,21 @@
+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,170 @@
+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 };

package/src/components/Navigation/Appbar/AppBar.figma.tsx

@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect';
+import { AppBar } from './AppBar';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=227-4357';
+
+/**
+ * AppBar - Navigation header component
+ *
+ * Use cases:
+ * - Page header with title and subtitle
+ * - Home screen with centered logo
+ * - Navigation with leading/trailing actions
+ *
+ * Features:
+ * - Two variants: default (with title) and home (with logo)
+ * - Optional header block: tabs or search
+ * - Configurable leading/trailing icons
+ * - SafeAreaView support for status bar
+ */
+figma.connect(AppBar, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      home: 'home',
+    }),
+    showLeading: figma.boolean('Show Leading'),
+    showTrailing: figma.boolean('Show Trailing'),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    title: figma.string('Title'),
+    subtitle: figma.string('Subtitle'),
+    showHeaderBlock: figma.boolean('Show HeaderBlock'),
+    headerType: figma.nestedProps('HeaderBlock', {
+      type: figma.enum('type', {
+        tabs: 'tabs',
+        search: 'search',
+      }),
+    }),
+    logo: figma.instance('Logo'),
+  },
+  example: (props) => (
+    <AppBar
+      variant={props.variant}
+      title={props.title}
+      subtitle={props.subtitle}
+      showLeading={props.showLeading}
+      showTrailing={props.showTrailing}
+      showSubtitle={props.showSubtitle}
+      showHeaderBlock={props.showHeaderBlock}
+      headerType={props.headerType.type}
+      onLeadingPress={() => {}}
+      onTrailingPress={() => {}}
+    />
+  ),
+});
+i;

package/src/components/Navigation/Appbar/AppBar.tsx

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import {
+  View as RNView,
+  Text as RNText,
+  Image as RNImage,
+  Pressable as RNPressable,
+  Platform,
+  StatusBar,
+  type ImageSourcePropType,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { cssInterop, useColorScheme } from 'nativewind';
+
+import { cn } from '../../../lib/utils';
+import { Tabs } from '../../Layout/Tabs/Tabs';
+
+// NativeWind interop (className -> style)
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNText, { className: 'style' });
+cssInterop(RNImage, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as any;
+const Text = RNText as any;
+const Image = RNImage as any;
+const Pressable = RNPressable as any;
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+
+export type AppBarVariant = 'default' | 'home';
+export type HeaderBlockType = 'tabs' | 'search';
+
+export interface AppBarProps {
+  variant?: AppBarVariant;
+
+  title?: string;
+  subtitle?: string;
+
+  showLeading?: boolean;
+  showTrailing?: boolean;
+  showSubtitle?: boolean;
+  showHeaderBlock?: boolean;
+
+  headerType?: HeaderBlockType;
+
+  onLeadingPress?: () => void;
+  onTrailingPress?: () => void;
+
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+
+  /** For home variant logo */
+  logoSource?: ImageSourcePropType;
+
+  /** Whether to wrap with SafeAreaView for status bar */
+  useSafeArea?: boolean;
+
+  /** E2E */
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * Sub-components
+ * --------------------------------------------------- */
+
+function SearchHeader() {
+  return (
+    <View className="bg-surface-subtle rounded-lg px-3 py-2.5 flex-row items-center gap-2">
+      {/* Search icon placeholder */}
+      <View className="w-4 h-4" />
+      <Text className="text-sm font-medium text-text-secondary">Search</Text>
+    </View>
+  );
+}
+
+function HeaderBlock({ type }: { type: 'tabs' | 'search' }) {
+  if (type === 'search') {
+    return <SearchHeader />;
+  }
+
+  return <Tabs />;
+}
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function AppBar(props: AppBarProps) {
+  const {
+    variant = 'default',
+    title = 'Page Title',
+    subtitle = 'This is the page Subtitle',
+
+    showLeading = true,
+    showTrailing = true,
+    showSubtitle = true,
+    showHeaderBlock = true,
+
+    headerType,
+
+    onLeadingPress,
+    onTrailingPress,
+
+    leadingIcon,
+    trailingIcon,
+
+    logoSource,
+
+    useSafeArea = true,
+
+    testID,
+  } = props;
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  const isHome = variant === 'home';
+
+  const content = (
+    <View
+      testID={testID ?? 'appbar'}
+      className={cn(
+        'bg-surface-default px-5 py-4 gap-3',
+        !isHome && 'min-h-16'
+      )}
+    >
+      {/* TOP ROW */}
+      <View className="flex-row items-center justify-between">
+        {/* LEFT */}
+        <View className="flex-row items-center gap-4">
+          {showLeading && (
+            <Pressable
+              testID="appbar-leading"
+              onPress={onLeadingPress}
+              accessibilityRole="button"
+            >
+              {leadingIcon ?? <View className="w-4 h-4" />}
+            </Pressable>
+          )}
+
+          {variant === 'default' && (
+            <View className="gap-1">
+              <Text
+                testID="appbar-title"
+                className="text-lg font-semibold text-text-primary"
+              >
+                {title}
+              </Text>
+
+              {showSubtitle && (
+                <Text
+                  testID="appbar-subtitle"
+                  className="text-xs font-medium text-text-muted"
+                >
+                  {subtitle}
+                </Text>
+              )}
+            </View>
+          )}
+        </View>
+
+        {/* CENTER (Home logo) */}
+        {isHome && (
+          <View
+            testID="appbar-logo"
+            className="flex-1 items-center justify-center"
+          >
+            {logoSource ? (
+              <Image
+                source={logoSource}
+                resizeMode="contain"
+                className="w-8 h-8"
+              />
+            ) : (
+              <View className="w-8 h-8 bg-surface-subtle rounded-lg" />
+            )}
+          </View>
+        )}
+
+        {/* RIGHT */}
+        {showTrailing && (
+          <Pressable
+            testID="appbar-trailing"
+            onPress={onTrailingPress}
+            accessibilityRole="button"
+          >
+            {trailingIcon ?? <View className="w-4 h-4" />}
+          </Pressable>
+        )}
+      </View>
+
+      {/* HEADER BLOCK */}
+      {showHeaderBlock && headerType && <HeaderBlock type={headerType} />}
+    </View>
+  );
+
+  if (useSafeArea) {
+    return (
+      <>
+        {Platform.OS !== 'web' && (
+          <StatusBar
+            barStyle={isDark ? 'light-content' : 'dark-content'}
+            backgroundColor="transparent"
+            translucent
+          />
+        )}
+        <SafeAreaView edges={['top']}>{content}</SafeAreaView>
+      </>
+    );
+  }
+
+  return content;
+}
+
+AppBar.displayName = 'AppBar';

package/src/components/Navigation/ContextMenu/Context-Menu.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import {
+  View as RNView,
+  Pressable as RNPressable,
+  Modal,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import { MoreVertical } from 'lucide-react-native';
+import { cn } from '../../../lib/utils';
+import { Text } from '../../Input/Text/Text';
+import { Icon } from '../../ui/Icon';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as any;
+const Pressable = RNPressable as any;
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  onPress?: () => void;
+  checked?: boolean;
+}
+
+export interface ContextMenuProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showIcon?: boolean;
+  items?: ContextMenuItem[];
+  triggerIcon?: React.ReactNode;
+  style?: ViewStyle;
+  className?: string;
+}
+
+/**
+ * ContextMenu
+ *
+ * A simplified context menu component with trigger and dropdown items.
+ * Toggle showIcon to show/hide the trigger icon.
+ */
+function ContextMenuComponent({
+  open: controlledOpen,
+  onOpenChange,
+  showIcon = true,
+  items = [],
+  triggerIcon,
+  style,
+  className,
+}: ContextMenuProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+
+  const handleToggle = () => {
+    handleOpenChange(!isOpen);
+  };
+
+  const handleClose = () => {
+    handleOpenChange(false);
+  };
+
+  const handleItemPress = (item: ContextMenuItem) => {
+    item.onPress?.();
+    handleClose();
+  };
+
+  return (
+    <View style={style} className={cn('relative', className)}>
+      {/* Trigger Button - Square with rounded corners */}
+      <Pressable
+        onPress={handleToggle}
+        hitSlop={8}
+        className="h-8 w-8 items-center justify-center rounded-md border border-border-default bg-surface-default"
+      >
+        {triggerIcon ? (
+          triggerIcon
+        ) : (
+          <Icon as={MoreVertical} size={16} className="text-text-primary" />
+        )}
+      </Pressable>
+
+      {/* Menu Dropdown */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={handleClose}
+      >
+        <Pressable className="flex-1" onPress={handleClose}>
+          <View className="flex-1 items-end pt-16 pr-4">
+            <View className="min-w-[180px] rounded-lg border border-border-default shadow-lg overflow-hidden bg-surface-default">
+              {items.map((item, index) => (
+                <Pressable
+                  key={`${item.label}-${index}`}
+                  onPress={() => handleItemPress(item)}
+                  className="flex-row items-center gap-3 px-4 py-3 active:bg-surface-secondary"
+                >
+                  {/* Checkbox circle indicator - only show when showIcon is true */}
+                  {showIcon && (
+                    <View
+                      className={cn(
+                        'h-5 w-5 rounded-full border-2 border-border-default items-center justify-center',
+                        item.checked && 'bg-primary border-primary'
+                      )}
+                    >
+                      {item.checked && (
+                        <View className="h-2 w-2 rounded-full bg-white" />
+                      )}
+                    </View>
+                  )}
+                  <Text className="text-sm text-text-primary flex-1">
+                    {item.label}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+ContextMenuComponent.displayName = 'ContextMenu';
+
+export const ContextMenu = ContextMenuComponent;

package/src/components/Navigation/ContextMenu/ContextMenu.figma.tsx

@@ -0,0 +1,27 @@
+import { ContextMenu } from './Context-Menu';
+import type { ContextMenuProps } from './Context-Menu';
+import { figma } from '@figma/code-connect';
+
+export type { ContextMenuProps };
+
+figma.connect(
+  ContextMenu,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=166-533',
+  {
+    props: {
+      showMenu: figma.boolean('showMenu'),
+      showIcon: figma.boolean('show Icon'),
+    },
+    example: (props) => (
+      <ContextMenu
+        showIcon={props.showIcon}
+        items={[
+          { label: 'Menu item', onPress: () => {} },
+          { label: 'Menu item', onPress: () => {} },
+          { label: 'Menu item', onPress: () => {} },
+          { label: 'Menu item', onPress: () => {} },
+        ]}
+      />
+    ),
+  }
+);

package/src/components/Navigation/Dialog/Dialog.figma.tsx

@@ -0,0 +1,38 @@
+import { Dialog } from './Dialog';
+import { figma } from '@figma/code-connect';
+
+figma.connect(
+  Dialog,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=104-151',
+  {
+    props: {
+      title: figma.string('title'),
+      description: figma.string('description'),
+      showDialogHeader: figma.boolean('Show dialogHeader'),
+      showTitle: figma.boolean('Show title'),
+      showDescription: figma.boolean('Show description'),
+      showCloseIcon: figma.boolean('Show closeIcon'),
+      showFooterActions: figma.boolean('Show FooterActions'),
+      dialogContent: figma.nestedProps('DialogContent', {
+        type: figma.enum('type', {
+          placeholder: 'placeholder',
+          form: 'form',
+          text: 'text',
+          list: 'list',
+        }),
+      }),
+    },
+    example: (props) => (
+      <Dialog
+        title={props.title}
+        description={props.description}
+        showDialogHeader={props.showDialogHeader}
+        showTitle={props.showTitle}
+        showDescription={props.showDescription}
+        showCloseIcon={props.showCloseIcon}
+        showFooterActions={props.showFooterActions}
+        dialogContentType={props.dialogContent.type}
+      />
+    ),
+  }
+);