create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/admin/new-admin-form.tsx

@@ -1,173 +1,173 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import { useModal } from '@/components/feedback/modal-context'
-import InfoCard from '@/components/feedback/info-card'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from '@/components/admin/admin-privilege-card'
-import { Button } from '@/components/ui/button'
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import { useModal } from '@/components/feedback/modal-context'
+import InfoCard from '@/components/feedback/info-card'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import AdminRoleCard from '@/components/admin/admin-privilege-card'
+import { Button } from '@/components/ui/button'
 import type { RouterOutputs } from '@/app/_trpc/types'
-
-export default function NewAdminForm({
-    privileges,
-    action,
-}: {
-    privileges: RouterOutputs['admins']['list']['privileges']
-    action: any
-}) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const { toast } = useToast()
-    const formRef = React.useRef<HTMLFormElement>(null)
-    const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
-    const usernameRef = React.useRef<HTMLInputElement>(null)
-    const passwordRef = React.useRef<HTMLInputElement>(null)
-
-    const mutation = trpc.admins.create.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('createNewAdmin'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: (data) => {
-            setModal(null)
-            setModalResponse(null)
-            setAllChecked(false)
-            action()
-
-            /**
-             * Empty the form
-             */
-            if (formRef.current) {
-                formRef.current.reset()
-            }
-
-            /**
-             * Show a success toast
-             */
-            toast({
-                variant: 'success',
-                title: t('createNewAdmin'),
-                description: t('itemCreatedSuccessfully'),
-            })
-        },
-    })
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-
-        /**
-         * Check username and password
-         */
-        if (!usernameRef.current?.value || !passwordRef.current?.value) {
-            setModal({
-                title: t('createNewAdmin'),
-                body: <div className='p-4'>{t('usernamePasswordRequired')}</div>,
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-            return
-        }
-
-        const data = new FormData(e.currentTarget)
-        const values = Object.fromEntries(data.entries())
-        values.form_type = 'new'
-
-        // Convert the privileges to an array of objects
-        const privileges = Object.entries(values).filter(([key]) => key.includes('privileges'))
-        const privilegesArray = privileges.map(([key, value]) => JSON.parse(value as string))
-
-        mutation.mutate({
-            username: usernameRef.current.value,
-            password: passwordRef.current.value,
-            privileges: privilegesArray,
-        })
-    }
-
-    return (
-        <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
-            <div>
-                <label htmlFor='email' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('username')}
-                </label>
-                <div className=''>
-                    <input
-                        ref={usernameRef}
-                        id='username'
-                        name='username'
-                        type='text'
-                        // required
-                        className='block w-full rounded-md border-0 bg-input p-3 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-
-            <div>
-                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {t('password')}
-                </label>
-                <div className=''>
-                    <input
-                        ref={passwordRef}
-                        id='password'
-                        name='password'
-                        type='text'
-                        // required
-                        className='block w-full rounded-md border-0 bg-input p-3 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
-                    />
-                </div>
-            </div>
-            {privileges && privileges.length > 0 && (
-                <>
-                    <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
-                    <div className='flex'>
-                        <Button
-                            className='border border-foreground'
-                            type='button'
-                            variant={allChecked === true ? 'default' : 'secondary'}
-                            onClick={(event) => {
-                                event.preventDefault()
-                                event.stopPropagation()
-                                if (allChecked === true) {
-                                    setAllChecked(false)
-                                } else {
-                                    setAllChecked(true)
-                                }
-                            }}
-                        >
-                            {allChecked === true ? t('removeAll') : t('checkAll')}
-                        </Button>
-                    </div>
-                    <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
-                        {privileges.map((privilege, index: number) => {
-                            return (
-                                <AdminRoleCard
-                                    key={index}
-                                    privilege={privilege}
-                                    allChecked={allChecked}
-                                    setAllChecked={setAllChecked}
-                                />
-                            )
-                        })}
-                    </div>
-                </>
-            )}
-
-            <div className='mt-4'>
-                <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {t('submitNewAdmin')}
-                </button>
-            </div>
-        </form>
-    )
-}
+
+export default function NewAdminForm({
+    privileges,
+    action,
+}: {
+    privileges: RouterOutputs['admins']['list']['privileges']
+    action: any
+}) {
+    const t = useI18n()
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+    const formRef = React.useRef<HTMLFormElement>(null)
+    const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
+    const usernameRef = React.useRef<HTMLInputElement>(null)
+    const passwordRef = React.useRef<HTMLInputElement>(null)
+
+    const mutation = trpc.admins.create.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('createNewAdmin'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: (data) => {
+            setModal(null)
+            setModalResponse(null)
+            setAllChecked(false)
+            action()
+
+            /**
+             * Empty the form
+             */
+            if (formRef.current) {
+                formRef.current.reset()
+            }
+
+            /**
+             * Show a success toast
+             */
+            toast({
+                variant: 'success',
+                title: t('createNewAdmin'),
+                description: t('itemCreatedSuccessfully'),
+            })
+        },
+    })
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        /**
+         * Check username and password
+         */
+        if (!usernameRef.current?.value || !passwordRef.current?.value) {
+            setModal({
+                title: t('createNewAdmin'),
+                body: <div className='p-4'>{t('usernamePasswordRequired')}</div>,
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+            return
+        }
+
+        const data = new FormData(e.currentTarget)
+        const values = Object.fromEntries(data.entries())
+        values.form_type = 'new'
+
+        // Convert the privileges to an array of objects
+        const privileges = Object.entries(values).filter(([key]) => key.includes('privileges'))
+        const privilegesArray = privileges.map(([key, value]) => JSON.parse(value as string))
+
+        mutation.mutate({
+            username: usernameRef.current.value,
+            password: passwordRef.current.value,
+            privileges: privilegesArray,
+        })
+    }
+
+    return (
+        <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='email' className='block text-sm font-medium leading-6 text-foreground'>
+                    {t('username')}
+                </label>
+                <div className=''>
+                    <input
+                        ref={usernameRef}
+                        id='username'
+                        name='username'
+                        type='text'
+                        // required
+                        className='block w-full rounded-md border-0 bg-input p-3 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                    />
+                </div>
+            </div>
+
+            <div>
+                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
+                    {t('password')}
+                </label>
+                <div className=''>
+                    <input
+                        ref={passwordRef}
+                        id='password'
+                        name='password'
+                        type='text'
+                        // required
+                        className='block w-full rounded-md border-0 bg-input p-3 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                    />
+                </div>
+            </div>
+            {privileges && privileges.length > 0 && (
+                <>
+                    <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
+                    <div className='flex'>
+                        <Button
+                            className='border border-foreground'
+                            type='button'
+                            variant={allChecked === true ? 'default' : 'secondary'}
+                            onClick={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+                                if (allChecked === true) {
+                                    setAllChecked(false)
+                                } else {
+                                    setAllChecked(true)
+                                }
+                            }}
+                        >
+                            {allChecked === true ? t('removeAll') : t('checkAll')}
+                        </Button>
+                    </div>
+                    <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
+                        {privileges.map((privilege, index: number) => {
+                            return (
+                                <AdminRoleCard
+                                    key={index}
+                                    privilege={privilege}
+                                    allChecked={allChecked}
+                                    setAllChecked={setAllChecked}
+                                />
+                            )
+                        })}
+                    </div>
+                </>
+            )}
+
+            <div className='mt-4'>
+                <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {t('submitNewAdmin')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/container-box.tsx

@@ -1,24 +1,24 @@
-import React from 'react'
-// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-
-export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
-    return (
-        <>
-            {/*<Card>
-                <CardHeader>
-                    <CardTitle>{title}</CardTitle>
-                </CardHeader>
-                <CardContent>{children}</CardContent>
-            </Card>*/}
-
-            <div className='relative flex flex-col rounded-lg border border-slate-300 bg-white shadow-xs dark:border-slate-500 dark:bg-slate-900'>
-                {title ? (
-                    <div className='rounded-t-lg px-4 py-1.5 font-bold text-black dark:bg-slate-800 dark:text-white'>
-                        {title}
-                    </div>
-                ) : null}
-                <div className='w-full px-4 py-2'>{children}</div>
-            </div>
-        </>
-    )
-}
+import React from 'react'
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
+    return (
+        <>
+            {/*<Card>
+                <CardHeader>
+                    <CardTitle>{title}</CardTitle>
+                </CardHeader>
+                <CardContent>{children}</CardContent>
+            </Card>*/}
+
+            <div className='relative flex flex-col rounded-lg border border-slate-300 bg-white shadow-xs dark:border-slate-500 dark:bg-slate-900'>
+                {title ? (
+                    <div className='rounded-t-lg px-4 py-1.5 font-bold text-black dark:bg-slate-800 dark:text-white'>
+                        {title}
+                    </div>
+                ) : null}
+                <div className='w-full px-4 py-2'>{children}</div>
+            </div>
+        </>
+    )
+}

