@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/Layout/Bottomsheet/Bottom-Sheet.tsx

@@ -0,0 +1,443 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  StyleSheet,
+  View as RNView,
+  Text as RNText,
+  type ViewStyle,
+} from 'react-native';
+import { cssInterop } from 'nativewind';
+import BottomSheetPrimitive, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils';
+import { useTheme } from '../../../lib/ThemeProvider';
+import { hslToRgb } from '../../theme-config';
+import { Button } from '../../Input/Button/Button';
+import { TextField } from '../../Input/TextField/Textfield';
+
+// NativeWind interop (className -> style)
+const View = cssInterop(RNView, { className: 'style' });
+const Text = cssInterop(RNText, { className: 'style' });
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Variants
+ * --------------------------------------------------- */
+const sheetRootVariants = cva(
+  cn(
+    'flex-col items-start',
+    'w-full',
+    'pt-4 px-5 pb-12 gap-4',
+    'rounded-t-xl bg-background'
+  ),
+  {
+    variants: {
+      tone: {
+        default: '',
+      },
+    },
+    defaultVariants: {
+      tone: 'default',
+    },
+  }
+);
+
+const handleWrapVariants = cva('self-stretch items-center');
+const handleBarVariants = cva('w-20 h-1 rounded-sm bg-muted');
+const headerRowVariants = cva(cn('self-stretch', 'flex-row items-start'));
+const headerStackVariants = cva(cn('flex-1 flex-col items-start', 'gap-1'));
+const titleVariants = cva('text-base font-bold text-foreground');
+const descriptionVariants = cva('text-xs font-medium text-muted-foreground');
+const contentVariants = cva('self-stretch');
+const footerVariants = cva(cn('self-stretch flex-row items-start', 'gap-2'));
+const footerBtnFillVariants = cva('flex-1');
+
+/* BottomSheet Content Types */
+interface BottomSheetContentRendererProps {
+  type?: 'placeholder' | 'form' | 'text';
+}
+
+function BottomSheetContentRenderer({
+  type = 'placeholder',
+}: BottomSheetContentRendererProps) {
+  const StyledView = RNView as any;
+  const StyledText = RNText as any;
+
+  switch (type) {
+    case 'form':
+      return (
+        <StyledView className="gap-4">
+          <TextField
+            state="default"
+            content="placeholder"
+            type="text"
+            showLabel={true}
+            showHelpText={true}
+            showLeftIcon={false}
+            showRightIcon={false}
+            label="Email Address"
+            helpText="Enter your email address"
+            inputProps={{
+              placeholder: 'name@example.com',
+            }}
+          />
+        </StyledView>
+      );
+    case 'text':
+      return (
+        <StyledView>
+          <StyledText className="text-base text-text-primary text-left leading-6">
+            This is a text content area. You can display detailed information,
+            instructions, or any text-based content here.
+          </StyledText>
+        </StyledView>
+      );
+    case 'placeholder':
+    default:
+      return (
+        <StyledView>
+          <StyledText className="text-base text-text-primary text-left">
+            Placeholder Content
+          </StyledText>
+        </StyledView>
+      );
+  }
+}
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Props
+ * --------------------------------------------------- */
+interface BottomSheetDefaultProps {
+  descriptionText?: string;
+  titleText?: string;
+  showDescription?: boolean;
+  showFooter?: boolean;
+  showHeader?: boolean;
+  dismissable?: boolean;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  onPrimaryPress?: () => void;
+  onSecondaryPress?: () => void;
+  // Content type prop
+  sheetContentType?: 'placeholder' | 'form' | 'text';
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/* -----------------------------------------------------
+ * BottomSheetDefault Component
+ * --------------------------------------------------- */
+function BottomSheetDefault(props: BottomSheetDefaultProps) {
+  const {
+    descriptionText = 'Description',
+    titleText = 'Title',
+    showDescription = true,
+    showFooter = true,
+    showHeader = true,
+    dismissable = true,
+    primaryButtonText = 'Primary',
+    secondaryButtonText = 'Secondary',
+    onPrimaryPress,
+    onSecondaryPress,
+    sheetContentType = 'placeholder',
+    children,
+    style,
+    testID,
+  } = props;
+
+  return (
+    <View
+      testID={testID ?? 'bottom-sheet-default'}
+      className={cn(sheetRootVariants({ tone: 'default' }))}
+      style={style}
+    >
+      {/* Drag handle */}
+      {dismissable ? (
+        <View testID="bottom-sheet-handle" className={cn(handleWrapVariants())}>
+          <View className={cn(handleBarVariants())} />
+        </View>
+      ) : null}
+
+      {/* Header */}
+      {showHeader ? (
+        <View testID="bottom-sheet-header" className={cn(headerRowVariants())}>
+          <View className={cn(headerStackVariants())}>
+            <Text testID="bottom-sheet-title" className={cn(titleVariants())}>
+              {titleText}
+            </Text>
+
+            {showDescription ? (
+              <Text
+                testID="bottom-sheet-description"
+                className={cn(descriptionVariants())}
+              >
+                {descriptionText}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+
+      {/* Content */}
+      <View testID="bottom-sheet-content" className={cn(contentVariants())}>
+        {children ? (
+          children
+        ) : (
+          <BottomSheetContentRenderer type={sheetContentType} />
+        )}
+      </View>
+
+      {/* Footer */}
+      {showFooter ? (
+        <View testID="bottom-sheet-footer" className={cn(footerVariants())}>
+          <View className={cn(footerBtnFillVariants())}>
+            <Button
+              testID="bottom-sheet-secondary"
+              variant="secondary"
+              size="lg"
+              onPress={onSecondaryPress}
+            >
+              {secondaryButtonText}
+            </Button>
+          </View>
+
+          <View className={cn(footerBtnFillVariants())}>
+            <Button
+              testID="bottom-sheet-primary"
+              variant="default"
+              size="lg"
+              onPress={onPrimaryPress}
+            >
+              {primaryButtonText}
+            </Button>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+BottomSheetDefault.displayName = 'BottomSheetDefault';
+
+/* -----------------------------------------------------
+ * Original BottomSheet Types
+ * --------------------------------------------------- */
+type BottomSheetRef = {
+  open: () => void;
+  close: () => void;
+  expand: () => void;
+  collapse: () => void;
+  snapToIndex: (index: number) => void;
+};
+
+interface BottomSheetProps {
+  children: React.ReactNode;
+  snapPoints?: (string | number)[];
+  initialSnapIndex?: number;
+  enablePanDownToClose?: boolean;
+  enableDynamicSizing?: boolean;
+  backdropOpacity?: number;
+  enableBackdropDismiss?: boolean;
+  handleIndicatorStyle?: ViewStyle;
+  backgroundStyle?: ViewStyle;
+  className?: string;
+  containerClassName?: string;
+  onChange?: (index: number) => void;
+  onClose?: () => void;
+}
+
+/* -----------------------------------------------------
+ * Original BottomSheet Component
+ * --------------------------------------------------- */
+const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
+  (
+    {
+      children,
+      snapPoints: customSnapPoints,
+      initialSnapIndex = -1,
+      enablePanDownToClose = true,
+      enableDynamicSizing = false,
+      backdropOpacity = 0.5,
+      enableBackdropDismiss = true,
+      handleIndicatorStyle,
+      backgroundStyle,
+      className,
+      containerClassName,
+      onChange,
+      onClose,
+    },
+    ref
+  ) => {
+    const bottomSheetRef = useRef<BottomSheetPrimitive>(null);
+    const { colors } = useTheme();
+
+    // Default snap points if not provided
+    const snapPoints = useMemo(
+      () => customSnapPoints ?? ['25%', '50%', '90%'],
+      [customSnapPoints]
+    );
+
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+      open: () => bottomSheetRef.current?.expand(),
+      close: () => bottomSheetRef.current?.close(),
+      expand: () => bottomSheetRef.current?.expand(),
+      collapse: () => bottomSheetRef.current?.collapse(),
+      snapToIndex: (index: number) =>
+        bottomSheetRef.current?.snapToIndex(index),
+    }));
+
+    // Custom backdrop component
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          opacity={backdropOpacity}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
+          pressBehavior={enableBackdropDismiss ? 'close' : 'none'}
+        />
+      ),
+      [backdropOpacity, enableBackdropDismiss]
+    );
+
+    // Handle sheet changes
+    const handleSheetChanges = useCallback(
+      (index: number) => {
+        onChange?.(index);
+        if (index === -1) {
+          onClose?.();
+        }
+      },
+      [onChange, onClose]
+    );
+
+    // Theme-aware background style
+    const themedBackgroundStyle = useMemo(
+      () => [
+        styles.background,
+        { backgroundColor: hslToRgb(colors.card) },
+        backgroundStyle,
+      ],
+      [colors.card, backgroundStyle]
+    );
+
+    // Theme-aware handle indicator style
+    const themedHandleStyle = useMemo(
+      () => [
+        styles.handleIndicator,
+        { backgroundColor: hslToRgb(colors.border) },
+        handleIndicatorStyle,
+      ],
+      [colors.border, handleIndicatorStyle]
+    );
+
+    return (
+      <BottomSheetPrimitive
+        ref={bottomSheetRef}
+        index={initialSnapIndex}
+        snapPoints={snapPoints}
+        enablePanDownToClose={enablePanDownToClose}
+        enableDynamicSizing={enableDynamicSizing}
+        backdropComponent={renderBackdrop}
+        onChange={handleSheetChanges}
+        handleIndicatorStyle={themedHandleStyle}
+        backgroundStyle={themedBackgroundStyle}
+        style={styles.container}
+        animateOnMount={false}
+      >
+        <BottomSheetView>
+          <View className={cn('flex-1 bg-card', containerClassName)}>
+            <View className={cn('flex-1', className)}>{children}</View>
+          </View>
+        </BottomSheetView>
+      </BottomSheetPrimitive>
+    );
+  }
+);
+
+BottomSheet.displayName = 'BottomSheet';
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 9999,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  background: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  handleIndicator: {
+    width: 40,
+    height: 4,
+  },
+});
+
+/* -----------------------------------------------------
+ * Helper Components
+ * --------------------------------------------------- */
+interface BottomSheetHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetHeader = ({ children, className }: BottomSheetHeaderProps) => {
+  return (
+    <View
+      className={cn('border-b border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+interface BottomSheetContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetContent = ({
+  children,
+  className,
+}: BottomSheetContentProps) => {
+  return (
+    <View className={cn('flex-1 px-4 py-4 web:px-6', className)}>
+      {children}
+    </View>
+  );
+};
+
+interface BottomSheetFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const BottomSheetFooter = ({ children, className }: BottomSheetFooterProps) => {
+  return (
+    <View
+      className={cn('border-t border-border px-4 py-3 web:px-6', className)}
+    >
+      {children}
+    </View>
+  );
+};
+
+export {
+  BottomSheet,
+  BottomSheetDefault,
+  BottomSheetHeader,
+  BottomSheetContent,
+  BottomSheetFooter,
+};
+export type { BottomSheetRef, BottomSheetProps, BottomSheetDefaultProps };

package/src/components/Layout/Bottomsheet/BottomSheet.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { BottomSheetDefault } from './Bottom-Sheet';
+
+figma.connect(
+  BottomSheetDefault,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=299-5915',
+  {
+    props: {
+      // Text content
+      titleText: figma.string('Title Text'),
+      descriptionText: figma.string('Description Text'),
+      // Visibility toggles
+      showHeader: figma.boolean('Show Header'),
+      showDescription: figma.boolean('Show Description'),
+      showFooter: figma.boolean('Show Footer'),
+      dismissable: figma.boolean('dismissable'),
+      // Content type (nested instance)
+      bottomSheetContent: figma.nestedProps('Bottom Sheet Content', {
+        variant: figma.enum('variant', {
+          placeholder: 'placeholder',
+          form: 'form',
+          text: 'text',
+        }),
+      }),
+    },
+    example: (props) => (
+      <BottomSheetDefault
+        titleText={props.titleText}
+        descriptionText={props.descriptionText}
+        showHeader={props.showHeader}
+        showDescription={props.showDescription}
+        showFooter={props.showFooter}
+        dismissable={props.dismissable}
+        sheetContentType={props.bottomSheetContent.variant}
+      />
+    ),
+  }
+);

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';