@imksh/create 1.0.26 → 1.0.28

package/templates/react-native/src/components/ui/navigation/Tabs.tsx

@@ -1,173 +0,0 @@
-import React, { useState } from "react";
-import { View, TouchableOpacity, ScrollView, LayoutChangeEvent } from "react-native";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../../constants/Colors";
-import { Txt } from "../../common/Typography";
-import Animated, { useAnimatedStyle, withTiming, useSharedValue, Easing } from "react-native-reanimated";
-
-export interface TabItem {
-  id: string;
-  label: string;
-}
-
-export type TabsSize = "xs" | "sm" | "base" | "md" | "lg";
-
-export interface TabsProps {
-  tabs: TabItem[];
-  activeTab: string;
-  onChange: (id: string) => void;
-  variant?: "button" | "underline";
-  scrollable?: boolean;
-  size?: TabsSize;
-}
-
-export default function Tabs({
-  tabs,
-  activeTab,
-  onChange,
-  variant = "underline",
-  scrollable = false,
-  size = "base",
-}: TabsProps) {
-  const { colorScheme } = useColorScheme();
-  const theme = Colors[colorScheme ?? "light"];
-
-  const getSizeStyles = (): {
-    py: number;
-    fontSize: number;
-  } => {
-    switch (size) {
-      case "xs":
-        return { py: variant === "button" ? 5 : 6, fontSize: 11 };
-      case "sm":
-        return { py: variant === "button" ? 7 : 8, fontSize: 12 };
-      case "base":
-        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
-      case "md":
-        return { py: variant === "button" ? 11 : 12, fontSize: 15 };
-      case "lg":
-        return { py: variant === "button" ? 13 : 14, fontSize: 17 };
-      default:
-        return { py: variant === "button" ? 9 : 10, fontSize: 14 };
-    }
-  };
-
-  const sStyles = getSizeStyles();
-
-  const [tabWidths, setTabWidths] = useState<{ [key: string]: number }>({});
-  const [tabXs, setTabXs] = useState<{ [key: string]: number }>({});
-
-  const indicatorWidth = useSharedValue(0);
-  const indicatorPosition = useSharedValue(0);
-
-  React.useEffect(() => {
-    if (tabWidths[activeTab] !== undefined && tabXs[activeTab] !== undefined) {
-      const config = { duration: 250, easing: Easing.out(Easing.cubic) };
-      indicatorWidth.value = withTiming(tabWidths[activeTab], config);
-      indicatorPosition.value = withTiming(tabXs[activeTab], config);
-    }
-     
-  }, [activeTab, tabWidths, tabXs]);
-
-  const indicatorStyle = useAnimatedStyle(() => {
-    if (variant === "underline") {
-      return {
-        position: "absolute",
-        bottom: 0,
-        height: 2,
-        backgroundColor: theme.primary,
-        width: indicatorWidth.value,
-        transform: [{ translateX: indicatorPosition.value }],
-      };
-    } else {
-      return {
-        position: "absolute",
-        top: 4,
-        bottom: 4,
-        borderRadius: 12, // matched to rounded-xl in login
-        backgroundColor: theme.primary,
-        width: indicatorWidth.value,
-        transform: [{ translateX: indicatorPosition.value }],
-      };
-    }
-  });
-
-  const handleLayout = (id: string, e: LayoutChangeEvent) => {
-    const { width, x } = e.nativeEvent.layout;
-    setTabWidths((prev) => ({ ...prev, [id]: width }));
-    setTabXs((prev) => ({ ...prev, [id]: x }));
-  };
-
-  const content = (
-    <View
-      style={{
-        flexDirection: "row",
-        position: "relative",
-        ...(variant === "button"
-          ? {
-              backgroundColor: theme.base300 + "80", // like bg-base-300/50
-              borderRadius: 16, // rounded-2xl
-              padding: 4, // p-1
-              borderWidth: 1,
-              borderColor: theme.base300,
-            }
-          : {
-              borderBottomWidth: 1,
-              borderBottomColor: theme.base300,
-            }),
-      }}
-    >
-      <Animated.View style={indicatorStyle} />
-
-      {tabs.map((tab) => {
-        const isActive = activeTab === tab.id;
-        return (
-          <TouchableOpacity
-            key={tab.id}
-            onPress={() => onChange(tab.id)}
-            onLayout={(e) => handleLayout(tab.id, e)}
-            style={{
-              paddingVertical: sStyles.py,
-              paddingHorizontal: 16,
-              flex: scrollable ? undefined : 1,
-              alignItems: "center",
-              justifyContent: "center",
-              zIndex: 1,
-            }}
-          >
-            <Txt
-              variant="md"
-              style={{
-                fontSize: sStyles.fontSize,
-                fontWeight: isActive ? "600" : "500",
-                color:
-                  variant === "button" && isActive
-                    ? theme.primaryContent
-                    : isActive
-                    ? theme.primary
-                    : theme.baseContent,
-                opacity: !isActive && variant === "button" ? 0.7 : 1,
-              }}
-            >
-              {tab.label}
-            </Txt>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-
-  if (scrollable) {
-    return (
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={{ flexGrow: 1 }}
-      >
-        {content}
-      </ScrollView>
-    );
-  }
-
-  return content;
-}

package/templates/react-native/src/config/api.ts

@@ -1,27 +0,0 @@
-import axios, { AxiosResponse, AxiosRequestConfig } from "axios";
-import { get } from "../utils/storage";
-import { ApiResponse } from "../types/common.type";
-
-declare module 'axios' {
-  export interface AxiosInstance {
-    get<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    delete<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
-    post<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    put<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-    patch<T = any, R = AxiosResponse<ApiResponse<T>>, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<R>;
-  }
-}
-
-// eslint-disable-next-line import/no-named-as-default-member
-export const api = axios.create({
-  baseURL: process.env.EXPO_PUBLIC_API_URL,
-  withCredentials: true,
-});
-
-api.interceptors.request.use(async (config) => {
-  const token = await get("token");
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});

package/templates/react-native/src/config/sidebar.config.ts

@@ -1,12 +0,0 @@
-export interface SidebarMenuItem {
-  icon: string;
-  label: string;
-  route: string;
-}
-
-export const sidebarConfig: Record<string, SidebarMenuItem[]> = {
-  default: [
-    { icon: "home-outline", label: "Dashboard", route: "/" },
-    { icon: "person-outline", label: "Profile", route: "/profile" },
-  ],
-};

package/templates/react-native/src/config/tabNavigation.ts

@@ -1,34 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-
-export interface TabConfig {
-  name: string;
-  title: string;
-  baseIcon: keyof typeof Ionicons.glyphMap;
-}
-
-export const tabNavigationConfig: TabConfig[] = [
-  {
-    name: "index",
-    title: "Home",
-    baseIcon: "home",
-  },
-  {
-    name: "search",
-    title: "Search",
-    baseIcon: "search",
-  },
-  {
-    name: "dashboard",
-    title: "Dashboard",
-    baseIcon: "cube",
-  },
-  {
-    name: "profile",
-    title: "Profile",
-    baseIcon: "person-circle",
-  },
-];
-
-export const getTabConfig = (routeName: string) => {
-  return tabNavigationConfig.find((tab) => tab.name === routeName);
-};

package/templates/react-native/src/constants/Colors.ts

@@ -1,71 +0,0 @@
-export const Colors = {
-  light: {
-    // Surfaces
-    base100: "#FFFFFF",
-    base200: "#F8FAFC",
-    base300: "#E2E8F0",
-    baseContent: "#0F172A",
-
-    // Brand
-    primary: "#3B82F6",
-    primaryContent: "#FFFFFF",
-
-    secondary: "#64748B",
-    secondaryContent: "#FFFFFF",
-
-    accent: "#14B8A6",
-    accentContent: "#FFFFFF",
-
-    // Neutral
-    neutral: "#1E293B",
-    neutralContent: "#FFFFFF",
-
-    // Semantic
-    info: "#0EA5E9",
-    infoContent: "#FFFFFF",
-
-    success: "#22C55E",
-    successContent: "#FFFFFF",
-
-    warning: "#F59E0B",
-    warningContent: "#FFFFFF",
-
-    error: "#EF4444",
-    errorContent: "#FFFFFF",
-  },
-
-  dark: {
-    // Surfaces
-    base100: "#111827",
-    base200: "#1B2433",
-    base300: "#2A3445",
-    baseContent: "#F8FAFC",
-
-    // Brand
-    primary: "#60A5FA",
-    primaryContent: "#FFFFFF",
-
-    secondary: "#94A3B8",
-    secondaryContent: "#111827",
-
-    accent: "#2DD4BF",
-    accentContent: "#111827",
-
-    // Neutral
-    neutral: "#F8FAFC",
-    neutralContent: "#111827",
-
-    // Semantic
-    info: "#38BDF8",
-    infoContent: "#111827",
-
-    success: "#4ADE80",
-    successContent: "#111827",
-
-    warning: "#FBBF24",
-    warningContent: "#111827",
-
-    error: "#F87171",
-    errorContent: "#FFFFFF",
-  },
-} as const;

package/templates/react-native/src/db/index.ts

@@ -1,9 +0,0 @@
-import { drizzle } from 'drizzle-orm/expo-sqlite';
-import * as SQLite from 'expo-sqlite';
-import * as schema from './schema';
-
-// Open the local database. If it doesn't exist, it will be created.
-const expoDb = SQLite.openDatabaseSync('imksh.db');
-
-// Pass the database instance to Drizzle
-export const db = drizzle(expoDb, { schema });

package/templates/react-native/src/db/schema.ts

@@ -1,14 +0,0 @@
-import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';
-
-export const users = sqliteTable('users', {
-  id: integer('id').primaryKey({ autoIncrement: true }),
-  email: text('email').notNull().unique(),
-  name: text('name'),
-  role: text('role').default('user'),
-  createdAt: text('created_at').notNull().default('CURRENT_TIMESTAMP'),
-});
-
-export const preferences = sqliteTable('preferences', {
-  key: text('key').primaryKey(),
-  value: text('value').notNull(),
-});

package/templates/react-native/src/hooks/useDebounce.ts

@@ -1,17 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/templates/react-native/src/services/auth.service.ts

@@ -1,24 +0,0 @@
-import { api } from "../config/api";
-
-export const authService = {
-  sendOtp: (email: string) => api.post("/auth/send-signup-otp", { email }),
-
-  signup: (
-    name: string,
-    email: string,
-    password: string,
-    otp: string,
-    role = "user",
-  ) => api.post("/auth/signup", { name, email, password, otp, role }),
-
-  login: (email: string, password: string) =>
-    api.post("/auth/login", { email, password }),
-
-  getMe: () => api.get("/auth/me"),
-
-  updateMe: (data: any) => api.put("/auth/me", data),
-
-  logout: () => api.post("/auth/logout"),
-
-  savePushToken: (token: string) => api.post("/auth/push-token", { token }),
-};

package/templates/react-native/src/services/notification.service.ts

@@ -1,22 +0,0 @@
-import {api} from "../config/api";
-
-export const notificationService = {
-  getNotifications: () => {
-    return api.get("/notifications");
-  },
-
-  markAsRead: (id: string) => {
-    return api.put(`/notifications/${id}/read`);
-  },
-
-  markAllAsRead: () => {
-    return api.put("/notifications/read-all");
-  },
-
-  registerPushToken: (token: string) => {
-    return api.post("/notifications/push-token", { token });
-  },
-  sendCustomNotification: (tenantId: string, title: string, message: string) => {
-    return api.post("/notifications/send-custom", { tenantId, title, message });
-  },
-};

package/templates/react-native/src/services/permission.service.ts

@@ -1,214 +0,0 @@
-import { Platform, Alert } from "react-native";
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-  PermissionStatus,
-  openSettings,
-} from "react-native-permissions";
-
-export type AppPermissionType =
-  | "camera"
-  | "audio" // Microphone
-  | "notification" // Notifications (Push)
-  | "image" // Photo Library / Read External Storage
-  | "file" // Write External Storage
-  | "location" // Location When In Use
-  | "locationAlways" // Location Always
-  | "contacts" // Contacts
-  | "phone" // Call Phone
-  | "nearbydevice" // Bluetooth
-  | "calendar"; // Calendar
-
-class PermissionService {
-  /**
-   * Helper to determine the correct native Permission object based on platform
-   */
-  private getNativePermission(type: AppPermissionType): Permission | null {
-    if (Platform.OS === "ios") {
-      switch (type) {
-        case "camera":
-          return PERMISSIONS.IOS.CAMERA;
-        case "audio":
-          return PERMISSIONS.IOS.MICROPHONE;
-        case "image":
-          return PERMISSIONS.IOS.PHOTO_LIBRARY;
-        case "file":
-          // iOS doesn't have a broad "file system" permission for the app sandbox
-          // Usually handled via DocumentPicker or PhotoLibrary depending on use case.
-          return PERMISSIONS.IOS.PHOTO_LIBRARY;
-        case "location":
-          return PERMISSIONS.IOS.LOCATION_WHEN_IN_USE;
-        case "locationAlways":
-          return PERMISSIONS.IOS.LOCATION_ALWAYS;
-        case "contacts":
-          return PERMISSIONS.IOS.CONTACTS;
-        case "calendar":
-          return PERMISSIONS.IOS.CALENDARS;
-        case "nearbydevice":
-          return PERMISSIONS.IOS.BLUETOOTH;
-        case "notification":
-          // handled uniquely by react-native-permissions using requestNotifications
-          return null;
-        case "phone":
-          // iOS doesn't require explicit permission to use Linking.openURL('tel:...')
-          return null;
-        default:
-          return null;
-      }
-    } else if (Platform.OS === "android") {
-      switch (type) {
-        case "camera":
-          return PERMISSIONS.ANDROID.CAMERA;
-        case "audio":
-          return PERMISSIONS.ANDROID.RECORD_AUDIO;
-        case "image":
-          return PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-        case "file":
-          return PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE;
-        case "location":
-          return PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION;
-        case "locationAlways":
-          return PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION;
-        case "contacts":
-          return PERMISSIONS.ANDROID.READ_CONTACTS;
-        case "calendar":
-          return PERMISSIONS.ANDROID.READ_CALENDAR;
-        case "nearbydevice":
-          // Required for Android 12+
-          return PERMISSIONS.ANDROID.BLUETOOTH_CONNECT;
-        case "phone":
-          return PERMISSIONS.ANDROID.CALL_PHONE;
-        case "notification":
-          // handled uniquely by checkNotifications/requestNotifications
-          return null;
-        default:
-          return null;
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Check the current status of a permission without asking the user
-   */
-  async checkPermission(type: AppPermissionType): Promise<PermissionStatus> {
-    if (type === "notification") {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { checkNotifications } = require("react-native-permissions");
-      const { status } = await checkNotifications();
-      return status;
-    }
-    
-    const nativePerm = this.getNativePermission(type);
-    if (!nativePerm) {
-      // If the permission doesn't exist on this platform (e.g. Phone on iOS), we consider it granted
-      return RESULTS.GRANTED;
-    }
-    try {
-      return await check(nativePerm);
-    } catch (error) {
-      console.error(`Error checking permission ${type}:`, error);
-      return RESULTS.UNAVAILABLE;
-    }
-  }
-
-  /**
-   * Request a permission from the user
-   */
-  async requestPermission(type: AppPermissionType): Promise<PermissionStatus> {
-    if (type === "notification") {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const { requestNotifications } = require("react-native-permissions");
-      const { status } = await requestNotifications(["alert", "sound", "badge"]);
-      return status;
-    }
-
-    const nativePerm = this.getNativePermission(type);
-    if (!nativePerm) {
-      return RESULTS.GRANTED;
-    }
-    try {
-      return await request(nativePerm);
-    } catch (error) {
-      console.error(`Error requesting permission ${type}:`, error);
-      return RESULTS.UNAVAILABLE;
-    }
-  }
-
-  /**
-   * Ensures a permission is granted. If not, requests it.
-   */
-  async requirePermission(type: AppPermissionType): Promise<boolean> {
-    let status = await this.checkPermission(type);
-
-    if (status === RESULTS.DENIED) {
-      status = await this.requestPermission(type);
-    }
-
-    return status === RESULTS.GRANTED || status === RESULTS.LIMITED;
-  }
-
-  /**
-   * Helper to open the OS Settings screen for the app if permission is blocked
-   */
-  async openSettingsForApp(
-    title = "Permission Required",
-    message = "Please enable this permission in your device settings."
-  ) {
-    Alert.alert(title, message, [
-      { text: "Cancel", style: "cancel" },
-      { text: "Open Settings", onPress: () => openSettings() },
-    ]);
-  }
-  /**
-   * Utility to register and fetch the Expo Push Token for this device.
-   * This uses the unified PermissionService to request the notification permission.
-   * NOTE: This will only return a token on physical devices.
-   */
-  async registerForPushNotificationsAsync(): Promise<string | null> {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const Device = require("expo-device");
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const Notifications = require("expo-notifications");
-
-    if (!Device.isDevice) {
-      console.log("Must use physical device for Push Notifications");
-      return null;
-    }
-
-    const hasPermission = await this.requirePermission("notification");
-    if (!hasPermission) {
-      console.log("User denied push notification permissions");
-      return null;
-    }
-
-    // Set channel for Android
-    if (Platform.OS === "android") {
-      Notifications.setNotificationChannelAsync("default", {
-        name: "default",
-        importance: Notifications.AndroidImportance.MAX,
-        vibrationPattern: [0, 250, 250, 250],
-        lightColor: "#FF231F7C",
-      });
-    }
-
-    try {
-      const projectId =
-        require("../../app.json")?.expo?.extra?.eas?.projectId;
-      
-      const tokenData = await Notifications.getExpoPushTokenAsync({
-        projectId,
-      });
-
-      return tokenData.data;
-    } catch (e) {
-      console.error("Failed to get push token", e);
-      return null;
-    }
-  }
-}
-
-export const permissionService = new PermissionService();

package/templates/react-native/src/services/socket.service.ts

@@ -1,36 +0,0 @@
-import { io, Socket } from 'socket.io-client';
-import { get } from '../utils/storage';
-import Constants from 'expo-constants';
-
-let socket: Socket | null = null;
-
-// Set your backend socket URL
-const SOCKET_URL = Constants.expoConfig?.extra?.apiUrl || 'http://localhost:3000';
-
-export const initializeSocket = async () => {
-  if (socket) return;
-  const token = await get('token');
-  if (!token) return;
-
-  socket = io(SOCKET_URL, {
-    auth: { token },
-    transports: ['websocket'],
-  });
-
-  socket.on('connect', () => {
-    console.log('Connected to socket server');
-  });
-
-  socket.on('disconnect', () => {
-    console.log('Disconnected from socket server');
-  });
-};
-
-export const getSocket = () => socket;
-
-export const disconnectSocket = () => {
-  if (socket) {
-    socket.disconnect();
-    socket = null;
-  }
-};

package/templates/react-native/src/store/localStore.ts

@@ -1,7 +0,0 @@
-import { create } from "zustand";
-
-const useLocalStore = create((set, get) => ({
-  
-}));
-
-export default useLocalStore;