create-ej-app 1.0.0

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

@@ -0,0 +1,17 @@
+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/src/components/data-table/data-table-view-options.tsx

@@ -0,0 +1,59 @@
+'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/src/components/data-table/data-table.tsx

@@ -0,0 +1,301 @@
+'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/src/components/data-table/simple-data-table.tsx

@@ -0,0 +1,109 @@
+'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/src/components/empty-placeholder.tsx

@@ -0,0 +1,78 @@
+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/src/components/heading.tsx

@@ -0,0 +1,17 @@
+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/src/components/icons.tsx

@@ -0,0 +1,83 @@
+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}
+    >
+      <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
+}