@imksh/create 1.0.31 → 1.0.33

package/templates/layers/react-native/base/src/components/ui/Drawer.tsx

@@ -0,0 +1,344 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  BackHandler,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Portal } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+export type DrawerPosition = "top" | "bottom" | "left" | "right";
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  position?: DrawerPosition;
+  sizePercent?: number; // e.g. 0.5 for 50% of the screen height (top/bottom) or width (left/right)
+  heightPercent?: number; // backwards compatibility alias for top/bottom
+  widthPercent?: number; // backwards compatibility alias for left/right
+  showHandle?: boolean;
+  zIndex?: number;
+}
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  children,
+  position = "bottom",
+  sizePercent,
+  heightPercent,
+  widthPercent,
+  showHandle = true,
+  zIndex = 50,
+}: DrawerProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  const isVertical = position === "top" || position === "bottom";
+  const defaultPercent = isVertical ? 0.5 : 0.75;
+  const resolvedPercent =
+    sizePercent ??
+    (isVertical ? heightPercent : widthPercent) ??
+    defaultPercent;
+
+  const DRAWER_SIZE = isVertical
+    ? SCREEN_HEIGHT * resolvedPercent
+    : SCREEN_WIDTH * resolvedPercent;
+
+  const getClosedOffset = () => {
+    switch (position) {
+      case "top":
+      case "left":
+        return -DRAWER_SIZE;
+      case "bottom":
+      case "right":
+        return DRAWER_SIZE;
+    }
+  };
+
+  const translate = useSharedValue(getClosedOffset());
+  const backdropOpacity = useSharedValue(0);
+  const [isRendered, setIsRendered] = useState(false);
+
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+
+  useEffect(() => {
+    const closedOffset = getClosedOffset();
+    if (isOpen) {
+      translate.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0.4, { duration: 300 });
+    } else {
+      translate.value = withTiming(closedOffset, {
+        duration: 300,
+        easing: Easing.in(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+        if (finished) {
+          runOnJS(setIsRendered)(false);
+        }
+      });
+    }
+  }, [isOpen, DRAWER_SIZE, position]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const backAction = () => {
+      onClose();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [isOpen, onClose]);
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (position === "bottom") {
+        if (event.translationY > 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "top") {
+        if (event.translationY < 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "left") {
+        if (event.translationX < 0) {
+          translate.value = event.translationX;
+        }
+      } else if (position === "right") {
+        if (event.translationX > 0) {
+          translate.value = event.translationX;
+        }
+      }
+    })
+    .onEnd((event) => {
+      let shouldClose = false;
+      if (position === "bottom") {
+        shouldClose =
+          event.translationY > DRAWER_SIZE * 0.3 || event.velocityY > 500;
+      } else if (position === "top") {
+        shouldClose =
+          event.translationY < -DRAWER_SIZE * 0.3 || event.velocityY < -500;
+      } else if (position === "left") {
+        shouldClose =
+          event.translationX < -DRAWER_SIZE * 0.3 || event.velocityX < -500;
+      } else if (position === "right") {
+        shouldClose =
+          event.translationX > DRAWER_SIZE * 0.3 || event.velocityX > 500;
+      }
+
+      if (shouldClose) {
+        runOnJS(onClose)();
+      } else {
+        translate.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease),
+        });
+      }
+    });
+
+  const drawerAnimatedStyle = useAnimatedStyle(() => {
+    if (position === "left" || position === "right") {
+      return {
+        transform: [{ translateX: translate.value }],
+      };
+    }
+    return {
+      transform: [{ translateY: translate.value }],
+    };
+  });
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const getContainerStyle = (): ViewStyle => {
+    const baseShadow: ViewStyle = {
+      backgroundColor: colors.base100,
+      elevation: 24,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 15,
+    };
+
+    switch (position) {
+      case "top":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderBottomLeftRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 0, height: 5 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+        };
+      case "bottom":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderTopRightRadius: 30,
+          shadowOffset: { width: 0, height: -5 },
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+        };
+      case "left":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: DRAWER_SIZE,
+          borderTopRightRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingLeft: insets.left > 0 ? insets.left : 0,
+        };
+      case "right":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderBottomLeftRadius: 30,
+          shadowOffset: { width: -5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingRight: insets.right > 0 ? insets.right : 0,
+        };
+    }
+  };
+
+  if (!isRendered && !isOpen) return null;
+
+  return (
+    <Portal>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={[StyleSheet.absoluteFill, { zIndex }]}>
+          {/* Backdrop Overlay */}
+          <TouchableWithoutFeedback onPress={onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: "#000" },
+                backdropAnimatedStyle,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+
+          {/* Sliding Drawer Panel */}
+          <Animated.View style={[getContainerStyle(), drawerAnimatedStyle]}>
+            {position === "bottom" && (
+              <View className="flex-1">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-t-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+
+            {position === "top" && (
+              <View className="flex-1">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-b-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "left" && (
+              <View className="flex-1 flex-row">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-r-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "right" && (
+              <View className="flex-1 flex-row">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-l-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </Portal>
+  );
+}

package/templates/layers/react-native/base/src/components/ui/Sidebar.tsx

@@ -21,7 +21,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAuthStore } from "../../store/useAuthStore";
 import { sidebarConfig } from "../../config/sidebar.config";
-import { router } from "expo-router";
+import { router, type Href } from "expo-router";
 import Image from "./data-display/Image";
 
 const { width } = Dimensions.get("window");
@@ -40,10 +40,10 @@ const MenuItem = ({
   onPress,
   colors,
 }: {
-  icon: any;
+  icon: keyof typeof Ionicons.glyphMap;
   label: string;
   onPress?: () => void;
-  colors: any;
+  colors: (typeof Colors)[keyof typeof Colors];
 }) => (
   <TouchableOpacity
     activeOpacity={0.7}
@@ -217,7 +217,7 @@ export default function Sidebar({
                     label={item.label}
                     onPress={() => {
                       onClose();
-                      router.push(item.route as any);
+                      router.push(item.route as Href);
                     }}
                     colors={colors}
                   />

package/templates/layers/react-native/base/src/components/ui/buttons/Button.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   TouchableOpacity,
   ActivityIndicator,
@@ -32,6 +31,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   isFullWidth?: boolean;
   soft?: boolean;
   outline?: boolean;
+  className?: string;
 }
 
 export default function Button({
@@ -46,6 +46,7 @@ export default function Button({
   outline = false,
   style,
   disabled,
+  className = "",
   ...props
 }: ButtonProps) {
   const { colorScheme } = useColorScheme();
@@ -109,7 +110,8 @@ export default function Button({
   const vStyles = getVariantStyles();
   if (outline) {
     vStyles.border = vStyles.bg === "transparent" ? theme.base300 : vStyles.bg;
-    vStyles.text = vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
+    vStyles.text =
+      vStyles.bg === "transparent" ? theme.baseContent : vStyles.bg;
     vStyles.bg = "transparent";
   } else if (soft && variant !== "ghost" && variant !== "outline") {
     vStyles.text = vStyles.bg;
@@ -124,9 +126,10 @@ export default function Button({
     <TouchableOpacity
       activeOpacity={0.7}
       disabled={isDisabled}
+      className={className}
       style={[
         {
-          backgroundColor: vStyles.bg as any,
+          backgroundColor: vStyles.bg,
           height: sStyles.height,
           paddingHorizontal: sStyles.px,
           borderRadius: 12,
@@ -134,7 +137,7 @@ export default function Button({
           alignItems: "center",
           justifyContent: "center",
           opacity: isDisabled ? 0.6 : 1,
-          borderWidth: (variant === "outline" || outline) ? 1 : 0,
+          borderWidth: variant === "outline" || outline ? 1 : 0,
           borderColor: vStyles.border,
           width: isFullWidth ? "100%" : undefined,
         },
@@ -144,13 +147,29 @@ export default function Button({
     >
       {/* Loading overlay */}
       {isLoading && (
-        <View style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "center", alignItems: "center" }}>
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
           <ActivityIndicator color={vStyles.text} size="small" />
         </View>
       )}
 
       {/* Button content (hidden while loading to maintain dimensions) */}
-      <View style={{ flexDirection: "row", alignItems: "center", opacity: isLoading ? 0 : 1 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          opacity: isLoading ? 0 : 1,
+        }}
+      >
         {leftIcon && (
           <Ionicons
             name={leftIcon}
@@ -163,6 +182,10 @@ export default function Button({
           color={vStyles.text}
           weight="semibold"
           style={{ fontSize: sStyles.fontSize }}
+          allowFontScaling={true}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          adjustsFontSizeToFit
         >
           {label}
         </Txt>

package/templates/layers/react-native/base/src/components/ui/data-display/Accordion.tsx

@@ -72,9 +72,9 @@ export default function Accordion({ title, children }: AccordionProps) {
           style={{ position: "absolute", width: "100%", paddingHorizontal: 16, paddingBottom: 16 }}
         >
           {/* This inner view is measured */}
-          <View ref={aref as any}>
+          <Animated.View ref={aref}>
             {children}
-          </View>
+          </Animated.View>
         </View>
       </Animated.View>
     </View>

package/templates/layers/react-native/base/src/components/ui/data-display/Badge.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { View, ViewProps } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
@@ -80,7 +79,7 @@ export default function Badge({
     <View
       style={[
         {
-          backgroundColor: vStyles.bg as any,
+          backgroundColor: vStyles.bg,
           height: sStyles.height,
           paddingHorizontal: sStyles.px,
           borderRadius: 9999,

package/templates/layers/react-native/base/src/components/ui/data-display/Image.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Image as ExpoImage, ImageProps as ExpoImageProps } from "expo-image";
+import { Image as ExpoImage, ImageProps as ExpoImageProps, ImageSource } from "expo-image";
 import { View, ActivityIndicator, DimensionValue } from "react-native";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
 
 export interface ImageProps extends Omit<ExpoImageProps, "source"> {
   fallbackIcon?: React.ReactNode;
-  src?: string | number | any;
-  source?: any;
+  src?: string | number | ImageSource;
+  source?: ImageSource | string | number;
   width?: DimensionValue;
   height?: DimensionValue;
 }

package/templates/layers/react-native/base/src/components/ui/data-display/SwipeableRow.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
@@ -30,13 +36,24 @@ export const SwipeableRow: React.FC<SwipeableRowProps> = ({
 }) => {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
-  const colors = Colors[isDark ? "dark" : "light"];
+  const _colors = Colors[isDark ? "dark" : "light"];
 
-  const renderActions = (actions: SwipeAction[], progress: any, dragX: any, isRight: boolean) => {
+  const renderActions = (
+    actions: SwipeAction[],
+    _progress: unknown,
+    _dragX: unknown,
+    isRight: boolean,
+  ) => {
     if (actions.length === 0) return null;
 
     return (
-      <View style={[styles.actionsContainer, isRight ? styles.rightActions : styles.leftActions]}>
+      <View
+        style={[
+          styles.actionsContainer,
+          isRight ? styles.rightActions : styles.leftActions,
+          { borderRadius: 16, overflow: "hidden", marginVertical: 1 },
+        ]}
+      >
         {actions.map((action, index) => {
           const actionWidth = action.width || 75;
           return (
@@ -62,13 +79,17 @@ export const SwipeableRow: React.FC<SwipeableRowProps> = ({
       friction={2}
       leftThreshold={40}
       rightThreshold={40}
-      renderLeftActions={(progress, dragX) => renderActions(leftActions, progress, dragX, false)}
-      renderRightActions={(progress, dragX) => renderActions(rightActions, progress, dragX, true)}
+      renderLeftActions={(progress, dragX) =>
+        renderActions(leftActions, progress, dragX, false)
+      }
+      renderRightActions={(progress, dragX) =>
+        renderActions(rightActions, progress, dragX, true)
+      }
       onSwipeableOpen={onSwipeOpen}
       onSwipeableClose={onSwipeClose}
       containerStyle={containerStyle}
     >
-      <View style={{ backgroundColor: colors.base100 }}>
+      <View style={{ flex: 1, backgroundColor: "transparent" }}>
         {children}
       </View>
     </Swipeable>

package/templates/layers/react-native/base/src/components/ui/feedback/GestureWrapper.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { Gesture, GestureDetector, GestureType } from "react-native-gesture-handler";
+import {
+  Gesture,
+  GestureDetector,
+  GestureType,
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from "react-native-gesture-handler";
 import Animated, { runOnJS } from "react-native-reanimated";
 
 interface GestureWrapperProps {
@@ -12,9 +19,9 @@ interface GestureWrapperProps {
   onDoubleTap?: () => void;
   
   // Pan/Drag Gestures
-  onPanStart?: (e: any) => void;
-  onPanUpdate?: (e: any) => void;
-  onPanEnd?: (e: any) => void;
+  onPanStart?: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+  onPanUpdate?: (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+  onPanEnd?: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
 
   // Swipe Gestures
   onSwipeLeft?: () => void;

package/templates/layers/react-native/base/src/components/ui/inputs/DatePicker.tsx

@@ -4,7 +4,7 @@ import { Txt } from "../../common/Typography";
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import { Colors } from "../../../constants/Colors";
-import BottomModal from "../BottomModal";
+import Drawer from "../Drawer";
 import Button from "../buttons/Button";
 import dayjs from "dayjs";
 
@@ -104,7 +104,7 @@ export default function DatePicker({
         <Ionicons name="calendar-outline" size={18} color={colors.primary} />
       </TouchableOpacity>
 
-      <BottomModal isOpen={isOpen} onClose={() => setIsOpen(false)} heightPercent={0.65}>
+      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} position="bottom" sizePercent={0.65}>
         <View className="p-4 flex-1">
           <Txt variant="lg" className="font-bold text-center mb-4">
             {label}
@@ -180,7 +180,7 @@ export default function DatePicker({
             <Button label="Close" variant="outline" onPress={() => setIsOpen(false)} className="w-full" />
           </View>
         </View>
-      </BottomModal>
+      </Drawer>
     </View>
   );
 }