npm - create-nextjs-cms - Versions diffs - 0.5.70 → 0.5.71 - Mend

create-nextjs-cms 0.5.70 → 0.5.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.70",
+  "version": "0.5.71",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/tsconfig": "0.1.0",
-    "@lzcms/prettier-config": "0.1.0"
+    "@lzcms/prettier-config": "0.1.0",
+    "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-server-registry.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import dynamic from 'next/dynamic'
-import { _pluginNamesMap } from './.plugin-registry.mjs'
 export const pluginNamesMap: Record<string, string> = {
-    ..._pluginNamesMap,
+    'cpanel-dashboard': '@nextjs-cms-plugins/cpanel-dashboard/server',
+    'cpanel-emails': '@nextjs-cms-plugins/cpanel-emails/server',
+    'google-analytics': '@nextjs-cms-plugins/google-analytics/server',
     // A workaround to avoid importing error if no plugins are installed
     blank: 'nextjs-cms/plugins/blank-component',
 }

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ export default async function Page(props: { params: Params; searchParams: Search
     const searchParams = await props.searchParams
     const { q } = searchParams
     const { section, page } = params
     await api.hasItemsSections.listItems.prefetch({
         sectionName: section,
         page: parseInt(page) ?? 1,

package/templates/default/app/(rootLayout)/layout.tsx CHANGED Viewed

@@ -1,12 +1,14 @@
 import Layout from '@/components/Layout'
 import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import { getCMSConfig } from 'nextjs-cms/core'
 export default async function CMSLayout({ children }: { children: React.ReactNode }) {
     await api.navigation.getSidebar.prefetch()
+    const cmsConfig = await getCMSConfig()
     return (
         <HydrateClient>
-            <Layout>{children}</Layout>
+            <Layout logoUrlPath={cmsConfig.ui.logo}>{children}</Layout>
         </HydrateClient>
     )
 }

package/templates/default/app/layout.tsx CHANGED Viewed

@@ -5,23 +5,29 @@ import { cn } from '@/lib/utils'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
-export const metadata: Metadata = {
-    title: 'nextjs-cms',
-    description: 'nextjs-cms',
-}
+import { getCMSConfig } from 'nextjs-cms/core'
 const inter = Inter({
     subsets: ['latin'],
     variable: '--font-sans',
 })
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+      title: cmsConfig.ui.title,
+      description: 'nextjs-cms',
+  }
+}
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
     const session = await auth()
+    const cmsConfig = await getCMSConfig()
     return (
         <html lang='en' suppressHydrationWarning>
             <body className={cn('bg-background min-h-screen font-sans antialiased', inter.variable)}>
-                <ThemeProvider attribute='class' defaultTheme='dark' enableSystem disableTransitionOnChange>
+                <ThemeProvider attribute='class' defaultTheme={cmsConfig.ui.defaultTheme} enableSystem disableTransitionOnChange>
                     <Providers session={session ?? undefined}>{children}</Providers>
                 </ThemeProvider>
             </body>

package/templates/default/cms.config.ts CHANGED Viewed

@@ -3,9 +3,8 @@ import process from 'process'
 import { resolve } from 'path'
 export const config: CMSConfig = {
-        title: 'NEXT CMS Admin',
+        title: 'NEXTJS CMS',
         defaultTheme: 'dark',
-        logo: '/logo.svg',
     },
     debug: true,
     sections: {

package/templates/default/components/AdminsPage.tsx CHANGED Viewed

@@ -4,12 +4,16 @@ import AdminCard from '@/components/AdminCard'
 import getString from 'nextjs-cms/translations'
 import NewAdminForm from '@/components/NewAdminForm'
 import ContainerBox from '@/components/ContainerBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import { trpc } from '@/app/_trpc/client'
+import ErrorComponent from './ErrorComponent'
 const AdminsPage = () => {
-    const { isLoading, isError, data, error, refetch } = trpc.admins.list.useQuery()
+    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
+    if (data.error) {
+        return <ErrorComponent message={data.error.message} />
+    }
     return (
         <div className='w-full'>
             <div className='bg-linear-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'>
@@ -21,11 +25,6 @@ const AdminsPage = () => {
                     {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
                 </ContainerBox>
-                {isLoading && (
-                    <div>
-                        <LoadingSpinners />
-                    </div>
-                )}
                 {data && data.admins && data.admins.length > 0 && (
                     <ContainerBox title={getString('admins_list')}>
                         <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>

package/templates/default/components/BarChartBox.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
-import React from 'react'
 import ContainerBox from '@/components/ContainerBox'
-import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
 import { BarChartDataItem } from 'nextjs-cms/core/types'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/BrowsePage.tsx CHANGED Viewed

@@ -1,9 +1,8 @@
 'use client'
-import React, { useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import getString from 'nextjs-cms/translations'
 import SectionItemCard from '@/components/SectionItemCard'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import ContainerBox from '@/components/ContainerBox'
 import Pagination from '@/components/pagination/Pagination'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -12,8 +11,8 @@ import { Input } from './ui/input'
 import { Button } from './ui/button'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { trpc } from '@/app/_trpc/client'
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 import { capitalizeWords } from 'nextjs-cms/utils'
+import ErrorComponent from '@/components/ErrorComponent'
 export default function BrowsePage({ section, page }: { section: string; page: string }) {
     const pageInt = parseInt(page) ?? 1
@@ -21,13 +20,15 @@ export default function BrowsePage({ section, page }: { section: string; page: s
     const router = useRouter()
     const q = params.get('q') ?? ''
     const searchInputRef = useRef<HTMLInputElement>(null)
-    const { isLoading, isError, data, error, refetch } = trpc.hasItemsSections.listItems.useQuery({
+    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
         sectionName: section,
         page: pageInt,
         q,
     })
-    useEffect(() => {}, [])
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
     return (
         <div>
@@ -67,23 +68,9 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                     </Card>
                 ) : null}
                 <ContainerBox title={getString('browse')}>
-                    {isLoading ? (
-                        <div>
-                            <LoadingSpinners />
-                        </div>
-                    ) : null}
-                    {data ? (
-                        <>
-                            {data.error ? (
-                                <Alert variant='destructive' className='my-8'>
-                                    <AlertDescription className='text-md font-bold'>
-                                        <div className='flex items-center gap-1.5'>
-                                            <ExclamationTriangleIcon className='h-5 w-5' /> {data.error.message}
-                                        </div>
-                                    </AlertDescription>
-                                </Alert>
-                            ) : data.items && data.items.length > 0 ? (
+                            { data.items && data.items.length > 0 ? (
                                 <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
                                     {data.items.map((item, index: number) => (
                                         <SectionItemCard
@@ -99,8 +86,7 @@ export default function BrowsePage({ section, page }: { section: string; page: s
                                     <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
                                 </Alert>
                             )}
-                        </>
-                    ) : null}
                 </ContainerBox>
                 {data?.totalCount && data?.totalCount > 0 ? (
                     <Pagination

package/templates/default/components/CategorizedSectionPage.tsx CHANGED Viewed

@@ -1,16 +1,17 @@
 'use client'
-import React, { useEffect } from 'react'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import { trpc } from '@/app/_trpc/client'
 import CategorySectionSelectInput from '@/components/CategorySectionSelectInput'
+import ErrorComponent from '@/components/ErrorComponent'
 export default function CategorizedSectionPage({ section }: { section: string }) {
-    const { isLoading, isError, data, error, refetch } = trpc.categorySections.get.useQuery({
+    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
         sectionName: section,
     })
-    useEffect(() => {}, [])
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
     return (
         <div>
@@ -21,12 +22,6 @@ export default function CategorizedSectionPage({ section }: { section: string })
                 </div>
                 <div className='flex w-full flex-col'>
                     <div className='rounded-xl p-4 shadow-sm'>
-                        {isLoading && (
-                            <div>
-                                <LoadingSpinners />
-                            </div>
-                        )}
                         {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
                     </div>
                 </div>

package/templates/default/components/EmailsPage.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client'
-import React, { useEffect } from 'react'
+import  { useEffect } from 'react'
 import { EmailItem } from 'nextjs-cms/core/types'
 import getString from 'nextjs-cms/translations'
 import ContainerBox from '@/components/ContainerBox'

package/templates/default/components/ErrorComponent.tsx ADDED Viewed

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

package/templates/default/components/GalleryPhoto.tsx CHANGED Viewed

@@ -2,13 +2,12 @@ import { PhotoGalleryItem } from 'nextjs-cms/core/types'
 import getString from 'nextjs-cms/translations'
 import { MinusIcon } from '@radix-ui/react-icons'
 import ProtectedImage from '@/components/ProtectedImage'
-import React from 'react'
 import useModal from '@/hooks/useModal'
 import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; sectionName: string; action?: any }) => {
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { setModal, setModalResponse } = useModal()
     const deleteMutation = trpc.gallery.deletePhoto.useMutation({
         onError: (error) => {
             toast({

package/templates/default/components/InfoCard.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 'use client'
 import Link from 'next/link'
-import React from 'react'
 import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
 type result = {

package/templates/default/components/ItemEditPage.tsx CHANGED Viewed

@@ -1,19 +1,19 @@
 'use client'
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import React, { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 import { SectionType } from 'nextjs-cms/core/types'
 import getString from 'nextjs-cms/translations'
 import useModal from '@/hooks/useModal'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
 import { useRouter } from 'next/navigation'
-import LoadingSpinners from '@/components/LoadingSpinners'
 import { useToast } from '@/components/ui/use-toast'
 import { DropzoneHandles } from '@/components/Dropzone'
 import { VariantHandles } from '@/components/NewVariantComponent'
 import { trpc } from '@/app/_trpc/client'
 import Form from '@/components/form/Form'
+import ErrorComponent from '@/components/ErrorComponent'
 export default function ItemEditPage({
     section,
@@ -42,7 +42,7 @@ export default function ItemEditPage({
     const router = useRouter()
     const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
     const variantRef: RefObject<VariantHandles[]> = useRef([])
-    const { isLoading, isError, data, error, refetch } = trpc.hasItemsSections.editItem.useQuery({
+    const [data, {refetch}] = trpc.hasItemsSections.editItem.useSuspenseQuery({
         sectionName: section,
         sectionItemId: itemId,
     })
@@ -182,36 +182,32 @@ export default function ItemEditPage({
         }
     }, [])
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
     return (
         <div className='flex w-full flex-col overflow-hidden'>
-            {isLoading ? (
-                <div>
-                    <LoadingSpinners />
-                </div>
-            ) : null}
-            {isError ? <div>{error?.message}</div> : null}
-            {data ? (
-                <div className='flex w-full flex-col'>
-                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
-                        <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
-                        <span>
-                            /{getString('edit')} {data.section?.title.singular}
-                        </span>
-                    </div>
-                    <Form
-                        formType='edit'
-                        progressVariant={progressVariant}
-                        response={response}
-                        progress={progress}
-                        data={data}
-                        dropzoneRef={dropzoneRef}
-                        variantRef={variantRef}
-                        handleSubmit={handleSubmit}
-                        isSubmitting={isSubmitting}
-                    />
+            <div className='flex w-full flex-col'>
+                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                    <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
+                    <span>
+                        /{getString('edit')} {data.section?.title.singular}
+                    </span>
                 </div>
-            ) : null}
+                <Form
+                    formType='edit'
+                    progressVariant={progressVariant}
+                    response={response}
+                    progress={progress}
+                    data={data}
+                    dropzoneRef={dropzoneRef}
+                    variantRef={variantRef}
+                    handleSubmit={handleSubmit}
+                    isSubmitting={isSubmitting}
+                />
+            </div>
         </div>
     )
 }

package/templates/default/components/Layout.tsx CHANGED Viewed

@@ -2,14 +2,14 @@
 import classNames from 'classnames'
 import React, { useState } from 'react'
-import Navbar from '@/components/NavbarAlt'
+import Navbar from '@/components/Navbar'
 import Sidebar from '@/components/Sidebar'
 import Modal from '@/components/Modal'
 import { Toaster } from '@/components/ui/toaster'
 import { useSession } from 'nextjs-cms/auth/react'
 import LoadingSpinners from '@/components/LoadingSpinners'
-function Layout({ children }: { children: React.ReactNode }) {
+function Layout({ children, logoUrlPath }: { children: React.ReactNode, logoUrlPath: string }) {
     const [showMobileSidebar, setShowMobileSidebar] = useState(false)
     const session = useSession({
         required: true,
@@ -34,6 +34,7 @@ function Layout({ children }: { children: React.ReactNode }) {
                                 setShowMobileSidebar(false)
                             }}
                             mobileSidebar={showMobileSidebar}
+                            logoUrlPath={logoUrlPath}
                         />
                         {showMobileSidebar && (
                             // Display a black transparent div to close the sidebar when clicked outside

package/templates/default/components/LogPage.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 'use client'
 import getString from 'nextjs-cms/translations'
-import React from 'react'
 export default function LogPage() {
     return (

package/templates/default/components/Modal.tsx CHANGED Viewed

@@ -1,16 +1,22 @@
 'use client'
-import React, { Fragment, useEffect, useRef } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { useEffect, useRef, useState } from 'react'
 import useModal from '@/hooks/useModal'
 import classNames from 'classnames'
 import { X } from 'lucide-react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
 function Modal() {
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const [open, setOpen] = useState(false)
     const handleClose = () => {
-        setModal(null)
+        setOpen(false)
+        // Close after 100ms
+        setTimeout(() => {
+            setModal(null)
+        }, 200)
     }
     const cancelButtonRef = useRef(null)
@@ -18,9 +24,59 @@ function Modal() {
     useEffect(() => {
         if (!modal) {
             setModalResponse(null)
+        } else {
+            setOpen(true)
         }
     }, [modal])
+    if (!modal) return null
+    return (
+        <Dialog open={open} onOpenChange={handleClose}>
+            <DialogContent
+                showCloseButton={false}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => e.preventDefault()}
+                onPointerDownOutside={(e) => e.preventDefault()}
+                className={classNames({
+                    'bg-background w-full rounded-lg p-0 text-start': true,
+                    'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
+                    'max-w-2xl': modal?.size === 'md',
+                    'max-w-4xl': modal?.size === 'lg',
+                    'max-w-6xl': modal?.size === 'xl',
+                })}
+            >
+                <DialogHeader>
+                    <DialogTitle
+                        className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal?.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal?.headerColor}`}
+                    >
+                        <div>{modal?.title || ''}</div>
+                        <X
+                            className={`absolute ${
+                                modal?.lang === 'ar' ? 'left-5' : 'right-5'
+                            } size-4 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block lg:size-6`}
+                            onClick={handleClose}
+                            ref={cancelButtonRef}
+                        />
+                    </DialogTitle>
+                </DialogHeader>
+                <div className='max-h-[calc(90vh-120px)] min-h-0 flex-1 overflow-y-auto'>
+                    <div className='flex flex-col gap-1'>
+                        <div className='w-full overflow-hidden'>
+                            <div className='flex w-full flex-col font-semibold'>
+                                <div className='text-foreground w-full'>{modal?.body}</div>
+                                <div className='w-full'>
+                                    {modalResponse && <div className={`w-full p-3`}>{modalResponse.message}</div>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+    /*
     return (
         <Transition.Root show={modal !== null} as={Fragment}>
             <Dialog as='div' className='relative z-50' initialFocus={cancelButtonRef} onClose={handleClose}>
@@ -49,7 +105,7 @@ function Modal() {
                         >
                             <Dialog.Panel
                                 className={classNames({
-                                    'relative w-full rounded-lg bg-background text-start shadow-xl transition-all sm:my-8':
+                                    'bg-background relative w-full rounded-lg text-start shadow-xl transition-all sm:my-8':
                                         true,
                                     'max-w-lg': modal?.size === 'sm' || modal?.size === undefined,
                                     'max-w-2xl': modal?.size === 'md',
@@ -57,12 +113,12 @@ function Modal() {
                                     'max-w-6xl': modal?.size === 'xl',
                                 })}
                             >
-                                <div className='rounded-lg bg-background'>
+                                <div className='bg-background rounded-lg'>
                                     {modal && (
                                         <div className='flex flex-col gap-1'>
                                             <div className='w-full overflow-hidden rounded'>
                                                 <div
-                                                    className={`flex items-center rounded-t-lg text-xl font-semibold leading-6 ${modal.titleColor} p-6 pb-4 pt-5 md:pe-20 ${modal.headerColor}`}
+                                                    className={`flex items-center rounded-t-lg text-xl leading-6 font-semibold ${modal.titleColor} p-6 pt-5 pb-4 md:pe-20 ${modal.headerColor}`}
                                                 >
                                                     <Dialog.Title as='h3' className='pe-5'>
                                                         {modal.title}
@@ -76,7 +132,7 @@ function Modal() {
                                                     />
                                                 </div>
                                                 <div className='flex w-full flex-col font-semibold'>
-                                                    <div className='w-full text-foreground'>{modal.body}</div>
+                                                    <div className='text-foreground w-full'>{modal.body}</div>
                                                     <div className='w-full'>
                                                         {modalResponse && (
                                                             <div className={`w-full p-3`}>{modalResponse.message}</div>
@@ -94,6 +150,7 @@ function Modal() {
             </Dialog>
         </Transition.Root>
     )
+    */
 }
 export default Modal