@imksh/create 1.0.30 → 1.0.32

package/templates/layers/electron/javascript/src/config/appConfig.js

@@ -0,0 +1,51 @@
+const appConfig = {
+  app: {
+    name: "Electron App",
+    logo: "./logo.png",
+    shortName: "App",
+    description: "An Electron application built with @imksh/create",
+    version: "1.0.0",
+    author: "imksh",
+  },
+
+  api: {
+    baseURL: import.meta.env.VITE_API_URL,
+    timeout: 30000,
+  },
+
+  routes: {
+    home: "/",
+    login: "/login",
+    profile: "/profile",
+  },
+
+  pagination: {
+    pageSize: 10,
+  },
+
+  github: {
+    repository: "",
+  },
+
+  social: {
+    website: "",
+    linkedin: "",
+    github: "",
+    twitter: "",
+  },
+
+  features: {
+    darkMode: true,
+    notifications: true,
+    sidebar: true,
+    electron: true,
+    customTitleBar: true,
+  },
+
+  electron: {
+    tray: true,
+    autoUpdater: false, // Set to true and configure publish in electron-builder.json5 to enable
+  },
+};
+
+export default appConfig;

package/templates/layers/electron/javascript/src/hooks/useElectron.js

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+
+/**
+ * useElectron — safely access window.electronAPI in the renderer.
+ *
+ * Returns typed wrappers for all IPC calls. Every method is a no-op
+ * (or returns a resolved promise) when running outside of Electron
+ * (e.g. during browser-based development or testing).
+ *
+ * @returns {{ isElectron: boolean } & ElectronAPI}
+ */
+export function useElectron() {
+  const isElectron = typeof window !== "undefined" && Boolean(window.electronAPI);
+
+  return {
+    isElectron,
+
+    // Window controls
+    minimize: () => window.electronAPI?.minimize(),
+    maximize: () => window.electronAPI?.maximize(),
+    close:    () => window.electronAPI?.close(),
+
+    // Window state
+    isMaximized: () => window.electronAPI?.isMaximized() ?? Promise.resolve(false),
+
+    // App info
+    getVersion:  () => window.electronAPI?.getVersion() ?? Promise.resolve("web"),
+    getPlatform: () => window.electronAPI?.getPlatform() ?? Promise.resolve("web"),
+
+    // Shell
+    openExternal: (url) =>
+      window.electronAPI?.openExternal(url) ?? Promise.resolve(),
+
+    // Event subscription helpers
+    onMaximizeChange: (cb) => window.electronAPI?.onMaximizeChange(cb),
+    onMenuAction:     (cb) => window.electronAPI?.onMenuAction(cb),
+
+    // Cleanup
+    removeAllListeners: (channel) =>
+      window.electronAPI?.removeAllListeners(channel),
+  };
+}
+
+/**
+ * useElectronEvent — subscribe to an Electron IPC event in a React component.
+ *
+ * Automatically cleans up the listener on unmount.
+ *
+ * @param {"maximize" | "menu"} event
+ * @param {Function} callback
+ */
+export function useElectronEvent(event, callback) {
+  const electron = useElectron();
+
+  useEffect(() => {
+    if (!electron.isElectron) return;
+
+    if (event === "maximize") {
+      electron.onMaximizeChange(callback);
+      return () => electron.removeAllListeners("window:maximized-change");
+    }
+
+    if (event === "menu") {
+      electron.onMenuAction(callback);
+      return () => electron.removeAllListeners("menu:preferences");
+    }
+  }, [event, callback, electron.isElectron]);
+}

package/templates/layers/electron/javascript/src/main.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HashRouter } from "react-router-dom";
+import App from "./App.jsx";
+import "./index.css";
+
+// HashRouter is required for Electron because the renderer is served via
+// the file:// protocol in production, which breaks BrowserRouter's history API.
+// Hash-based URLs (#/path) work correctly in both dev and packaged builds.
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </React.StrictMode>,
+);

package/templates/layers/electron/javascript/src/store/useUiStore.js

