@imksh/create 1.0.27 → 1.0.30

package/templates/react-ts/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-ts/src/main.tsx

@@ -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-ts/src/pages/Home.tsx

@@ -1,154 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { motion } from "framer-motion";
-import { FiZap, FiLayers, FiCpu, FiShield, FiArrowRight } from "react-icons/fi";
-import appConfig from "../config/appConfig";
-import toast from "react-hot-toast";
-import { useState } from "react";
-
-const Home = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div className="min-h-screen w-full relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white font-sans p-6">
-      {/* Animated Glowing Ambient Orbs */}
-      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl -z-10 animate-pulse-glow" />
-      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl -z-10 animate-pulse-glow" />
-
-      {/* Hero Welcome Section */}
-      <div className="max-w-3xl w-full text-center space-y-6">
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.5 }}
-          className="flex items-center justify-center gap-3 mb-2"
-        >
-          <div className="bg-primary/20 text-primary border border-primary/30 p-2.5 rounded-2xl">
-            <img
-              src={appConfig.app.logo}
-              alt={appConfig.app.name}
-              className="w-8 h-8 rounded-full"
-            />
-          </div>
-          <span className="text-sm font-semibold tracking-widest uppercase text-primary-content/65">
-            React Starter Kit
-          </span>
-        </motion.div>
-
-        <motion.h1
-          initial={{ opacity: 0, y: 15 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.1 }}
-          className="text-4xl sm:text-5xl font-black tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-primary-content"
-        >
-          Welcome to {appConfig.app.name}
-        </motion.h1>
-
-        <motion.p
-          initial={{ opacity: 0, y: 15 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-          className="text-sm sm:text-base text-slate-300 max-w-xl mx-auto leading-relaxed"
-        >
-          A production-ready React setup built using <strong>@imksh/cli</strong>
-          . Everything is pre-configured and ready to publish.
-        </motion.p>
-      </div>
-
-      {/* Features Grid */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, delay: 0.3 }}
-        className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl w-full my-10 shrink-0"
-      >
-        {/* Card 1 */}
-        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
-          <div className="text-primary text-xl">
-            <FiLayers />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-white">Zustand & UI</h3>
-            <p className="text-xs text-slate-400 mt-1">
-              Light/Dark theme, sidebar collapse & responsive menu states.
-            </p>
-          </div>
-        </div>
-
-        {/* Card 2 */}
-        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
-          <div className="text-success text-xl">
-            <FiZap />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-white">Tailwind & UI</h3>
-            <p className="text-xs text-slate-400 mt-1">
-              Tailwind CSS v4 + FlyonUI components pre-configured.
-            </p>
-          </div>
-        </div>
-
-        {/* Card 3 */}
-        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
-          <div className="text-warning text-xl">
-            <FiCpu />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-white">Layouts & Router</h3>
-            <p className="text-xs text-slate-400 mt-1">
-              Public & Dashboard layouts with dynamic headers.
-            </p>
-          </div>
-        </div>
-
-        {/* Card 4 */}
-        <div className="bg-white/[0.03] backdrop-blur border border-white/[0.08] p-5 rounded-2xl flex flex-col gap-3">
-          <div className="text-error text-xl">
-            <FiShield />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-white">Helpers</h3>
-            <p className="text-xs text-slate-400 mt-1">
-              Modal system, Tables, Loading Skeletons, and Auth Services.
-            </p>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Call to Actions */}
-      <motion.div
-        initial={{ opacity: 0, y: 15 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5, delay: 0.4 }}
-        className="flex gap-4"
-      >
-        <motion.button
-          whileTap={{ scale: 0.95 }}
-          onClick={() => setCount((prev) => prev + 1)}
-          className="btn btn-primary rounded-xl px-6 py-2.5 font-semibold text-sm gap-2 shadow-lg shadow-primary/20 flex items-center transition-all"
-        >
-          count {count}
-        </motion.button>
-        <motion.button
-          whileTap={{ scale: 0.95 }}
-          onClick={()=>toast.success("Hello World")}
-          className="btn btn-outline rounded-xl px-6 py-2.5 font-semibold text-sm gap-2  flex items-center transition-all text-white border-white"
-        >
-          Show Toast
-        </motion.button>
-      </motion.div>
-
-      {/* Footer Branding */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 0.5 }}
-        transition={{ duration: 0.5, delay: 0.5 }}
-        className="absolute bottom-6 text-xs text-slate-500 font-medium"
-      >
-        Generated with @imksh/cli • Version {appConfig.app.version}
-      </motion.div>
-    </div>
-  );
-};
-
-export default Home;

package/templates/react-ts/src/pages/Login.tsx

