starter-structure-cli 0.2.1 → 0.2.2

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/hooks/admin/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+type LoadState = "idle" | "loading" | "ready";
+
+export default function useAdmin() {
+  const [state, setState] = useState<LoadState>("idle");
+  const [items, setItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    setState("loading");
+
+    const timer = window.setTimeout(() => {
+      setItems([
+        "Admin starter task",
+        "Replace mock data",
+        "Connect real permissions"
+      ]);
+      setState("ready");
+    }, 120);
+
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return {
+    state,
+    items
+  };
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/hooks/common/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+type LoadState = "idle" | "loading" | "ready";
+
+export default function useCommon() {
+  const [state, setState] = useState<LoadState>("idle");
+  const [items, setItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    setState("loading");
+
+    const timer = window.setTimeout(() => {
+      setItems([
+        "Common starter task",
+        "Replace mock data",
+        "Connect real permissions"
+      ]);
+      setState("ready");
+    }, 120);
+
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return {
+    state,
+    items
+  };
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/hooks/use-api/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+type LoadState = "idle" | "loading" | "ready";
+
+export default function useUseApi() {
+  const [state, setState] = useState<LoadState>("idle");
+  const [items, setItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    setState("loading");
+
+    const timer = window.setTimeout(() => {
+      setItems([
+        "Use API starter task",
+        "Replace mock data",
+        "Connect real permissions"
+      ]);
+      setState("ready");
+    }, 120);
+
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  return {
+    state,
+    items
+  };
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/interface/index.tsx

@@ -0,0 +1,13 @@
+export type InterfaceStatus = "draft" | "active" | "archived";
+
+export interface InterfaceRecord {
+  id: string;
+  title: string;
+  description: string;
+  status: InterfaceStatus;
+}
+
+export interface InterfaceFilter {
+  search?: string;
+  status?: InterfaceStatus;
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/layout/dashboard/index.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from "react";
+
+type DashboardLayoutProps = PropsWithChildren<{
+  heading?: string;
+  summary?: string;
+}>;
+
+export default function DashboardLayout({
+  heading = "Dashboard Layout",
+  summary = "Starter layout wrapper for this workspace section.",
+  children
+}: DashboardLayoutProps) {
+  return (
+    <section className="min-h-screen bg-slate-50 px-6 py-8 text-slate-900">
+      <header className="mx-auto max-w-6xl rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Layout</p>
+        <h1 className="mt-2 text-3xl font-semibold">{heading}</h1>
+        <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-600">{summary}</p>
+      </header>
+
+      <div className="mx-auto mt-6 max-w-6xl">{children}</div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import "./style.css";
+
+createApp(App).mount("#app");

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/routes/admin/index.tsx

@@ -0,0 +1,24 @@
+export type StarterRoute = {
+  path: string;
+  label: string;
+  permission?: string;
+};
+
+export const adminRoutes: StarterRoute[] = [
+  {
+    path: "/admin",
+    label: "Admin Home"
+  },
+  {
+    path: "/admin/create",
+    label: "Admin Create",
+    permission: "admin.create"
+  },
+  {
+    path: "/admin/view/:id",
+    label: "Admin Detail",
+    permission: "admin.read"
+  }
+];
+
+export default adminRoutes;

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/routes/auth/index.tsx

@@ -0,0 +1,24 @@
+export type StarterRoute = {
+  path: string;
+  label: string;
+  permission?: string;
+};
+
+export const authRoutes: StarterRoute[] = [
+  {
+    path: "/auth",
+    label: "Auth Home"
+  },
+  {
+    path: "/auth/create",
+    label: "Auth Create",
+    permission: "auth.create"
+  },
+  {
+    path: "/auth/view/:id",
+    label: "Auth Detail",
+    permission: "auth.read"
+  }
+];
+
+export default authRoutes;

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/routes/home/index.tsx

@@ -0,0 +1,24 @@
+export type StarterRoute = {
+  path: string;
+  label: string;
+  permission?: string;
+};
+
+export const homeRoutes: StarterRoute[] = [
+  {
+    path: "/home",
+    label: "Home Home"
+  },
+  {
+    path: "/home/create",
+    label: "Home Create",
+    permission: "home.create"
+  },
+  {
+    path: "/home/view/:id",
+    label: "Home Detail",
+    permission: "home.read"
+  }
+];
+
+export default homeRoutes;

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/routes/private/index.tsx

@@ -0,0 +1,24 @@
+export type StarterRoute = {
+  path: string;
+  label: string;
+  permission?: string;
+};
+
+export const privateRoutes: StarterRoute[] = [
+  {
+    path: "/private",
+    label: "Private Home"
+  },
+  {
+    path: "/private/create",
+    label: "Private Create",
+    permission: "private.create"
+  },
+  {
+    path: "/private/view/:id",
+    label: "Private Detail",
+    permission: "private.read"
+  }
+];
+
+export default privateRoutes;

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/style.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+  --canvas: #f4efe4;
+  --ink: #1f2937;
+  --muted: #6b7280;
+  --panel: rgba(255, 255, 255, 0.82);
+  --line: rgba(31, 41, 55, 0.12);
+  font-family: "Space Grotesk", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(240, 107, 70, 0.16), transparent 28%),
+    radial-gradient(circle at 85% 20%, rgba(22, 163, 74, 0.12), transparent 22%),
+    linear-gradient(180deg, #fcfaf5 0%, var(--canvas) 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/styles/index.tsx

@@ -0,0 +1,11 @@
+export const stylesTokens = {
+  background: "#f8fafc",
+  panel: "#ffffff",
+  accent: "#0f172a",
+  muted: "#64748b",
+  border: "#e2e8f0"
+};
+
+export function getStylesShadow() {
+  return "0 24px 64px rgba(15, 23, 42, 0.08)";
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/types/index.tsx

@@ -0,0 +1,13 @@
+export type TypesStatus = "draft" | "active" | "archived";
+
+export interface TypesRecord {
+  id: string;
+  title: string;
+  description: string;
+  status: TypesStatus;
+}
+
+export interface TypesFilter {
+  search?: string;
+  status?: TypesStatus;
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/utils/index.tsx

@@ -0,0 +1,13 @@
+export function toUtilsSlug(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+}
+
+export function formatUtilsLabel(value: string) {
+  return value
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/view/admin/index.tsx

@@ -0,0 +1,29 @@
+const tasks = [
+  "Connect the page to real data",
+  "Replace starter metrics",
+  "Hook up page-specific actions"
+];
+
+export default function AdminPage() {
+  return (
+    <main className="space-y-6">
+      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Admin
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">Admin Page</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
+          Use this starter page as the first real implementation for the admin section.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {tasks.map((task) => (
+          <article key={task} className="rounded-2xl bg-slate-50 px-4 py-5 text-sm text-slate-700">
+            {task}
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/view/auth/index.tsx

@@ -0,0 +1,29 @@
+const tasks = [
+  "Connect the page to real data",
+  "Replace starter metrics",
+  "Hook up page-specific actions"
+];
+
+export default function AuthPage() {
+  return (
+    <main className="space-y-6">
+      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Auth
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">Auth Page</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
+          Use this starter page as the first real implementation for the auth section.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {tasks.map((task) => (
+          <article key={task} className="rounded-2xl bg-slate-50 px-4 py-5 text-sm text-slate-700">
+            {task}
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/view/home/index.tsx

@@ -0,0 +1,29 @@
+const tasks = [
+  "Connect the page to real data",
+  "Replace starter metrics",
+  "Hook up page-specific actions"
+];
+
+export default function HomePage() {
+  return (
+    <main className="space-y-6">
+      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Home
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">Home Page</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
+          Use this starter page as the first real implementation for the home section.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {tasks.map((task) => (
+          <article key={task} className="rounded-2xl bg-slate-50 px-4 py-5 text-sm text-slate-700">
+            {task}
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/view/pricing/index.tsx

@@ -0,0 +1,29 @@
+const tasks = [
+  "Connect the page to real data",
+  "Replace starter metrics",
+  "Hook up page-specific actions"
+];
+
+export default function PricingPage() {
+  return (
+    <main className="space-y-6">
+      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Pricing
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold text-slate-900">Pricing Page</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-600">
+          Use this starter page as the first real implementation for the pricing section.
+        </p>
+      </section>
+
+      <section className="grid gap-4 md:grid-cols-3">
+        {tasks.map((task) => (
+          <article key={task} className="rounded-2xl bg-slate-50 px-4 py-5 text-sm text-slate-700">
+            {task}
+          </article>
+        ))}
+      </section>
+    </main>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/tsconfig.json

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

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [vue(), tailwindcss()]
+});

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "scripts": {
+    "setup": "npm install --prefix client && npm install --prefix server",
+    "dev:client": "npm --prefix client run dev",
+    "dev:server": "npm --prefix server run dev",
+    "build:client": "npm --prefix client run build"
+  }
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/.env.example

@@ -0,0 +1,6 @@
+PORT=5000
+NODE_ENV=development
+DATABASE_URL="mysql://root:password@localhost:3306/__APP_NAME__"
+JWT_SECRET=change-this-secret
+JWT_EXPIRES_IN=7d
+CLIENT_URL=http://localhost:5173

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/README.md

@@ -0,0 +1,48 @@
+# __APP_NAME__
+
+Express + Prisma + MySQL + JWT starter API with TypeScript.
+
+## Features
+
+- TypeScript-first Express API setup
+- Prisma ORM with MySQL
+- User registration and login
+- JWT authentication middleware
+- Structured `src/` layout
+- Ready-to-edit Prisma schema
+
+## Project structure
+
+```text
+.
+├── prisma/
+├── src/
+│   ├── config/
+│   ├── controllers/
+│   ├── middleware/
+│   ├── routes/
+│   └── utils/
+├── .env.example
+├── .gitignore
+├── package.json
+└── tsconfig.json
+```
+
+## Getting started
+
+```bash
+npm install
+cp .env.example .env
+npx prisma generate
+npx prisma migrate dev --name init
+npm run dev
+```
+
+
+## API endpoints
+
+- `GET /api/health`
+- `POST /api/auth/register`
+- `POST /api/auth/login`
+- `GET /api/auth/me`
+

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/controllers/common/index.tsx

@@ -0,0 +1,35 @@
+export type StarterRequest = {
+  params?: Record<string, string>;
+  query?: Record<string, string>;
+  body?: Record<string, unknown>;
+  user?: {
+    id: string;
+    role: string;
+  };
+};
+
+export type StarterResponse = {
+  statusCode: number;
+  body: Record<string, unknown>;
+};
+
+export async function listCommon(request: StarterRequest): Promise<StarterResponse> {
+  return {
+    statusCode: 200,
+    body: {
+      feature: "common",
+      filters: request.query ?? {},
+      items: []
+    }
+  };
+}
+
+export async function createCommon(request: StarterRequest): Promise<StarterResponse> {
+  return {
+    statusCode: 201,
+    body: {
+      feature: "common",
+      payload: request.body ?? {}
+    }
+  };
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/controllers/reports/index.tsx

@@ -0,0 +1,35 @@
+export type StarterRequest = {
+  params?: Record<string, string>;
+  query?: Record<string, string>;
+  body?: Record<string, unknown>;
+  user?: {
+    id: string;
+    role: string;
+  };
+};
+
+export type StarterResponse = {
+  statusCode: number;
+  body: Record<string, unknown>;
+};
+
+export async function listReports(request: StarterRequest): Promise<StarterResponse> {
+  return {
+    statusCode: 200,
+    body: {
+      feature: "reports",
+      filters: request.query ?? {},
+      items: []
+    }
+  };
+}
+
+export async function createReports(request: StarterRequest): Promise<StarterResponse> {
+  return {
+    statusCode: 201,
+    body: {
+      feature: "reports",
+      payload: request.body ?? {}
+    }
+  };
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/database/config/index.tsx

@@ -0,0 +1,10 @@
+export const configConfig = {
+  client: process.env.DB_CLIENT || "mysql",
+  host: process.env.DB_HOST || "localhost",
+  port: Number(process.env.DB_PORT || 3306),
+  database: process.env.DB_NAME || "__APP_NAME__",
+  username: process.env.DB_USER || "root",
+  password: process.env.DB_PASSWORD || ""
+};
+
+export default configConfig;

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/server/database/migrations/index.tsx

@@ -0,0 +1,12 @@
+export const migrationsPlan = [
+  {
+    id: "001_create_users",
+    description: "Create the users table or collection."
+  },
+  {
+    id: "002_create_roles",
+    description: "Create the permissions and roles structure."
+  }
+];
+
+export default migrationsPlan;