teamshare-bridge 0.22.7 → 0.22.8

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

@@ -1,63 +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>
-  );
-}
+"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

@@ -1,14 +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)}
-    />
-  );
-}
+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

@@ -1,128 +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>
-  );
-}
+"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

@@ -1,5 +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";
+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

@@ -1,72 +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,
-  };
-}
+"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

@@ -1,25 +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 };
-}
+"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 };
+}