@@ -1,233 +0,0 @@
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import {
-  Mail,
-  Lock,
-  User,
-  Eye,
-  EyeOff,
-  ArrowLeft,
-  GraduationCap,
-} from "lucide-react";
-import { useAuthStore } from "../store/useAuthStore";
-import Loading from "../components/common/Loading";
-
-const Login = () => {
-  const navigate = useNavigate();
-  const { login, signup, sendOtp, loading, isCheckingAuth, error, user } = useAuthStore();
-
-  const [mode, setMode] = useState("login"); // "login" | "signup"
-  const [showPassword, setShowPassword] = useState(false);
-  const [form, setForm] = useState({ name: "", email: "", password: "", otp: "" });
-  const [otpSent, setOtpSent] = useState(false);
-
-  const handleChange = (e) =>
-    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    let ok;
-    if (mode === "login") {
-      ok = await login(form.email, form.password);
-      if (ok) navigate("/");
-    } else {
-      if (!otpSent) {
-        ok = await sendOtp(form.email);
-        if (ok) setOtpSent(true);
-      } else {
-        ok = await signup(form.name, form.email, form.password, form.otp);
-        if (ok) navigate("/");
-      }
-    }
-  };
-
-  if (isCheckingAuth || user) {
-    return <Loading />;
-  }
-
-  return (
-    <div className="min-h-dvh w-screen bg-base-100 text-base-content flex items-center justify-center p-4 font-sans">
-      <div className="relative w-full max-w-md">
-        {/* Card */}
-        <div className="bg-base-200/80 backdrop-blur-md border border-base-300 rounded-3xl p-8 shadow-2xl">
-          {/* Logo & title */}
-          <div className="flex flex-col items-center gap-2 mb-8">
-            <div className="w-12 h-12 rounded-2xl bg-primary/15 border border-primary/20 flex items-center justify-center text-2xl shadow-inner text-primary font-bold">
-              <GraduationCap size={24} />
-            </div>
-            <h1 className="text-2xl font-black tracking-tight">
-              {mode === "login" ? "Welcome back" : "Create account"}
-            </h1>
-            <p className="text-xs text-base-content/50 text-center">
-              {mode === "login"
-                ? "Sign in to continue your learning journey"
-                : "Join LMS and start learning the MERN stack"}
-            </p>
-          </div>
-
-          {/* Tab switcher */}
-          <div className="tabs tabs-box bg-base-300/50 p-1 rounded-2xl w-full flex mb-6 border border-base-300">
-            <button
-              type="button"
-              onClick={() => {
-                setMode("login");
-                setOtpSent(false);
-              }}
-              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
-                mode === "login"
-                  ? "tab-active bg-primary text-primary-content!"
-                  : ""
-              }`}
-            >
-              Sign In
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setMode("signup");
-                setOtpSent(false);
-              }}
-              className={`tab flex-1 rounded-xl text-sm font-bold transition-all ${
-                mode === "signup"
-                  ? "tab-active bg-primary text-primary-content!"
-                  : ""
-              }`}
-            >
-              Sign Up
-            </button>
-          </div>
-
-          {/* Error */}
-          {error && (
-            <div className="alert alert-error alert-soft rounded-2xl text-xs mb-4 p-3 border border-error/20">
-              ⚠️ {error}
-            </div>
-          )}
-
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            {/* Name — signup only */}
-            {mode === "signup" && (
-              <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
-                <User size={16} className="text-base-content/40 shrink-0" />
-                <input
-                  name="name"
-                  type="text"
-                  placeholder="Full name"
-                  value={form.name}
-                  onChange={handleChange}
-                  required
-                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
-                />
-              </label>
-            )}
-
-            {/* Email */}
-            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
-              <Mail size={16} className="text-base-content/40 shrink-0" />
-              <input
-                name="email"
-                type="email"
-                placeholder="Email address"
-                value={form.email}
-                onChange={handleChange}
-                required
-                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
-              />
-            </label>
-
-            {/* Password */}
-            <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
-              <Lock size={16} className="text-base-content/40 shrink-0" />
-              <input
-                name="password"
-                type={showPassword ? "text" : "password"}
-                placeholder="Password"
-                value={form.password}
-                onChange={handleChange}
-                required
-                minLength={6}
-                className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword((p) => !p)}
-                className="text-base-content/40 hover:text-base-content transition-colors"
-              >
-                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-              </button>
-            </label>
-
-            {/* OTP Input - only visible when OTP is sent during signup */}
-            {mode === "signup" && otpSent && (
-              <label className="input input-bordered rounded-2xl flex items-center gap-2 bg-base-100 border-base-300 focus-within:border-primary transition-colors">
-                <Lock size={16} className="text-base-content/40 shrink-0" />
-                <input
-                  name="otp"
-                  type="text"
-                  placeholder="Enter OTP"
-                  value={form.otp}
-                  onChange={handleChange}
-                  required
-                  className="grow text-sm bg-transparent outline-none placeholder:text-base-content/30"
-                />
-              </label>
-            )}
-
-            {/* Submit */}
-            <button
-              type="submit"
-              disabled={loading}
-              className="btn btn-primary rounded-2xl font-bold mt-2 w-full shadow-lg hover:scale-[1.01] active:scale-[0.99] transition-transform"
-            >
-              {loading ? (
-                <span className="loading loading-spinner loading-sm" />
-              ) : mode === "login" ? (
-                "Sign In →"
-              ) : otpSent ? (
-                "Verify & Create Account →"
-              ) : (
-                "Send OTP →"
-              )}
-            </button>
-          </form>
-
-          {/* Footer note */}
-          <p className="text-center text-xs text-base-content/40 mt-6">
-            {mode === "login" ? (
-              <>
-                New here?{" "}
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMode("signup");
-                    setOtpSent(false);
-                  }}
-                  className="text-primary font-bold hover:underline"
-                >
-                  Create an account
-                </button>
-              </>
-            ) : (
-              <>
-                Already have an account?{" "}
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMode("login");
-                    setOtpSent(false);
-                  }}
-                  className="text-primary font-bold hover:underline"
-                >
-                  Sign in
-                </button>
-              </>
-            )}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Login;

package/templates/react-ts/src/pages/Profile.tsx

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

package/templates/react-ts/src/services/authService.ts

@@ -1,19 +0,0 @@
-import { api } from "../config/api";
-
-export const authService = {
-  sendOtp: (email: string) =>
-    api.post("/auth/send-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"),
-};