create-ej-app 3.1.0 → 4.0.0

package/template/base/src/components/ui/command.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { DialogProps } from '@radix-ui/react-dialog'
+import { type DialogProps } from '@radix-ui/react-dialog'
 import { Command as CommandPrimitive } from 'cmdk'
 import { Search } from 'lucide-react'
 import * as React from 'react'
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
       className
     )}
     {...props}

package/template/base/src/components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}

package/template/base/src/components/ui/select.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown } from 'lucide-react'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 
 import { cn } from '@/lib/cn'
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -32,6 +32,41 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
@@ -40,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
@@ -48,6 +83,7 @@ const SelectContent = React.forwardRef<
       position={position}
       {...props}
     >
+      <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
           'p-1',
@@ -57,6 +93,7 @@ const SelectContent = React.forwardRef<
       >
         {children}
       </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ))
@@ -115,6 +152,8 @@ export {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue

package/template/base/src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+        }
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/template/base/src/components/ui/table.tsx

@@ -42,7 +42,10 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn('bg-primary font-medium text-primary-foreground', className)}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className
+    )}
     {...props}
   />
 ))

package/template/base/src/components/user-avatar.tsx

@@ -1,4 +1,3 @@
-import { User } from '@prisma/client'
 import { AvatarProps } from '@radix-ui/react-avatar'
 import { FC } from 'react'
 
