@imksh/create 1.0.30 → 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/javascript/src/components/ui/sidebar.jsx

@@ -1,169 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { NavLink } from "react-router-dom";
-import { IoClose } from "react-icons/io5";
-import { useUiStore } from "../../store/useUiStore";
-import { navigation } from "../../config/navigation";
-import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
-import appConfig from "../../config/appConfig";
-import { motion, AnimatePresence } from "framer-motion";
-import useWindowSize from "../../hooks/useWindowSize";
-const Sidebar = () => {
-  const { open, close, collapsed, toggleCollapsed } = useUiStore();
-  const { theme, toggleTheme } = useUiStore();
-  const { width } = useWindowSize();
-  const isMobile = width < 1024;
-  const showSidebar = !isMobile || open;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(AnimatePresence, {
-        children:
-          isMobile &&
-          open &&
-          /* @__PURE__ */ jsx(motion.div, {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.2 },
-            className: "fixed inset-0 bg-base-100/40 z-40 lg:hidden",
-            onClick: close,
-          }),
-      }),
-      /* @__PURE__ */ jsx(AnimatePresence, {
-        children:
-          showSidebar &&
-          /* @__PURE__ */ jsxs(motion.aside, {
-            initial: isMobile ? { x: "-100%" } : false,
-            animate: { x: 0 },
-            exit: isMobile ? { x: "-100%" } : void 0,
-            transition: { type: "tween", duration: 0.25, ease: "easeInOut" },
-            className: `
-              fixed lg:static top-0 left-0 z-50
-              h-screen bg-base-200 border-r border-base-300
-              flex flex-col overflow-hidden
-              transition-[width] duration-300
-              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
-            `,
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                className:
-                  "h-16 border-b border-base-300 flex items-center justify-between px-5",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    className: "flex items-center gap-3",
-                    children: [
-                      appConfig.app.logo
-                        ? /* @__PURE__ */ jsx("img", {
-                            src: appConfig.app.logo,
-                            alt: "",
-                            className: "w-8 h-8 rounded-lg",
-                          })
-                        : /* @__PURE__ */ jsx("div", {
-                            className: "flex items-center",
-                            children: /* @__PURE__ */ jsx("div", {
-                              className:
-                                "bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold",
-                              children: appConfig.app.name.charAt(0),
-                            }),
-                          }),
-                      /* @__PURE__ */ jsx("h1", {
-                        className: `text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`,
-                        children: appConfig.app.name,
-                      }),
-                    ],
-                  }),
-                  /* @__PURE__ */ jsx("button", {
-                    className: `btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`,
-                    onClick: close,
-                    children: /* @__PURE__ */ jsx(IoClose, { size: 20 }),
-                  }),
-                ],
-              }),
-              /* @__PURE__ */ jsx("nav", {
-                className: "flex-1 overflow-y-auto p-2.5 space-y-1",
-                "data-lenis-prevent": true,
-                children: navigation.map((item) => {
-                  const Icon = item.icon;
-                  return /* @__PURE__ */ jsxs(
-                    NavLink,
-                    {
-                      to: item.path,
-                      onClick: isMobile ? close : void 0,
-                      className: ({
-                        isActive,
-                      }) => `flex items-center gap-3 rounded-box px-4 py-3 duration-0  h-12 
-                      ${isActive ? "bg-primary text-primary-content" : "hover:bg-base-300"} ${collapsed ? "justify-center px-0" : ""}`,
-                      title: collapsed ? item.title : "",
-                      children: [
-                        /* @__PURE__ */ jsx(Icon, {
-                          size: 18,
-                          className: `shrink-0 ${collapsed && "mr-auto"}`,
-                        }),
-                        !collapsed &&
-                          /* @__PURE__ */ jsx("span", {
-                            className:
-                              "font-medium transition-all duration-0 whitespace-nowrap",
-                            children: item.title,
-                          }),
-                      ],
-                    },
-                    item.path,
-                  );
-                }),
-              }),
-              /* @__PURE__ */ jsxs("button", {
-                onClick: toggleTheme,
-                className: `w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`,
-                title: "Toggle Theme",
-                children: [
-                  !collapsed &&
-                    /* @__PURE__ */ jsx("span", {
-                      children: theme === "dark" ? "Dark" : "Light",
-                    }),
-                  /* @__PURE__ */ jsx("span", {
-                    className: "btn btn-xs btn-ghost btn-circle ",
-                    children:
-                      theme === "dark"
-                        ? /* @__PURE__ */ jsx(Sun, {
-                            size: 16,
-                            className: "shrink-0 ",
-                          })
-                        : /* @__PURE__ */ jsx(Moon, {
-                            size: 16,
-                            className: "shrink-0",
-                          }),
-                  }),
-                ],
-              }),
-              /* @__PURE__ */ jsx("div", {
-                className:
-                  "p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2",
-                children: /* @__PURE__ */ jsxs("button", {
-                  onClick: toggleCollapsed,
-                  className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`,
-                  title: collapsed ? "Expand Sidebar" : "Collapse Sidebar",
-                  children: [
-                    collapsed
-                      ? /* @__PURE__ */ jsx(ChevronRight, {
-                          size: 18,
-                          className: "shrink-0 mr-auto",
-                        })
-                      : /* @__PURE__ */ jsx(ChevronLeft, {
-                          size: 18,
-                          className: "shrink-0",
-                        }),
-                    !collapsed &&
-                      /* @__PURE__ */ jsx("span", {
-                        className: "truncate",
-                        children: "Collapse",
-                      }),
-                  ],
-                }),
-              }),
-            ],
-          }),
-      }),
-    ],
-  });
-};
-var sidebar_default = Sidebar;
-export { sidebar_default as default };