create-ej-app 12.0.0 → 14.0.0

package/template/old/src/components/app-nav-command.tsx

@@ -1,178 +0,0 @@
-'use client'
-
-// import debounce from 'lodash/debounce'
-import { signOut } from 'next-auth/react'
-import { useTheme } from 'next-themes'
-import { useRouter } from 'next/navigation'
-import { FC, useCallback, useEffect, useState } from 'react'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator
-} from '@/components/ui/command'
-// import { doSearch, type SearchResult } from '../app/(app)/actions/doSearch'
-
-export const AppNavCommand: FC<{
-  modules: {
-    task: boolean
-    root: boolean
-  }
-}> = ({ modules }) => {
-  const [open, setOpen] = useState(false)
-  // const [search, setSearch] = useState('')
-  // const [searchResults, setSearchResults] = useState<SearchResult[]>([])
-  const { setTheme } = useTheme()
-  const router = useRouter()
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen(open => !open)
-      }
-    }
-
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
-
-  // useEffect(() => {
-  //   if (!search) {
-  //     setSearchResults([])
-  //     return
-  //   }
-  //   doSearch(search).then(results => setSearchResults(results))
-  // }, [search])
-
-  const runCommand = useCallback((command: () => unknown) => {
-    setOpen(false)
-    command()
-  }, [])
-
-  // const debouncedSearch = useMemo(
-  //   () =>
-  //     debounce((search: string) => {
-  //       setSearch(search)
-  //     }, 500),
-  //   []
-  // )
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        className="relative w-36 justify-start text-sm text-muted-foreground lg:w-64"
-        onClick={() => setOpen(true)}
-      >
-        <Icons.terminal className="mr-2 h-4 w-4" />
-        <span className="truncate">Command Menu</span>
-        <kbd className="pointer-events-none absolute right-2 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 lg:flex">
-          <span className="text-xs">⌘</span>K
-        </kbd>
-      </Button>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <Command>
-          <CommandInput
-            placeholder="Search..."
-            // onChangeCapture={e => {
-            //   debouncedSearch((e.target as any)?.value || '')
-            // }}
-          />
-          <CommandList>
-            <CommandEmpty>No search results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-              <CommandItem
-                onSelect={() => runCommand(() => router.push('/dashboard'))}
-              >
-                <Icons.dashboard className="mr-2 h-4 w-4" />
-                Dashboard
-              </CommandItem>
-              {modules.task ? (
-                <CommandItem
-                  onSelect={() => runCommand(() => router.push('/tasks'))}
-                >
-                  <Icons.task className="mr-2 h-4 w-4" />
-                  Tasks
-                </CommandItem>
-              ) : undefined}
-            </CommandGroup>
-            {modules.root ? (
-              <CommandGroup heading="Root Actions">
-                <CommandItem
-                  onSelect={() => runCommand(() => router.push('/users'))}
-                >
-                  <Icons.mixer className="mr-2 h-4 w-4" />
-                  Users
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => runCommand(() => router.push('/roles'))}
-                >
-                  <Icons.user className="mr-2 h-4 w-4" />
-                  Roles
-                </CommandItem>
-              </CommandGroup>
-            ) : undefined}
-            <CommandGroup heading="Account">
-              <CommandItem
-                onSelect={() => runCommand(() => router.push('/settings'))}
-              >
-                <Icons.settings className="mr-2 h-4 w-4" />
-                Settings
-              </CommandItem>
-              <CommandItem
-                onSelect={() =>
-                  runCommand(() =>
-                    signOut({
-                      callbackUrl: `${window.location.origin}/login`
-                    })
-                  )
-                }
-              >
-                <Icons.logout className="mr-2 h-4 w-4" />
-                Sign Out
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Theme">
-              <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
-                <Icons.sun className="mr-2 h-4 w-4" />
-                Light
-              </CommandItem>
-              <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
-                <Icons.moon className="mr-2 h-4 w-4" />
-                Dark
-              </CommandItem>
-              <CommandItem
-                onSelect={() => runCommand(() => setTheme('system'))}
-              >
-                <Icons.laptop className="mr-2 h-4 w-4" />
-                System
-              </CommandItem>
-            </CommandGroup>
-            {/* {searchResults.length ? (
-              <CommandGroup heading="Search Results">
-                {searchResults.map((sr, i) => (
-                  <CommandItem
-                    key={i}
-                    onSelect={() => runCommand(() => router.push(sr.link))}
-                    value={sr.id}
-                  >
-                    {sr.title}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            ) : undefined} */}
-          </CommandList>
-        </Command>
-      </CommandDialog>
-    </>
-  )
-}

