@imksh/create 1.0.24 → 1.0.26

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

@@ -0,0 +1,36 @@
+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/useAuthStore.ts

@@ -1,20 +1,15 @@
 import { create } from "zustand";
 import { authService } from "../services/auth.service";
-import { save, remove } from "../utils/storage";
-
-export interface User {
-  _id: string;
-  name: string;
-  email: string;
-  phone?: string;
-  role: string;
-  avatar?: {
-    url?: string;
-    publicId?: string;
-  };
-  createdAt?: string;
-  updatedAt?: string;
-}
+import { save, remove, get } from "../utils/storage";
+import { User } from "../types/auth.type";
+import { initializeSocket, disconnectSocket } from "../services/socket.service";
+import { useNotificationStore } from "./useNotificationStore";
+
+// ── Module-level prefetch ──────────────────────────────────────────────────
+// Kick off the AsyncStorage read the instant this module is imported
+// (before any React component mounts). By the time loadCachedUser() is
+// called from a useEffect, the promise is already resolved or very close.
+const _prefetchedUser: Promise<User | null> = get("user");
 
 export interface AuthState {
   user: User | null;
@@ -34,6 +29,13 @@ export interface AuthState {
   getMe: () => Promise<void>;
   updateProfile: (updates: Partial<User> | FormData) => Promise<boolean>;
   logout: () => Promise<void>;
+  genOtp: (email: string) => Promise<boolean>;
+  verifyOtp: (email: string, otp: string) => Promise<boolean>;
+  resetPassword: (newPassword: string) => Promise<boolean>;
+  changePassword: (oldPassword: string, newPassword: string) => Promise<boolean>;
+  setUser: (user: User) => void;
+  clearError: () => void;
+  loadCachedUser: () => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -42,6 +44,27 @@ export const useAuthStore = create<AuthState>((set) => ({
   isCheckingAuth: true,
   error: null,
 
+  setUser: (user: User) => set({ user }),
+
+  clearError: () => set({ error: null }),
+
+  loadCachedUser: async () => {
+    // Await the already-in-flight prefetch — typically resolves in <1ms here
+    const cached = await _prefetchedUser;
+    if (cached) {
+      set({ user: cached, isCheckingAuth: false });
+      // Re-establish socket + push on app resume with a cached session
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
+    } else {
+      // No cache — mark auth check done so routing doesn't hang
+      set({ isCheckingAuth: false });
+    }
+  },
+
   sendOtp: async (email: string) => {
     set({ loading: true, error: null });
     try {
@@ -74,13 +97,21 @@ export const useAuthStore = create<AuthState>((set) => ({
         otp,
         role,
       );
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after signup
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -97,13 +128,21 @@ export const useAuthStore = create<AuthState>((set) => ({
     set({ loading: true, error: null });
     try {
       const { data } = await authService.login(email, password);
-      if (data.token) {
-        save("token", data.token);
+      if (data.data?.token) {
+        save("token", data.data.token);
       }
+      const user = data.data?.user;
+      if (user) save("user", user);
       set({
-        user: data.data,
+        user,
         loading: false,
       });
+      // Initialise socket + push after login
+      initializeSocket();
+      const notifStore = useNotificationStore.getState();
+      notifStore.listenForSocketEvents();
+      notifStore.registerForPushNotificationsAsync();
+      notifStore.fetchNotifications();
       return true;
     } catch (err: any) {
       set({
@@ -123,7 +162,7 @@ export const useAuthStore = create<AuthState>((set) => ({
     save("token", "demo-token-123");
     set({
       user: {
-        _id: "demo_user_123",
+        id: "demo_user_123",
         name: "Demo User",
         email: "demo@imksh.com",
         role: "admin",
@@ -133,12 +172,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   },
 
   getMe: async () => {
-    set({ isCheckingAuth: true });
     try {
       const { data } = await authService.getMe();
-      set({ user: data.data, isCheckingAuth: false });
-    } catch {
-      set({ isCheckingAuth: false });
+      const user = data.data;
+      // Always update cache with fresh server data
+      if (user) save("user", user);
+      set({ user, isCheckingAuth: false });
+      // Network failed — cached user (already loaded) stays in place
     } finally {
       set({ isCheckingAuth: false });
     }
@@ -167,7 +207,9 @@ export const useAuthStore = create<AuthState>((set) => ({
     } catch {
       // ignore errors — cookie may already be expired
     } finally {
-      remove("token");
+      await remove("token");
+      await remove("user");   // clear cached user on logout
+      disconnectSocket();
       set({ loading: false });
     }
     set({
@@ -175,4 +217,57 @@ export const useAuthStore = create<AuthState>((set) => ({
       error: null,
     });
   },
+
+  genOtp: async (email: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.genOtp(email);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  verifyOtp: async (email: string, otp: string) => {
+    set({ loading: true, error: null });
+    try {
+      const { data } = await authService.verifyOtp(email, otp);
+      if (data.token) save("token", data.token);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  resetPassword: async (newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.resetPassword(newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
+
+  changePassword: async (oldPassword: string, newPassword: string) => {
+    set({ loading: true, error: null });
+    try {
+      await authService.changePassword(oldPassword, newPassword);
+      return true;
+    } catch (err: any) {
+      set({ error: err.response?.data?.message || err.message, loading: false });
+      return false;
+    } finally {
+      set({ loading: false });
+    }
+  },
 }));

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

@@ -0,0 +1,178 @@
+import { create } from "zustand";
+import { notificationService } from "../services/notification.service";
+import Constants from "expo-constants";
+import { Platform } from "react-native";
+import { getSocket } from "../services/socket.service";
+import { toast } from "../utils/toast";
+
+export interface AppNotification {
+  id: string;
+  title: string;
+  message: string;
+  type: string;
+  url: string | null;
+  isRead: boolean;
+  metadata: any | null;
+  createdAt: string;
+}
+
+interface NotificationState {
+  notifications: AppNotification[];
+  unreadCount: number;
+  loading: boolean;
+  error: string | null;
+  
+  fetchNotifications: () => Promise<void>;
+  markAsRead: (id: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  registerForPushNotificationsAsync: () => Promise<string | undefined>;
+  listenForSocketEvents: () => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set, get) => ({
+  notifications: [],
+  unreadCount: 0,
+  loading: false,
+  error: null,
+
+  fetchNotifications: async () => {
+    set({ loading: true, error: null });
+    try {
+      const response = await notificationService.getNotifications();
+      const notifications = response.data.data;
+      const unreadCount = notifications.filter((n: AppNotification) => !n.isRead).length;
+      
+      set({
+        notifications,
+        unreadCount,
+        loading: false,
+      });
+    } catch (error: any) {
+      set({
+        error: error.response?.data?.message || "Failed to fetch notifications",
+        loading: false,
+      });
+    }
+  },
+
+  markAsRead: async (id: string) => {
+    try {
+      // Optimistic update
+      const { notifications, unreadCount } = get();
+      const updated = notifications.map(n => 
+        n.id === id ? { ...n, isRead: true } : n
+      );
+      
+      set({ 
+        notifications: updated, 
+        unreadCount: Math.max(0, unreadCount - 1) 
+      });
+
+      await notificationService.markAsRead(id);
+    } catch{
+      // Revert if failed
+      get().fetchNotifications();
+    }
+  },
+
+  markAllAsRead: async () => {
+    try {
+      const { notifications } = get();
+      const updated = notifications.map(n => ({ ...n, isRead: true }));
+      
+      set({ 
+        notifications: updated, 
+        unreadCount: 0 
+      });
+
+      await notificationService.markAllAsRead();
+    } catch{
+      get().fetchNotifications();
+    }
+  },
+
+  registerForPushNotificationsAsync: async () => {
+    let token;
+
+    const isExpoGo = Constants.appOwnership === 'expo';
+    if (isExpoGo && Platform.OS === 'android') {
+      console.log('Skipping push notification registration: not supported in Expo Go on Android (SDK 53+).');
+      return;
+    }
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const Notifications = require("expo-notifications");
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const Device = require("expo-device");
+
+      if (Platform.OS === 'android') {
+        await Notifications.setNotificationChannelAsync('default', {
+          name: 'default',
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: '#FF231F7C',
+        });
+      }
+
+      if (Device.isDevice) {
+        const { status: existingStatus } = await Notifications.getPermissionsAsync();
+        let finalStatus = existingStatus;
+        
+        if (existingStatus !== 'granted') {
+          const { status } = await Notifications.requestPermissionsAsync();
+          finalStatus = status;
+        }
+        
+        if (finalStatus !== 'granted') {
+          console.log('Failed to get push token for push notification!');
+          return;
+        }
+        
+        const projectId =
+          Constants.expoConfig?.extra?.eas?.projectId ??
+          Constants.easConfig?.projectId ??
+          "f9a7053c-bc16-4717-805b-560c5a35e974";
+
+        token = (await Notifications.getExpoPushTokenAsync({ projectId })).data;
+        
+        // Send token to backend
+        try {
+          await notificationService.registerPushToken(token);
+        } catch (e) {
+          console.error("Failed to save push token to server", e);
+        }
+      } else {
+        console.log('Must use physical device for Push Notifications');
+      }
+    } catch (e) {
+      console.warn("Failed to setup push notifications dynamically:", e);
+    }
+
+    return token;
+  },
+
+  listenForSocketEvents: () => {
+    const socket = getSocket();
+    if (!socket) return;
+
+    // Remove any existing listener to prevent duplicates
+    socket.off("new_notification");
+
+    socket.on("new_notification", (notification: AppNotification) => {
+      const { notifications, unreadCount } = get();
+      
+      // Ensure we don't duplicate notifications if they were fetched via API around the same time
+      const exists = notifications.find((n) => n.id === notification.id);
+      if (!exists) {
+        set({
+          notifications: [notification, ...notifications],
+          unreadCount: unreadCount + 1,
+        });
+        
+        // Alert the user visually!
+        toast.info(notification.title, notification.message);
+      }
+    });
+  }
+}));

package/templates/react-native/src/types/auth.type.ts

@@ -0,0 +1,14 @@
+export interface User {
+  id: string; // Updated from _id for Prisma consistency
+  _id?: string; // Fallback for mongo legacy if any
+  name: string;
+  email: string;
+  phone?: string;
+  role: string;
+  avatar?: {
+    url?: string;
+    publicId?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}

package/templates/react-native/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "paths": {

package/templates/react-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/mern-react-native/mobile/.env.example

@@ -1,2 +0,0 @@
-EXPO_PUBLIC_API_URL=your_api
-EXPO_PUBLIC_APP_NAME=MyApp

package/templates/mern-react-native/mobile/.vscode/extensions.json

@@ -1 +0,0 @@
-{ "recommendations": ["expo.vscode-expo-tools"] }

package/templates/mern-react-native/mobile/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
-  }
-}

package/templates/mern-react-native/mobile/README.md

@@ -1,159 +0,0 @@
-# 📱 Mobile App (React Native + Expo)
-
-This is the mobile application of the starter template, built entirely with **React Native** and **Expo**. It is designed to be a highly scalable boilerplate featuring a modern tech stack, a unified permissions system, and a robust custom UI component library.
-
-## ✨ Key Features
-
-- **Expo Router**: File-based routing that makes navigation predictable and deeply linkable.
-- **NativeWind (Tailwind CSS)**: Styling is powered by Tailwind CSS classes, complete with dynamic Light/Dark mode support.
-- **Custom UI Library**: Beautiful, highly-reusable components built from scratch (e.g., `Tabs`, `Button`, `Image`, `ScrollContainer`, `Input`) designed to work perfectly across both themes.
-- **Zustand State Management**: Lightweight and fast global state management, used to handle the user's auth session securely.
-- **Unified Permission Service**: A centralized handler for iOS and Android hardware permissions using `react-native-permissions`.
-- **Push Notification Pipeline**: Built-in support for generating Expo Push Tokens on physical devices and syncing them to your backend.
-
-## 🧩 Included UI Components
-
-The starter kit comes with a massive, completely customizable, and gesture-driven UI library built from scratch out of atomic elements.
-
-- **Layout**: `Container`, `Section`, `ScrollContainer`, `HStack`, `VStack`
-- **Buttons**: `Button` (with variants, sizes, and soft props), `IconButton`, `FloatingActionButton`
-- **Data Display**: `Avatar`, `Badge`, `Accordion`, `SwipeableRow`, `Card`
-- **Inputs**: `Input`, `Checkbox`, `Radio`, `Switch`, `Slider`, `SearchBar`
-- **Feedback & Loading**: `Spinner`, `ProgressBar`, `CircularProgress`, `Skeleton`, `GestureWrapper`
-- **Navigation**: `Tabs` (Underline & Button variants)
-- **Overlay & Modals**: `BottomModal` (Gesture-driven bottom sheet)
-
-## 🔌 Included Services
-
-Pre-configured service wrappers allow you to focus on logic rather than boilerplate:
-
-- **`auth.service.ts`**: Prebuilt Axios integrations for `sendOtp`, `signup`, `login`, `updateMe`, `logout`, and `savePushToken`.
-- **`permission.service.ts`**: A unified permissions handler exposing `requirePermission`, `openSettingsForApp`, and `registerForPushNotificationsAsync`.
-
----
-
-## 🛠 Tech Stack
-
-- **Framework**: Expo / React Native
-- **Styling**: NativeWind (Tailwind v3) & `react-native-reanimated`
-- **Routing**: `expo-router`
-- **State**: `zustand`
-- **Storage**: `@react-native-async-storage/async-storage`
-- **API**: `axios`
-
----
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-Make sure you have the following installed on your machine:
-
-- Node.js (v18+)
-- [EAS CLI](https://docs.expo.dev/build/setup/) (`npm install -g eas-cli`)
-- iOS Simulator (macOS only) or Android Emulator
-
-### Installation
-
-1. Navigate to the `mobile` directory:
-   ```bash
-   cd mobile
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development server:
-   ```bash
-   npm run dev
-   ```
-4. Press `i` to open the app on an iOS Simulator, or `a` to open it on an Android Emulator.
-
----
-
-## 🏗 Project Structure
-
-```bash
-src/
-├── app/                  # Expo Router screens (e.g., _layout.tsx, login.tsx, (tabs)/)
-├── components/           # Reusable UI components
-│   ├── common/           # Generic components (Loading, etc.)
-│   └── ui/               # Custom UI library (Button, Tabs, Image, Input)
-├── constants/            # Theme tokens (Colors, Typography)
-├── services/             # API and business logic wrappers
-│   ├── auth.service.ts   # Axios API calls for authentication
-│   └── permission.service.ts # Unified hardware permission logic
-├── store/                # Zustand global stores (useAuthStore.ts)
-└── utils/                # Helper functions (storage.ts, api.ts)
-```
-
----
-
-## 📦 Build Instructions
-
-This template is configured for both cloud-based builds (via EAS) and fast local compilations using standard Gradle scripts.
-
-### Cloud Builds (Expo Application Services)
-
-If you don't have Android Studio or Xcode configured, you can build directly in the cloud:
-
-```bash
-# Build an Android APK (Uses the "preview" profile in eas.json)
-npm run build:eas:apk
-
-# Build an Android App Bundle (.aab) for the Play Store (Uses "production" profile)
-npm run build:eas:aab
-
-# Build an iOS app
-npm run build:ios
-```
-
-### Local Builds (Requires Android Studio/SDK)
-
-If you have your local SDK set up, you can compile extremely fast on your own machine:
-
-```bash
-# Compile a local .apk
-npm run build:apk
-
-# Compile a local .aab
-npm run build:aab
-```
-
-_(Note: Rebuilding natively is required whenever you add new npm packages containing native code, or modify the `app.json` plugins!)_
-
----
-
-## 🔒 Handling Permissions
-
-Rather than installing different disjointed `expo-*` libraries every time you need hardware access, this template centralizes all permission requests using the `PermissionService`.
-
-To check or request access:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-
-// Calling requirePermission() will automatically prompt the user if they haven't been asked yet
-const hasCameraAccess = await permissionService.requirePermission("camera");
-
-if (!hasCameraAccess) {
-  // Deep link the user to the OS settings if they permanently blocked the permission
-  permissionService.openSettingsForApp();
-}
-```
-
-## 🔔 Push Notifications
-
-To request push notifications, just call the utility function. It will automatically detect if it is running on a physical device, set up the required Android notification channels, fetch the token from Apple/Google, and return it:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-import { authService } from "@/services/auth.service";
-
-const token = await permissionService.registerForPushNotificationsAsync();
-
-// Send it to the backend!
-if (token) {
-  await authService.savePushToken(token);
-}
-```

package/templates/mern-react-native/mobile/docs/README.md

@@ -1,17 +0,0 @@
-# Mobile App Documentation
-
-Welcome to the documentation for the Expo React Native Mobile App. This folder contains detailed information on how to use the app, navigate its architecture, and utilize the custom UI component library.
-
-## Table of Contents
-
-### Core
-- [Getting Started](./getting-started.md)
-
-### UI Component Library
-- [Buttons](./components/buttons.md)
-- [Data Display](./components/data-display.md) (e.g., SwipeableRow, Accordion, Avatar)
-- [Feedback](./components/feedback.md) (e.g., Progress, Spinners)
-- [Gestures & Touch](./components/gestures.md) (e.g., GestureWrapper)
-- [Inputs](./components/inputs.md) (e.g., TextInput, OTPInput, Switches)
-- [Layout](./components/layout.md) (e.g., Container, Divider, Grid)
-- [Navigation](./components/navigation.md) (e.g., Tabs, Pagination, ProgressStepper)

package/templates/mern-react-native/mobile/docs/components/buttons.md

@@ -1,40 +0,0 @@
-# Button Components
-
-Buttons trigger actions. The custom UI library provides several highly polished button variations.
-
-## `Button`
-The primary button component for the application, supporting different variants (solid, outline, ghost), colors, and loading states.
-
-### Usage Example
-```tsx
-import { Button } from '@/components/ui/buttons/Button';
-
-export default function Actions() {
-  return (
-    <>
-      <Button 
-        title="Submit" 
-        onPress={() => console.log('Primary pressed')} 
-      />
-      <Button 
-        title="Cancel" 
-        variant="outline"
-        onPress={() => console.log('Outline pressed')} 
-      />
-      <Button 
-        title="Saving..." 
-        loading={true}
-      />
-    </>
-  );
-}
-```
-
-## `IconButton`
-A button that only contains an icon without text. Perfect for header buttons or tight layouts.
-
-## `FloatingActionButton` (FAB)
-A persistent button that hovers over the screen, typically placed in the bottom right corner. Ideal for primary creation actions like "Compose Message".
-
-## `ButtonGroup`
-A wrapper to seamlessly group multiple related buttons together horizontally.