create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/Dropzone.tsx

@@ -1,154 +1,154 @@
-import React, { CSSProperties, forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
-import { DropEvent, FileRejection, useDropzone } from 'react-dropzone'
-import { DropzoneFile } from 'nextjs-cms/core/types'
-import ContainerBox from '@/components/ContainerBox'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { MinusIcon } from '@radix-ui/react-icons'
-import { useToast } from '@/components/ui/use-toast'
-
-const thumb: CSSProperties = {
-    display: 'inline-flex',
-    borderRadius: 2,
-    border: '1px solid #eaeaea',
-    marginBottom: 8,
-    marginRight: 8,
-    width: 100,
-    height: 100,
-    padding: 4,
-    boxSizing: 'border-box',
-}
-
-const thumbInner: CSSProperties = {
-    display: 'flex',
-    minWidth: 0,
-    overflow: 'hidden',
-}
-
-const img: CSSProperties = {
-    display: 'block',
-    width: 'auto',
-    height: '100%',
-}
-
-export interface DropzoneHandles {
-    getFiles: () => File[]
-    removeFiles: () => void
-}
-
-function Dropzone(props: any, ref: Ref<DropzoneHandles>) {
-    const t = useI18n()
-    const acceptedFileTypes = {
-        'image/png': ['.png'],
-        'image/jpeg': ['.jpg', '.jpeg'],
-        'image/webp': ['.webp'],
-    }
-    const [files, setFiles] = useState<DropzoneFile[]>([])
-    const { toast } = useToast()
-    const { getRootProps, getInputProps } = useDropzone({
-        accept: acceptedFileTypes,
-        maxFiles: 10,
-        onDrop: (acceptedFiles: File[]) => {
-            // First, check if the file is already in the list
-            const filteredFiles = acceptedFiles.filter((file) => !files.some((prevFile) => prevFile.name === file.name))
-            setFiles((prevFiles) => [
-                ...prevFiles,
-                ...filteredFiles.map((file: File) =>
-                    Object.assign(file, {
-                        preview: URL.createObjectURL(file),
-                    }),
-                ),
-            ])
-        },
-
-        onDropRejected: (rejectedFiles: FileRejection[], e: DropEvent) => {
-            toast({
-                variant: 'destructive',
-                title: t('deleteGalleryPhoto'),
-                description: rejectedFiles[0]?.errors[0]?.message
-                    ? rejectedFiles[0].errors[0].message
-                    : t('error'),
-            })
-        },
-
-        onError: (error: any) => {
-            toast({
-                variant: 'destructive',
-                title: t('deleteGalleryPhoto'),
-                description: error.displayName,
-            })
-        },
-    })
-
-    useImperativeHandle(ref, () => ({
-        getFiles: () => files,
-        removeFiles: () => {
-            files.forEach((file: any) => URL.revokeObjectURL(file.preview))
-            setFiles([])
-        },
-    }))
-
-    const thumbs = files.map((file: DropzoneFile, index: number) => (
-        <div style={thumb} key={`${file.name}-${index}`} className='relative'>
-            {/* Delete Button */}
-            <button
-                type='button'
-                className='absolute -end-1 -top-1 rounded-full bg-red-500 p-1'
-                onClick={() => {
-                    URL.revokeObjectURL(file.preview)
-                    setFiles((prevFiles) =>
-                        prevFiles.filter((prevFile) => {
-                            if (prevFile.name !== file.name) {
-                                // Create a new preview url for the file
-                                prevFile.preview = URL.createObjectURL(prevFile)
-                                return prevFile
-                            }
-                        }),
-                    )
-                }}
-            >
-                <MinusIcon className='text-white' />
-            </button>
-            <div style={thumbInner}>
-                <img
-                    alt={file.name}
-                    src={file.preview}
-                    style={img}
-                    // Revoke data uri after image is loaded, will prevent memory leaks
-                    // (see: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
-                    // Notice: However, I can't use it because I'm re-rendering the thumbs when removing a file from the list
-                    /*
-                    onLoad={() => {
-                        URL.revokeObjectURL(file.preview)
-                    }}
-                    */
-                />
-            </div>
-        </div>
-    ))
-
-    useEffect(() => {
-        // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-        return () => files.forEach((file: any) => URL.revokeObjectURL(file.preview))
-    }, [])
-
-    return (
-        <ContainerBox title={t('uploadPhotosToGallery')}>
-            <section className='container mt-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent py-8'>
-                <div {...getRootProps({ className: 'dropzone' })}>
-                    <input {...getInputProps()} />
-                    <div className='flex flex-col items-center justify-center'>
-                        <div className='p-4 text-xl font-semibold text-card-foreground'>
-                            {t('dropzoneText')}
-                        </div>
-                        <div className='text-muted-foreground'>
-                            {t('accepts')}: {Object.values(acceptedFileTypes).flat().join(', ')}
-                        </div>
-                    </div>
-                </div>
-                {thumbs?.length > 0 && <aside className='mt-4 flex flex-row flex-wrap gap-2'>{thumbs}</aside>}
-            </section>
-        </ContainerBox>
-    )
-}
-
-export default forwardRef(Dropzone)
+import React, { CSSProperties, forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
+import { DropEvent, FileRejection, useDropzone } from 'react-dropzone'
+import { DropzoneFile } from 'nextjs-cms/core/types'
+import ContainerBox from '@/components/ContainerBox'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { MinusIcon } from '@radix-ui/react-icons'
+import { useToast } from '@/components/ui/use-toast'
+
+const thumb: CSSProperties = {
+    display: 'inline-flex',
+    borderRadius: 2,
+    border: '1px solid #eaeaea',
+    marginBottom: 8,
+    marginRight: 8,
+    width: 100,
+    height: 100,
+    padding: 4,
+    boxSizing: 'border-box',
+}
+
+const thumbInner: CSSProperties = {
+    display: 'flex',
+    minWidth: 0,
+    overflow: 'hidden',
+}
+
+const img: CSSProperties = {
+    display: 'block',
+    width: 'auto',
+    height: '100%',
+}
+
+export interface DropzoneHandles {
+    getFiles: () => File[]
+    removeFiles: () => void
+}
+
+function Dropzone(props: any, ref: Ref<DropzoneHandles>) {
+    const t = useI18n()
+    const acceptedFileTypes = {
+        'image/png': ['.png'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'image/webp': ['.webp'],
+    }
+    const [files, setFiles] = useState<DropzoneFile[]>([])
+    const { toast } = useToast()
+    const { getRootProps, getInputProps } = useDropzone({
+        accept: acceptedFileTypes,
+        maxFiles: 10,
+        onDrop: (acceptedFiles: File[]) => {
+            // First, check if the file is already in the list
+            const filteredFiles = acceptedFiles.filter((file) => !files.some((prevFile) => prevFile.name === file.name))
+            setFiles((prevFiles) => [
+                ...prevFiles,
+                ...filteredFiles.map((file: File) =>
+                    Object.assign(file, {
+                        preview: URL.createObjectURL(file),
+                    }),
+                ),
+            ])
+        },
+
+        onDropRejected: (rejectedFiles: FileRejection[], e: DropEvent) => {
+            toast({
+                variant: 'destructive',
+                title: t('deleteGalleryPhoto'),
+                description: rejectedFiles[0]?.errors[0]?.message
+                    ? rejectedFiles[0].errors[0].message
+                    : t('error'),
+            })
+        },
+
+        onError: (error: any) => {
+            toast({
+                variant: 'destructive',
+                title: t('deleteGalleryPhoto'),
+                description: error.displayName,
+            })
+        },
+    })
+
+    useImperativeHandle(ref, () => ({
+        getFiles: () => files,
+        removeFiles: () => {
+            files.forEach((file: any) => URL.revokeObjectURL(file.preview))
+            setFiles([])
+        },
+    }))
+
+    const thumbs = files.map((file: DropzoneFile, index: number) => (
+        <div style={thumb} key={`${file.name}-${index}`} className='relative'>
+            {/* Delete Button */}
+            <button
+                type='button'
+                className='absolute -end-1 -top-1 rounded-full bg-red-500 p-1'
+                onClick={() => {
+                    URL.revokeObjectURL(file.preview)
+                    setFiles((prevFiles) =>
+                        prevFiles.filter((prevFile) => {
+                            if (prevFile.name !== file.name) {
+                                // Create a new preview url for the file
+                                prevFile.preview = URL.createObjectURL(prevFile)
+                                return prevFile
+                            }
+                        }),
+                    )
+                }}
+            >
+                <MinusIcon className='text-white' />
+            </button>
+            <div style={thumbInner}>
+                <img
+                    alt={file.name}
+                    src={file.preview}
+                    style={img}
+                    // Revoke data uri after image is loaded, will prevent memory leaks
+                    // (see: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+                    // Notice: However, I can't use it because I'm re-rendering the thumbs when removing a file from the list
+                    /*
+                    onLoad={() => {
+                        URL.revokeObjectURL(file.preview)
+                    }}
+                    */
+                />
+            </div>
+        </div>
+    ))
+
+    useEffect(() => {
+        // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
+        return () => files.forEach((file: any) => URL.revokeObjectURL(file.preview))
+    }, [])
+
+    return (
+        <ContainerBox title={t('uploadPhotosToGallery')}>
+            <section className='container mt-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent py-8'>
+                <div {...getRootProps({ className: 'dropzone' })}>
+                    <input {...getInputProps()} />
+                    <div className='flex flex-col items-center justify-center'>
+                        <div className='p-4 text-xl font-semibold text-card-foreground'>
+                            {t('dropzoneText')}
+                        </div>
+                        <div className='text-muted-foreground'>
+                            {t('accepts')}: {Object.values(acceptedFileTypes).flat().join(', ')}
+                        </div>
+                    </div>
+                </div>
+                {thumbs?.length > 0 && <aside className='mt-4 flex flex-row flex-wrap gap-2'>{thumbs}</aside>}
+            </section>
+        </ContainerBox>
+    )
+}
+
+export default forwardRef(Dropzone)

package/templates/default/components/EmailCard.tsx

@@ -1,138 +1,138 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import { EmailItem } from 'nextjs-cms/core/types'
-import useModal from '@/hooks/useModal'
-import { useToast } from '@/components/ui/use-toast'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import ProgressBar from '@/components/ProgressBar'
-import EmailQuotaForm from '@/components/EmailQuotaForm'
-import EmailPasswordForm from '@/components/EmailPasswordForm'
-import { trpc } from '@/app/_trpc/client'
-
-export default function EmailCard({ email, action }: { email: EmailItem; action: any }) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const { toast } = useToast()
-
-    const deleteMutation = trpc.cpanelEmails.deleteEmail.useMutation({
-        onError: (error) => {
-            setModalResponse({
-                message: error.message,
-                messageColor: 'text-red-900',
-                borderColor: 'border-red-600',
-                bgColor: 'bg-red-200',
-            })
-        },
-        onSuccess: (data) => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('deleteEmailAccount'),
-                description: data.message,
-            })
-        },
-    })
-    const deleteEmail = async () => {
-        deleteMutation.mutate(email.user)
-    }
-
-    return (
-        <Card className='border border-gray-400 shadow-xs'>
-            <CardHeader>
-                <CardTitle>
-                    <div className='flex flex-row items-center'>
-                        <div className='flex flex-col break-all'>
-                            <div className='text-sm font-medium text-foreground'>
-                                <div className='me-2 font-bold'>{email.email}</div>
-                            </div>
-                        </div>
-                    </div>
-                </CardTitle>
-            </CardHeader>
-            <CardContent>
-                {email.humandiskused} / {email.humandiskquota !== 'None' ? email.humandiskquota : email.diskquota}
-                <ProgressBar variant='determinate' value={parseInt(email.diskusedpercent)} />
-            </CardContent>
-            <CardFooter className='flex flex-wrap gap-1'>
-                <Button
-                    size='sm'
-                    variant='default'
-                    onClick={() => {
-                        setModal({
-                            title: t('emailQuota'),
-                            body: (
-                                <div className='p-4'>
-                                    <EmailQuotaForm email={email.user} action={() => action()} />
-                                </div>
-                            ),
-                            headerColor: 'bg-sky-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('quota')}
-                </Button>
-                <Button
-                    size='sm'
-                    variant='default'
-                    onClick={() => {
-                        setModal({
-                            title: t('changePassword'),
-                            body: (
-                                <div className='p-4'>
-                                    <EmailPasswordForm email={email.user} action={() => action()} />
-                                </div>
-                            ),
-                            headerColor: 'bg-sky-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('password')}
-                </Button>
-                <Button
-                    size='sm'
-                    variant='destructive'
-                    onClick={() => {
-                        setModal({
-                            title: t('delete'),
-                            body: (
-                                <div className='p-4'>
-                                    <div className='flex flex-col gap-4'>
-                                        <div>{t('deleteEmailText')}</div>
-                                        <div className='flex gap-2'>
-                                            <button
-                                                className='rounded bg-green-600 px-2 py-1 text-white'
-                                                onClick={deleteEmail}
-                                            >
-                                                {t('yes')}
-                                            </button>
-                                            <button
-                                                className='rounded bg-red-800 px-2 py-1 text-white'
-                                                onClick={() => {
-                                                    setModal(null)
-                                                }}
-                                            >
-                                                {t('no')}
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            ),
-                            headerColor: 'bg-red-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('delete')}
-                </Button>
-            </CardFooter>
-        </Card>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import { EmailItem } from 'nextjs-cms/core/types'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import ProgressBar from '@/components/ProgressBar'
+import EmailQuotaForm from '@/components/EmailQuotaForm'
+import EmailPasswordForm from '@/components/EmailPasswordForm'
+import { trpc } from '@/app/_trpc/client'
+
+export default function EmailCard({ email, action }: { email: EmailItem; action: any }) {
+    const t = useI18n()
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+
+    const deleteMutation = trpc.cpanelEmails.deleteEmail.useMutation({
+        onError: (error) => {
+            setModalResponse({
+                message: error.message,
+                messageColor: 'text-red-900',
+                borderColor: 'border-red-600',
+                bgColor: 'bg-red-200',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: t('deleteEmailAccount'),
+                description: data.message,
+            })
+        },
+    })
+    const deleteEmail = async () => {
+        deleteMutation.mutate(email.user)
+    }
+
+    return (
+        <Card className='border border-gray-400 shadow-xs'>
+            <CardHeader>
+                <CardTitle>
+                    <div className='flex flex-row items-center'>
+                        <div className='flex flex-col break-all'>
+                            <div className='text-sm font-medium text-foreground'>
+                                <div className='me-2 font-bold'>{email.email}</div>
+                            </div>
+                        </div>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                {email.humandiskused} / {email.humandiskquota !== 'None' ? email.humandiskquota : email.diskquota}
+                <ProgressBar variant='determinate' value={parseInt(email.diskusedpercent)} />
+            </CardContent>
+            <CardFooter className='flex flex-wrap gap-1'>
+                <Button
+                    size='sm'
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: t('emailQuota'),
+                            body: (
+                                <div className='p-4'>
+                                    <EmailQuotaForm email={email.user} action={() => action()} />
+                                </div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {t('quota')}
+                </Button>
+                <Button
+                    size='sm'
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: t('changePassword'),
+                            body: (
+                                <div className='p-4'>
+                                    <EmailPasswordForm email={email.user} action={() => action()} />
+                                </div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {t('password')}
+                </Button>
+                <Button
+                    size='sm'
+                    variant='destructive'
+                    onClick={() => {
+                        setModal({
+                            title: t('delete'),
+                            body: (
+                                <div className='p-4'>
+                                    <div className='flex flex-col gap-4'>
+                                        <div>{t('deleteEmailText')}</div>
+                                        <div className='flex gap-2'>
+                                            <button
+                                                className='rounded bg-green-600 px-2 py-1 text-white'
+                                                onClick={deleteEmail}
+                                            >
+                                                {t('yes')}
+                                            </button>
+                                            <button
+                                                className='rounded bg-red-800 px-2 py-1 text-white'
+                                                onClick={() => {
+                                                    setModal(null)
+                                                }}
+                                            >
+                                                {t('no')}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ),
+                            headerColor: 'bg-red-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {t('delete')}
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}