create-ej-app 6.0.0 → 8.0.0

package/template/prisma/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/prisma/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>
-  )
-}

package/template/prisma/src/components/data-table/data-table-toolbar.tsx

@@ -1,78 +0,0 @@
-'use client'
-
-import type { Table } from '@tanstack/react-table'
-
-import { DataTableFacetedFilter } from '@/components/data-table/data-table-faceted-filter'
-import { DataTableViewOptions } from '@/components/data-table/data-table-view-options'
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  DataTableFilterableColumn,
-  DataTableSearchableColumn
-} from './data-table-types'
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>
-  filterableColumns?: DataTableFilterableColumn<TData>[]
-  searchableColumns?: DataTableSearchableColumn<TData>[]
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  filterableColumns = [],
-  searchableColumns = []
-}: DataTableToolbarProps<TData>) {
-  const isFiltered = table.getState().columnFilters.length > 0
-
-  return (
-    <div className="flex items-center justify-between p-1">
-      <div className="flex flex-1 items-center space-x-2">
-        {searchableColumns.length > 0 &&
-          searchableColumns.map(
-            column =>
-              table.getColumn(column.id ? String(column.id) : '') && (
-                <Input
-                  key={String(column.id)}
-                  placeholder={`Filter ${column.title}...`}
-                  value={
-                    (table
-                      .getColumn(String(column.id))
-                      ?.getFilterValue() as string) ?? ''
-                  }
-                  onChange={event =>
-                    table
-                      .getColumn(String(column.id))
-                      ?.setFilterValue(event.target.value)
-                  }
-                  className="h-8 w-[150px] lg:w-[250px]"
-                />
-              )
-          )}
-        {filterableColumns.length > 0 &&
-          filterableColumns.map(
-            column =>
-              table.getColumn(column.id ? String(column.id) : '') && (
-                <DataTableFacetedFilter
-                  key={String(column.id)}
-                  column={table.getColumn(column.id ? String(column.id) : '')}
-                  title={column.title}
-                  options={column.options}
-                />
-              )
-          )}
-        {isFiltered && (
-          <Button
-            variant="ghost"
-            onClick={() => table.resetColumnFilters()}
-            className="h-8 px-2 lg:px-3"
-          >
-            Reset
-            <Icons.close className="ml-2 h-4 w-4" />
-          </Button>
-        )}
-      </div>
-      <DataTableViewOptions table={table} />
-    </div>
-  )
-}

package/template/prisma/src/components/data-table/data-table-types.ts

@@ -1,17 +0,0 @@
-import { ComponentType } from 'react'
-
-export type Option = {
-  label: string
-  value: string
-  icon?: ComponentType<{ className?: string }>
-}
-
-export interface DataTableSearchableColumn<TData> {
-  id: keyof TData
-  title: string
-}
-
-export interface DataTableFilterableColumn<TData>
-  extends DataTableSearchableColumn<TData> {
-  options: Option[]
-}

package/template/prisma/src/components/data-table/data-table-view-options.tsx

@@ -1,59 +0,0 @@
-'use client'
-
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
-import { type Table } from '@tanstack/react-table'
-
-import { Icons } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator
-} from '@/components/ui/dropdown-menu'
-
-interface DataTableViewOptionsProps<TData> {
-  table: Table<TData>
-}
-
-export function DataTableViewOptions<TData>({
-  table
-}: DataTableViewOptionsProps<TData>) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
-          <Icons.mixer className="mr-2 h-4 w-4" />
-          View
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[150px]">
-        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(
-            column =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
-          )
-          .map(column => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className="capitalize"
-                checked={column.getIsVisible()}
-                onCheckedChange={value => column.toggleVisibility(!!value)}
-              >
-                {column.id}
-              </DropdownMenuCheckboxItem>
-            )
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

package/template/prisma/src/components/data-table/data-table.tsx

