@imksh/create 1.0.26 → 1.0.28

package/templates/react/public/manifest.json

@@ -1,24 +0,0 @@
-{
-  "name": "React App",
-  "short_name": "React",
-  "description": "A React application built with @imksh/create",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#1d232a",
-  "theme_color": "#2563eb",
-  "orientation": "any",
-  "icons": [
-    {
-      "src": "/favicon.ico",
-      "sizes": "192x192",
-      "type": "image/x-icon",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/favicon.svg",
-      "sizes": "512x512",
-      "type": "image/svg+xml",
-      "purpose": "any maskable"
-    }
-  ]
-}

package/templates/react/public/sw.js

@@ -1,56 +0,0 @@
-const CACHE_NAME = "React App";
-const ASSETS = ["/", "/index.html", "/logo.png", "/manifest.json"];
-
-// Install Event
-self.addEventListener("install", (e) => {
-  e.waitUntil(
-    caches
-      .open(CACHE_NAME)
-      .then((cache) => {
-        return cache.addAll(ASSETS);
-      })
-      .then(() => self.skipWaiting()),
-  );
-});
-
-// Activate Event
-self.addEventListener("activate", (e) => {
-  e.waitUntil(
-    caches
-      .keys()
-      .then((keys) => {
-        return Promise.all(
-          keys.map((key) => {
-            if (key !== CACHE_NAME) {
-              return caches.delete(key);
-            }
-          }),
-        );
-      })
-      .then(() => self.clients.claim()),
-  );
-});
-
-// Fetch Event (Network First, fallback to cache)
-self.addEventListener("fetch", (e) => {
-  // Only handle GET requests and skip chrome-extension/dev-tools queries
-  if (
-    e.request.method !== "GET" ||
-    !e.request.url.startsWith(self.location.origin)
-  ) {
-    return;
-  }
-
-  e.respondWith(
-    fetch(e.request)
-      .then((res) => {
-        // Cache clone of successful network response
-        const resClone = res.clone();
-        caches.open(CACHE_NAME).then((cache) => {
-          cache.put(e.request, resClone);
-        });
-        return res;
-      })
-      .catch(() => caches.match(e.request)),
-  );
-});

package/templates/react/src/App.jsx

