npm - stackkit-cli - Versions diffs - 0.4.2 → 0.4.3 - Mend

stackkit-cli 0.4.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/templates/react-vite/README.md ADDED Viewed

@@ -0,0 +1,85 @@
+# React + Vite Template
+A production-ready React starter template with TypeScript, Vite, and essential libraries pre-configured.
+## Features
+- **React 19** with TypeScript
+- **Vite 7** for fast development
+- **React Router v7** for client-side routing
+- **TanStack Query v5** for data fetching and caching
+- **Axios** with interceptors
+- **Tailwind CSS** for styling
+- **React Hot Toast** for notifications
+- **SEO Ready** with React Helmet Async
+- **Error Boundaries** for graceful error handling
+- **ESLint** for code quality
+- **Custom Hooks** included
+## Quick Start
+```bash
+# Install dependencies
+pnpm install
+# Start development server
+pnpm dev
+# Build for production
+pnpm build
+# Preview production build
+pnpm preview
+```
+## Project Structure
+```
+src/
+├── api/          # API client & interceptors
+├── components/   # Reusable UI components
+├── config/       # App configuration
+├── hooks/        # Custom React hooks
+├── lib/          # Library configurations
+├── pages/        # Route pages
+├── types/        # TypeScript types
+├── utils/        # Helper functions
+├── App.tsx       # Main app component
+├── main.tsx      # Entry point
+└── index.css     # Global styles
+```
+## Environment Variables
+Create a `.env` file:
+```env
+VITE_API_URL=http://localhost:3000/api
+VITE_APP_NAME=My App
+```
+## Production Build
+- Code splitting with vendor chunks
+- Tree shaking to remove unused code
+- Minified and compressed output
+- TypeScript strict mode enabled
+- ESLint configured for code quality
+## Deployment
+```bash
+pnpm build
+```
+Deploy the `dist` folder to Vercel, Netlify, or any static hosting service.
+## Tech Stack
+- React 19 - UI library
+- Vite 7 - Build tool
+- TypeScript - Type safety
+- React Router v7 - Routing
+- TanStack Query v5 - Data fetching
+- Axios - HTTP client
+- Tailwind CSS - Styling

package/templates/react-vite/eslint.config.js ADDED Viewed

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/templates/{bases/react-vite-base → react-vite}/index.html RENAMED Viewed

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/src/index.css" rel="stylesheet">
     <title>react-vite-base</title>
   </head>
   <body>

package/templates/{bases/react-vite-base → react-vite}/package.json RENAMED Viewed

@@ -7,11 +7,22 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-query-devtools": "^5.62.0",
+    "axios": "^1.7.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-helmet-async": "^2.0.5",
+    "react-hot-toast": "^2.4.1",
+    "react-router": "^7.12.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -19,12 +30,15 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
-}
+}

package/templates/react-vite/src/api/client.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import type { AxiosResponse } from "axios";
+import axios, { AxiosError } from "axios";
+import toast from "react-hot-toast";
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("auth_token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  },
+);
+api.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("auth_token");
+      toast.error("Session expired. Please login again.");
+    } else if (error.response?.status === 403) {
+      toast.error("You do not have permission to perform this action.");
+    } else if (error.response?.status === 404) {
+      toast.error("Resource not found.");
+    } else if (error.response?.status === 500) {
+      toast.error("Server error. Please try again later.");
+    } else if (error.code === "ECONNABORTED") {
+      toast.error("Request timeout. Please try again.");
+    } else if (!error.response) {
+      toast.error("Network error. Please check your connection.");
+    }
+    return Promise.reject(error);
+  },
+);
+export default api;

package/templates/react-vite/src/api/services/user.service.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import api from "../client";
+export const userService = {
+  getUser: async (id: string): Promise<User> => {
+    const response = await api.get<ApiResponse<User>>(`/users/${id}`);
+    return response.data.data;
+  },
+  getCurrentUser: async (): Promise<User> => {
+    const response = await api.get<ApiResponse<User>>("/users/me");
+    return response.data.data;
+  },
+  updateUser: async (id: string, data: Partial<User>): Promise<User> => {
+    const response = await api.patch<ApiResponse<User>>(`/users/${id}`, data);
+    return response.data.data;
+  },
+};

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  );
+}