@campxdev/react-native-blueprint 0.1.15 → 0.1.17

package/src/components/Input/TextField/Textfield.tsx

@@ -5,7 +5,7 @@ import * as Slot from '@rn-primitives/slot';
 import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cssInterop } from 'nativewind';
-import { View, TextInput } from 'react-native';
+import { View, TextInput, Pressable } from 'react-native';
 import type { LucideIcon } from 'lucide-react-native';
 import LottieView from 'lottie-react-native';
 import { SquircleView } from 'react-native-figma-squircle';
@@ -259,9 +259,67 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
     };
 
     // Handle code type (OTP-style boxes)
+    const hiddenInputRef = React.useRef<TextInput>(null);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [selection, setSelection] = React.useState({
+      start: (inputProps?.value as string)?.length || 0,
+      end: (inputProps?.value as string)?.length || 0,
+    });
+
+    const codeLength = 6;
+    const codeValue = (inputProps?.value as string) || '';
+
+    const handlePress = React.useCallback((index: number) => {
+      setIsFocused(true);
+      setSelection({ start: index, end: index });
+      // Focus on next frame to avoid navigation context issues
+      setTimeout(() => {
+        hiddenInputRef.current?.focus();
+      }, 0);
+    }, []);
+
+    const handleChangeText = React.useCallback(
+      (text: string) => {
+        // Only keep numbers
+        const numericText = text.replace(/[^0-9]/g, '');
+
+        // Update the value through inputProps.onChangeText if available
+        if (inputProps?.onChangeText) {
+          inputProps.onChangeText(numericText);
+        }
+
+        // Auto-focus to next box when digit is entered
+        if (
+          numericText.length < codeLength &&
+          selection.start < codeLength - 1
+        ) {
+          setSelection({
+            start: selection.start + 1,
+            end: selection.start + 1,
+          });
+        }
+      },
+      [selection.start, codeLength, inputProps]
+    );
+
+    const handleKeyPress = React.useCallback(
+      (e: any) => {
+        // Handle backspace to go to previous box
+        if (
+          e.nativeEvent.key === 'Backspace' &&
+          selection.start > 0 &&
+          codeValue.length === selection.start
+        ) {
+          setSelection({
+            start: selection.start - 1,
+            end: selection.start - 1,
+          });
+        }
+      },
+      [selection.start, codeValue.length]
+    );
+
     if (type === 'code') {
-      const codeLength = 6;
-      const codeValue = (inputProps?.value as string) || '';
       const codeBoxes = Array.from({ length: codeLength }).map(
         (_, i) => codeValue[i] || ''
       );
@@ -276,39 +334,61 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
             )}
 
             <StyledView className="flex-row gap-2 justify-between">
-              {codeBoxes.map((char, index) => (
-                <StyledView
-                  key={index}
-                  className={cn(
-                    'flex-1 items-center justify-center border rounded-md px-3 py-4',
-                    index === codeValue.length
-                      ? 'border-brand-primary ring-1 ring-brand-primary'
-                      : state === 'error'
-                        ? 'border-highlight-alert-red'
-                        : 'border-border-default',
-                    'bg-surface-default'
-                  )}
-                >
-                  <Text
-                    className={cn(
-                      'text-sm font-medium',
-                      state === 'error'
-                        ? 'text-highlight-alert-red'
-                        : 'text-text-primary'
-                    )}
+              {codeBoxes.map((char, index) => {
+                const isActive = selection.start === index && isFocused;
+
+                return (
+                  <Pressable
+                    key={index}
+                    onPress={() => handlePress(index)}
+                    className="flex-1"
                   >
-                    {char || 'X'}
-                  </Text>
-                </StyledView>
-              ))}
+                    <StyledView
+                      className={cn(
+                        'items-center justify-center border rounded-md px-3 py-4',
+                        isActive
+                          ? 'border-brand-primary ring-1 ring-brand-primary'
+                          : state === 'error'
+                            ? 'border-highlight-alert-red'
+                            : 'border-border-default',
+                        'bg-surface-default'
+                      )}
+                    >
+                      <Text
+                        className={cn(
+                          'text-sm font-medium',
+                          state === 'error'
+                            ? 'text-highlight-alert-red'
+                            : 'text-text-primary'
+                        )}
+                      >
+                        {char || ''}
+                      </Text>
+                    </StyledView>
+                  </Pressable>
+                );
+              })}
             </StyledView>
 
             {/* Hidden input for actual text input */}
             <StyledTextInput
               {...inputProps}
