create-ej-app 26.0.0 → 28.0.0

package/template/nextjs/src/components/dashboard-header.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Separator } from '~/components/ui/separator'
+import { SidebarTrigger } from '~/components/ui/sidebar'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '~/components/ui/tooltip'
+import { UserMenu } from '~/components/user-menu'
+
+type DashboardHeaderProps = {
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+  search?: ReactNode
+  actions?: ReactNode
+  fallbackName?: string
+  fallbackInitials?: string
+  isSuperAdmin?: boolean
+  isImpersonating?: boolean
+}
+
+export function DashboardHeader({
+  user,
+  search,
+  actions,
+  fallbackName,
+  fallbackInitials,
+  isSuperAdmin,
+  isImpersonating
+}: DashboardHeaderProps) {
+  return (
+    <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center gap-2 border-b px-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <SidebarTrigger className="-ml-1 hidden sm:inline-flex" />
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          Toggle Sidebar{' '}
+          <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+            <span className="text-xs">⌘</span>B
+          </kbd>
+        </TooltipContent>
+      </Tooltip>
+      <SidebarTrigger className="-ml-1 sm:hidden" />
+
+      {search ? (
+        <>
+          <Separator orientation="vertical" className="mr-2" />
+          {search}
+        </>
+      ) : null}
+
+      <div className="flex flex-1 items-center justify-end gap-2">
+        {actions}
+        <UserMenu
+          user={user}
+          fallbackName={fallbackName}
+          fallbackInitials={fallbackInitials}
+          isSuperAdmin={isSuperAdmin}
+          isImpersonating={isImpersonating}
+        />
+      </div>
+    </header>
+  )
+}

package/template/nextjs/src/components/data-table/enum.ts

@@ -0,0 +1,5 @@
+/** Sort direction values used by the DataTable for column ordering. */
+export enum SortOrderEnum {
+  ASC = 'asc',
+  DESC = 'desc'
+}

package/template/nextjs/src/components/data-table/features.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared TanStack Table v9 feature set for the app DataTable.
+ *
+ * Defined once outside components so feature types stay stable and tree-shaken.
+ */
+import {
+  type ColumnDef,
+  type RowData,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_alphanumericCaseSensitive,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  sortFn_textCaseSensitive,
+  tableFeatures
+} from '@tanstack/react-table'
+
+/** Features registered by every DataTable instance. */
+export const dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  columnVisibilityFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
+    text: sortFn_text,
+    textCaseSensitive: sortFn_textCaseSensitive,
+    datetime: sortFn_datetime,
+    basic: sortFn_basic
+  }
+})
+
+type DataTableFeatures = typeof dataTableFeatures
+
+/**
+ * Column definition typed to the DataTable feature set.
+ * Prefer this over raw `ColumnDef` from `@tanstack/react-table`.
+ */
+export type DataTableColumnDef<
+  TData extends RowData,
+  TValue = unknown
+> = ColumnDef<DataTableFeatures, TData, TValue>