create-stackkit-app 0.4.0 → 0.4.2

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

@@ -0,0 +1,45 @@
+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="text-2xl font-bold text-white">Stackkit</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.ts

@@ -0,0 +1,20 @@
+export interface ApiResponse<T = unknown> {
+  data: T;
+  message?: string;
+  status: number;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+  errors?: Record<string, 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,20 @@
+{
+  "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"
+  ]
+}

package/templates/{bases/react-vite-base/tsconfig.json → react-vite/tsconfig.app.json}

@@ -1,19 +1,26 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "types": ["vite/client"],
     "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+
+    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

package/templates/react-vite/tsconfig.json

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

package/templates/react-vite/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

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

package/modules/auth/authjs-express/files/lib/auth.ts

@@ -1,40 +0,0 @@
-import Credentials from '@auth/core/providers/credentials';
-
-export const authConfig = {
-  secret: process.env.AUTH_SECRET,
-  trustHost: true,
-  providers: [
-    // GitHub OAuth Provider
-    // Uncomment and add GITHUB_ID and GITHUB_SECRET to .env
-    // GitHub({
-    //   clientId: process.env.GITHUB_ID!,
-    //   clientSecret: process.env.GITHUB_SECRET!,
-    // }),
-
-    // Google OAuth Provider
-    // Uncomment and add GOOGLE_ID and GOOGLE_SECRET to .env
-    // Google({
-    //   clientId: process.env.GOOGLE_ID!,
-    //   clientSecret: process.env.GOOGLE_SECRET!,
-    // }),
-
-    // Credentials Provider (email/password)
-    Credentials({
-      credentials: {
-        email: { label: 'Email', type: 'email' },
-        password: { label: 'Password', type: 'password' },
-      },
-      authorize: async (credentials) => {
-        // Add your own authentication logic here
-        if (credentials?.email === 'demo@example.com' && credentials?.password === 'demo') {
-          return {
-            id: '1',
-            name: 'Demo User',
-            email: 'demo@example.com',
-          };
-        }
-        return null;
-      },
-    }),
-  ],
-};

package/modules/auth/authjs-express/files/routes/auth.ts

@@ -1,12 +0,0 @@
-import { Auth } from '@auth/core';
-import { Router } from 'express';
-import { authConfig } from '../lib/auth';
-
-const router = Router();
-
-router.all('/auth/*', async (req, res) => {
-  const response = await Auth(req, authConfig);
-  return res.status(response.status).json(response.body);
-});
-
-export default router;

package/modules/auth/authjs-express/module.json

@@ -1,39 +0,0 @@
-{
-  "name": "auth",
-  "displayName": "Auth.js (Express)",
-  "description": "Authentication with Auth.js for Express",
-  "category": "auth",
-  "supportedFrameworks": ["express"],
-  "dependencies": {
-    "@auth/express": "^0.7.6",
-    "@auth/core": "^0.37.4"
-  },
-  "envVars": [
-    {
-      "key": "AUTH_SECRET",
-      "value": "",
-      "description": "Secret for encrypting tokens. Generate with: openssl rand -base64 32",
-      "required": true
-    },
-    {
-      "key": "AUTH_TRUST_HOST",
-      "value": "true",
-      "description": "Trust the host header (required for Express)",
-      "required": true
-    }
-  ],
-  "patches": [
-    {
-      "type": "create-file",
-      "description": "Create Auth.js configuration",
-      "source": "lib/auth.ts",
-      "destination": "src/lib/auth.ts"
-    },
-    {
-      "type": "create-file",
-      "description": "Create auth routes",
-      "source": "routes/auth.ts",
-      "destination": "src/routes/auth.ts"
-    }
-  ]
-}

package/modules/auth/authjs-nextjs/files/api/auth/[...nextauth]/route.ts

@@ -1,3 +0,0 @@
-import { handlers } from '@/lib/auth';
-
-export const { GET, POST } = handlers;

package/modules/auth/authjs-nextjs/files/lib/auth.ts

@@ -1,43 +0,0 @@
-import NextAuth from 'next-auth';
-import Credentials from 'next-auth/providers/credentials';
-
-export const { handlers, signIn, signOut, auth } = NextAuth({
-  providers: [
-    // GitHub OAuth Provider
-    // Uncomment and add GITHUB_ID and GITHUB_SECRET to .env
-    // GitHub({
-    //   clientId: process.env.GITHUB_ID!,
-    //   clientSecret: process.env.GITHUB_SECRET!,
-    // }),
-
-    // Google OAuth Provider
-    // Uncomment and add GOOGLE_ID and GOOGLE_SECRET to .env
-    // Google({
-    //   clientId: process.env.GOOGLE_ID!,
-    //   clientSecret: process.env.GOOGLE_SECRET!,
-    // }),
-
-    // Credentials Provider (email/password)
-    Credentials({
-      credentials: {
-        email: { label: 'Email', type: 'email' },
-        password: { label: 'Password', type: 'password' },
-      },
-      authorize: async (credentials) => {
-        // Add your own authentication logic here
-        // This is just a demo - DO NOT use in production
-        if (credentials?.email === 'demo@example.com' && credentials?.password === 'demo') {
-          return {
-            id: '1',
-            name: 'Demo User',
-            email: 'demo@example.com',
-          };
-        }
-        return null;
-      },
-    }),
-  ],
-  pages: {
-    signIn: '/auth/signin',
-  },
-});

