@imksh/create 1.0.31 → 1.0.32

package/templates/presets/production-fullstack/overrides/mobile/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/presets/production-fullstack/overrides/mobile/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>
   );
 }

package/templates/presets/production-fullstack/overrides/mobile/src/components/ui/inputs/ImagePickerModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import { Txt } from "@/components/common/Typography";
-import BottomModal from "@/components/ui/BottomModal";
+import Drawer from "@/components/ui/Drawer";
 import Button from "@/components/ui/buttons/Button";
 
 export type ImagePickerSource = "camera" | "gallery" | "both";
@@ -93,7 +93,7 @@ export default function ImagePickerModal({
   };
 
   return (
-    <BottomModal isOpen={isOpen} onClose={onClose}>
+    <Drawer isOpen={isOpen} onClose={onClose} position="bottom">
       <View className="p-6">
         <Txt variant="lg" className="font-bold mb-1 text-center">
           {title}
@@ -124,6 +124,6 @@ export default function ImagePickerModal({
           )}
         </View>
       </View>
-    </BottomModal>
+    </Drawer>
   );
 }

package/templates/presets/production-fullstack/overrides/server/package.json

@@ -7,10 +7,16 @@
     "start": "tsx src/index.ts",
     "dev": "tsx watch src/index.ts",
     "build": "tsc",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "format": "prettier --write \"src/**/*.{ts,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,json}\"",
+    "circular-check": "dpdm --circular --no-warning --no-tree --exit-code circular:1 \"src/**/*.ts\"",
+    "ts-prune": "ts-prune",
+    "ts-purns": "ts-prune",
     "db:push": "prisma db push",
     "db:generate": "prisma generate",
-    "generate:vapid": "node ./src/utils/generateVapidKeys.js",
-    "lint": "eslint src/**/*.ts"
+    "generate:vapid": "node ./src/utils/generateVapidKeys.js"
   },
   "dependencies": {
     "@prisma/adapter-pg": "^7.9.1",
@@ -49,8 +55,11 @@
     "@types/web-push": "^3.6.3",
     "@typescript-eslint/eslint-plugin": "^8.66.0",
     "@typescript-eslint/parser": "^8.66.0",
+    "dpdm": "^3.14.0",
     "eslint": "^10.8.0",
+    "prettier": "^3.4.2",
     "prisma": "^7.9.1",
+    "ts-prune": "^0.10.3",
     "tsx": "^4.23.1",
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.66.0"

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

@@ -1,176 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  View,
-  TouchableWithoutFeedback,
-  Dimensions,
-  StyleSheet,
-  KeyboardAvoidingView,
-  Platform,
-  BackHandler,
-} 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 { height } = Dimensions.get("window");
-
-interface BottomModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  heightPercent?: number; // e.g. 0.5 for 50% of the screen height
-}
-
-export default function BottomModal({
-  isOpen,
-  onClose,
-  children,
-  heightPercent = 0.5,
-}: BottomModalProps) {
-  const { colorScheme } = useColorScheme();
-  const colors = Colors[colorScheme ?? "light"];
-  const insets = useSafeAreaInsets();
-
-  const MODAL_HEIGHT = height * heightPercent;
-  const translateY = useSharedValue(MODAL_HEIGHT);
-  const backdropOpacity = useSharedValue(0);
-  const [isRendered, setIsRendered] = useState(false);
-
-  if (isOpen && !isRendered) {
-    setIsRendered(true);
-  }
-
-  useEffect(() => {
-    if (isOpen) {
-      translateY.value = withTiming(0, {
-        duration: 300,
-        easing: Easing.out(Easing.ease),
-      });
-      backdropOpacity.value = withTiming(0.4, { duration: 300 });
-    } else {
-      translateY.value = withTiming(MODAL_HEIGHT, {
-        duration: 300,
-        easing: Easing.in(Easing.ease),
-      });
-      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
-        if (finished) {
-          runOnJS(setIsRendered)(false);
-        }
-      });
-    }
-     
-  }, [isOpen, MODAL_HEIGHT]);
-
-  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 (event.translationY > 0) {
-         
-        translateY.value = event.translationY;
-      }
-    })
-    .onEnd((event) => {
-      if (event.translationY > MODAL_HEIGHT * 0.3 || event.velocityY > 500) {
-        runOnJS(onClose)();
-      } else {
-         
-        translateY.value = withTiming(0, {
-          duration: 300,
-          easing: Easing.out(Easing.ease),
-        });
-      }
-    });
-
-  const modalAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-  }));
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
-  }));
-
-  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: 999 }]}>
-          {/* Backdrop Overlay */}
-          <TouchableWithoutFeedback onPress={onClose}>
-            <Animated.View
-              style={[
-                StyleSheet.absoluteFill,
-                { backgroundColor: "#000" },
-                backdropAnimatedStyle,
-              ]}
-            />
-          </TouchableWithoutFeedback>
-
-          {/* Sliding Bottom Modal Panel */}
-          <Animated.View
-            style={[
-              {
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: MODAL_HEIGHT,
-                backgroundColor: colors.base100,
-                borderTopLeftRadius: 30,
-                borderTopRightRadius: 30,
-                elevation: 24,
-                shadowColor: "#000",
-                shadowOffset: { width: 0, height: -5 },
-                shadowOpacity: 0.15,
-                shadowRadius: 15,
-                paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
-              },
-              modalAnimatedStyle,
-            ]}
-          >
-            {/* Drag Handle Indicator */}
-            <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>
-
-            {/* Modal Content */}
-            <View className="flex-1 px-6">{children}</View>
-          </Animated.View>
-        </View>
-      </KeyboardAvoidingView>
-    </Portal>
-  );
-}