create-stackkit-app 0.4.1 → 0.4.2

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/{bases/react-vite-base → react-vite}/template.json

@@ -2,10 +2,11 @@
   "name": "react-vite-base",
   "displayName": "React (Vite)",
   "framework": "react-vite",
-  "description": "React 18 + Vite with TypeScript",
+  "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/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/database/drizzle-postgresql/files/drizzle.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from 'drizzle-kit';
-
-export default defineConfig({
-  schema: './lib/schema.ts',
-  out: './drizzle',
-  dialect: 'postgresql',
-  dbCredentials: {
-    url: process.env.DATABASE_URL!,
-  },
-});

package/modules/database/drizzle-postgresql/files/lib/db.ts

@@ -1,7 +0,0 @@
-import { drizzle } from 'drizzle-orm/postgres-js';
-import postgres from 'postgres';
-
-const connectionString = process.env.DATABASE_URL!;
-
-export const client = postgres(connectionString, { prepare: false });
-export const db = drizzle(client);

package/modules/database/drizzle-postgresql/files/lib/schema.ts

@@ -1,8 +0,0 @@
-import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';
-
-export const users = pgTable('users', {
-  id: serial('id').primaryKey(),
-  name: text('name').notNull(),
-  email: text('email').notNull().unique(),
-  createdAt: timestamp('created_at').defaultNow(),
-});

package/modules/database/drizzle-postgresql/module.json

@@ -1,34 +0,0 @@
-{
-  "name": "drizzle-postgresql",
-  "description": "Drizzle ORM with PostgreSQL",
-  "category": "database",
-  "dependencies": {
-    "drizzle-orm": "^0.36.4",
-    "postgres": "^3.4.5"
-  },
-  "devDependencies": {
-    "drizzle-kit": "^0.28.1"
-  },
-  "scripts": {
-    "db:generate": "drizzle-kit generate",
-    "db:migrate": "drizzle-kit migrate",
-    "db:studio": "drizzle-kit studio"
-  },
-  "env": {
-    "DATABASE_URL": "postgresql://postgres:password@localhost:5432/myapp"
-  },
-  "files": [
-    {
-      "source": "files/lib/db.ts",
-      "destination": "lib/db.ts"
-    },
-    {
-      "source": "files/lib/schema.ts",
-      "destination": "lib/schema.ts"
-    },
-    {
-      "source": "files/drizzle.config.ts",
-      "destination": "drizzle.config.ts"
-    }
-  ]
-}

package/templates/bases/express-base/.env.example

@@ -1,2 +0,0 @@
-PORT=3000
-NODE_ENV=development

package/templates/bases/express-base/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "my-app",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "tsx watch src/server.ts",
-    "build": "tsc",
-    "start": "node dist/server.js",
-    "lint": "eslint src"
-  },
-  "dependencies": {
-    "express": "^4.21.2",
-    "dotenv": "^16.4.7",
-    "cors": "^2.8.5"
-  },
-  "devDependencies": {
-    "@types/express": "^5.0.0",
-    "@types/node": "^22.10.5",
-    "@types/cors": "^2.8.17",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
-  }
-}

package/templates/bases/express-base/src/app.ts

@@ -1,34 +0,0 @@
-import cors from 'cors';
-import express, { Application, NextFunction, Request, Response } from 'express';
-import { env } from './config/env';
-import { errorHandler } from './middlewares/error.middleware';
-
-// app initialization
-const app: Application = express();
-app.use(express.json());
-
-// cors configuration
-app.use(
-  cors({
-    origin: [env.app.site_url],
-    credentials: true,
-  })
-);
-
-// Home page route
-app.get('/', (req: Request, res: Response) => {
-  res.send('Hello World!');
-});
-
-// unhandled routes
-app.use((req: Request, res: Response, next: NextFunction) => {
-  const error: any = new Error(`Can't find ${req.originalUrl} on this server!`);
-  error.status = 404;
-
-  next(error);
-});
-
-// Global error handler
-app.use(errorHandler);
-
-export default app;

package/templates/bases/express-base/src/config/env.ts

@@ -1,14 +0,0 @@
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.join(process.cwd(), '.env') });
-
-const env = {
-  app: {
-    port: Number(process.env.PORT) || 3000,
-    url: process.env.APP_URL || 'http://localhost:3000',
-    site_url: process.env.SITE_URL || 'http://localhost:5173',
-  },
-};
-
-export { env };

package/templates/bases/react-vite-base/README.md

@@ -1,73 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

package/templates/bases/react-vite-base/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/templates/bases/react-vite-base/src/App.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App

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

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

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

@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

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

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})