@@ -0,0 +1,59 @@
+import { create } from "zustand";
+
+const useUiStore = create((set, get) => ({
+  open: false,
+  isModalOpen: false,
+  collapsed: false,
+  isMobileMenuOpened: false,
+  headerTitle: "Dashboard",
+  headerActions: null,
+  breadcrumbs: null,
+  layoutClass: "",
+
+  // ── Layout helpers ──────────────────────────────────────────────────────────
+  setLayoutClass: (layoutClass) => set({ layoutClass }),
+  setHeaderTitle: (title) => set({ headerTitle: title }),
+  setHeaderActions: (actions) => set({ headerActions: actions }),
+  setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
+
+  // ── Sidebar ─────────────────────────────────────────────────────────────────
+  toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
+  setMobileMenuOpened: (open) => set({ isMobileMenuOpened: open }),
+  toggleMobileMenuOpened: () =>
+    set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened })),
+  toggleSidebar: () => set((state) => ({ open: !state.open })),
+  openSidebar: () => set({ open: true }),
+  close: () => set({ open: false }),
+
+  // ── Modal ───────────────────────────────────────────────────────────────────
+  setModalOpen: (open) => set({ isModalOpen: open }),
+
+  // ── Theme ───────────────────────────────────────────────────────────────────
+  theme: localStorage.getItem("theme") || "light",
+  setTheme: (theme) => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+    set({ theme });
+  },
+  toggleTheme: () => {
+    const nextTheme = get().theme === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", nextTheme);
+    localStorage.setItem("theme", nextTheme);
+    set({ theme: nextTheme });
+  },
+
+  // ── Electron window state ───────────────────────────────────────────────────
+  windowMaximized: false,
+  setWindowMaximized: (value) => set({ windowMaximized: value }),
+
+  /** Minimize the Electron window (no-op in browser) */
+  minimizeWindow: () => window.electronAPI?.minimize(),
+
+  /** Toggle maximize / restore the Electron window (no-op in browser) */
+  maximizeWindow: () => window.electronAPI?.maximize(),
+
+  /** Close the Electron window (no-op in browser) */
+  closeWindow: () => window.electronAPI?.close(),
+}));
+
+export { useUiStore };

package/templates/layers/electron/javascript/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import electron from 'vite-plugin-electron';
+import renderer from 'vite-plugin-electron-renderer';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    electron([
+      {
+        // Main process entry
+        entry: 'electron/main.js',
+      },
+      {
+        // Preload script — reload renderer on change
+        entry: 'electron/preload.js',
+        onstart(options) {
+          options.reload();
+        },
+      },
+    ]),
+    renderer(),
+  ],
+  // Critical: ensures built assets resolve correctly via file:// in production
+  base: './',
+});

package/templates/layers/electron/typescript/_gitignore

@@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist-electron
+*.local
+
+# Electron build output
+release/
+out/
+
+# Electron platform artifacts
+*.dmg
+*.exe
+*.msi
+*.AppImage
+*.deb
+*.snap
+*.rpm
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/templates/layers/electron/typescript/electron/main.ts

