create-ej-app 3.2.0 → 5.0.0

package/template/base/src/app/(app)/users/actions.ts

@@ -1,55 +1,34 @@
 'use server'
 
-import { User } from '@prisma/client'
+import { z } from 'zod'
 
-import { getAuthSession } from '@/lib/auth'
-import { prisma } from '@/lib/db'
-import { UnwrapPromise } from '@/types/UnwrapPromise'
+import { User } from '@/db/schema'
+import { authActionClient } from '@/lib/safe-action'
+import { SortOrderEnum } from '@/lib/sortOrderEnum'
+import { getUsersWithRoleUseCase } from '@/use-case/user'
 
-export const getUsers = async ({
-  page,
-  limit,
-  sortBy,
-  sortOrder,
-  name,
-  email
-}: {
-  page: number
-  limit: number
-  sortBy?: keyof User
-  sortOrder?: 'asc' | 'desc'
-  name?: string
-  email?: string
-}) => {
-  const session = await getAuthSession()
-  if (!session) throw new Error('Unauthorized')
-
-  const where = {
-    name: name ? { contains: name, mode: 'insensitive' as const } : undefined,
-    email: email ? { contains: email, mode: 'insensitive' as const } : undefined
-  }
-  const [users, total] = await Promise.all([
-    prisma.user.findMany({
-      where,
-      select: {
-        id: true,
-        name: true,
-        email: true,
-        createdAt: true,
-        updatedAt: true
-      },
-      skip: (page - 1) * limit,
-      take: limit,
-      orderBy: {
-        [sortBy || 'createdAt']: sortOrder || 'desc'
+export const getUsersAction = authActionClient
+  .schema(
+    z.object({
+      page: z.number().gte(1),
+      limit: z.number().gte(1).lte(1000),
+      sortBy: z.enum(['name']).optional(),
+      sortOrder: z.enum(SortOrderEnum).optional(),
+      name: z.string().optional(),
+      email: z.string().optional(),
+      type: z.array(z.enum(User.type.enumValues)).optional()
+    })
+  )
+  .action(async ({ ctx, parsedInput }) => {
+    return await getUsersWithRoleUseCase(ctx.user.type, {
+      page: parsedInput.page,
+      limit: parsedInput.limit,
+      sortBy: parsedInput.sortBy,
+      sortOrder: parsedInput.sortOrder,
+      filters: {
+        name: parsedInput.name,
+        email: parsedInput.email,
+        type: parsedInput.type
       }
-    }),
-    prisma.user.count({
-      where
     })
-  ])
-
-  return { users, total }
-}
-
-export type GetUsersFnDataType = UnwrapPromise<ReturnType<typeof getUsers>>
+  })

package/template/base/src/app/(app)/users/page.tsx

@@ -1,8 +1,9 @@
-import { User } from '@prisma/client'
 import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
 
+import { authGuard, getAuthSession } from '@/lib/auth'
 import { siteConfig } from '@/lib/siteConfig'
-import { getUsers } from './actions'
+import { getUsersAction } from './actions'
 import { Render } from './render'
 
 export const metadata: Metadata = {
@@ -18,32 +19,44 @@ const Users = async ({
     sort?: string
     name?: string
     email?: string
+    type?: string
   }
 }) => {
+  const session = await getAuthSession()
+  if (!session) return notFound()
+
+  const g = await authGuard(session)
+  if (!g) return notFound()
+
   const page = searchParams.page ? parseInt(searchParams.page) : 1
   const limit = searchParams.limit ? parseInt(searchParams.limit) : 10
 
   const [sortBy, sortOrder] =
     typeof searchParams.sort === 'string'
-      ? (searchParams.sort.split('.') as [
-          keyof User | undefined,
-          'asc' | 'desc' | undefined
-        ])
+      ? (searchParams.sort.split('.') as [any, 'asc' | 'desc' | undefined])
       : []
 
   const name = searchParams.name
   const email = searchParams.email
 
-  const data = await getUsers({
+  const type =
+    typeof searchParams.type === 'string'
+      ? (searchParams.type.split('.') as any[])
+      : undefined
+
+  const data = await getUsersAction({
     page,
     limit,
     sortBy,
     sortOrder,
     name,
-    email
+    email,
+    type
   })
 
-  return <Render data={data} />
+  if (!data?.data) throw new Error('Users data not found')
+
+  return <Render data={data.data} />
 }
 
 export default Users

package/template/base/src/app/(app)/users/render.tsx

@@ -9,11 +9,31 @@ import { Heading } from '@/components/heading'
 import { Icons } from '@/components/icons'
 import { Shell } from '@/components/shell'
 import { Button } from '@/components/ui/button'
+import { User } from '@/db/schema'
 import { formatDateTime, timesAgo } from '@/lib/formatDate'
-import { GetUsersFnDataType } from './actions'
+import { generateLabel } from '@/lib/generateLabel'
+import { InferSelectModel } from 'drizzle-orm'
+
+const types = User.type.enumValues.map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
 
 export const Render: FC<{
-  data: GetUsersFnDataType
+  data: {
+    users: {
+      id: string
+      name?: string | null
+      email: string
+      type?: InferSelectModel<typeof User>['type']
+      role?: {
+        name: string
+      } | null
+      createdAt: Date
+      updatedAt?: Date | null
+    }[]
+    total: number
+  }
 }> = ({ data }) => {
   return (
     <Shell>
@@ -47,6 +67,20 @@ export const Render: FC<{
               <DataTableColumnHeader column={column} title="Email" />
             )
           },
+          {
+            accessorKey: 'type',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Type" />
+            )
+          },
+          {
+            accessorKey: 'role',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Role" />
+            ),
+            cell: ({ row }) => row.original.role?.name,
+            enableSorting: false
+          },
           {
             accessorKey: 'createdAt',
             header: ({ column }) => (
@@ -59,7 +93,10 @@ export const Render: FC<{
             header: ({ column }) => (
               <DataTableColumnHeader column={column} title="Updated At" />
             ),
-            cell: ({ row }) => timesAgo(row.original.updatedAt)
+            cell: ({ row }) =>
+              row.original.updatedAt
+                ? timesAgo(row.original.updatedAt)
+                : undefined
           }
         ]}
         data={data.users}
@@ -74,6 +111,13 @@ export const Render: FC<{
             title: 'Email'
           }
         ]}
+        filterableColumns={[
+          {
+            id: 'type',
+            title: 'Type',
+            options: types
+          }
+        ]}
       />
     </Shell>
   )

package/template/base/src/app/(auth)/layout.tsx

@@ -1,8 +1,15 @@
+import { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 import { ReactNode } from 'react'
 
 import { SiteFooter } from '@/components/site-footer'
 import { getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+
+export const metadata: Metadata = {
+  title: 'Login | ' + siteConfig.name,
+  description: siteConfig.description
+}
 
 const AuthLayout = async ({ children }: { children: ReactNode }) => {
   const session = await getAuthSession()

package/template/base/src/app/(auth)/login/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 import { Icons } from '@/components/icons'
 import { Button } from '@/components/ui/button'
-import { UserAuthForm } from './user-auth-form'
+import { Render } from './render'
 
 const LoginPage = () => {
   return (
@@ -23,7 +23,7 @@ const LoginPage = () => {
             Enter your email to sign in to your account
           </p>
         </div>
-        <UserAuthForm />
+        <Render />
         <p className="px-8 text-center text-sm text-muted-foreground">
           By clicking continue, you agree to our{' '}
           <Link

package/template/base/src/app/(auth)/login/render.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { signIn } from 'next-auth/react'
+import { useSearchParams } from 'next/navigation'
+import { FC, HTMLAttributes, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/cn'
+
+const userAuthSchema = z.object({
+  email: z.string().email()
+})
+
+type FormData = z.infer<typeof userAuthSchema>
+
+interface RenderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const Render: FC = ({ className, ...props }: RenderProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<FormData>({
+    resolver: zodResolver(userAuthSchema)
+  })
+  const [isLoading, setIsLoading] = useState(false)
+  const [isGoogleLoading, setIsGoogleLoading] = useState(false)
+  const [isGithubLoading, setIsGithubLoading] = useState(false)
+
+  const searchParams = useSearchParams()
+
+  async function onSubmit(data: FormData) {
+    setIsLoading(true)
+
+    const signInResult = await signIn('email', {
+      email: data.email.toLowerCase(),
+      redirect: false,
+      callbackUrl: searchParams?.get('from') || '/dashboard'
+    })
+
+    setIsLoading(false)
+
+    if (!signInResult?.ok) {
+      return toast('Something went wrong.', {
+        description: 'Your sign in request failed. Please try again.'
+      })
+    }
+
+    return toast('Check your email', {
+      description: 'We sent you a login link. Be sure to check your spam too.'
+    })
+  }
+
+  return (
+    <div className={cn('grid gap-6', className)} {...props}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="grid gap-2">
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="email">
+              Email
+            </Label>
+            <Input
+              id="email"
+              placeholder="name@example.com"
+              type="email"
+              autoCapitalize="none"
+              autoComplete="email"
+              autoCorrect="off"
+              disabled={isLoading}
+              {...register('email')}
+            />
+            {errors?.email && (
+              <p className="px-1 text-xs text-red-600">
+                {errors.email.message}
+              </p>
+            )}
+          </div>
+          <Button
+            disabled={isLoading || isGoogleLoading || isGithubLoading}
+            type="submit"
+          >
+            {isLoading && (
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Sign in with Email
+          </Button>
+        </div>
+      </form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <div className="grid gap-2">
+        <Button
+          variant="outline"
+          onClick={async () => {
+            setIsGoogleLoading(true)
+            await signIn('google', {
+              callbackUrl: searchParams?.get('from') || '/dashboard'
+            })
+            setIsGoogleLoading(false)
+          }}
+          disabled={isLoading || isGoogleLoading || isGithubLoading}
+        >
+          {isGoogleLoading ? (
+            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Icons.google className="mr-2 h-4 w-4" />
+          )}
+          Google
+        </Button>
+        <Button
+          variant="outline"
+          onClick={async () => {
+            setIsGithubLoading(true)
+            await signIn('github', {
+              callbackUrl: searchParams?.get('from') || '/dashboard'
+            })
+            setIsGithubLoading(false)
+          }}
+          disabled={isLoading || isGoogleLoading || isGithubLoading}
+        >
+          {isGithubLoading ? (
+            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Icons.github className="mr-2 h-4 w-4" />
+          )}
+          Github
+        </Button>
+      </div>
+    </div>
+  )
+}

package/template/base/src/app/(marketing)/layout.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import { ReactNode } from 'react'
 
 import { Icons } from '@/components/icons'
@@ -5,7 +6,6 @@ import { MainNav } from '@/components/main-nav'
 import { SiteFooter } from '@/components/site-footer'
 import { Button } from '@/components/ui/button'
 import { getAuthSession } from '@/lib/auth'
-import Link from 'next/link'
 
 const Layout = async ({ children }: { children: ReactNode }) => {
   const session = await getAuthSession()

package/template/base/src/app/(marketing)/page.tsx

@@ -13,9 +13,10 @@ const links = [
       'Learn about TypeScript and how it helps you write better JavaScript.'
   },
   {
-    href: 'https://prisma.io',
-    title: 'Prisma',
-    description: 'Prisma is a next-generation ORM for Node.js and TypeScript.'
+    href: 'https://orm.drizzle.team',
+    title: 'Drizzle',
+    description:
+      'Lightweight and performant TypeScript ORM with developer experience in mind.'
   },
   {
     href: 'https://next-auth.js.org',
@@ -50,14 +51,14 @@ const links = [
 const Home = () => {
   return (
     <div className="flex min-h-[80vh] flex-col items-center justify-between">
-      <div className="max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+      <div className="w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+        <p className="flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by editing&nbsp;
           <code className="font-mono font-bold">src/app/page.tsx</code>
         </p>
       </div>
 
-      <div className="mt-12 flex place-items-center before:absolute before:h-[300px] before:w-[240px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[120px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+      <div className="before:bg-gradient-radial after:bg-gradient-conic z-[-1] mt-12 flex place-items-center before:absolute before:h-[300px] before:w-[240px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[120px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
         <Image
           className="dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
           src="/next.svg"
@@ -68,7 +69,7 @@ const Home = () => {
         />
       </div>
 
-      <div className="my-8 grid text-center lg:max-w-5xl lg:w-full lg:grid-cols-4 lg:text-left gap-2">
+      <div className="my-8 grid gap-2 text-center lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
         {links.map((l, i) => (
           <a
             key={i}

package/template/base/src/app/layout.tsx

@@ -1,34 +1,31 @@
-import { Analytics } from '@vercel/analytics/react'
-import { SpeedInsights } from '@vercel/speed-insights/next'
-import { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { ReactNode } from 'react'
+import { GeistSans } from 'geist/font/sans'
+import type { Metadata } from 'next'
+import { ThemeProvider } from 'next-themes'
+import NextTopLoader from 'nextjs-toploader'
 
-import { ThemeProvider } from '@/components/theme-provider'
-import { Toaster } from '@/components/ui/toaster'
+import { Toaster } from '@/components/ui/sonner'
 import { siteConfig } from '@/lib/siteConfig'
-import '@/styles/globals.css'
-
-const inter = Inter({ subsets: ['latin'] })
+import './globals.css'
 
 export const metadata: Metadata = {
   title: siteConfig.name,
   description: siteConfig.description
 }
 
-const RootLayout = ({ children }: { children: ReactNode }) => {
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+    <html lang="en" className={GeistSans.className} suppressHydrationWarning>
+      <body className="min-h-screen bg-background font-sans antialiased">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <NextTopLoader color="#777" />
           {children}
-          <Analytics />
-          <SpeedInsights />
           <Toaster />
         </ThemeProvider>
       </body>
     </html>
   )
 }
-
-export default RootLayout

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

@@ -23,6 +23,7 @@ import {
 export const AppNavCommand: FC<{
   modules: {
     task: boolean
+    root: boolean
   }
 }> = ({ modules }) => {
   const [open, setOpen] = useState(false)
@@ -71,6 +72,7 @@ export const AppNavCommand: FC<{
         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
@@ -102,6 +104,22 @@ export const AppNavCommand: FC<{
                 </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'))}

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

@@ -35,8 +35,8 @@ export function DataTableColumnHeader<TData, TValue>({
               column.getIsSorted() === 'desc'
                 ? `Sorted descending. Click to sort ascending.`
                 : column.getIsSorted() === 'asc'
-                ? `Sorted ascending. Click to sort descending.`
-                : `Not sorted. Click to sort ascending.`
+                  ? `Sorted ascending. Click to sort descending.`
+                  : `Not sorted. Click to sort ascending.`
             }
             variant="ghost"
             size="sm"

package/template/base/src/components/icons.tsx

@@ -11,10 +11,8 @@ import {
   ChevronsLeft,
   ChevronsRight,
   ClipboardList,
-  Download,
   Edit,
   EyeOff,
-  Github,
   Laptop,
   LayoutDashboard,
   Loader2,
@@ -29,6 +27,7 @@ import {
   Settings,
   Settings2,
   Sun,
+  Terminal,
   Trash,
   User,
   X
@@ -43,7 +42,24 @@ export const Icons = {
   laptop: Laptop,
   chevronLeft: ChevronLeft,
   arrowRight: ArrowRight,
-  github: Github,
+  github: ({ ...props }: LucideProps) => (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fab"
+      data-icon="github"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 496 512"
+      {...props}
+      className={cn('fill-current', props.className)}
+    >
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      ></path>
+    </svg>
+  ),
   google: ({ ...props }: LucideProps) => (
     <svg
       aria-hidden="true"
@@ -69,7 +85,6 @@ export const Icons = {
   edit: Edit,
   save: Save,
   delete: Trash,
-  download: Download,
   dashboard: LayoutDashboard,
   task: ClipboardList,
   arrowUp: ArrowUp,
@@ -81,5 +96,6 @@ export const Icons = {
   chevronsLeft: ChevronsLeft,
   chevronsRight: ChevronsRight,
   chevronRight: ChevronRight,
-  mixer: Settings2
+  mixer: Settings2,
+  terminal: Terminal
 }

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

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      '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',
+      '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}

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

@@ -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-black/80  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}