create-nextjs-cms 0.5.8

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import SelectBox from '@/components/SelectBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import SelectInputButtons from '@/components/SelectInputButtons'
+import getString from 'nextjs-cms/translations'
+import { trpc } from '@/app/_trpc/client'
+import { SelectOption } from 'nextjs-cms/core/fields'
+import { RouterOutputs } from 'nextjs-cms/api'
+import { nanoid } from 'nanoid'
+
+type CategorySelect = RouterOutputs['categorySections']['get']['data']
+
+export default function CategorySectionSelectInput({
+    input,
+    refetch,
+    isChild = false,
+}: {
+    input: CategorySelect
+    refetch?: any
+    isChild?: boolean
+}) {
+    /**
+     * Check and add the select option if it does not exist, the select option has a value of undefined
+     */
+    const exists = input.options?.filter((option) => option.value === undefined)
+    if (!exists || exists.length === 0) {
+        if (input.options) {
+            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
+            input.options.unshift({ value: undefined, label: getString('select') })
+        }
+    }
+
+    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [hasMounted, setHasMounted] = useState<boolean>(false)
+    const [value, setValue] = useState<string | number | undefined>(/*getValue(input?.value)*/)
+    const [child, setChild] = useState<CategorySelect | null>(null)
+    const [randomKey, setRandomKey] = useState<string>(nanoid())
+
+    useEffect(() => {
+        if (input) {
+            setChild(null)
+            if (input.depth <= 1) return
+            if (value === undefined) {
+                return
+            }
+            setIsLoading(true)
+            childrenMutation.mutate({
+                parentId: value,
+                sectionName: input.sectionName,
+                level: input.level,
+            })
+        }
+    }, [value])
+
+    if (!input) return null
+
+    const childrenMutation = trpc.categorySections.getChildren.useMutation({
+        onSuccess: (data) => {
+            if (data && data.options) {
+                const childInput: CategorySelect = {
+                    parentId: data.parentId,
+                    sectionName: input.sectionName,
+                    required: input.required,
+                    label: input.label,
+                    name: input.name,
+                    options: data.options,
+                    level: data.level,
+                    depth: input.depth,
+                    value: hasMounted ? undefined : input.value,
+                    allowRecursiveDelete: input.allowRecursiveDelete,
+                }
+                setChild(childInput)
+            } else {
+                setChild(null)
+            }
+
+            setIsLoading(false)
+            setHasMounted(true)
+        },
+        onError: (error) => {},
+        // console.log('Error', error)
+    })
+
+    return (
+        <>
+            {/* @ts-ignore no need for validations in this case */}
+            <FormInputElement label={isChild ? '|->' : input.label} required={input.required}>
+                <SelectBox
+                    // The key is to tell react to re-render the select
+                    // box whenever we change the randomKey value
+                    // (we're doing this after deleting an item from the select)
+                    key={randomKey}
+                    items={input.options ? input.options : []}
+                    onChange={(value: SelectOption | undefined) => {
+                        setValue(value?.value)
+                    }}
+                    classname='w-full shadow-sm'
+                />
+
+                <SelectInputButtons
+                    value={value}
+                    level={input.level}
+                    sectionTitle={input.label}
+                    section={input.name}
+                    parentId={input.parentId}
+                    refetch={() => {
+                        refetch()
+                    }}
+                    reset={() => {
+                        setValue(undefined)
+                        setRandomKey(nanoid())
+                    }}
+                    allowRecursiveDelete={input.allowRecursiveDelete}
+                />
+            </FormInputElement>
+            <div ref={parent}>
+                {isLoading && <LoadingSpinners />}
+                {child && (
+                    <div className='ps-4'>
+                        <CategorySectionSelectInput
+                            refetch={() => {
+                                childrenMutation.mutate({
+                                    parentId: value,
+                                    sectionName: input.sectionName,
+                                    level: input.level,
+                                })
+                            }}
+                            isChild={true}
+                            input={child}
+                        />
+                    </div>
+                )}
+            </div>
+        </>
+    )
+}

package/templates/default/components/ConditionalFields.tsx

@@ -0,0 +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}</>
+    )
+}

package/templates/default/components/ContainerBox.tsx