@@ -1,301 +0,0 @@
-'use client'
-
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type PaginationState,
-  type SortingState,
-  type VisibilityState
-} from '@tanstack/react-table'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-
-import { DataTablePagination } from '@/components/data-table/data-table-pagination'
-import { DataTableToolbar } from '@/components/data-table/data-table-toolbar'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table'
-import { useDebounce } from '@/hooks/use-debounce'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  DataTableFilterableColumn,
-  DataTableSearchableColumn
-} from './data-table-types'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  total: number
-  filterableColumns?: DataTableFilterableColumn<TData>[]
-  searchableColumns?: DataTableSearchableColumn<TData>[]
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  total,
-  filterableColumns = [],
-  searchableColumns = []
-}: DataTableProps<TData, TValue>) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  // Search params
-  const page = searchParams?.get('page') ?? '1'
-  const limit = searchParams?.get('limit') ?? '10'
-  const sort = searchParams?.get('sort')
-  const [column, order] = sort?.split('.') ?? []
-
-  // Create query string
-  const createQueryString = useCallback(
-    (params: Record<string, string | number | null>) => {
-      const newSearchParams = new URLSearchParams(searchParams?.toString())
-
-      for (const [key, value] of Object.entries(params)) {
-        if (value === null) {
-          newSearchParams.delete(key)
-        } else {
-          newSearchParams.set(key, String(value))
-        }
-      }
-
-      return newSearchParams.toString()
-    },
-    [searchParams]
-  )
-
-  // Table states
-  const [rowSelection, setRowSelection] = useState({})
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
-  // Handle server-side pagination
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: Number(page) - 1,
-    pageSize: Number(limit)
-  })
-
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize
-    }),
-    [pageIndex, pageSize]
-  )
-
-  useEffect(() => {
-    setPagination({
-      pageIndex: Number(page) - 1,
-      pageSize: Number(limit)
-    })
-  }, [page, limit])
-
-  useEffect(() => {
-    router.push(
-      `${pathname}?${createQueryString({
-        page: pageIndex + 1,
-        limit: pageSize
-      })}`
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageIndex, pageSize])
-
-  // Handle server-side sorting
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      id: column ?? '',
-      desc: order === 'desc'
-    }
-  ])
-
-  useEffect(() => {
-    router.push(
-      `${pathname}?${createQueryString({
-        page,
-        sort: sorting[0]?.id
-          ? `${sorting[0]?.id}.${sorting[0]?.desc ? 'desc' : 'asc'}`
-          : null
-      })}`
-    )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sorting])
-
-  // Handle server-side filtering
-  const debouncedSearchableColumnFilters = JSON.parse(
-    useDebounce(
-      JSON.stringify(
-        columnFilters.filter(filter => {
-          return searchableColumns.find(column => column.id === filter.id)
-        })
-      ),
-      500
-    )
-  ) as ColumnFiltersState
-
-  const filterableColumnFilters = columnFilters.filter(filter => {
-    return filterableColumns.find(column => column.id === filter.id)
-  })
-
-  useEffect(() => {
-    for (const column of debouncedSearchableColumnFilters) {
-      if (typeof column.value === 'string') {
-        router.push(
-          `${pathname}?${createQueryString({
-            page: 1,
-            [column.id]: typeof column.value === 'string' ? column.value : null
-          })}`
-        )
-      }
-    }
-
-    for (const key of searchParams.keys()) {
-      if (
-        searchableColumns.find(column => column.id === key) &&
-        !debouncedSearchableColumnFilters.find(column => column.id === key)
-      ) {
-        router.push(
-          `${pathname}?${createQueryString({
-            page: 1,
-            [key]: null
-          })}`
-        )
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(debouncedSearchableColumnFilters)])
-
-  useEffect(() => {
-    for (const column of filterableColumnFilters) {
-      if (typeof column.value === 'object' && Array.isArray(column.value)) {
-        router.push(
-          `${pathname}?${createQueryString({
-            page: 1,
-            [column.id]: column.value.join('.')
-          })}`
-        )
-      }
-    }
-
-    for (const key of searchParams.keys()) {
-      if (
-        filterableColumns.find(column => column.id === key) &&
-        !filterableColumnFilters.find(column => column.id === key)
-      ) {
-        router.push(
-          `${pathname}?${createQueryString({
-            page: 1,
-            [key]: null
-          })}`
-        )
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(filterableColumnFilters)])
-
-  const pageCount = useMemo(
-    () => Math.ceil(total / pageSize),
-    [total, pageSize]
-  )
-
-  const table = useReactTable({
-    data,
-    columns,
-    pageCount,
-    state: {
-      pagination,
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    manualPagination: true,
-    manualSorting: true,
-    manualFiltering: true
-  })
-
-  return (
-    <div className="w-full space-y-4 overflow-auto">
-      <DataTableToolbar
-        table={table}
-        filterableColumns={filterableColumns}
-        searchableColumns={searchableColumns}
-      />
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map(headerGroup => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && 'selected'}
-                >
-                  {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <DataTablePagination table={table} />
-    </div>
-  )
-}