@@ -0,0 +1,213 @@
+import {
+  app,
+  BrowserWindow,
+  Menu,
+  Tray,
+  shell,
+  ipcMain,
+  nativeImage,
+  MenuItemConstructorOptions,
+} from 'electron';
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+const isDev = process.env.NODE_ENV === 'development' || !app.isPackaged;
+const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL'];
+const preloadPath = path.join(__dirname, 'preload.js');
+
+let mainWindow: BrowserWindow | null = null;
+let tray: Tray | null = null;
+
+// ─── Window ───────────────────────────────────────────────────────────────────
+function createWindow(): void {
+  mainWindow = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    minWidth: 800,
+    minHeight: 600,
+    frame: false,
+    titleBarStyle: 'hidden',
+    trafficLightPosition: { x: 16, y: 16 },
+    backgroundColor: '#0f172a',
+    show: false,
+    icon: path.join(__dirname, '../public/icon.png'),
+    webPreferences: {
+      preload: preloadPath,
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: false,
+    },
+  });
+
+  mainWindow.once('ready-to-show', () => {
+    mainWindow!.show();
+    if (isDev) mainWindow!.webContents.openDevTools({ mode: 'detach' });
+  });
+
+  mainWindow.on('maximize',   () => mainWindow?.webContents.send('window:maximized-change', true));
+  mainWindow.on('unmaximize', () => mainWindow?.webContents.send('window:maximized-change', false));
+
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  if (isDev && VITE_DEV_SERVER_URL) {
+    mainWindow.loadURL(VITE_DEV_SERVER_URL);
+  } else {
+    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
+  }
+}
+
+// ─── Native Application Menu ──────────────────────────────────────────────────
+function buildMenu(): void {
+  const isMac = process.platform === 'darwin';
+
+  const template: MenuItemConstructorOptions[] = [
+    ...(isMac
+      ? [{
+          label: app.name,
+          submenu: [
+            { role: 'about' as const },
+            { type: 'separator' as const },
+            { label: 'Preferences…', accelerator: 'CmdOrCtrl+,', click: () => mainWindow?.webContents.send('menu:preferences') },
+            { type: 'separator' as const },
+            { role: 'services' as const },
+            { type: 'separator' as const },
+            { role: 'hide' as const },
+            { role: 'hideOthers' as const },
+            { role: 'unhide' as const },
+            { type: 'separator' as const },
+            { role: 'quit' as const },
+          ],
+        }]
+      : []),
+
+    {
+      label: 'File',
+      submenu: [
+        { label: 'New Window', accelerator: 'CmdOrCtrl+Shift+N', click: () => createWindow() },
+        { type: 'separator' },
+        isMac ? { role: 'close' as const } : { role: 'quit' as const },
+      ],
+    },
+
+    {
+      label: 'Edit',
+      submenu: [
+        { role: 'undo' as const },
+        { role: 'redo' as const },
+        { type: 'separator' as const },
+        { role: 'cut' as const },
+        { role: 'copy' as const },
+        { role: 'paste' as const },
+        ...(isMac
+          ? [{ role: 'pasteAndMatchStyle' as const }, { role: 'delete' as const }, { role: 'selectAll' as const }]
+          : [{ role: 'delete' as const }, { type: 'separator' as const }, { role: 'selectAll' as const }]),
+      ],
+    },
+
+    {
+      label: 'View',
+      submenu: [
+        { role: 'reload' as const },
+        { role: 'forceReload' as const },
+        { role: 'toggleDevTools' as const },
+        { type: 'separator' as const },
+        { role: 'resetZoom' as const },
+        { role: 'zoomIn' as const },
+        { role: 'zoomOut' as const },
+        { type: 'separator' as const },
+        { role: 'togglefullscreen' as const },
+      ],
+    },
+
+    {
+      label: 'Window',
+      submenu: [
+        { role: 'minimize' as const },
+        { role: 'zoom' as const },
+        ...(isMac
+          ? [{ type: 'separator' as const }, { role: 'front' as const }, { type: 'separator' as const }, { role: 'window' as const }]
+          : [{ role: 'close' as const }]),
+      ],
+    },
+
+    {
+      role: 'help' as const,
+      submenu: [
+        { label: 'Learn More', click: () => shell.openExternal('https://github.com/imksh/create') },
+        {
+          label: 'Toggle Developer Tools',
+          accelerator: isMac ? 'Alt+Cmd+I' : 'Alt+Shift+I',
+          click: () => mainWindow?.webContents.toggleDevTools(),
+        },
+      ],
+    },
+  ];
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+}
+
+// ─── System Tray ──────────────────────────────────────────────────────────────
+function createTray(): void {
+  const iconPath = path.join(__dirname, '../public/icon.png');
+  const trayIcon = nativeImage.createFromPath(iconPath).resize({ width: 16, height: 16 });
+  tray = new Tray(trayIcon);
+
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Show App', click: () => { mainWindow?.show(); mainWindow?.focus(); } },
+    { type: 'separator' },
+    { label: 'Quit', click: () => { (app as any).isQuiting = true; app.quit(); } },
+  ]);
+
+  tray.setToolTip(app.name);
+  tray.setContextMenu(contextMenu);
+  tray.on('double-click', () => { mainWindow?.show(); mainWindow?.focus(); });
+}
+
+// ─── IPC Handlers ─────────────────────────────────────────────────────────────
+function registerIpcHandlers(): void {
+  ipcMain.on('window:minimize', () => mainWindow?.minimize());
+  ipcMain.on('window:maximize', () => {
+    mainWindow?.isMaximized() ? mainWindow.unmaximize() : mainWindow?.maximize();
+  });
+  ipcMain.on('window:close', () => mainWindow?.close());
+
+  ipcMain.handle('window:isMaximized', () => mainWindow?.isMaximized() ?? false);
+  ipcMain.handle('app:version',  () => app.getVersion());
+  ipcMain.handle('app:platform', () => process.platform);
+
+  ipcMain.handle('shell:openExternal', (_event, url: string) => {
+    if (typeof url === 'string' && url.startsWith('http')) {
+      return shell.openExternal(url);
+    }
+  });
+}
+
+// ─── App Lifecycle ────────────────────────────────────────────────────────────
+app.whenReady().then(() => {
+  if (process.platform === 'darwin') {
+    app.setAboutPanelOptions({
+      applicationName: app.name,
+      applicationVersion: app.getVersion(),
+      copyright: `© ${new Date().getFullYear()} imksh`,
+    });
+  }
+
+  registerIpcHandlers();
+  buildMenu();
+  createWindow();
+  createTray();
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});

