create-ej-app 6.0.0 → 7.0.0

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

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

@@ -1,109 +0,0 @@
-'use client'
-
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable
-} from '@tanstack/react-table'
-
-import { Button } from '@/components/ui/button'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-}
-
-export function SimpleDataTable<TData, TValue>({
-  columns,
-  data
-}: DataTableProps<TData, TValue>) {
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel()
-  })
-
-  return (
-    <div>
-      <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>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
-          Previous
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  )
-}

package/template/prisma-advanced/src/components/empty-placeholder.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react'
-
-import { Icons } from '@/components/icons'
-import { cn } from '@/lib/cn'
-
-interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function EmptyPlaceholder({
-  className,
-  children,
-  ...props
-}: EmptyPlaceholderProps) {
-  return (
-    <div
-      className={cn(
-        'flex min-h-[400px] flex-col items-center justify-center rounded-md border border-dashed p-8 text-center animate-in fade-in-50',
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-interface EmptyPlaceholderIconProps
-  extends Partial<React.SVGProps<SVGSVGElement>> {
-  name: keyof typeof Icons
-}
-
-EmptyPlaceholder.Icon = function EmptyPlaceHolderIcon({
-  name,
-  className
-}: EmptyPlaceholderIconProps) {
-  const Icon = Icons[name]
-
-  if (!Icon) {
-    return null
-  }
-
-  return (
-    <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
-      <Icon className={cn('h-10 w-10', className)} />
-    </div>
-  )
-}
-
-interface EmptyPlacholderTitleProps
-  extends React.HTMLAttributes<HTMLHeadingElement> {}
-
-EmptyPlaceholder.Title = function EmptyPlaceholderTitle({
-  className,
-  ...props
-}: EmptyPlacholderTitleProps) {
-  return (
-    <h2 className={cn('mt-6 text-xl font-semibold', className)} {...props} />
-  )
-}
-
-interface EmptyPlacholderDescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {}
-
-EmptyPlaceholder.Description = function EmptyPlaceholderDescription({
-  className,
-  ...props
-}: EmptyPlacholderDescriptionProps) {
-  return (
-    <p
-      className={cn(
-        'mb-8 mt-2 text-center text-sm font-normal leading-6 text-muted-foreground',
-        className
-      )}
-      {...props}
-    />
-  )
-}

package/template/prisma-advanced/src/components/heading.tsx

@@ -1,17 +0,0 @@
-import { FC, ReactNode } from 'react'
-
-export const Heading: FC<{
-  heading: string
-  text?: string
-  children?: ReactNode
-}> = ({ heading, text, children }) => {
-  return (
-    <div className="flex items-center justify-between px-2">
-      <div className="grid gap-1">
-        <h1 className="font-heading text-3xl md:text-4xl">{heading}</h1>
-        {text && <p className="text-lg text-muted-foreground">{text}</p>}
-      </div>
-      {children}
-    </div>
-  )
-}

package/template/prisma-advanced/src/components/icons.tsx

@@ -1,85 +0,0 @@
-import { cn } from '@/lib/cn'
-import {
-  ArrowDown,
-  ArrowRight,
-  ArrowUp,
-  ArrowUpDown,
-  Biohazard,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  ClipboardList,
-  Download,
-  Edit,
-  EyeOff,
-  Github,
-  Laptop,
-  LayoutDashboard,
-  Loader2,
-  LogIn,
-  LogOut,
-  LucideIcon,
-  LucideProps,
-  Moon,
-  Plus,
-  PlusCircle,
-  Save,
-  Settings,
-  Settings2,
-  Sun,
-  Trash,
-  User,
-  X
-} from 'lucide-react'
-
-export type Icon = LucideIcon
-
-export const Icons = {
-  logo: Biohazard,
-  sun: Sun,
-  moon: Moon,
-  laptop: Laptop,
-  chevronLeft: ChevronLeft,
-  arrowRight: ArrowRight,
-  github: Github,
-  google: ({ ...props }: LucideProps) => (
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      data-prefix="fab"
-      data-icon="google"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 30 30"
-      {...props}
-      className={cn('fill-current', props.className)}
-    >
-      <path d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z"></path>
-    </svg>
-  ),
-  login: LogIn,
-  logout: LogOut,
-  user: User,
-  spinner: Loader2,
-  settings: Settings,
-  close: X,
-  add: Plus,
-  edit: Edit,
-  save: Save,
-  delete: Trash,
-  download: Download,
-  dashboard: LayoutDashboard,
-  task: ClipboardList,
-  arrowUp: ArrowUp,
-  arrowDown: ArrowDown,
-  arrowUpDown: ArrowUpDown,
-  eyeOff: EyeOff,
-  plusCircle: PlusCircle,
-  check: Check,
-  chevronsLeft: ChevronsLeft,
-  chevronsRight: ChevronsRight,
-  chevronRight: ChevronRight,
-  mixer: Settings2
-}

package/template/prisma-advanced/src/components/main-nav.tsx

@@ -1,64 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
-import { FC, useState } from 'react'
-
-import { Icons } from '@/components/icons'
-import { MobileNav } from '@/components/mobile-nav'
-import { cn } from '@/lib/cn'
-import { siteConfig } from '@/lib/siteConfig'
-
-type MainNavItem = {
-  title: string
-  href: string
-  disabled?: boolean
-}
-
-type MainNavProps = {
-  logoLink?: string
-  items?: MainNavItem[]
-}
-
-export const MainNav: FC<MainNavProps> = ({ logoLink = '/', items }) => {
-  const [showMobileMenu, setShowMobileMenu] = useState(false)
-  const segment = useSelectedLayoutSegment()
-
-  return (
-    <div className="flex md:gap-10">
-      <Link href={logoLink} className="hidden items-center space-x-2 md:flex">
-        <Icons.logo />
-        <span className="hidden font-bold sm:inline-block">
-          {siteConfig.name}
-        </span>
-      </Link>
-      {items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {items?.map((item, i) => (
-            <Link
-              key={i}
-              href={item.disabled ? '#' : item.href}
-              className={cn(
-                'flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm',
-                item.href.startsWith(`/${segment}`)
-                  ? 'text-foreground'
-                  : 'text-foreground/60',
-                item.disabled && 'cursor-not-allowed opacity-80'
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
-        </nav>
-      ) : undefined}
-      <button
-        className="flex items-center space-x-2 md:hidden"
-        onClick={() => setShowMobileMenu(prev => !prev)}
-      >
-        {showMobileMenu ? <Icons.close /> : <Icons.logo />}
-        <span className="font-bold">Menu</span>
-      </button>
-      {showMobileMenu && items?.length && <MobileNav items={items} />}
-    </div>
-  )
-}

package/template/prisma-advanced/src/components/shell.tsx

@@ -1,13 +0,0 @@
-import { FC } from 'react'
-
-import { cn } from '@/lib/cn'
-
-interface ShellProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const Shell: FC<ShellProps> = ({ children, className, ...props }) => {
-  return (
-    <div className={cn('grid items-start gap-8 p-1', className)} {...props}>
-      {children}
-    </div>
-  )
-}