stackkit-cli 0.4.2 → 0.4.4

package/templates/react-vite/src/components/ErrorBoundary.tsx

@@ -0,0 +1,51 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <div className="p-8 text-center">
+          <h2 className="text-2xl font-semibold">Something went wrong</h2>
+          <p className="mt-2 text-gray-600">
+            {this.state.error?.message || "An unexpected error occurred"}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: undefined })}
+            className="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-white text-black px-5 transition-colors hover:bg-zinc-200 md:w-39.5"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/react-vite/src/components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+
+export function Layout() {
+  return (
+    <div className="min-h-screen flex flex-col bg-black">
+      <main className="flex-1 max-w-7xl w-full mx-auto p-4">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

package/templates/react-vite/src/components/Loading.tsx

@@ -0,0 +1,8 @@
+export default function Loading({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div className="loading-container">
+      <div className="loading-spinner"></div>
+      <p>{message}</p>
+    </div>
+  );
+}

package/templates/react-vite/src/components/SEO.tsx

@@ -0,0 +1,49 @@
+import { Helmet, HelmetProvider } from "react-helmet-async";
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  image?: string;
+  url?: string;
+}
+
+const defaultSEO = {
+  title: "React App",
+  description: "A modern React application built with Vite",
+  keywords: "react, vite, typescript, spa",
+  image: "/og-image.png",
+};
+
+export function SEOProvider({ children }: { children: React.ReactNode }) {
+  return <HelmetProvider>{children}</HelmetProvider>;
+}
+
+export function SEO({ title, description, keywords, image, url }: SEOProps) {
+  const siteTitle = title ? `${title} | ${defaultSEO.title}` : defaultSEO.title;
+  const siteDescription = description || defaultSEO.description;
+  const siteKeywords = keywords || defaultSEO.keywords;
+  const siteImage = image || defaultSEO.image;
+  const siteUrl = url || window.location.href;
+
+  return (
+    <Helmet>
+      <title>{siteTitle}</title>
+      <meta name="description" content={siteDescription} />
+      <meta name="keywords" content={siteKeywords} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={siteTitle} />
+      <meta property="og:description" content={siteDescription} />
+      <meta property="og:image" content={siteImage} />
+      <meta property="og:url" content={siteUrl} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={siteTitle} />
+      <meta name="twitter:description" content={siteDescription} />
+      <meta name="twitter:image" content={siteImage} />
+
+      <link rel="canonical" href={siteUrl} />
+    </Helmet>
+  );
+}

package/templates/react-vite/src/config/constants.ts

@@ -0,0 +1,5 @@
+export const APP_NAME = import.meta.env.VITE_APP_NAME || "React App";
+export const APP_VERSION = import.meta.env.VITE_APP_VERSION || "1.0.0";
+export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";
+export const IS_DEV = import.meta.env.DEV;
+export const IS_PROD = import.meta.env.PROD;

package/templates/react-vite/src/hooks/index.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}

package/templates/react-vite/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/react-vite/src/lib/queryClient.ts

@@ -0,0 +1,12 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes (formerly cacheTime)
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

package/templates/react-vite/src/main.tsx

@@ -0,0 +1,22 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Toaster } from "react-hot-toast";
+import { RouterProvider } from "react-router";
+import { SEOProvider } from "./components/SEO";
+import "./index.css";
+import { queryClient } from "./lib/queryClient";
+import { router } from "./router";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <SEOProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster position="top-right" />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </SEOProvider>
+  </StrictMode>,
+);

package/templates/react-vite/src/pages/About.tsx