package/templates/layers/electron/typescript/electron/preload.ts

@@ -0,0 +1,52 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+/**
+ * ElectronAPI — typed interface exposed to the renderer via window.electronAPI.
+ * Declare this in vite-env.d.ts to get full type safety in the renderer.
+ */
+export interface ElectronAPI {
+  // Window controls
+  minimize: () => void;
+  maximize: () => void;
+  close: () => void;
+
+  // Window state
+  isMaximized: () => Promise<boolean>;
+
+  // App info
+  getVersion: () => Promise<string>;
+  getPlatform: () => Promise<NodeJS.Platform>;
+
+  // Shell
+  openExternal: (url: string) => Promise<void>;
+
+  // Event subscriptions
+  onMaximizeChange: (callback: (isMaximized: boolean) => void) => void;
+  onMenuAction: (callback: (data: { label: string }) => void) => void;
+
+  // Cleanup
+  removeAllListeners: (channel: string) => void;
+}
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  minimize: () => ipcRenderer.send('window:minimize'),
+  maximize: () => ipcRenderer.send('window:maximize'),
+  close:    () => ipcRenderer.send('window:close'),
+
+  isMaximized: () => ipcRenderer.invoke('window:isMaximized'),
+
+  getVersion:  () => ipcRenderer.invoke('app:version'),
+  getPlatform: () => ipcRenderer.invoke('app:platform'),
+
+  openExternal: (url: string) => ipcRenderer.invoke('shell:openExternal', url),
+
+  onMaximizeChange: (callback: (isMaximized: boolean) => void) => {
+    ipcRenderer.on('window:maximized-change', (_event, value: boolean) => callback(value));
+  },
+
+  onMenuAction: (callback: (data: { label: string }) => void) => {
+    ipcRenderer.on('menu:preferences', (_event, data) => callback({ label: 'preferences', ...data }));
+  },
+
+  removeAllListeners: (channel: string) => ipcRenderer.removeAllListeners(channel),
+} satisfies ElectronAPI);

package/templates/layers/electron/typescript/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "electron-app",
+  "private": true,
+  "version": "0.0.0",
+  "description": "An Electron + Vite + React (TypeScript) application built with @imksh/create",
+  "author": "imksh",
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && electron-builder",
+    "preview": "electron .",
+    "pack": "tsc && vite build && electron-builder --dir",
+    "dist": "tsc && vite build && electron-builder",
+    "dist:mac": "tsc && vite build && electron-builder --mac",
+    "dist:win": "tsc && vite build && electron-builder --win",
+    "dist:linux": "tsc && vite build && electron-builder --linux",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.2",
+    "axios": "^1.6.0",
+    "flyonui": "^2.4.1",
+    "framer-motion": "^11.0.0",
+    "lenis": "^1.1.3",
+    "lottie-react": "^2.4.0",
+    "lucide-react": "^0.292.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.18.0",
+    "tailwindcss": "^4.3.2",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "electron": "^31.0.0",
+    "electron-builder": "^24.13.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-electron": "^0.28.0",
+    "vite-plugin-electron-renderer": "^0.14.0"
+  }
+}

package/templates/layers/electron/typescript/src/components/layout/SidebarLayout.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import SidebarHeader from "../ui/SidebarHeader";
+import Sidebar from "../ui/sidebar";
+import TitleBar from "../ui/TitleBar";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+
+const SidebarLayout: React.FC = () => {
+  const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
+    useUiStore();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setHeaderTitle(appConfig.app.name);
+    setHeaderActions(null);
+  }, [pathname, setHeaderTitle, setHeaderActions]);
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      {/* Electron custom title bar — only renders inside Electron */}
+      <TitleBar />
+
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar />
+
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <SidebarHeader title={headerTitle} actions={headerActions} />
+
+          <main
+            className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
+            data-lenis-prevent
+          >
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SidebarLayout;