package/templates/default/components/dnd-kit/draggable.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
-import { useDraggable } from '@dnd-kit/core'
-
-function Draggable({ draggableId, children }: { draggableId: string | number; children: React.ReactNode }) {
-    const { attributes, listeners, setNodeRef, transform } = useDraggable({
-        id: draggableId,
-    })
-    const style = transform
-        ? {
-              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-          }
-        : undefined
-
-    return (
-        <div ref={setNodeRef} className='float-start' style={style} {...listeners} {...attributes}>
-            {children}
-        </div>
-    )
-}
-
-export default Draggable
+import React from 'react'
+import { useDraggable } from '@dnd-kit/core'
+
+function Draggable({ draggableId, children }: { draggableId: string | number; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
+        id: draggableId,
+    })
+    const style = transform
+        ? {
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+          }
+        : undefined
+
+    return (
+        <div ref={setNodeRef} className='float-start' style={style} {...listeners} {...attributes}>
+            {children}
+        </div>
+    )
+}
+
+export default Draggable

package/templates/default/components/dnd-kit/droppable.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { useDroppable } from '@dnd-kit/core'
-
-function Droppable({ droppableId, children }: { droppableId: string | number; children: React.ReactNode }) {
-    const { isOver, setNodeRef } = useDroppable({
-        id: droppableId,
-    })
-
-    const style = {
-        color: isOver ? 'green' : undefined,
-    }
-
-    return (
-        <div ref={setNodeRef} style={style}>
-            {children}
-        </div>
-    )
-}
-
-export default Droppable
+import React from 'react'
+import { useDroppable } from '@dnd-kit/core'
+
+function Droppable({ droppableId, children }: { droppableId: string | number; children: React.ReactNode }) {
+    const { isOver, setNodeRef } = useDroppable({
+        id: droppableId,
+    })
+
+    const style = {
+        color: isOver ? 'green' : undefined,
+    }
+
+    return (
+        <div ref={setNodeRef} style={style}>
+            {children}
+        </div>
+    )
+}
+
+export default Droppable