package/modules/auth/authjs-nextjs/module.json

@@ -1,38 +0,0 @@
-{
-  "name": "auth",
-  "displayName": "Auth.js v5 (Next.js)",
-  "description": "Modern authentication with Auth.js v5 (NextAuth successor)",
-  "category": "auth",
-  "supportedFrameworks": ["nextjs"],
-  "dependencies": {
-    "next-auth": "^5.0.0-beta.25"
-  },
-  "envVars": [
-    {
-      "key": "AUTH_SECRET",
-      "value": "",
-      "description": "Secret for encrypting tokens. Generate with: openssl rand -base64 32",
-      "required": true
-    },
-    {
-      "key": "AUTH_URL",
-      "value": "http://localhost:3000",
-      "description": "Canonical URL of your site (change in production)",
-      "required": false
-    }
-  ],
-  "patches": [
-    {
-      "type": "create-file",
-      "description": "Create Auth.js configuration",
-      "source": "lib/auth.ts",
-      "destination": "{{lib}}/auth.ts"
-    },
-    {
-      "type": "create-file",
-      "description": "Create Auth.js API route",
-      "source": "api/auth/[...nextauth]/route.ts",
-      "destination": "{{router}}/api/auth/[...nextauth]/route.ts"
-    }
-  ]
-}

package/modules/auth/nextauth/files/app-router/api/auth/[...nextauth]/route.ts

@@ -1,6 +0,0 @@
-import { authOptions } from '@/lib/auth';
-import NextAuth from 'next-auth';
-
-const handler = NextAuth(authOptions);
-
-export { handler as GET, handler as POST };

package/modules/auth/nextauth/files/lib/auth.ts

@@ -1,82 +0,0 @@
-import { AuthOptions } from 'next-auth';
-import CredentialsProvider from 'next-auth/providers/credentials';
-
-/**
- * NextAuth.js Configuration
- *
- * Configure authentication providers and options here.
- * See: https://next-auth.js.org/configuration/options
- */
-export const authOptions: AuthOptions = {
-  providers: [
-    // GitHub OAuth Provider
-    // Uncomment and add GITHUB_ID and GITHUB_SECRET to .env
-    // GithubProvider({
-    //   clientId: process.env.GITHUB_ID!,
-    //   clientSecret: process.env.GITHUB_SECRET!,
-    // }),
-
-    // Google OAuth Provider
-    // Uncomment and add GOOGLE_ID and GOOGLE_SECRET to .env
-    // GoogleProvider({
-    //   clientId: process.env.GOOGLE_ID!,
-    //   clientSecret: process.env.GOOGLE_SECRET!,
-    // }),
-
-    // Credentials Provider (email/password)
-    // Replace with your own authentication logic
-    CredentialsProvider({
-      name: 'Credentials',
-      credentials: {
-        email: { label: 'Email', type: 'email', placeholder: 'user@example.com' },
-        password: { label: 'Password', type: 'password' },
-      },
-      async authorize(credentials) {
-        // Add your own authentication logic here
-        // This is just a demo - DO NOT use in production
-        if (credentials?.email === 'demo@example.com' && credentials?.password === 'demo') {
-          return {
-            id: '1',
-            name: 'Demo User',
-            email: 'demo@example.com',
-          };
-        }
-        return null;
-      },
-    }),
-  ],
-
-  // Database adapter (optional)
-  // Uncomment to persist sessions in database
-  // adapter: PrismaAdapter(prisma),
-
-  session: {
-    strategy: 'jwt',
-  },
-
-  pages: {
-    signIn: '/auth/signin',
-    // signOut: '/auth/signout',
-    // error: '/auth/error',
-    // verifyRequest: '/auth/verify-request',
-    // newUser: '/auth/new-user'
-  },
-
-  callbacks: {
-    async jwt({ token, user }) {
-      if (user) {
-        token.id = user.id;
-      }
-      return token;
-    },
-    async session({ session, token }) {
-      if (session.user) {
-        session.user.id = token.id as string;
-      }
-      return session;
-    },
-  },
-
-  // Enable debug messages in development
-  debug: process.env.NODE_ENV === 'development',
-};

package/modules/auth/nextauth/files/pages-router/api/auth/[...nextauth].ts

@@ -1,4 +0,0 @@
-import { authOptions } from '@/lib/auth';
-import NextAuth from 'next-auth';
-
-export default NextAuth(authOptions);