+              ref={hiddenInputRef}
               maxLength={codeLength}
               editable={!isDisabled}
-              style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              value={codeValue}
+              onChangeText={handleChangeText}
+              onKeyPress={handleKeyPress}
+              selection={selection}
+              onSelectionChange={(e: any) =>
+                setSelection(e.nativeEvent.selection)
+              }
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              multiline={false}
+              className="absolute opacity-0 w-0 h-0"
             />
 
             {showHelpText && (
@@ -330,7 +410,10 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
             </StyledView>
           )}
 
-          <View style={{ overflow: 'hidden', borderRadius: CORNER_RADIUS }}>
+          <View
+            key={`squircle-${state}`}
+            style={{ overflow: 'hidden', borderRadius: CORNER_RADIUS }}
+          >
             <SquircleView
               squircleParams={{
                 cornerRadius: CORNER_RADIUS,
@@ -352,7 +435,7 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
 
                 <StyledTextInput
                   {...inputProps}
-                  multiline
+                  multiline={type === 'composer' || inputProps?.multiline}
                   editable={!isDisabled}
                   placeholder={getPlaceholder()}
                   className={cn(
@@ -377,17 +460,19 @@ const TextField = React.forwardRef<ViewRef, TextFieldProps>(
                     loop
                     style={{ width: 48, height: 48, marginLeft: 8 }}
                   />
-                ) : showRightIcon && RightIcon ? (
+                ) : showRightIcon &&
+                  RightIcon &&
+                  typeof RightIcon !== 'undefined' ? (
                   typeof RightIcon === 'function' ? (
                     <RightIcon
                       size={16}
                       className={cn('ml-2 mt-1', iconVariants({ state }))}
                     />
-                  ) : (
+                  ) : React.isValidElement(RightIcon) ? (
                     <StyledView className={cn('ml-2 mt-1')}>
                       {RightIcon}
                     </StyledView>
-                  )
+                  ) : null
                 ) : null}
               </Component>
             </SquircleView>

package/src/components/ui/index.ts

@@ -8,6 +8,7 @@ export * from '../Navigation/Appbar/AppBar';
 export * from '../Layout/AspectRatio/Aspect-Ratio';
 export * from '../DataDisplay/Avatar/Avatar';
 export * from '../DataDisplay/Badge/Badge';
+export * from '../DataDisplay/Banner/Banner';
 export * from '../DataDisplay/Chips/Chips';
 export * from '../DataDisplay/ChipsRow/ChipsRow';
 export * from '../DataDisplay/BannerRow/BannerRow';
@@ -18,6 +19,7 @@ export * from '../Layout/Bottomsheet/Bottom-Sheet';
 export * from '../Input/Button/Button';
 export * from '../DataDisplay/Card/Card';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/Greeting/Greeting';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
 export * from '../DataDisplay/DataCard/DataCard';
 export * from '../Input/Checkbox/Checkbox';
@@ -27,7 +29,7 @@ export * from './Custom-Card';
 export * from '../Navigation/Dialog/Dialog';
 export * from './Dropdown-Menu';
 export * from '../Navigation/FloatingAction/Floating-Action';
-export * from './Greeting-Card';
+
 export * from './Hover-Card';
 export * from './Icon';
 export * from './Input';

package/src/index.tsx

@@ -1,6 +1,9 @@
 // Export components
 export * from './components/ui';
 
+// Export patterns
+export * from './patterns/pattern-components';
+
 // Export layout
 export { default as RootLayout } from './app/_layout';
 

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { SuccessPattern } from './SuccessPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=411-3184';
+
+/**
+ * SuccessPattern - Success state pattern with animated checkmark
+ *
+ * Use cases:
+ * - Order confirmation screens
+ * - Form submission success
+ * - Action completion feedback
+ * - Payment confirmation
+ * - Task completion states
+ *
+ * Features:
+ * - Animated success tick using Lottie (Success-Tick.json)
+ * - Customizable success message
+ * - Optional description text
+ * - Configurable animation behavior (loop, autoplay, duration)
+ * - Callback when animation completes
+ */
+figma.connect(SuccessPattern, FIGMA_URL, {
+  props: {
+    successMessage: figma.string('SuccessMessage'),
+    description: figma.string('Description'),
+  },
+  example: (props) => (
+    <SuccessPattern
+      successMessage={props.successMessage}
+      description={props.description}
+      showAnimation={true}
+      autoplay={true}
+      loop={false}
+    />
+  ),
+});

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

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import LottieView from 'lottie-react-native';
+import { cn } from '../../../lib/utils';
+import { Text } from '../../../components/Input/Text/Text';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export interface SuccessPatternProps {
+  /** Main success message text */
+  successMessage?: string;
+  /** Secondary description text */
+  description?: string;
+  /** Whether to show the lottie animation */
+  showAnimation?: boolean;
+  /** Animation duration in milliseconds */
+  animationDuration?: number;
+  /** Loop the animation */
+  loop?: boolean;
+  /** Auto-play the animation */
+  autoplay?: boolean;
+  /** Custom className for styling */
+  className?: string;
+  /** Test ID for testing */
+  testID?: string;
+  /** Callback when animation completes */
+  onAnimationFinish?: () => void;
+}
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * SuccessPattern Component
+ *
+ * A pattern component that displays a success state with:
+ * - Animated success tick/checkmark (Lottie animation)
+ * - Success message
+ * - Description text
+ *
+ * Perfect for use after form submissions, confirmations, or successful operations.
+ *
+ * @example
+ * ```tsx
+ * <SuccessPattern
+ *   successMessage="Order Placed Successfully!"
+ *   description="Your order has been confirmed"
+ *   showAnimation={true}
+ *   onAnimationFinish={() => navigation.navigate('Home')}
+ * />
+ * ```
+ */
+export const SuccessPattern = ({
+  successMessage = 'This is the Success Message',
+  description = 'Success message descriptions goes here',
+  showAnimation = true,
+  animationDuration = 2000,
+  loop = false,
+  autoplay = true,
+  className,
+  testID,
+  onAnimationFinish,
+}: SuccessPatternProps) => {
+  const animationRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (autoplay && animationRef.current && showAnimation) {
+      animationRef.current.play();
+    }
+  }, [showAnimation, autoplay]);
+
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        'w-full items-center justify-center bg-surface-page',
+        className
+      )}
+    >
+      {/* Animation Container */}
+      {showAnimation && (
+        <View className="h-60 w-60 items-center justify-center">
+          <LottieView
+            ref={animationRef}
+            source={require('../../../assets/Success-Tick.json')}
+            autoPlay={autoplay}
+            loop={loop}
+            duration={animationDuration}
+            onAnimationFinish={onAnimationFinish}
+            style={{ width: 300, height: 300 }}
+          />
+        </View>
+      )}
+
+      {/* Content Section */}
+      <View className="w-full items-center gap-2 text-center px-4 py-6">
+        <Text className="text-lg font-semibold text-text-primary">
+          {successMessage}
+        </Text>
+        <Text className="text-sm font-medium text-text-secondary">
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+SuccessPattern.displayName = 'SuccessPattern';

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

@@ -0,0 +1,2 @@
+export { SuccessPattern } from './SuccessPattern';
+export type { SuccessPatternProps } from './SuccessPattern';

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

@@ -7,9 +7,10 @@ export * from './CardListPattern';
 export * from './AlertPattern';
 export * from './DialogPattern';
 export * from './SkeletonPattern';
+export * from './SuccessPattern';
 export * from './FormPattern';
 export * from './EntityPatternOverview';
 export * from './EntityPatternStructured';
 export * from './EntityPatternGuided';
-export * from './CalendarPattern/CalendarPattern';
+export * from './CalendarPattern';
 export * from './MonthlyCalendarPattern';