stackkit-cli 0.4.2 → 0.4.3

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

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,35 +0,0 @@
-{
-  "name": "drizzle-postgresql",
-  "displayName": "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/express-base/src/middlewares/error.middleware.ts

@@ -1,12 +0,0 @@
-import { NextFunction, Request, Response } from 'express';
-
-export const errorHandler = (err: any, req: Request, res: Response, next: NextFunction) => {
-  const statusCode = err.status || 500;
-  const errorMessage = err?.message || 'Internal server error!';
-
-  res.status(statusCode).json({
-    success: false,
-    message: errorMessage,
-    errors: errorMessage,
-  });
-};

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

@@ -1,7 +0,0 @@
-{
-  "name": "express-base",
-  "displayName": "Express.js",
-  "framework": "express",
-  "description": "Express.js REST API with TypeScript",
-  "files": ["src/", ".env.example", ".gitignore", "package.json", "tsconfig.json"]
-}

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

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "target": "ES2023",
-    "strict": true,
-    "esModuleInterop": true,
-    "ignoreDeprecations": "5.0"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/templates/bases/nextjs-base/app/page.tsx

@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <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-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </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 gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}

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/eslint.config.js

@@ -1,23 +0,0 @@
-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/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