@@ -1,68 +0,0 @@
-import React, { useEffect } from "react";
-import { Routes, Route } from "react-router-dom";
-import { Toaster } from "react-hot-toast";
-import Home from "./pages/Home";
-import Login from "./pages/Login";
-import Profile from "./pages/Profile";
-import Scroll from "./components/common/Scroll";
-import Loading from "./components/common/Loading";
-import useLenis from "./hooks/useLenis";
-import { useAuthStore } from "./store/useAuthStore";
-import NotFound from "./components/common/NotFound";
-import Unauthorized from "./components/common/Unauthorized";
-import ProtectedRoute from "./components/layout/ProtectedRoute";
-import PublicLayout from "./components/layout/PublicLayout";
-import SidebarLayout from "./components/layout/SidebarLayout";
-
-const App = () => {
-  const { getMe, isCheckingAuth } = useAuthStore();
-
-  // Initialize Lenis smooth scroll
-  // useLenis();
-
-  useEffect(() => {
-    getMe();
-  }, []);
-
-  if (isCheckingAuth) {
-    return (
-      <div className="flex h-screen items-center justify-center bg-base-100">
-        <Loading />
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-base-100 text-base-content">
-      <Toaster position="top-right" />
-      <Scroll />
-      <Routes>
-        <Route path="/" element={<Home />} />
-
-        {/* <Route element={<PublicLayout />}>
-          <Route path="/" element={<Home />} />
-        </Route> */}
-
-        {/* Auth Page Routes */}
-        <Route path="/login" element={<Login />} />
-        <Route path="/unauthorized" element={<Unauthorized />} />
-
-        {/* Protected Routes wrapped in ProtectedRoute and SidebarLayout */}
-        <Route
-          element={
-            <ProtectedRoute>
-              <SidebarLayout />
-            </ProtectedRoute>
-          }
-        >
-          <Route path="/profile" element={<Profile />} />
-        </Route>
-
-        {/* Fallback Route */}
-        <Route path="/*" element={<NotFound />} />
-      </Routes>
-    </div>
-  );
-};
-
-export default App;

package/templates/react/src/assets/data/navigation.js

@@ -1,29 +0,0 @@
-import {
-    FaHome,
-    FaUser,
-    FaCog,
-    FaBook
-} from "react-icons/fa";
-
-export const navigation = [
-    {
-        title: "Home",
-        path: "/",
-        icon: FaHome,
-    },
-    {
-        title: "Courses",
-        path: "/courses",
-        icon: FaBook,
-    },
-    {
-        title: "Profile",
-        path: "/profile",
-        icon: FaUser,
-    },
-    {
-        title: "Settings",
-        path: "/settings",
-        icon: FaCog,
-    },
-];

package/templates/react/src/components/common/Breadcrumbs.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { ChevronRight } from "lucide-react";
-
-export const Breadcrumbs = ({ items }) => {
-  return (
-    <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
-      {items.map((item, idx) => {
-        const isLast = idx === items.length - 1;
-        return (
-          <React.Fragment key={idx}>
-            {item.path && !isLast ? (
-              <Link to={item.path} className="hover:text-primary transition-colors">
-                {item.label}
-              </Link>
-            ) : (
-              <span className={isLast ? "text-base font-black text-base-content tracking-tight" : ""}>
-                {item.label}
-              </span>
-            )}
-            {!isLast && <ChevronRight size={14} className="text-base-content/30 shrink-0" />}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};

package/templates/react/src/components/common/Loading.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import LottieAnimation from "./LottieIcon";
-import loader from "../../assets/animations/loading.json";
-
-const Loading = ({
-  className = "w-60 h-60",
-  bgClass = "bg-base-100",
-  animationData = loader,
-}) => {
-  return (
-    <div
-      className={`absolute inset-0 flex items-center justify-center z-50 ${bgClass} max-h-dvh`}
-    >
-      <LottieAnimation animation={animationData} className={className} />
-    </div>
-  );
-};
-
-export default Loading;

package/templates/react/src/components/common/LottieIcon.jsx

@@ -1,36 +0,0 @@
-import { memo, useEffect, useRef } from "react";
-import { useInView } from "framer-motion";
-import lottie from "lottie-web";
-
-const LottieIcon = memo(
-  ({ animation, className = "", loop = true, autoplay = true }) => {
-    const containerRef = useRef(null);
-
-    const isInView = useInView(containerRef, {
-      once: true,
-      margin: "100px",
-    });
-
-    useEffect(() => {
-      if (!isInView || !containerRef.current) return;
-
-      const instance = lottie.loadAnimation({
-        container: containerRef.current,
-        renderer: "svg",
-        loop,
-        autoplay,
-        animationData: animation,
-      });
-
-      return () => {
-        instance.destroy();
-      };
-    }, [animation, autoplay, loop, isInView]);
-
-    return <div ref={containerRef} className={className} />;
-  },
-);
-
-LottieIcon.displayName = "LottieIcon";
-
-export default LottieIcon;

package/templates/react/src/components/common/NotFound.jsx

@@ -1,78 +0,0 @@
-import { motion } from "framer-motion";
-import { Link } from "react-router-dom";
-import { FaArrowLeft, FaHouse } from "react-icons/fa6";
-
-const NotFound = () => {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-base-100 px-6">
-      <div className="max-w-lg text-center">
-        <motion.h1
-          initial={{ opacity: 0, scale: 0.6 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{
-            duration: 0.5,
-            type: "spring",
-            stiffness: 120,
-          }}
-          className="text-8xl md:text-9xl font-black text-primary"
-        >
-          404
-        </motion.h1>
-
-        <motion.h2
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15 }}
-          className="mt-6 text-3xl font-bold"
-        >
-          Page Not Found
-        </motion.h2>
-
-        <motion.p
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.7 }}
-          transition={{ delay: 0.3 }}
-          className="mt-3 text-base-content/70"
-        >
-          Sorry, the page you're looking for doesn't exist or has been moved.
-        </motion.p>
-
-        <motion.div
-          initial={{ opacity: 0, y: 25 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.45 }}
-          className="mt-8 flex flex-wrap justify-center gap-3"
-        >
-          <Link to="/" className="btn btn-primary gap-2">
-            <FaHouse />
-            Home
-          </Link>
-
-          <button
-            onClick={() => window.history.back()}
-            className="btn btn-ghost gap-2"
-          >
-            <FaArrowLeft />
-            Go Back
-          </button>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{
-            opacity: [0.2, 0.6, 0.2],
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 2,
-          }}
-          className="mt-16 text-8xl font-black text-base-300 select-none"
-        >
-          ?
-        </motion.div>
-      </div>
-    </div>
-  );
-};
-
-export default NotFound;

package/templates/react/src/components/common/PwaInstallPrompt.jsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import usePwaInstall from "../hooks/usePwaInstall";
-
-const DISMISS_KEY = "gradify_pwa_dismissed_at";
-const DISMISS_TTL_MS = 7 * 24 * 60 * 60 * 1000;
-
-const wasDismissedRecently = () => {
-  const raw = localStorage.getItem(DISMISS_KEY);
-  if (!raw) return false;
-  const dismissedAt = Number(raw);
-  if (!Number.isFinite(dismissedAt)) return false;
-  return Date.now() - dismissedAt < DISMISS_TTL_MS;
-};
-
-const PwaInstallPrompt = () => {
-  const { canInstall, isInstalled, promptInstall } = usePwaInstall();
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    if (typeof window === "undefined") return undefined;
-    if (!canInstall || wasDismissedRecently() || isInstalled) {
-      setVisible(false);
-      return undefined;
-    }
-
-    setVisible(true);
-    return undefined;
-  }, [canInstall, isInstalled]);
-
-  const handleInstall = async () => {
-    const result = await promptInstall();
-    if (result?.outcome === "accepted") {
-      setVisible(false);
-      return;
-    }
-    localStorage.setItem(DISMISS_KEY, String(Date.now()));
-    setVisible(false);
-  };
-
-  const handleDismiss = () => {
-    localStorage.setItem(DISMISS_KEY, String(Date.now()));
-    setVisible(false);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div className="fixed bottom-5 right-5 z-50 w-[min(92vw,360px)] rounded-2xl border border-(--border-color) bg-(--card-bg) p-4 shadow-lg">
-      <p className="text-sm text-(--text-secondary)">
-        Install Gradify for faster access and offline-ready learning.
-      </p>
-      <div className="mt-3 flex items-center gap-2">
-        <button
-          type="button"
-          onClick={handleInstall}
-          className="rounded-xl bg-(--color-primary) px-4 py-2 text-sm font-semibold text-white hover:opacity-90"
-        >
-          Install App
-        </button>
-        <button
-          type="button"
-          onClick={handleDismiss}
-          className="rounded-xl border border-(--border-color) px-3 py-2 text-sm text-(--text-secondary) hover:bg-(--bg-muted)"
-        >
-          Not now
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default PwaInstallPrompt;

package/templates/react/src/components/common/Table.jsx

@@ -1,110 +0,0 @@
-import React from "react";
-import TableSkeleton from "../skeletons/common/TableSkeleton";
-
-const Table = ({
-  columns = [],
-  data = [],
-  loading = false,
-  onRowClick = null,
-  emptyMessage = "No data available",
-  currentPage = 1,
-  totalPages = 1,
-  onPageChange = null,
-}) => {
-  if (loading) {
-    return <TableSkeleton rows={5} columns={columns.length || 4} />;
-  }
-
-  return (
-    <div className="flex flex-col w-full border border-base-300 rounded-xl overflow-hidden bg-base-100 shadow-sm">
-      {/* Table Container */}
-      <div className="overflow-x-auto w-full">
-        <table className="table table-hover w-full min-w-full">
-          {/* Header */}
-          <thead className="bg-base-200/60 border-b border-base-300">
-            <tr>
-              {columns.map((col, index) => (
-                <th
-                  key={col.accessor || index}
-                  className="px-6 py-4 text-left text-xs font-bold text-base-content/80 uppercase tracking-wider"
-                >
-                  {col.header}
-                </th>
-              ))}
-            </tr>
-          </thead>
-
-          {/* Body */}
-          <tbody className="divide-y divide-base-300 bg-base-100">
-            {data.length > 0 ? (
-              data.map((row, rowIndex) => (
-                <tr
-                  key={row.id || rowIndex}
-                  onClick={() => onRowClick && onRowClick(row)}
-                  className={`transition-colors duration-150 ${
-                    onRowClick ? "cursor-pointer hover:bg-base-200" : ""
-                  }`}
-                >
-                  {columns.map((col, colIndex) => {
-                    const value = col.accessor ? row[col.accessor] : undefined;
-                    return (
-                      <td
-                        key={col.accessor || colIndex}
-                        className="px-6 py-4 text-sm text-base-content/90 whitespace-nowrap align-middle"
-                      >
-                        {col.render ? col.render(value, row, rowIndex) : value}
-                      </td>
-                    );
-                  })}
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td
-                  colSpan={columns.length}
-                  className="px-6 py-12 text-center text-sm text-base-content/60"
-                >
-                  <div className="flex flex-col items-center justify-center gap-2">
-                    <span className="text-2xl">📁</span>
-                    <span>{emptyMessage}</span>
-                  </div>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Pagination Footer */}
-      {totalPages > 1 && onPageChange && (
-        <div className="border-t border-base-300 px-6 py-4 bg-base-200/30 flex items-center justify-between shrink-0">
-          {/* Info text */}
-          <div className="text-xs text-base-content/75 font-medium">
-            Page <span className="font-bold">{currentPage}</span> of{" "}
-            <span className="font-bold">{totalPages}</span>
-          </div>
-
-          {/* Page controls */}
-          <div className="flex gap-2">
-            <button
-              onClick={() => onPageChange(currentPage - 1)}
-              disabled={currentPage <= 1}
-              className="btn btn-sm btn-outline rounded-lg text-xs"
-            >
-              Previous
-            </button>
-            <button
-              onClick={() => onPageChange(currentPage + 1)}
-              disabled={currentPage >= totalPages}
-              className="btn btn-sm btn-outline rounded-lg text-xs"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Table;

package/templates/react/src/components/common/ToggleSwitch.jsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { motion } from "motion/react";
-
-const ToggleSwitch = ({ checked, onChange, label }) => {
-  return (
-    <div
-      className="flex items-center gap-3 cursor-pointer select-none w-fit group"
-      onClick={() => onChange(!checked)}
-    >
-      <span className="text-sm font-bold">{label}</span>
-      <div
-        className={`w-12 h-6 flex items-center rounded-full p-1 transition-all duration-300 shadow-inner border ${
-          checked
-            ? "bg-gradient-to-r from-emerald-400 to-cyan-500 border-transparent shadow-emerald-500/20"
-            : "bg-base-300 border-base-300/50"
-        }`}
-      >
-        <motion.div
-          className={`w-4 h-4 rounded-full shadow-sm ${
-            checked ? "bg-white" : "bg-base-content/40"
-          }`}
-          layout
-          initial={false}
-          animate={{
-            x: checked ? 24 : 0,
-          }}
-          transition={{
-            type: "spring",
-            stiffness: 500,
-            damping: 30,
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ToggleSwitch;

package/templates/react/src/components/common/Unauthorized.jsx

@@ -1,76 +0,0 @@
-import { motion } from "framer-motion";
-import { Link } from "react-router-dom";
-import { FaArrowLeft, FaLock } from "react-icons/fa6";
-
-const Unauthorized = () => {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-base-100 px-6">
-      <div className="max-w-lg text-center">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{
-            type: "spring",
-            stiffness: 180,
-            damping: 12,
-          }}
-          className="mx-auto mb-6 w-24 h-24 rounded-full bg-warning/15 flex items-center justify-center"
-        >
-          <FaLock className="text-5xl text-warning" />
-        </motion.div>
-
-        <motion.h1
-          initial={{ opacity: 0, y: -15 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-7xl font-black text-warning"
-        >
-          401
-        </motion.h1>
-
-        <motion.h2
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.15 }}
-          className="mt-4 text-3xl font-bold"
-        >
-          Unauthorized
-        </motion.h2>
-
-        <motion.p
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.7 }}
-          transition={{ delay: 0.3 }}
-          className="mt-3 text-base-content/70"
-        >
-          You don't have permission to access this page. Please sign in with an
-          authorized account.
-        </motion.p>
-
-        <motion.div
-          initial={{ opacity: 0, y: 25 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.45 }}
-          className="mt-8 flex flex-wrap justify-center gap-3"
-        >
-          <Link to="/login" className="btn btn-warning">
-            Sign In
-          </Link>
-
-          <Link to="/" className="btn btn-outline">
-            Home
-          </Link>
-
-          <button
-            onClick={() => window.history.back()}
-            className="btn btn-ghost gap-2"
-          >
-            <FaArrowLeft />
-            Go Back
-          </button>
-        </motion.div>
-      </div>
-    </div>
-  );
-};
-
-export default Unauthorized;

package/templates/react/src/components/layout/ProtectedRoute.jsx

@@ -1,17 +0,0 @@
-import { Navigate } from "react-router-dom";
-import { useAuthStore } from "../../store/useAuthStore";
-import Loading from "../common/Loading";
-
-const ProtectedRoute = ({ children, role }) => {
-  const { user, isCheckingAuth } = useAuthStore();
-
-  if (loading) return <Loading />;
-
-  if (!user) return <Navigate to="/login" />;
-
-  if (role && user.role !== role) return <Navigate to="/" />;
-
-  return children;
-};
-
-export default ProtectedRoute;

package/templates/react/src/components/layout/PublicLayout.jsx

@@ -1,13 +0,0 @@
-import { Outlet } from "react-router-dom";
-import Header from "../ui/Header";
-
-const PublicLayout = () => {
-  return (
-    <>
-      <Header />
-      <Outlet />
-    </>
-  );
-};
-
-export default PublicLayout;