@@ -0,0 +1,78 @@
+import { SEO } from "../components/SEO";
+
+export default function About() {
+  return (
+    <>
+      <SEO title="About" description="About Stackkit - A production-ready React starter template" />
+
+      <div className="flex min-h-screen items-center justify-center bg-black">
+        <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-black sm:items-start">
+          <div className="flex items-center gap-4 mb-8">
+            <div className="text-2xl font-bold text-white">Stackkit</div>
+            <span className="text-xl text-zinc-400">+</span>
+            <img src="https://react.dev/favicon.ico" alt="React logo" width={32} height={32} />
+          </div>
+
+          <div className="flex flex-col gap-12 sm:text-left">
+            <div>
+              <h1 className="text-3xl font-semibold leading-10 tracking-tight text-zinc-50 mb-6">
+                About this template
+              </h1>
+              <p className="text-lg leading-8 text-zinc-400 mb-8">
+                Stackkit is a production-ready React starter template that includes all the
+                essential tools you need to build modern web applications.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="text-xl font-semibold text-zinc-50 mb-4">What's included</h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-zinc-400">
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">React 19</div>
+                  <div className="text-sm">Latest React with TypeScript</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Vite 7</div>
+                  <div className="text-sm">Fast build tool and dev server</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">React Router</div>
+                  <div className="text-sm">Client-side routing</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">TanStack Query</div>
+                  <div className="text-sm">Data fetching and caching</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Axios</div>
+                  <div className="text-sm">HTTP client with interceptors</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Tailwind CSS</div>
+                  <div className="text-sm">Utility-first CSS framework</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 text-base font-medium sm:flex-row mt-8">
+            <a
+              className="flex h-12 w-full items-center justify-center rounded-full bg-white text-black px-5 transition-colors hover:bg-zinc-200 md:w-39.5"
+              href="/"
+            >
+              Back to Home
+            </a>
+            <a
+              className="flex h-12 w-full items-center justify-center rounded-full px-5 transition-colors hover:border-transparent bg-zinc-900 md:w-39.5 dark:text-white text-black"
+              href="https://stackkit.tariqul.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Website
+            </a>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/Home.tsx

@@ -0,0 +1,49 @@
+import { SEO } from "../components/SEO";
+
+export default function Home() {
+  return (
+    <>
+      <SEO title="Home" />
+      <div className="flex min-h-screen items-center justify-center bg-black">
+        <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-black sm:items-start">
+          <div className="flex items-center gap-4 mb-8">
+            <div className="text-2xl font-bold text-white">Stackkit</div>
+            <span className="text-xl text-zinc-400">+</span>
+            <img src="https://react.dev/favicon.ico" alt="React logo" width={32} height={32} />
+          </div>
+
+          <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+            <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-zinc-50">
+              To get started, edit the Home.tsx file.
+            </h1>
+            <p className="max-w-md text-lg leading-8 text-zinc-400">
+              This template includes React Router, TanStack Query, Axios, and Tailwind CSS. Check
+              out the{" "}
+              <a href="/about" className="font-medium text-zinc-50 hover:underline">
+                About
+              </a>{" "}
+              page to learn more about the included features.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+            <a
+              className="flex h-12 w-full items-center justify-center rounded-full bg-white text-black px-5 transition-colors hover:bg-zinc-200 md:w-39.5"
+              href="https://react.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Get Started
+            </a>
+            <a
+              className="flex h-12 w-full items-center justify-center rounded-full px-5 transition-colors hover:border-transparent bg-zinc-900 md:w-39.5 dark:text-white text-black"
+              href="/about"
+            >
+              Documentation
+            </a>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { Link } from "react-router";
+import { SEO } from "../components/SEO";
+
+export default function NotFound() {
+  return (
+    <>
+      <SEO title="404 - Page Not Found" description="The page you're looking for doesn't exist" />
+
+      <div className="flex min-h-screen items-center justify-center bg-black">
+        <div className="text-center px-6">
+          <h1 className="text-8xl font-bold text-white mb-4">404</h1>
+          <h2 className="text-3xl font-semibold text-zinc-50 mb-4">Page Not Found</h2>
+          <p className="text-lg text-zinc-400 mb-8">The page you're looking for doesn't exist.</p>
+          <Link
+            to="/"
+            className="inline-flex h-12 items-center justify-center rounded-full bg-white text-black px-8 font-medium transition-colors hover:bg-zinc-200"
+          >
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/UserProfile.tsx

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+import { useLoaderData, useParams } from "react-router";
+import { userService } from "../api/services/user.service";
+
+type User = { id?: string; name?: string; email?: string; avatar?: string; [key: string]: any };
+
+export default function UserProfile() {
+  const loaderUser = useLoaderData() as User | undefined;
+  const { userId } = useParams();
+
+  const { data: user = loaderUser ?? {} } = useQuery({
+    queryKey: ["user", userId],
+    queryFn: async () => {
+      if (!userId) throw new Error("Missing user id");
+      return await userService.getUser(userId);
+    },
+    initialData: loaderUser,
+    staleTime: 1000 * 60,
+  });
+
+  return (
+    <div className="min-h-screen bg-black text-white flex items-center justify-center">
+      <div className="max-w-xl p-8 bg-zinc-900 rounded-md shadow">
+        <div className="flex items-center gap-4">
+          {user.avatar ? (
+            <img src={user.avatar} alt={user.name} className="w-16 h-16 rounded-full" />
+          ) : (
+            <div className="w-16 h-16 rounded-full bg-zinc-700 flex items-center justify-center text-xl">
+              {user.name?.[0] ?? "U"}
+            </div>
+          )}
+          <div>
+            <h2 className="text-2xl font-semibold">{user.name}</h2>
+            <p className="text-sm text-zinc-400">{user.email}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react-vite/src/router.tsx

@@ -0,0 +1,33 @@
+import { createBrowserRouter } from "react-router";
+import { userService } from "./api/services/user.service";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import Layout from "./components/Layout";
+import About from "./pages/About";
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+import UserProfile from "./pages/UserProfile";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: Layout,
+    errorElement: <ErrorBoundary />,
+    children: [
+      { index: true, Component: Home },
+      { path: "about", Component: About },
+      {
+        path: "users/:userId",
+        loader: async ({ params }) => {
+          const id = params.userId;
+          if (!id) throw new Response("Missing user id", { status: 400 });
+          const user = await userService.getUser(id);
+          return user;
+        },
+        Component: UserProfile,
+      },
+      { path: "*", Component: NotFound },
+    ],
+  },
+]);
+
+export default router;

package/templates/react-vite/src/types/api.d.ts

@@ -0,0 +1,20 @@
+type ApiResponse<T = unknown> = {
+  data: T;
+  message?: string;
+  status: number;
+};
+
+type PaginatedResponse<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+};
+
+type ApiError = {
+  message: string;
+  code?: string;
+  status?: number;
+  errors?: Record<string, string[]>;
+};

package/templates/react-vite/src/types/user.d.ts

@@ -0,0 +1,6 @@
+type User = {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+};

package/templates/react-vite/src/utils/helpers.ts

@@ -0,0 +1,51 @@
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function formatDate(date: Date | string): string {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export function truncate(str: string, maxLength: number): string {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength) + "...";
+}
+
+export function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function debounce<T extends (...args: never[]) => unknown>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      timeout = null;
+      func(...args);
+    };
+
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
+
+export function slugify(str: string): string {
+  return str
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}

package/templates/react-vite/src/utils/storage.ts

@@ -0,0 +1,35 @@
+export const storage = {
+  get: <T>(key: string, defaultValue?: T): T | null => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : (defaultValue ?? null);
+    } catch (error) {
+      console.error("Error reading from localStorage:", error);
+      return defaultValue ?? null;
+    }
+  },
+
+  set: <T>(key: string, value: T): void => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error("Error writing to localStorage:", error);
+    }
+  },
+
+  remove: (key: string): void => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.error("Error removing from localStorage:", error);
+    }
+  },
+
+  clear: (): void => {
+    try {
+      localStorage.clear();
+    } catch (error) {
+      console.error("Error clearing localStorage:", error);
+    }
+  },
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_APP_NAME?: string;
+  readonly VITE_APP_VERSION?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/react-vite/template.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-vite-base",
+  "displayName": "React (Vite)",
+  "framework": "react-vite",
+  "description": "Production-ready React 19 + Vite with TypeScript, Router, TanStack Query, and more",
+  "files": [
+    "src/",
+    "public/",
+    ".env.example",
+    ".gitignore",
+    "eslint.config.js",
+    "index.html",
+    "package.json",
+    "README.md",
+    "tsconfig.json",
+    "tsconfig.app.json",
+    "tsconfig.node.json",
+    "vite.config.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview"
+  },
+  "jsScripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview"
+  },
+  "fileReplacements": [
+    {
+      "file": "index.html",
+      "from": "/src/main.tsx",
+      "to": "/src/main.jsx"
+    },
+    {
+      "file": "vite.config.ts",
+      "from": "main.tsx",
+      "to": "main.jsx"
+    }
+  ]
+}

package/templates/react-vite/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/templates/react-vite/vite.config.ts

@@ -0,0 +1,13 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});