package/templates/default/components/dnd-kit/sortable-item.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-
-export default function SortableItem({ id, children }: { id: string | number; children: React.ReactNode }) {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id })
-
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-    }
-
-    return (
-        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-            {children}
-        </div>
-    )
-}
+import React from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+export default function SortableItem({ id, children }: { id: string | number; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id })
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }
+
+    return (
+        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+            {children}
+        </div>
+    )
+}

package/templates/default/components/feedback/error-component.tsx

@@ -1,17 +1,17 @@
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
-
-export default function ErrorComponent({ message }: { message: string }) {
-    return (
-        <div className='px-4'>
-            <Alert variant='info' className='my-8'>
-                <AlertDescription className='text-md font-bold'>
-                    <div className='flex items-center gap-1.5'>
-                        <ExclamationTriangleIcon className='size-5' /> {message}
-                    </div>
-                </AlertDescription>
-            </Alert>
-        </div>
-    )
-    
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+
+export default function ErrorComponent({ message }: { message: string }) {
+    return (
+        <div className='px-4'>
+            <Alert variant='info' className='my-8'>
+                <AlertDescription className='text-md font-bold'>
+                    <div className='flex items-center gap-1.5'>
+                        <ExclamationTriangleIcon className='size-5' /> {message}
+                    </div>
+                </AlertDescription>
+            </Alert>
+        </div>
+    )
+    
 }