@@ -6,7 +5,10 @@ import { Icons } from '@/components/icons'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 interface UserAvatarProps extends AvatarProps {
-  user: Pick<User, 'image' | 'name'>
+  user: {
+    name?: string | null
+    image?: string | null
+  }
 }
 
 export const UserAvatar: FC<UserAvatarProps> = ({ user, ...props }) => {

package/template/base/src/data-access/resource.ts

@@ -0,0 +1,85 @@
+import { db } from '@/db'
+import { Resource } from '@/db/schema'
+import { eq, or, sql } from 'drizzle-orm'
+
+type createResourceInput = {
+  id?: string
+  filename: string
+  key: string
+  isTemp: boolean
+  url: string
+  size: number
+  contentType: string
+  createdById?: string | null
+
+  taskId?: string | null
+}
+
+export const createResource = async (data: createResourceInput) => {
+  const newResource = await db
+    .insert(Resource)
+    .values({
+      ...data
+    })
+    .returning({
+      id: Resource.id
+    })
+
+  const id = newResource[0]?.id
+
+  if (!id) throw new Error('Failed to create resource')
+
+  return id
+}
+
+export const getResourceById = async (id: string) => {
+  return await db.query.Resource.findFirst({
+    where: eq(Resource.id, id)
+  })
+}
+
+type updateResourceByIdInput = {
+  id: string
+  isTemp?: boolean
+  contentType?: string
+  size?: number
+  updatedById?: string | null
+
+  taskId?: string | null
+}
+
+export const updateResourceById = async (data: updateResourceByIdInput) => {
+  return await db
+    .update(Resource)
+    .set({
+      ...data,
+      updatedAt: sql`now()`
+    })
+    .where(eq(Resource.id, data.id))
+}
+
+type updateResourceByIdsInput = {
+  ids: string[]
+  taskId?: string | null
+  updatedById?: string | null
+}
+
+export const updateResourceByIds = async (data: updateResourceByIdsInput) => {
+  return await db
+    .update(Resource)
+    .set({
+      ...data,
+      updatedAt: sql`now()`
+    })
+    .where(or(...data.ids.map(id => eq(Resource.id, id))))
+}
+
+export const getResourcesByTaskId = async (taskId: string) => {
+  return await db.query.Resource.findMany({
+    where: eq(Resource.taskId, taskId)
+  })
+}
+
+export const deleteResource = async (id: string) => {
+  return await db.delete(Resource).where(eq(Resource.id, id))
+}

package/template/base/src/data-access/role-permission.ts

@@ -0,0 +1,45 @@
+import { InferSelectModel, and, count, eq } from 'drizzle-orm'
+
+import { db } from '@/db'
+import { RolePermission } from '@/db/schema'
+
+export type RolePermissionType = InferSelectModel<typeof RolePermission>
+
+export const checkForRolePermission = async (
+  roleId: string,
+  permission: RolePermissionType['permission']
+) => {
+  const c = await db
+    .select({ count: count() })
+    .from(RolePermission)
+    .where(
+      and(
+        eq(RolePermission.roleId, roleId),
+        eq(RolePermission.permission, permission)
+      )
+    )
+
+  return !!c?.[0]?.count
+}
+
+type createRolePermissionsInput = {
+  roleId: string
+  permissions: RolePermissionType['permission'][]
+}
+
+export const createRolePermissions = async (
+  data: createRolePermissionsInput
+) => {
+  return await db.insert(RolePermission).values(
+    data.permissions.map(p => ({
+      roleId: data.roleId,
+      permission: p
+    }))
+  )
+}
+
+export const deleteRolePermissionsByRoleId = async (roleId: string) => {
+  return await db
+    .delete(RolePermission)
+    .where(eq(RolePermission.roleId, roleId))
+}

package/template/base/src/data-access/role.ts

@@ -0,0 +1,105 @@
+import { InferSelectModel, asc, count, desc, eq, ilike, sql } from 'drizzle-orm'
+
+import { db } from '@/db'
+import { Role } from '@/db/schema'
+import { type SortOrderEnum } from '@/lib/sortOrderEnum'
+
+export type RoleType = InferSelectModel<typeof Role>
+
+type getRolesInput = {
+  page: number
+  limit: number
+  sortBy?: keyof RoleType
+  sortOrder?: SortOrderEnum
+  filters?: {
+    name?: string
+  }
+}
+
+export const getRoles = async ({
+  page,
+  limit,
+  sortBy,
+  sortOrder,
+  filters
+}: getRolesInput) => {
+  const where = filters?.name
+    ? ilike(Role.name, `%${filters.name}%`)
+    : undefined
+
+  const [roles, total] = await Promise.all([
+    db.query.Role.findMany({
+      columns: {
+        id: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true
+      },
+      where,
+      orderBy: [
+        sortOrder === 'asc'
+          ? asc(Role[sortBy || 'createdAt'])
+          : desc(Role[sortBy || 'createdAt'])
+      ],
+      offset: (page - 1) * limit,
+      limit
+    }),
+    db
+      .select({
+        count: count()
+      })
+      .from(Role)
+      .where(where)
+  ])
+
+  return { roles, total: total[0]?.count || 0 }
+}
+
+export const getRoleByIdWithPermissions = async (id: string) => {
+  return await db.query.Role.findFirst({
+    where: eq(Role.id, id),
+    with: {
+      permissions: true
+    }
+  })
+}
+
+type createRoleInput = {
+  name: string
+}
+
+export const createRole = async (data: createRoleInput) => {
+  const newRole = await db.insert(Role).values(data).returning({
+    id: Role.id
+  })
+
+  const id = newRole[0]?.id
+  if (!id) throw new Error('Failed to create role')
+
+  return id
+}
+
+type updateRoleInput = createRoleInput & {
+  id: string
+}
+
+export const updateRole = async (data: updateRoleInput) => {
+  return await db
+    .update(Role)
+    .set({ ...data, updatedAt: sql`now()` })
+    .where(eq(Role.id, data.id))
+}
+
+export const deleteRole = async (id: string) => {
+  return await db.delete(Role).where(eq(Role.id, id))
+}
+
+export const getRolesMini = async () => {
+  return await db.query.Role.findMany({
+    columns: {
+      id: true,
+      name: true
+    },
+    orderBy: [asc(Role.name)]
+  })
+}

package/template/base/src/data-access/task.ts

@@ -0,0 +1,141 @@
+import {
+  InferSelectModel,
+  asc,
+  count,
+  desc,
+  eq,
+  ilike,
+  or,
+  sql
+} from 'drizzle-orm'
+
+import { db } from '@/db'
+import { Task } from '@/db/schema'
+import { type SortOrderEnum } from '@/lib/sortOrderEnum'
+
+export type TaskType = InferSelectModel<typeof Task>
+
+type getTasksInput = {
+  page: number
+  limit: number
+  sortBy?: keyof TaskType
+  sortOrder?: SortOrderEnum
+  filters?: {
+    title?: string
+    status?: TaskType['status'][]
+  }
+}
+
+export const getTasksWithUser = async ({
+  page,
+  limit,
+  sortBy,
+  sortOrder,
+  filters
+}: getTasksInput) => {
+  const where = or(
+    filters?.title ? ilike(Task.title, `%${filters.title}%`) : undefined,
+    ...(filters?.status || []).map(f => eq(Task.status, f))
+  )
+
+  const [tasks, total] = await Promise.all([
+    db.query.Task.findMany({
+      columns: {
+        id: true,
+        title: true,
+        status: true,
+        createdAt: true,
+        updatedAt: true
+      },
+      with: {
+        createdBy: {
+          columns: {
+            id: true,
+            name: true
+          }
+        },
+        updatedBy: {
+          columns: {
+            id: true,
+            name: true
+          }
+        }
+      },
+      where,
+      orderBy: [
+        sortOrder === 'asc'
+          ? asc(Task[sortBy || 'createdAt'])
+          : desc(Task[sortBy || 'createdAt'])
+      ],
+      offset: (page - 1) * limit,
+      limit
+    }),
+    db
+      .select({
+        count: count()
+      })
+      .from(Task)
+      .where(where)
+  ])
+
+  return { tasks, total: total[0]?.count || 0 }
+}
+
+export const getTaskByIdWithUser = async (id: string) => {
+  return await db.query.Task.findFirst({
+    where: eq(Task.id, id),
+    with: {
+      createdBy: {
+        columns: {
+          id: true,
+          name: true
+        }
+      },
+      updatedBy: {
+        columns: {
+          id: true,
+          name: true
+        }
+      }
+    }
+  })
+}
+
+type createTaskInput = {
+  title: string
+  description?: string | null
+  status: TaskType['status']
+  createdById: string
+}
+
+export const createTask = async (data: createTaskInput) => {
+  const newTask = await db.insert(Task).values(data).returning({
+    id: Task.id
+  })
+
+  if (!newTask[0]?.id) throw new Error('Failed to create task')
+
+  return newTask[0].id
+}
+
+type updateTaskInput = {
+  id: string
+  title?: string
+  description?: string | null
+  status?: TaskType['status']
+  updatedById: string
+}
+
+export const updateTask = async (data: updateTaskInput) => {
+  return await db
+    .update(Task)
+    .set({
+      ...data,
+      updatedAt: sql`now()`
+    })
+    .where(eq(Task.id, data.id))
+}
+
+export const deleteTask = async (id: string) => {
+  return await db.delete(Task).where(eq(Task.id, id))
+}

package/template/base/src/data-access/user.ts

@@ -0,0 +1,141 @@
+import {
+  InferSelectModel,
+  asc,
+  count,
+  desc,
+  eq,
+  ilike,
+  or,
+  sql
+} from 'drizzle-orm'
+
+import { db } from '@/db'
+import { User } from '@/db/schema'
+import { type SortOrderEnum } from '@/lib/sortOrderEnum'
+
+export type UserType = InferSelectModel<typeof User>
+
+type updateUserByIdInput = {
+  name?: string | null
+  type?: UserType['type']
+  roleId?: string | null
+}
+
+export const updateUser = async (id: string, data: updateUserByIdInput) => {
+  await db
+    .update(User)
+    .set({ ...data, updatedAt: sql`now()` })
+    .where(eq(User.id, id))
+}
+
+type getUsersInput = {
+  page: number
+  limit: number
+  sortBy?: keyof UserType
+  sortOrder?: SortOrderEnum
+  filters?: {
+    name?: string
+    email?: string
+    type?: UserType['type'][]
+  }
+}
+
+export const getUsersWithRole = async ({
+  page,
+  limit,
+  sortBy,
+  sortOrder,
+  filters
+}: getUsersInput) => {
+  const where = or(
+    filters?.name ? ilike(User.name, `%${filters.name}%`) : undefined,
+    filters?.email ? ilike(User.email, `%${filters.email}%`) : undefined,
+    ...(filters?.type || []).map(f => eq(User.type, f))
+  )
+
+  const [users, total] = await Promise.all([
+    db.query.User.findMany({
+      columns: {
+        id: true,
+        name: true,
+        email: true,
+        type: true,
+        roleId: true,
+        image: true,
+        emailVerified: true,
+        createdAt: true,
+        updatedAt: true
+      },
+      with: {
+        role: true
+      },
+      where,
+      orderBy: [
+        sortOrder === 'asc'
+          ? asc(User[sortBy || 'createdAt'])
+          : desc(User[sortBy || 'createdAt'])
+      ],
+      offset: (page - 1) * limit,
+      limit
+    }),
+    db
+      .select({
+        count: count()
+      })
+      .from(User)
+      .where(where)
+  ])
+
+  return { users, total: total[0]?.count || 0 }
+}
+
+export const getUserById = async (id: string) => {
+  return await db.query.User.findFirst({
+    where: eq(User.id, id),
+    columns: {
+      id: true,
+      name: true,
+      email: true,
+      emailVerified: true,
+      type: true,
+      roleId: true,
+      createdAt: true,
+      updatedAt: true
+    }
+  })
+}
+
+type createUserInput = {
+  name?: string | null
+  email: string
+  type: UserType['type']
+  roleId?: string | null
+}
+
+export const createUser = async ({
+  name,
+  email,
+  type,
+  roleId
+}: createUserInput) => {
+  const newUser = await db
+    .insert(User)
+    .values({
+      name,
+      email,
+      type,
+      roleId
+    })
+    .returning({
+      id: User.id
+    })
+
+  const id = newUser[0]?.id
+  if (!id) throw new Error('Failed to create user')
+
+  return id
+}
+
+export const deleteUser = async (id: string) => {
+  return await db.delete(User).where(eq(User.id, id))
+}