create-nextjs-cms 0.9.4 → 0.9.6

package/templates/default/components/ConditionalFields.tsx

@@ -1,49 +1,49 @@
-import { FieldClientConfig } from 'nextjs-cms/core/fields'
-import React, { useEffect, useState } from 'react'
-import FormInputs from '@/components/form/FormInputs'
-import { ConditionalField } from 'nextjs-cms/core/types'
-
-export function ConditionalFields({
-    sectionName,
-    conditionalFields,
-    value,
-}: {
-    sectionName: string
-    conditionalFields: ConditionalField[]
-    value: string | number | undefined
-}) {
-    const [conditionalInputs, setConditionalInputs] = useState<FieldClientConfig[]>([])
-
-    useEffect(() => {
-        if (!value) setConditionalInputs([])
-        // Check if the value is in the conditional inputs
-        const _conditionalFields: FieldClientConfig[] = []
-        conditionalFields.filter((conditionalField) => {
-            switch (conditionalField.rule.condition) {
-                case 'equals':
-                    if (value?.toString() === conditionalField.rule.value.toString()) {
-                        // Add the input to the conditional inputs
-                        _conditionalFields.push(conditionalField.field)
-                    }
-                    break
-                case 'notEquals':
-                    if (value?.toString() !== conditionalField.rule.value.toString()) {
-                        // Add the input to the conditional inputs
-                        _conditionalFields.push(conditionalField.field)
-                    }
-                    break
-                default:
-                    return null
-            }
-        })
-        if (_conditionalFields && _conditionalFields.length > 0) {
-            setConditionalInputs(_conditionalFields)
-        } else {
-            setConditionalInputs([])
-        }
-    }, [value])
-
-    return (
-        <>{conditionalInputs.length > 0 ? <FormInputs inputs={conditionalInputs} sectionName={sectionName} /> : null}</>
-    )
-}
+import { FieldClientConfig } from 'nextjs-cms/core/fields'
+import React, { useEffect, useState } from 'react'
+import FormInputs from '@/components/form/FormInputs'
+import { ConditionalField } from 'nextjs-cms/core/types'
+
+export function ConditionalFields({
+    sectionName,
+    conditionalFields,
+    value,
+}: {
+    sectionName: string
+    conditionalFields: ConditionalField[]
+    value: string | number | undefined
+}) {
+    const [conditionalInputs, setConditionalInputs] = useState<FieldClientConfig[]>([])
+
+    useEffect(() => {
+        if (!value) setConditionalInputs([])
+        // Check if the value is in the conditional inputs
+        const _conditionalFields: FieldClientConfig[] = []
+        conditionalFields.filter((conditionalField) => {
+            switch (conditionalField.rule.condition) {
+                case 'equals':
+                    if (value?.toString() === conditionalField.rule.value.toString()) {
+                        // Add the input to the conditional inputs
+                        _conditionalFields.push(conditionalField.field)
+                    }
+                    break
+                case 'notEquals':
+                    if (value?.toString() !== conditionalField.rule.value.toString()) {
+                        // Add the input to the conditional inputs
+                        _conditionalFields.push(conditionalField.field)
+                    }
+                    break
+                default:
+                    return null
+            }
+        })
+        if (_conditionalFields && _conditionalFields.length > 0) {
+            setConditionalInputs(_conditionalFields)
+        } else {
+            setConditionalInputs([])
+        }
+    }, [value])
+
+    return (
+        <>{conditionalInputs.length > 0 ? <FormInputs inputs={conditionalInputs} sectionName={sectionName} /> : null}</>
+    )
+}

package/templates/default/components/ContainerBox.tsx

@@ -1,24 +1,24 @@
-import React from 'react'
-// import { Card, CardContent, CardHeader, CardTitle } from './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 './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/DashboardPageAlt.tsx

@@ -1,45 +1,45 @@
-import { Metadata } from 'next'
-import Image from 'next/image'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export const metadata: Metadata = {
-    title: 'Dashboard',
-    description: 'Example dashboard app built using the components.',
-}
-
-export default function DashboardPage() {
-    const t = useI18n()
-    return (
-        <>
-            <div className='md:hidden'>
-                <Image
-                    src='/examples/dashboard-light.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='block dark:hidden'
-                />
-                <Image
-                    src='/examples/dashboard-dark.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='hidden dark:block'
-                />
-            </div>
-            <div className='hidden flex-col md:flex'>
-                <div className='border-b'>
-                    <div className='flex h-16 items-center px-4'>
-                        <div className='ml-auto flex items-center space-x-4'></div>
-                    </div>
-                </div>
-                <div className='flex-1 space-y-4 p-8 pt-6'>
-                    <div className='flex items-center justify-between space-y-2'>
-                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
-                        <div className='flex items-center space-x-2'></div>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
+import { Metadata } from 'next'
+import Image from 'next/image'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export const metadata: Metadata = {
+    title: 'Dashboard',
+    description: 'Example dashboard app built using the components.',
+}
+
+export default function DashboardPage() {
+    const t = useI18n()
+    return (
+        <>
+            <div className='md:hidden'>
+                <Image
+                    src='/examples/dashboard-light.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='block dark:hidden'
+                />
+                <Image
+                    src='/examples/dashboard-dark.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='hidden dark:block'
+                />
+            </div>
+            <div className='hidden flex-col md:flex'>
+                <div className='border-b'>
+                    <div className='flex h-16 items-center px-4'>
+                        <div className='ml-auto flex items-center space-x-4'></div>
+                    </div>
+                </div>
+                <div className='flex-1 space-y-4 p-8 pt-6'>
+                    <div className='flex items-center justify-between space-y-2'>
+                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
+                        <div className='flex items-center space-x-2'></div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

package/templates/default/components/DefaultNavItems.tsx

@@ -1,3 +1,3 @@
-import { NavItem } from 'nextjs-cms/core/types'
-
-export const DefaultNavItems: NavItem[] = []
+import { NavItem } from 'nextjs-cms/core/types'
+
+export const DefaultNavItems: NavItem[] = []

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/ErrorComponent.tsx

@@ -1,17 +1,17 @@
-import { Alert, AlertDescription } from './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 './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>
+    )
+    
 }