teamshare-bridge 0.2.5 → 0.4.0

package/templates/web/src/lib/api/client.ts.tpl

@@ -0,0 +1,123 @@
+const BASE_URL =
+  typeof window !== "undefined"
+    ? process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000"
+    : process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+let _onUnauthorized: (() => void) | null = null;
+
+export function onUnauthorized(fn: () => void) {
+  _onUnauthorized = fn;
+  return () => {
+    _onUnauthorized = null;
+  };
+}
+
+export class ApiError extends Error {
+  constructor(
+    public code: string,
+    message: string,
+    public status: number,
+    public details?: unknown
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+async function getToken(): Promise<string | null> {
+  try {
+    const mod = await import("next-auth/react");
+    const session = await mod.getSession();
+    return (session as { user?: { accessToken?: string } })?.user
+      ?.accessToken ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function apiFetch<T>(
+  path: string,
+  opts: RequestInit = {}
+): Promise<T> {
+  const token = await getToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(opts.headers as Record<string, string>),
+  };
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...opts,
+    headers,
+  });
+
+  if (res.status === 401) {
+    _onUnauthorized?.();
+    throw new ApiError("UNAUTHORIZED", "Unauthorized", 401);
+  }
+
+  const body = await res.json().catch(() => ({}));
+
+  if (!res.ok) {
+    throw new ApiError(
+      body?.error?.code ?? "UNKNOWN_ERROR",
+      body?.error?.message ?? "An error occurred",
+      res.status,
+      body?.error?.details
+    );
+  }
+
+  return (body?.data ?? body) as T;
+}
+
+export async function apiFetchEnvelope<T>(
+  path: string,
+  opts: RequestInit = {}
+): Promise<{ data: T; pagination?: PaginatedResponse<T>["pagination"] }> {
+  const token = await getToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    ...(opts.headers as Record<string, string>),
+  };
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...opts,
+    headers,
+  });
+
+  if (res.status === 401) {
+    _onUnauthorized?.();
+    throw new ApiError("UNAUTHORIZED", "Unauthorized", 401);
+  }
+
+  const body = await res.json().catch(() => ({}));
+
+  if (!res.ok) {
+    throw new ApiError(
+      body?.error?.code ?? "UNKNOWN_ERROR",
+      body?.error?.message ?? "An error occurred",
+      res.status,
+      body?.error?.details
+    );
+  }
+
+  return {
+    data: (body?.data ?? body) as T,
+    pagination: body?.pagination,
+  };
+}

package/templates/web/src/lib/providers.tsx.tpl

@@ -0,0 +1,35 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { SessionProvider } from "next-auth/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: 1,
+            staleTime: 30_000,
+          },
+        },
+      })
+  );
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <SessionProvider>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </SessionProvider>
+    </ThemeProvider>
+  );
+}

package/templates/web/src/lib/query-keys.ts.tpl

@@ -0,0 +1,21 @@
+
+export interface ListQuery {
+  page?: number;
+  limit?: number;
+  search?: string;
+  sort?: string;
+  order?: "asc" | "desc";
+  [key: string]: unknown;
+}
+
+export const qk = {
+  all: ["api"] as const,
+  users: () => [...qk.all, "users"] as const,
+  user: (id: string) => [...qk.users(), id] as const,
+  projects: () => [...qk.all, "projects"] as const,
+  project: (id: string) => [...qk.projects(), id] as const,
+};
+
+export function qkList(base: readonly unknown[], query?: ListQuery) {
+  return [...base, { ...(query ?? {}) }] as const;
+}

package/templates/web/src/lib/utils.ts.tpl

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge Tailwind classes with conflict resolution. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/web/src/lib/validation/schemas.ts.tpl

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+export const emailSchema = z.string().email("Invalid email address");
+
+export const passwordSchema = z
+  .string()
+  .min(8, "Password must be at least 8 characters")
+  .max(128, "Password must be at most 128 characters");
+
+export const nameSchema = z
+  .string()
+  .min(1, "Name is required")
+  .max(100, "Name must be at most 100 characters");
+
+export const uuidSchema = z.string().uuid("Invalid UUID");

package/templates/web/src/modules/example/views/example-list-view.tsx.tpl

@@ -0,0 +1,98 @@
+"use client";
+
+import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Add, DocumentText1, Refresh, Trash } from "iconsax-react";
+import { AppButton, AppListToolbar, AppTable } from "@/components/shared";
+import { useListState } from "@/hooks/use-list-state";
+import { apiFetchEnvelope } from "@/lib/api/client";
+import { qk, qkList } from "@/lib/query-keys";
+
+interface ExampleItem {
+  id: string;
+  name: string;
+  createdAt: string;
+}
+
+export default function ExampleListView() {
+  const { state, setSearch, isPending } = useListState();
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryKey: qkList(qk.all, state),
+    queryFn: () =>
+      apiFetchEnvelope<{ items: ExampleItem[]; pagination?: { total: number; page: number; totalPages: number } }>(
+        `/examples?page=${state.page}&limit=${state.limit}&search=${encodeURIComponent(state.search)}`
+      ),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiFetchEnvelope(`/examples/${id}`, { method: "DELETE" }),
+    onSuccess: () => void query.invalidateQueries(),
+  });
+
+  function handleDelete(id: string) {
+    deleteMutation.mutate(id);
+  }
+
+  const columns = useMemo<ColumnDef<ExampleItem, unknown>[]>(
+    () => [
+      { accessorKey: "name", header: "Name" },
+      {
+        accessorKey: "createdAt",
+        header: "Created",
+        cell: ({ row }) => new Date(row.original.createdAt).toLocaleDateString(),
+      },
+      {
+        id: "actions",
+        header: "",
+        cell: ({ row }) => (
+          <AppButton variant="ghost" onClick={() => handleDelete(row.original.id)}>
+            <Trash variant="Outline" color="currentColor" className="h-4 w-4" />
+          </AppButton>
+        ),
+      },
+    ],
+    [deleteMutation.isPending]
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Examples</h1>
+        <AppButton>
+          <Add variant="Outline" color="currentColor" className="h-4 w-4" />
+          Create
+        </AppButton>
+      </div>
+
+      <AppListToolbar
+        search={state.search}
+        onSearchChange={setSearch}
+        searchPlaceholder="Search examples..."
+        resultCount={query.data?.pagination?.total}
+      />
+
+      {query.isError ? (
+        <div className="rounded-lg border border-destructive/40 bg-destructive/5 p-8 text-center">
+          <p className="text-sm text-muted-foreground">Could not load examples.</p>
+          <AppButton variant="outline" className="mt-3" onClick={() => void query.refetch()}>
+            <Refresh variant="Outline" color="currentColor" className="h-4 w-4" />
+            Retry
+          </AppButton>
+        </div>
+      ) : (
+        <AppTable
+          columns={columns}
+          data={query.data?.items ?? []}
+          loading={query.isLoading || isPending}
+          emptyIcon={<DocumentText1 variant="TwoTone" color="currentColor" />}
+          emptyTitle="No examples"
+          emptyDescription="Create your first example to get started."
+        />
+      )}
+    </div>
+  );
+}

package/templates/web/tsconfig.json.tpl

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}