package/template/old/src/components/dark-mode-toggle.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { FC } from 'react'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-
-export const DarkModeToggle: FC = () => {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          <Icons.sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          <Icons.moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          <Icons.laptop className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/template/old/src/components/data-table/data-table-column-header.tsx

@@ -1,91 +0,0 @@
-import { type Column } from '@tanstack/react-table'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@/components/ui/dropdown-menu'
-import { cn } from '@/lib/cn'
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
-  title: string
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>
-  }
-
-  return (
-    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            aria-label={
-              column.getIsSorted() === 'desc'
-                ? `Sorted descending. Click to sort ascending.`
-                : column.getIsSorted() === 'asc'
-                  ? `Sorted ascending. Click to sort descending.`
-                  : `Not sorted. Click to sort ascending.`
-            }
-            variant="ghost"
-            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === 'desc' ? (
-              <Icons.arrowDown className="ml-2 h-4 w-4" aria-hidden="true" />
-            ) : column.getIsSorted() === 'asc' ? (
-              <Icons.arrowUp className="ml-2 h-4 w-4" aria-hidden="true" />
-            ) : (
-              <Icons.arrowUpDown className="ml-2 h-4 w-4" aria-hidden="true" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem
-            aria-label="Sort ascending"
-            onClick={() => column.toggleSorting(false)}
-          >
-            <Icons.arrowUp
-              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
-              aria-hidden="true"
-            />
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            aria-label="Sort descending"
-            onClick={() => column.toggleSorting(true)}
-          >
-            <Icons.arrowDown
-              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
-              aria-hidden="true"
-            />
-            Desc
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            aria-label="Hide column"
-            onClick={() => column.toggleVisibility(false)}
-          >
-            <Icons.eyeOff
-              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
-              aria-hidden="true"
-            />
-            Hide
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}

package/template/old/src/components/data-table/data-table-faceted-filter.tsx

@@ -1,149 +0,0 @@
-import { type Column } from '@tanstack/react-table'
-import { ComponentType } from 'react'
-
-import { Icons } from '@/components/icons'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator
-} from '@/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@/components/ui/popover'
-import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/cn'
-
-export type FilterOption = {
-  label: string
-  value: string
-  icon?: ComponentType<{ className?: string }>
-}
-
-interface DataTableFacetedFilter<TData, TValue> {
-  column?: Column<TData, TValue>
-  title?: string
-  options: FilterOption[]
-}
-
-export function DataTableFacetedFilter<TData, TValue>({
-  column,
-  title,
-  options
-}: DataTableFacetedFilter<TData, TValue>) {
-  const selectedValues = new Set(column?.getFilterValue() as string[])
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <Icons.plusCircle className="mr-2 h-4 w-4" />
-          {title}
-          {selectedValues?.size > 0 && (
-            <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
-              <Badge
-                variant="secondary"
-                className="rounded-sm px-1 font-normal lg:hidden"
-              >
-                {selectedValues.size}
-              </Badge>
-              <div className="hidden space-x-1 lg:flex">
-                {selectedValues.size > 2 ? (
-                  <Badge
-                    variant="secondary"
-                    className="rounded-sm px-1 font-normal"
-                  >
-                    {selectedValues.size} selected
-                  </Badge>
-                ) : (
-                  options
-                    .filter(option => selectedValues.has(option.value))
-                    .map(option => (
-                      <Badge
-                        variant="secondary"
-                        key={option.value}
-                        className="rounded-sm px-1 font-normal"
-                      >
-                        {option.label}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandInput placeholder={title} />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map(option => {
-                const isSelected = selectedValues.has(option.value)
-                return (
-                  <CommandItem
-                    key={option.value}
-                    onSelect={() => {
-                      if (isSelected) {
-                        selectedValues.delete(option.value)
-                      } else {
-                        selectedValues.add(option.value)
-                      }
-                      const filterValues = Array.from(selectedValues)
-                      column?.setFilterValue(
-                        filterValues.length ? filterValues : undefined
-                      )
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                        isSelected
-                          ? 'bg-primary text-primary-foreground'
-                          : 'opacity-50 [&_svg]:invisible'
-                      )}
-                    >
-                      <Icons.check
-                        className={cn('h-4 w-4')}
-                        aria-hidden="true"
-                      />
-                    </div>
-                    {option.icon && (
-                      <option.icon
-                        className="mr-2 h-4 w-4 text-muted-foreground"
-                        aria-hidden="true"
-                      />
-                    )}
-                    <span>{option.label}</span>
-                  </CommandItem>
-                )
-              })}
-            </CommandGroup>
-            {selectedValues.size > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => column?.setFilterValue(undefined)}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}

package/template/old/src/components/data-table/data-table-loading.tsx

@@ -1,77 +0,0 @@
-import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table'
-
-interface DataTableLoadingProps {
-  columnCount: number
-  rowCount?: number
-}
-
-export function DataTableLoading({
-  columnCount,
-  rowCount = 10
-}: DataTableLoadingProps) {
-  return (
-    <div className="w-full space-y-3 overflow-auto">
-      <div className="flex w-full items-center justify-between space-x-2 overflow-auto p-1">
-        <div className="flex flex-1 items-center space-x-2">
-          <Skeleton className="h-7 w-[150px] lg:w-[250px]" />
-          <Skeleton className="h-7 w-[70px] border-dashed" />
-        </div>
-        <Skeleton className="ml-auto hidden h-7 w-[70px] lg:flex" />
-      </div>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {Array.from({ length: 1 }).map((_, i) => (
-              <TableRow key={i} className="hover:bg-transparent">
-                {Array.from({ length: columnCount }).map((_, i) => (
-                  <TableHead key={i}>
-                    <Skeleton className="h-6 w-full" />
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {Array.from({ length: rowCount }).map((_, i) => (
-              <TableRow key={i} className="hover:bg-transparent">
-                {Array.from({ length: columnCount }).map((_, i) => (
-                  <TableCell key={i}>
-                    <Skeleton className="h-6 w-full" />
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-      <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
-        <div className="flex-1">
-          <Skeleton className="h-8 w-40" />
-        </div>
-        <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
-          <div className="flex items-center space-x-2">
-            <Skeleton className="h-8 w-24" />
-            <Skeleton className="h-8 w-[70px]" />
-          </div>
-          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-            <Skeleton className="h-8 w-20" />
-          </div>
-          <div className="flex items-center space-x-2">
-            <Skeleton className="hidden h-8 w-8 lg:block" />
-            <Skeleton className="h-8 w-8" />
-            <Skeleton className="h-8 w-8" />
-            <Skeleton className="hidden h-8 w-8 lg:block" />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/template/old/src/components/data-table/data-table-pagination.tsx

@@ -1,94 +0,0 @@
-import { type Table } from '@tanstack/react-table'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>
-  pageSizeOptions?: number[]
-}
-
-export function DataTablePagination<TData>({
-  table,
-  pageSizeOptions = [10, 20, 30, 50]
-}: DataTablePaginationProps<TData>) {
-  return (
-    <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
-      <div className="flex-1 whitespace-nowrap text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
-        <div className="flex items-center space-x-2">
-          <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={value => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {pageSizeOptions.map(pageSize => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            aria-label="Go to first page"
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <Icons.chevronsLeft className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to previous page"
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <Icons.chevronLeft className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to next page"
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <Icons.chevronRight className="h-4 w-4" aria-hidden="true" />
-          </Button>
-          <Button
-            aria-label="Go to last page"
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <Icons.chevronsRight className="h-4 w-4" aria-hidden="true" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}