starter-structure-cli 0.2.1 → 0.2.2

package/templates/fullstack/vue-vite-ts-tailwind-express-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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;

package/templates/fullstack/vue-vite-ts-tailwind-express-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/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-mongoose/client/src/main.ts

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