teamshare-bridge 0.3.0 → 0.4.0

package/templates/web/src/components/shared/app-empty-state.tsx.tpl

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface AppEmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function AppEmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: AppEmptyStateProps) {
+  return (
+    <div
+      data-slot="app-empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center py-12 text-center",
+        className
+      )}
+    >
+      {icon && (
+        <div className="mb-4 text-tertiary [&_svg]:h-12 [&_svg]:w-12">
+          {icon}
+        </div>
+      )}
+      <h3 className="text-lg font-semibold text-primary">{title}</h3>
+      {description && (
+        <p className="mt-1 max-w-sm text-sm text-secondary">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/templates/web/src/components/shared/app-list-toolbar.tsx.tpl

@@ -0,0 +1,63 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface AppListToolbarProps {
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  filters?: ReactNode;
+  actions?: ReactNode;
+  resultCount?: number;
+  className?: string;
+}
+
+export function AppListToolbar({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  filters,
+  actions,
+  resultCount,
+  className,
+}: AppListToolbarProps) {
+  return (
+    <div
+      data-slot="app-list-toolbar"
+      className={cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      )}
+    >
+      <div className="flex flex-1 items-center gap-3">
+        {onSearchChange && (
+          <div className="relative flex-1 max-w-sm">
+            <Search
+              className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-tertiary"
+              variant="Outline"
+              color="currentColor"
+            />
+            <input
+              type="text"
+              placeholder={searchPlaceholder}
+              value={search ?? ""}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="h-10 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm placeholder:text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </div>
+        )}
+        {filters}
+      </div>
+      <div className="flex items-center gap-3">
+        {resultCount !== undefined && (
+          <span className="text-sm text-secondary">
+            {resultCount} result{resultCount !== 1 ? "s" : ""}
+          </span>
+        )}
+        {actions}
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/shared/app-skeleton.tsx.tpl

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils";
+
+export interface AppSkeletonProps {
+  className?: string;
+}
+
+export function AppSkeleton({ className }: AppSkeletonProps) {
+  return (
+    <div
+      data-slot="app-skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+    />
+  );
+}

package/templates/web/src/components/shared/app-table.tsx.tpl

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  type ColumnDef,
+  type PaginationState,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { AppSkeleton } from "./app-skeleton";
+import { AppEmptyState } from "./app-empty-state";
+
+export interface AppTableProps<TData> {
+  columns: ColumnDef<TData, unknown>[];
+  data: TData[];
+  loading?: boolean;
+  sorting?: SortingState;
+  onSortingChange?: (sorting: SortingState) => void;
+  pagination?: PaginationState;
+  onPaginationChange?: (pagination: PaginationState) => void;
+  pageCount?: number;
+  emptyIcon?: ReactNode;
+  emptyTitle?: string;
+  emptyDescription?: string;
+  className?: string;
+}
+
+export function AppTable<TData>({
+  columns,
+  data,
+  loading = false,
+  sorting,
+  onSortingChange,
+  pagination,
+  onPaginationChange,
+  pageCount,
+  emptyIcon,
+  emptyTitle = "No results",
+  emptyDescription,
+  className,
+}: AppTableProps<TData>) {
+  const table = useReactTable({
+    data,
+    columns,
+    pageCount,
+    state: {
+      sorting,
+      pagination,
+    },
+    onSortingChange,
+    onPaginationChange,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: true,
+  });
+
+  if (loading) {
+    return (
+      <div data-slot="app-table" className={cn("rounded-md border", className)}>
+        <div className="space-y-2 p-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <AppSkeleton key={i} className="h-12 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div data-slot="app-table" className={cn("rounded-md border", className)}>
+        <AppEmptyState
+          icon={emptyIcon}
+          title={emptyTitle}
+          description={emptyDescription}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="app-table" className={cn("rounded-md border", className)}>
+      <div className="overflow-auto">
+        <table className="w-full caption-bottom text-sm">
+          <thead className="border-b bg-muted/50">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className="h-10 px-4 text-left font-medium text-secondary"
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows.map((row) => (
+              <tr
+                key={row.id}
+                className="border-b transition-colors hover:bg-muted/50"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="p-4">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/components/shared/index.ts.tpl

@@ -0,0 +1,5 @@
+export { AppButton, buttonVariants, type AppButtonProps } from "./app-button";
+export { AppEmptyState, type AppEmptyStateProps } from "./app-empty-state";
+export { AppSkeleton, type AppSkeletonProps } from "./app-skeleton";
+export { AppTable, type AppTableProps } from "./app-table";
+export { AppListToolbar, type AppListToolbarProps } from "./app-list-toolbar";

package/templates/web/src/hooks/use-list-state.ts.tpl

@@ -0,0 +1,72 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useTransition } from "react";
+
+export interface ListState {
+  search: string;
+  page: number;
+  limit: number;
+  sort?: string;
+  order?: "asc" | "desc";
+  [key: string]: string | number | undefined;
+}
+
+export function useListState(defaults: Partial<ListState> = {}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const state: ListState = {
+    search: searchParams.get("search") ?? defaults.search ?? "",
+    page: Number(searchParams.get("page")) || defaults.page || 1,
+    limit: Number(searchParams.get("limit")) || defaults.limit || 20,
+    sort: searchParams.get("sort") ?? defaults.sort,
+    order: (searchParams.get("order") as "asc" | "desc") ?? defaults.order,
+  };
+
+  const setSearchParams = useCallback(
+    (updates: Partial<ListState>) => {
+      const params = new URLSearchParams(searchParams.toString());
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value === undefined || value === null || value === "") {
+          params.delete(key);
+        } else {
+          params.set(key, String(value));
+        }
+      });
+      if (updates.search !== undefined) {
+        params.set("page", "1");
+      }
+      startTransition(() => {
+        router.push(`?${params.toString()}`, { scroll: false });
+      });
+    },
+    [router, searchParams, startTransition]
+  );
+
+  const setSearch = useCallback(
+    (search: string) => setSearchParams({ search }),
+    [setSearchParams]
+  );
+
+  const setPage = useCallback(
+    (page: number) => setSearchParams({ page }),
+    [setSearchParams]
+  );
+
+  const setSort = useCallback(
+    (sort: string, order: "asc" | "desc" = "asc") =>
+      setSearchParams({ sort, order }),
+    [setSearchParams]
+  );
+
+  return {
+    state,
+    setSearch,
+    setPage,
+    setSort,
+    setParams: setSearchParams,
+    isPending,
+  };
+}

package/templates/web/src/hooks/use-url-tab.ts.tpl

@@ -0,0 +1,25 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export function useUrlTab(defaultValue: string = "overview") {
+  const searchParams = useSearchParams();
+  const tab = searchParams.get("tab") ?? defaultValue;
+
+  const setTab = useCallback(
+    (value: string) => {
+      const url = new URL(window.location.href);
+      if (value === defaultValue) {
+        url.searchParams.delete("tab");
+      } else {
+        url.searchParams.set("tab", value);
+      }
+      window.history.replaceState({}, "", url.toString());
+      window.dispatchEvent(new Event("popstate"));
+    },
+    [defaultValue]
+  );
+
+  return { tab, setTab };
+}

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"]
+}