@@ -0,0 +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-sm 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/DashboardPage.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import getString from 'nextjs-cms/translations'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { humanReadableFileSize } from 'nextjs-cms/utils'
+import PieChartBox from '@/components/PieChartBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import ContainerBox from '@/components/ContainerBox'
+import { trpc } from '@/app/_trpc/client'
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const DashboardPage = () => {
+    const { isLoading, isError, data, error } = trpc.cpanel.getData.useQuery()
+
+    useEffect(() => {}, [])
+
+    return (
+        <div className='w-full'>
+            <div className='bg-gradient-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{getString('dashboard')}</h1>
+            </div>
+            <div className='flex flex-col gap-4 p-4'>
+                {isLoading && (
+                    <div>
+                        <LoadingSpinners />
+                    </div>
+                )}
+                <div className='grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-2 2xl-sidebar:grid-cols-4'>
+                    {data ? (
+                        <>
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: getString('total_disk_space'),
+                                        value: data.diskSpaceLimit - data.diskSpaceUsage,
+                                        fill: '#00C49F',
+                                    },
+                                    {
+                                        name: getString('used_disk_space'),
+                                        value: data.diskSpaceUsage,
+                                        fill: '#E1315B',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: getString('disk_space'),
+                                    totalUnitSubtitle: {
+                                        key: getString('total_disk_space'),
+                                        value: humanReadableFileSize(data.diskSpaceLimit),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: getString('used_disk_space'),
+                                        value: humanReadableFileSize(data.diskSpaceUsage),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: getString('total_bandwidth'),
+                                        value: data.bandwidthLimit - data.bandwidthUsage,
+                                        fill: '#1c89f1',
+                                    },
+                                    {
+                                        name: getString('used_bandwidth'),
+                                        value: data.bandwidthUsage,
+                                        fill: '#ff6688',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: getString('this_moth_bandwidth'),
+                                    totalUnitSubtitle: {
+                                        key: getString('total_bandwidth'),
+                                        value: humanReadableFileSize(data.bandwidthLimit),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: getString('used_bandwidth'),
+                                        value: humanReadableFileSize(data.bandwidthUsage),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: getString('total_emails'),
+                                        value: data.emailsLimit - data.emailsUsage,
+                                        fill: '#c4ba56',
+                                    },
+                                    {
+                                        name: getString('used_emails'),
+                                        value: data.emailsUsage,
+                                        fill: '#1404c4',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: getString('email_accounts'),
+                                    totalUnitSubtitle: {
+                                        key: getString('total_emails'),
+                                        value: data.emailsLimit.toString(),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: getString('used_emails'),
+                                        value: data.emailsUsage.toString(),
+                                    },
+                                }}
+                            />
+                            <PieChartBox
+                                chartData={[
+                                    {
+                                        name: getString('totalDatabases'),
+                                        value: data.dbsLimit - data.dbsCount,
+                                        fill: '#56c4b4',
+                                    },
+                                    {
+                                        name: getString('usedDatabases'),
+                                        value: data.dbsCount,
+                                        fill: '#625bb2',
+                                    },
+                                ]}
+                                chartBoxTitles={{
+                                    mainTitle: 'MySQL®/MariaDB Databases',
+                                    totalUnitSubtitle: {
+                                        key: getString('totalDatabases'),
+                                        value: data.dbsLimit.toString(),
+                                    },
+                                    usedUnitSubtitle: {
+                                        key: getString('usedDatabases'),
+                                        value: data.dbsCount.toString(),
+                                    },
+                                }}
+                            />
+                        </>
+                    ) : null}
+                </div>
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                    <ContainerBox title={getString('accountInformation')}>
+                        <div>PHP Version: {data?.phpVersion}</div>
+                        <div>root: {data?.documentRoot}</div>
+                    </ContainerBox>
+
+                    <ContainerBox title='MySQL/MariaDB'>
+                        <div>
+                            {data?.dbInfo ? (
+                                <>
+                                    <div>Version: {data.dbInfo.version}</div>
+                                    <div>Remote: {data.dbInfo.is_remote}</div>
+                                </>
+                            ) : (
+                                <div>MySQL/MariaDB is not installed</div>
+                            )}
+                        </div>
+                        <div>
+                            {data?.dbsList?.map((db: any, index: number) => (
+                                <div key={`${db.name}_${db.database}_${index}`}>
+                                    <div>database: {db.database}</div>
+                                    <div>Disk Usage: {humanReadableFileSize(db.disk_usage)}</div>
+                                    <div>Users: {db.users?.length}</div>
+                                </div>
+                            ))}
+                        </div>
+                    </ContainerBox>
+                </div>
+                {/*<div>
+                    <ContainerBox title={getString('passengerApplications')}>
+                        <div className='flex gap-4'>
+                            {data?.passengerAppList?.map((app: any) => (
+                                <ContainerBox title={app.name} key={app.name}>
+                                    <div key={app.name + app.path}>
+                                        <div>Name: {app.name}</div>
+                                        <div>Domain: {app.domain}</div>
+                                        <div>Path: {app.path}</div>
+                                        <div>Deployment: {app.deploymentMode}</div>
+                                        <div>Nodejs: {app.nodejs}</div>
+                                        <div>Base URL: {app.url}</div>
+                                        <div>Enabled: {app.enabled}</div>
+                                    </div>
+                                </ContainerBox>
+                            ))}
+                        </div>
+                    </ContainerBox>
+                </div>*/}
+            </div>
+        </div>
+    )
+}
+
+export default DashboardPage

package/templates/default/components/DashboardPageAlt.tsx

@@ -0,0 +1,43 @@
+import { Metadata } from 'next'
+import Image from 'next/image'
+
+export const metadata: Metadata = {
+    title: 'Dashboard',
+    description: 'Example dashboard app built using the components.',
+}
+
+export default function DashboardPage() {
+    return (
+        <>
+            <div className='md:hidden'>
+                <Image
+                    src='/examples/dashboard-light.png'
+                    width={1280}
+                    height={866}
+                    alt='Dashboard'
+                    className='block dark:hidden'
+                />
+                <Image
+                    src='/examples/dashboard-dark.png'
+                    width={1280}
+                    height={866}
+                    alt='Dashboard'
+                    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'>Dashboard</h2>
+                        <div className='flex items-center space-x-2'></div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

package/templates/default/components/DefaultNavItems.tsx

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

package/templates/default/components/Dropzone.tsx

@@ -0,0 +1,153 @@
+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 getString from 'nextjs-cms/translations'
+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 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: getString('delete_gallery_photo'),
+                description: rejectedFiles[0]?.errors[0]?.message
+                    ? rejectedFiles[0].errors[0].message
+                    : getString('error'),
+            })
+        },
+
+        onError: (error: any) => {
+            toast({
+                variant: 'destructive',
+                title: getString('delete_gallery_photo'),
+                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={getString('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'>
+                            {getString('dropzoneText')}
+                        </div>
+                        <div className='text-muted-foreground'>
+                            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)