@imksh/create 1.0.26 → 1.0.28

package/templates/react/src/components/ui/SidebarHeader.jsx

@@ -1,27 +0,0 @@
-import { FiMenu } from "react-icons/fi";
-import { useUiStore } from "../../store/useUiStore";
-
-const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
-  const { toggleSidebar } = useUiStore();
-
-  return (
-    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
-      <div className="flex items-center gap-3">
-        <button
-          onClick={toggleSidebar}
-          className="btn btn-square border-none bg-base-200 shadow-none text-base-content lg:hidden"
-        >
-          <FiMenu size={22} />
-        </button>
-
-        <h1 className="text-xl font-bold">{title}</h1>
-      </div>
-
-      <div className="flex items-center gap-2">
-        {actions}
-      </div>
-    </header>
-  );
-};
-
-export default SidebarHeader;

package/templates/react/src/components/ui/sidebar.jsx

@@ -1,152 +0,0 @@
-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; // lg breakpoint
-
-  const showSidebar = !isMobile || open;
-
-  return (
-    <>
-      {/* Overlay with AnimatePresence */}
-      <AnimatePresence>
-        {isMobile && open && (
-          <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}
-          />
-        )}
-      </AnimatePresence>
-
-      {/* Sidebar with AnimatePresence */}
-      <AnimatePresence>
-        {showSidebar && (
-          <motion.aside
-            initial={isMobile ? { x: "-100%" } : false}
-            animate={{ x: 0 }}
-            exit={isMobile ? { x: "-100%" } : undefined}
-            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"}
-            `}
-          >
-            {/* Header */}
-            <div className="h-16 border-b border-base-300 flex items-center justify-between px-5">
-              <div className="flex items-center gap-3">
-                {appConfig.app.img ? (
-                  <img
-                    src={appConfig.app.img}
-                    alt=""
-                    className="w-8 h-8 rounded-lg"
-                  />
-                ) : (
-                  <div className="flex items-center">
-                    <div className="bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold">
-                      {appConfig.app.name.charAt(0)}
-                    </div>
-                  </div>
-                )}
-                <h1
-                  className={`text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`}
-                >
-                  {appConfig.app.name}
-                </h1>
-              </div>
-
-              <button
-                className={`btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`}
-                onClick={close}
-              >
-                <IoClose size={20} />
-              </button>
-            </div>
-
-            {/* Navigation */}
-            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
-              {navigation.map((item) => {
-                const Icon = item.icon;
-
-                return (
-                  <NavLink
-                    key={item.path}
-                    to={item.path}
-                    onClick={isMobile ? close : undefined}
-                    className={({ isActive }) =>
-                      `flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
-                      ${
-                        isActive
-                          ? "bg-primary text-primary-content"
-                          : "hover:bg-base-300"
-                      } ${collapsed ? "justify-center px-0" : ""}`
-                    }
-                    title={collapsed ? item.title : ""}
-                  >
-                    <Icon
-                      size={18}
-                      className={`shrink-0 ${collapsed && "mr-auto"}`}
-                    />
-
-                    {!collapsed && (
-                      <span className="font-medium transition-all duration-300">
-                        {item.title}
-                      </span>
-                    )}
-                  </NavLink>
-                );
-              })}
-            </nav>
-
-            {/* Footer with Collapse Button */}
-            <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"
-            >
-              {!collapsed && <span>{theme === "dark" ? "Dark" : "Light"}</span>}
-              <span className="btn btn-xs btn-ghost btn-circle ">
-                {theme === "dark" ? (
-                  <Sun size={16} className="shrink-0 " />
-                ) : (
-                  <Moon size={16} className="shrink-0" />
-                )}
-              </span>
-            </button>
-            <div className="p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2">
-              <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"}
-              >
-                {collapsed ? (
-                  <ChevronRight size={18} className="shrink-0 mr-auto" />
-                ) : (
-                  <ChevronLeft size={18} className="shrink-0" />
-                )}
-                {!collapsed && <span className="truncate">Collapse</span>}
-              </button>
-            </div>
-          </motion.aside>
-        )}
-      </AnimatePresence>
-    </>
-  );
-};
-
-export default Sidebar;

package/templates/react/src/config/api.js

@@ -1,22 +0,0 @@
-import axios from "axios";
-
-export const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5001/api",
-  withCredentials: true, // send httpOnly cookies on every request
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
-
-api.interceptors.request.use(
-  (config) => {
-    const token = localStorage.getItem("token");
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);

package/templates/react/src/hooks/useWindowSize.js

@@ -1,25 +0,0 @@
-import { useState, useEffect } from "react";
-
-const useWindowSize = () => {
-  const [size, setSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
-
-
-  useEffect(() => {
-    const handleResize = () => {
-      setSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return size;
-};
-
-export default useWindowSize;

package/templates/react/src/index.css

@@ -1,158 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
-@import "tailwindcss";
-@plugin "flyonui";
-
-
-/* ========================================
-   LIGHT THEME 
-======================================== */
-:root, [data-theme="light"] {
-  /* --font-sans: "Outfit", sans-serif; */
-  --color-base-100: #ffffff;
-  --color-base-200: #f8fafc;
-  --color-base-300: #e2e8f0;
-  --color-base-content: #0f172a;
-
-  --color-primary: #2563eb;
-  --color-primary-content: #ffffff;
-  --color-secondary: #64748b;
-  --color-secondary-content: #ffffff;
-  --color-accent: #00b8a3;
-  --color-accent-content: #ffffff;
-  --color-neutral: #1e293b;
-  --color-neutral-content: #ffffff;
-
-  --color-info: #0ea5e9;
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
-
-  --rounded-box: 12px;
-  --rounded-btn: 10px;
-  --rounded-badge: 8px;
-}
-
-/* ========================================
-   DARK THEME 
-======================================== */
-[data-theme="dark"] {
-  --color-base-100: #282828;
-  --color-base-200: #242424;
-  --color-base-300: #2d2d2d;
-  --color-base-content: #f5f5f5;
-
-  --color-primary: #2563eb;
-  --color-primary-content: #ffffff;
-  --color-secondary: #3a3a3a;
-  --color-secondary-content: #d4d4d4;
-  --color-accent: #00b8a3;
-  --color-accent-content: #ffffff;
-  --color-neutral: #2d2d2d;
-  --color-neutral-content: #f5f5f5;
-
-  --color-info: #38bdf8;
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
-
-  --rounded-box: 12px;
-  --rounded-btn: 10px;
-  --rounded-badge: 8px;
-}
-
-/* ========================================
-   MODERN UI UTILITIES & ANIMATIONS
-======================================== */
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-}
-
-.glass-panel {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-[data-theme="light"] .glass-panel {
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-.animate-float {
-  animation: float 6s ease-in-out infinite;
-}
-
-@keyframes float-slow {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-20px); }
-}
-.animate-float-slow {
-  animation: float-slow 8s ease-in-out infinite;
-}
-
-@keyframes pulse-glow {
-  0%, 100% { opacity: 0.4; transform: scale(1); }
-  50% { opacity: 0.8; transform: scale(1.05); }
-}
-.animate-pulse-glow {
-  animation: pulse-glow 4s ease-in-out infinite;
-}
-
-/* ========================================
-   ANIMATIONS
-======================================== */
-@keyframes slideInRight {
-  from { transform: translateX(100%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-}
-
-.animate-slideInRight {
-  animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.animate-fadeIn {
-  animation: fadeIn 0.3s ease forwards;
-}
-
-@keyframes zoomIn {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-.animate-zoomIn {
-  animation: zoomIn 0.18s ease forwards;
-}
-
-/* Hide Scrollbar */
-
-::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-}
-
-* {
-  scrollbar-width: none;
-}
-
-.hide-scrollbar {
-  -ms-overflow-style: none; /* IE & Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-  display: none; /* Chrome, Safari */
-}

package/templates/react/src/main.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import App from "./App.jsx";
-import "./index.css";
-
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker
-      .register("/sw.js")
-      .then((reg) =>
-        console.log("Service Worker registered successfully:", reg.scope),
-      )
-      .catch((err) => console.log("Service Worker registration failed:", err));
-  });
-}
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-);

package/templates/react/src/pages/Profile.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Profile = () => {
-  return (
-    <div>Profile</div>
-  )
-}
-
-export default Profile

package/templates/react/src/store/useAuthStore.js

@@ -1,115 +0,0 @@
-import { create } from "zustand";
-import { authService } from "../services/authService";
-
-export const useAuthStore = create((set, get) => ({
-  user: null,
-  loading: false,
-  isCheckingAuth: true,
-  error: null,
-
-  sendOtp: async (email) => {
-    set({ loading: true, error: null });
-    try {
-      await authService.sendOtp(email);
-      return true;
-    } catch (err) {
-      set({
-        error: err.response?.data?.message || err.message,
-        loading: false,
-      });
-      return false;
-    } finally {
-      set({ loading: false });
-    }
-  },
-
-  signup: async (name, email, password, otp, role = "user") => {
-    set({ loading: true, error: null });
-    try {
-      const { data } = await authService.signup(name, email, password, otp, role);
-      if (data.token) {
-        localStorage.setItem("token", data.token);
-      }
-      set({
-        user: data.data,
-        loading: false,
-      });
-      return true;
-    } catch (err) {
-      set({
-        error: err.response?.data?.message || err.message,
-        loading: false,
-      });
-      return false;
-    } finally {
-      set({ loading: false });
-    }
-  },
-
-  login: async (email, password) => {
-    set({ loading: true, error: null });
-    try {
-      const { data } = await authService.login(email, password);
-      if (data.token) {
-        localStorage.setItem("token", data.token);
-      }
-      set({
-        user: data.data,
-        loading: false,
-      });
-      return true;
-    } catch (err) {
-      set({
-        error: err.response?.data?.message || err.message,
-        loading: false,
-      });
-      return false;
-    } finally {
-      set({ loading: false });
-    }
-  },
-
-  getMe: async () => {
-    set({ isCheckingAuth: true });
-    try {
-      const { data } = await authService.getMe();
-      set({ user: data.data, isCheckingAuth: false });
-    } catch (err) {
-      set({ isCheckingAuth: false });
-    } finally {
-      set({ isCheckingAuth: false });
-    }
-  },
-
-  updateProfile: async (updates) => {
-    set({ loading: true, error: null });
-    try {
-      const { data } = await authService.updateMe(updates);
-      set({ user: data.data, loading: false });
-      return true;
-    } catch (err) {
-      set({
-        error: err.response?.data?.message || err.message,
-        loading: false,
-      });
-      return false;
-    } finally {
-      set({ loading: false });
-    }
-  },
-
-  logout: async () => {
-    try {
-      await authService.logout();
-    } catch (_) {
-      // ignore errors — cookie may already be expired
-    } finally {
-      localStorage.removeItem("token");
-      set({ loading: false });
-    }
-    set({
-      user: null,
-      error: null,
-    });
-  },
-}));

package/templates/react/src/store/useUiStore.js

@@ -1,54 +0,0 @@
-import { create } from "zustand";
-
-export const useUiStore = create((set, get) => ({
-  open: false,
-  collapsed: false,
-  isMobileMenuOpened: false,
-  headerTitle: "Dashboard",
-  headerActions: null,
-  setHeaderTitle: (title) => set({ headerTitle: title }),
-  setHeaderActions: (actions) => set({ headerActions: actions }),
-  toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
-
-  setMobileMenuOpened: (open) => {
-    set({ isMobileMenuOpened: open });
-  },
-  toggleMobileMenuOpened: () => {
-    set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
-  },
-
-  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 });
-  },
-
-  toggleSidebar: () =>
-    set((state) => ({
-      open: !state.open,
-    })),
-
-  openSidebar: () =>
-    set({
-      open: true,
-    }),
-
-  close: () =>
-    set({
-      open: false,
-    }),
-}));

package/templates/react/src/utils/formatDate.js

@@ -1,15 +0,0 @@
-export const formatDate = (
-  date,
-  options = { day: "2-digit", month: "short", year: "numeric" },
-  locale = "en-IN",
-) => {
-  if (!date) return "-";
-
-  const parsedDate = new Date(date);
-
-  if (isNaN(parsedDate.getTime())) {
-    return "-";
-  }
-
-  return new Intl.DateTimeFormat(locale, options).format(parsedDate);
-};

package/templates/react/src/utils/getInitials.js

@@ -1,10 +0,0 @@
-export const getInitials = (name = "") => {
-  if (!name.trim()) return "";
-
-  return name
-    .trim()
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((word) => word[0].toUpperCase())
-    .join("");
-};

package/templates/react/vite.config.js

@@ -1,8 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-})

package/templates/react-native/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.