starter-structure-cli 0.2.1 → 0.2.2

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

@@ -0,0 +1,101 @@
+<script setup>
+const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+
+const launchTracks = [
+  "Landing page sections with clear content hierarchy",
+  "Tailwind v4 styling with a warm editorial visual language",
+  "Simple Vue structure that is easy to extend"
+];
+
+const checklist = [
+  { label: "Brand system", value: "Colors, voice, layout" },
+  { label: "Core pages", value: "Home, feature, CTA blocks" },
+  { label: "Launch speed", value: "Fast local edits with Vite" }
+];
+
+const cards = [
+  {
+    title: "Intentional look",
+    body: "Warm neutrals, sharp typography, and layered surfaces give the starter a point of view immediately."
+  },
+  {
+    title: "Fast edits",
+    body: "Sections are plain Vue markup, so changing copy and layout stays straightforward."
+  },
+  {
+    title: "Portable setup",
+    body: "You can turn this into a SaaS page, agency site, waitlist, or docs front page without redoing the base."
+  }
+];
+</script>
+
+<template>
+  <main class="px-6 py-8 md:px-10 lg:px-12">
+    <section class="mx-auto grid min-h-[calc(100vh-4rem)] max-w-6xl gap-10 rounded-[2rem] border border-[var(--line)] bg-[var(--panel)] p-8 shadow-[0_30px_120px_rgba(15,23,42,0.08)] backdrop-blur md:grid-cols-[1.2fr_0.8fr] md:p-12">
+      <div class="flex flex-col justify-between gap-8">
+        <div class="space-y-6">
+          <span class="inline-flex w-fit rounded-full border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-900">
+            Vue + Vite + Tailwind starter
+          </span>
+          <div class="space-y-4">
+            <h1 class="max-w-3xl text-5xl font-semibold tracking-tight text-slate-900 md:text-6xl">
+              {{ appName }} ships with a clean marketing shell, not a blank page.
+            </h1>
+            <p class="max-w-2xl text-lg leading-8 text-[var(--muted)]">
+              Start from a deliberate layout with strong spacing, textured color, and clear
+              sections instead of rebuilding the same landing page structure on every project.
+            </p>
+          </div>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-3">
+          <article
+            v-for="item in launchTracks"
+            :key="item"
+            class="rounded-3xl border border-white/70 bg-white/75 p-5 text-sm leading-7 text-slate-700 shadow-sm"
+          >
+            {{ item }}
+          </article>
+        </div>
+      </div>
+
+      <aside class="flex flex-col justify-between rounded-[1.75rem] bg-slate-950 p-6 text-slate-50 shadow-[0_20px_80px_rgba(15,23,42,0.3)]">
+        <div class="space-y-4">
+          <p class="text-sm uppercase tracking-[0.24em] text-slate-400">Launch checklist</p>
+          <div class="space-y-3">
+            <div
+              v-for="item in checklist"
+              :key="item.label"
+              class="rounded-2xl border border-white/10 bg-white/5 p-4"
+            >
+              <p class="text-sm text-slate-400">{{ item.label }}</p>
+              <p class="mt-1 text-base font-medium text-white">{{ item.value }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-8 rounded-3xl bg-linear-to-br from-orange-400 via-amber-300 to-lime-200 p-[1px]">
+          <div class="rounded-[calc(1.5rem-1px)] bg-slate-950/95 p-5">
+            <p class="text-sm text-slate-400">Ready for the next template layer?</p>
+            <p class="mt-2 text-lg font-medium">
+              Add auth, CMS, or dashboard modules on top of this shell.
+            </p>
+          </div>
+        </div>
+      </aside>
+    </section>
+
+    <section class="mx-auto mt-10 max-w-6xl">
+      <div class="grid gap-4 md:grid-cols-3">
+        <article
+          v-for="card in cards"
+          :key="card.title"
+          class="rounded-[1.75rem] border border-[var(--line)] bg-white/70 p-6 shadow-sm"
+        >
+          <p class="text-lg font-semibold text-slate-900">{{ card.title }}</p>
+          <p class="mt-3 text-sm leading-7 text-slate-600">{{ card.body }}</p>
+        </article>
+      </div>
+    </section>
+  </main>
+</template>

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

@@ -0,0 +1,16 @@
+export const assetsManifest = [
+  {
+    key: "assets-hero",
+    label: "Assets hero",
+    path: "/assets/hero-placeholder"
+  },
+  {
+    key: "assets-cover",
+    label: "Assets cover",
+    path: "/assets/cover-placeholder"
+  }
+];
+
+export const assetsSource = "fullstack-enterprise-structure/shared/client/src/assets/index.tsx";
+
+export default assetsManifest;

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

@@ -0,0 +1,37 @@
+type ChartsPanelProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function ChartsPanel({
+  title = "Charts",
+  description = "Starter implementation for the charts module.",
+  items = defaultItems
+}: ChartsPanelProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Charts
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type BannerSectionProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function BannerSection({
+  title = "Banner",
+  description = "Starter implementation for the banner module.",
+  items = defaultItems
+}: BannerSectionProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Banner
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type HeaderBarProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function HeaderBar({
+  title = "Header",
+  description = "Starter implementation for the header module.",
+  items = defaultItems
+}: HeaderBarProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Header
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type FormProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function Form({
+  title = "Form",
+  description = "Starter implementation for the form module.",
+  items = defaultItems
+}: FormProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Form
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type ModalProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function Modal({
+  title = "Modal",
+  description = "Starter implementation for the modal module.",
+  items = defaultItems
+}: ModalProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Modal
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/action-button/index.tsx

@@ -0,0 +1,37 @@
+type ActionButtonProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function ActionButton({
+  title = "Action Button",
+  description = "Starter implementation for the action button module.",
+  items = defaultItems
+}: ActionButtonProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Action Button
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/base-status/index.tsx

@@ -0,0 +1,37 @@
+type BaseStatusProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function BaseStatus({
+  title = "Base Status",
+  description = "Starter implementation for the base status module.",
+  items = defaultItems
+}: BaseStatusProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Base Status
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/dashboard-title/index.tsx

@@ -0,0 +1,37 @@
+type DashboardTitleProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function DashboardTitle({
+  title = "Dashboard Title",
+  description = "Starter implementation for the dashboard title module.",
+  items = defaultItems
+}: DashboardTitleProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Dashboard Title
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/delete-modal/index.tsx

@@ -0,0 +1,37 @@
+type DeleteModalProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function DeleteModal({
+  title = "Delete Modal",
+  description = "Starter implementation for the delete modal module.",
+  items = defaultItems
+}: DeleteModalProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Delete Modal
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/loader/index.tsx

@@ -0,0 +1,37 @@
+type LoaderProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function Loader({
+  title = "Loader",
+  description = "Starter implementation for the loader module.",
+  items = defaultItems
+}: LoaderProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Loader
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/vue-vite-ts-tailwind-express-prisma-mysql/client/src/components/re-useable/toolbar-button/index.tsx

@@ -0,0 +1,37 @@
+type ToolbarButtonProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function ToolbarButton({
+  title = "Toolbar Button",
+  description = "Starter implementation for the toolbar button module.",
+  items = defaultItems
+}: ToolbarButtonProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Toolbar Button
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type TitleBlockProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function TitleBlock({
+  title = "Title",
+  description = "Starter implementation for the title module.",
+  items = defaultItems
+}: TitleBlockProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Title
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+type UnauthorizedProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function Unauthorized({
+  title = "Unauthorized",
+  description = "Starter implementation for the unauthorized module.",
+  items = defaultItems
+}: UnauthorizedProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Unauthorized
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { createContext, useContext, useState, type PropsWithChildren } from "react";
+
+type ContextApiState = {
+  activeSection: string;
+  setActiveSection: (value: string) => void;
+};
+
+const ContextApiContext = createContext<ContextApiState | undefined>(undefined);
+
+export function ContextApiProvider({ children }: PropsWithChildren) {
+  const [activeSection, setActiveSection] = useState("dashboard");
+
+  return (
+    <ContextApiContext.Provider value={{ activeSection, setActiveSection }}>
+      {children}
+    </ContextApiContext.Provider>
+  );
+}
+
+export function useContextApi() {
+  const context = useContext(ContextApiContext);
+
+  if (!context) {
+    throw new Error("useContextApi must be used inside ContextApiProvider.");
+  }
+
+  return context;
+}

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

@@ -0,0 +1,14 @@
+export const dataData = [
+  {
+    id: "data-overview",
+    title: "Data overview",
+    description: "Starter content block for the data area."
+  },
+  {
+    id: "data-workflow",
+    title: "Data workflow",
+    description: "Replace this data with your live module configuration."
+  }
+];
+
+export default dataData;