create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/locale/locale-switcher.tsx

@@ -1,98 +1,98 @@
-'use client'
-
-import Link from 'next/link'
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { useSession } from 'nextjs-cms/auth/react'
-import ContainerBox from '@/components/container-box'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-
-type LocaleConfig = {
-    code: string
-    label: string
-    rtl?: boolean
-}
-
-type Props = {
-    section: string
-    itemId?: string
-    currentLocale: LocaleConfig
-    defaultLocale: LocaleConfig
-    existingTranslations: string[]
-    locales: LocaleConfig[]
-    hasUnsavedChanges?: boolean
-    developerOnly?: boolean
-    /** Base path for locale links. Defaults to `/edit/${section}/${itemId}` for hasItems sections. */
-    basePath?: string
-}
-
-export default function LocaleSwitcher({
-    section,
-    itemId,
-    currentLocale,
-    defaultLocale,
-    existingTranslations,
-    locales,
-    hasUnsavedChanges,
-    developerOnly,
-    basePath,
-}: Props) {
-    const t = useI18n()
-    const resolvedBasePath = basePath ?? `/edit/${section}/${itemId}`
-
-    const getHref = (localeCode: string) => {
-        if (localeCode === defaultLocale.code) {
-            return resolvedBasePath
-        }
-        return `${resolvedBasePath}?locale=${localeCode}`
-    }
-
-    const handleClick = (e: React.MouseEvent, localeCode: string) => {
-        if (localeCode === currentLocale.code) {
-            e.preventDefault()
-            return
-        }
-        if (hasUnsavedChanges) {
-            if (!window.confirm(t('unsavedChangesConfirm'))) {
-                e.preventDefault()
-            }
-        }
-    }
-
-    return (
-        <ContainerBox title={t('localesHeading')}>
-            <div className='flex flex-wrap items-center gap-2'>
-                {locales.map((locale) => {
-                    const isActive = locale.code === currentLocale.code
-                    const hasTranslation =
-                        locale.code === defaultLocale.code || existingTranslations.includes(locale.code)
-                    const isDefault = locale.code === defaultLocale.code
-
-                    return (
-                        <Link
-                            key={locale.code}
-                            href={getHref(locale.code)}
-                            onClick={(e) => handleClick(e, locale.code)}
-                            className={cn(
-                                'border-primary/20 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors',
-                                isActive
-                                    ? 'bg-success text-success-foreground'
-                                    : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-                            )}
-                        >
-                            {locale.label}
-                            {isDefault && <span className='text-[10px] opacity-70'>{t('baseLocaleBadge')}</span>}
-                            {hasTranslation && !isDefault && <Check className='h-3 w-3' />}
-                        </Link>
-                    )
-                })}
-            </div>
-            {developerOnly && (
-                <Alert variant='info' className='mt-2 w-full'>
-                    <AlertDescription className='text-md font-bold'>{t('localeSwitcherDevOnly')}</AlertDescription>
-                </Alert>
-            )}
-        </ContainerBox>
-    )
-}
+'use client'
+
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { useSession } from 'nextjs-cms/auth/react'
+import ContainerBox from '@/components/container-box'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+
+type LocaleConfig = {
+    code: string
+    label: string
+    rtl?: boolean
+}
+
+type Props = {
+    section: string
+    itemId?: string
+    currentLocale: LocaleConfig
+    defaultLocale: LocaleConfig
+    existingTranslations: string[]
+    locales: LocaleConfig[]
+    hasUnsavedChanges?: boolean
+    developerOnly?: boolean
+    /** Base path for locale links. Defaults to `/edit/${section}/${itemId}` for hasItems sections. */
+    basePath?: string
+}
+
+export default function LocaleSwitcher({
+    section,
+    itemId,
+    currentLocale,
+    defaultLocale,
+    existingTranslations,
+    locales,
+    hasUnsavedChanges,
+    developerOnly,
+    basePath,
+}: Props) {
+    const t = useI18n()
+    const resolvedBasePath = basePath ?? `/edit/${section}/${itemId}`
+
+    const getHref = (localeCode: string) => {
+        if (localeCode === defaultLocale.code) {
+            return resolvedBasePath
+        }
+        return `${resolvedBasePath}?locale=${localeCode}`
+    }
+
+    const handleClick = (e: React.MouseEvent, localeCode: string) => {
+        if (localeCode === currentLocale.code) {
+            e.preventDefault()
+            return
+        }
+        if (hasUnsavedChanges) {
+            if (!window.confirm(t('unsavedChangesConfirm'))) {
+                e.preventDefault()
+            }
+        }
+    }
+
+    return (
+        <ContainerBox title={t('localesHeading')}>
+            <div className='flex flex-wrap items-center gap-2'>
+                {locales.map((locale) => {
+                    const isActive = locale.code === currentLocale.code
+                    const hasTranslation =
+                        locale.code === defaultLocale.code || existingTranslations.includes(locale.code)
+                    const isDefault = locale.code === defaultLocale.code
+
+                    return (
+                        <Link
+                            key={locale.code}
+                            href={getHref(locale.code)}
+                            onClick={(e) => handleClick(e, locale.code)}
+                            className={cn(
+                                'border-primary/20 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors',
+                                isActive
+                                    ? 'bg-success text-success-foreground'
+                                    : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                            )}
+                        >
+                            {locale.label}
+                            {isDefault && <span className='text-[10px] opacity-70'>{t('baseLocaleBadge')}</span>}
+                            {hasTranslation && !isDefault && <Check className='h-3 w-3' />}
+                        </Link>
+                    )
+                })}
+            </div>
+            {developerOnly && (
+                <Alert variant='info' className='mt-2 w-full'>
+                    <AlertDescription className='text-md font-bold'>{t('localeSwitcherDevOnly')}</AlertDescription>
+                </Alert>
+            )}
+        </ContainerBox>
+    )
+}

package/templates/default/components/media/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/container-box'
-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/container-box'
+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/media/protected-document.tsx

@@ -1,44 +1,44 @@
-import React, { useState } from 'react'
-
-const ProtectedDocument = ({
-    section,
-    fieldName,
-    file,
-    width,
-    height,
-    className = 'rounded-3xl object-cover',
-}: {
-    section: string
-    fieldName: string
-    file: string
-    width: number
-    height: number
-    className?: string
-}) => {
-    const [loading, setLoading] = useState(true)
-
-    const params = new URLSearchParams({
-        name: file,
-        sectionName: section,
-        fieldName: fieldName,
-    })
-    const url = `/api/document?${params.toString()}`
-
-    return (
-        <div className={className}>
-            {loading && (
-                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
-            )}
-            <embed
-                src={url}
-                className='max-w-full'
-                width={width}
-                height={height}
-                onLoad={() => setLoading(false)}
-                style={loading ? { width: 0, height: 0, position: 'absolute' } : undefined}
-            />
-        </div>
-    )
-}
-
-export default ProtectedDocument
+import React, { useState } from 'react'
+
+const ProtectedDocument = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+}) => {
+    const [loading, setLoading] = useState(true)
+
+    const params = new URLSearchParams({
+        name: file,
+        sectionName: section,
+        fieldName: fieldName,
+    })
+    const url = `/api/document?${params.toString()}`
+
+    return (
+        <div className={className}>
+            {loading && (
+                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
+            )}
+            <embed
+                src={url}
+                className='max-w-full'
+                width={width}
+                height={height}
+                onLoad={() => setLoading(false)}
+                style={loading ? { width: 0, height: 0, position: 'absolute' } : undefined}
+            />
+        </div>
+    )
+}
+
+export default ProtectedDocument