create-nextjs-cms 0.5.67 → 0.5.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.67",
+  "version": "0.5.68",
   "private": false,
   "type": "module",
   "bin": {

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/PluginClient.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import React, { useMemo } from 'react'
+import { trpc } from '@/app/_trpc/client'
+import { getPluginClientLoader } from './plugin-registry'
+
+type PluginClientProps = {
+    packageName: string
+    component: string
+}
+
+const isComponentType = (value: unknown): value is React.ComponentType<any> => {
+    if (typeof value === 'function') return true
+    if (typeof value === 'object' && value !== null && '$$typeof' in value) return true
+    return false
+}
+
+export function PluginClient({ packageName, component }: PluginClientProps) {
+    const loader = getPluginClientLoader(packageName)
+    if (!loader) {
+        return <div className='text-destructive p-6 text-sm'>Plugin client package not registered: {packageName}</div>
+    }
+
+    const Component = useMemo(
+        () =>
+            dynamic(
+                async () => {
+                    const mod = await loader()
+                    const resolved =
+                        (mod.components && mod.components[component]) ||
+                        (mod as Record<string, React.ComponentType<any>>)[component] ||
+                        mod.default
+
+                    if (!resolved || !isComponentType(resolved)) {
+                        return {
+                            default: () => (
+                                <div className='text-destructive p-6 text-sm'>
+                                    Plugin component not found: {component}
+                                </div>
+                            ),
+                        }
+                    }
+
+                    return { default: resolved }
+                },
+                { ssr: false },
+            ),
+        [component, loader],
+    )
+
+    return <Component trpc={trpc} />
+}
+
+export default PluginClient

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/page.tsx

@@ -0,0 +1,41 @@
+import { notFound, redirect } from 'next/navigation'
+import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
+import { findPluginRouteByPath } from 'nextjs-cms/plugins/server'
+import PluginClient from './PluginClient'
+
+export const dynamic = 'force-dynamic'
+type Params = Promise<{ slug?: string[] }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    const slug = params.slug ?? []
+
+    if (slug[0] === 'plugin') {
+        const rest = slug.slice(1)
+        if (rest.length === 0) {
+            const routes = await api.plugins.routes()
+            const target = routes[0]?.path
+            if (target) {
+                redirect(target)
+            }
+            notFound()
+        }
+        redirect(`/${rest.join('/')}`)
+    }
+
+    const path = `/${slug.join('/')}`
+    const route = await findPluginRouteByPath(path)
+    if (!route) {
+        notFound()
+    }
+
+    if (route.prefetch) {
+        await route.prefetch({ api })
+    }
+
+    return (
+        <HydrateClient>
+            <PluginClient packageName={route.pluginId} component={route.component} />
+        </HydrateClient>
+    )
+}

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

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react'
+
+export type PluginClientComponent = ComponentType<any>
+
+export type PluginClientModule = {
+    components?: Record<string, PluginClientComponent>
+    default?: unknown
+    [key: string]: unknown
+}
+
+export type PluginClientLoader = () => Promise<PluginClientModule>
+
+// Keep this list in sync with cms.config.ts and apps/cms/package.json.
+const pluginClientLoaders: Record<string, PluginClientLoader> = {}
+
+export const getPluginClientLoader = (packageName: string) => pluginClientLoaders[packageName]

package/templates/default/app/(rootLayout)/page.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
-
-import Dashboard from './dashboard/page'
+import { redirect } from 'next/navigation'
+import { getPluginRoutes } from 'nextjs-cms/plugins/server'
 
 export const dynamic = 'force-dynamic'
 
-export default function Home() {
-    return <Dashboard />
+export default async function Home() {
+    const routes = await getPluginRoutes()
+    const target = routes[0]?.path ?? '/admins'
+    redirect(target)
 }

package/templates/default/app/_trpc/client.ts

@@ -1,4 +1,4 @@
 import type { AppRouter } from 'nextjs-cms/api'
-import { createTRPCReact} from '@trpc/react-query'
+import { createTRPCReact } from '@trpc/react-query'
 
 export const trpc = createTRPCReact<AppRouter>()

package/templates/default/app/api/trpc/[trpc]/route.ts

@@ -1,5 +1,5 @@
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
-import { appRouter, createTRPCContext } from 'nextjs-cms/api'
+import { createTRPCContext, getAppRouter } from 'nextjs-cms/api'
 import { NextRequest } from 'next/server'
 
 /**
@@ -13,11 +13,11 @@ const context = async (req: NextRequest) => {
     })
 }
 
-const handler = (req: NextRequest) =>
+const handler = async (req: NextRequest) =>
     fetchRequestHandler({
         endpoint: '/api/trpc',
         req,
-        router: appRouter,
+        router: await getAppRouter(),
         createContext: () => context(req),
         /*onError(opts) {
             return opts.error

package/templates/default/cms.config.ts

@@ -2,8 +2,7 @@ import type { CMSConfig } from 'nextjs-cms/core/config'
 import process from 'process'
 import { resolve } from 'path'
 
-export const config: CMSConfig = {
-    ui: {
+export const config: CMSConfig = {
         title: 'NEXT CMS Admin',
         defaultTheme: 'dark',
         logo: '/logo.svg',

package/templates/default/components/AdminCard.tsx

@@ -9,7 +9,7 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { trpc } from '@/app/_trpc/client'
 import Image from 'next/image'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function AdminCard({
     admin,

package/templates/default/components/AdminPrivilegeCard.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import getString from 'nextjs-cms/translations'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function AdminRoleCard({
     privilege,

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -7,7 +7,7 @@ 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 type { RouterOutputs } from 'nextjs-cms/api'
 import { nanoid } from 'nanoid'
 
 type CategorySelect = RouterOutputs['categorySections']['get']['data']

package/templates/default/components/DashboardPage.tsx

@@ -11,7 +11,7 @@ import { trpc } from '@/app/_trpc/client'
 ChartJS.register(ArcElement, Tooltip, Legend)
 
 const DashboardPage = () => {
-    const { isLoading, isError, data, error } = trpc.cpanel.getData.useQuery()
+    const { isLoading, isError, data, error } = trpc.cpanelDashboard.getData.useQuery()
 
     useEffect(() => {}, [])
 

package/templates/default/components/EmailCard.tsx

@@ -14,7 +14,7 @@ export default function EmailCard({ email, action }: { email: EmailItem; action:
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
-    const deleteMutation = trpc.cpanel.deleteEmail.useMutation({
+    const deleteMutation = trpc.cpanelEmails.deleteEmail.useMutation({
         onError: (error) => {
             setModalResponse({
                 message: error.message,

package/templates/default/components/EmailPasswordForm.tsx

@@ -9,7 +9,7 @@ export default function EmailPasswordForm({ email, action }: { email: string; ac
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
 
     const { toast } = useToast()
-    const quotaMutation = trpc.cpanel.passwordChange.useMutation({
+    const quotaMutation = trpc.cpanelEmails.passwordChange.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/EmailQuotaForm.tsx

@@ -10,7 +10,7 @@ export default function EmailQuotaForm({ email, action }: { email: string; actio
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
 
-    const quotaMutation = trpc.cpanel.quotaChange.useMutation({
+    const quotaMutation = trpc.cpanelEmails.quotaChange.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/EmailsPage.tsx

@@ -11,7 +11,7 @@ import { trpc } from '@/app/_trpc/client'
 const EmailsPage = () => {
     const controller = new AbortController()
 
-    const { isLoading, isError, data, error, refetch } = trpc.cpanel.getEmails.useQuery()
+    const { isLoading, isError, data, error, refetch } = trpc.cpanelEmails.getEmails.useQuery()
 
     useEffect(() => {
         return () => {

package/templates/default/components/NewAdminForm.tsx

@@ -6,7 +6,7 @@ import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
 import AdminRoleCard from '@/components/AdminPrivilegeCard'
 import { Button } from '@/components/ui/button'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 export default function NewAdminForm({
     privileges,

package/templates/default/components/NewEmailForm.tsx

@@ -10,7 +10,7 @@ export default function NewEmailForm({ action }: { action: any }) {
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const formRef = React.useRef<HTMLFormElement>(null)
     const { toast } = useToast()
-    const newEmailMutation = trpc.cpanel.createEmail.useMutation({
+    const newEmailMutation = trpc.cpanelEmails.createEmail.useMutation({
         onError: (error) => {
             setModal({
                 title: getString('error'),

package/templates/default/components/SectionItemCard.tsx

@@ -9,7 +9,7 @@ import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/componen
 import { Button } from '@/components/ui/button'
 import { PersonIcon } from '@radix-ui/react-icons'
 import { trpc } from '@/app/_trpc/client'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 
 // Used to get elements of array types as types
 type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never

package/templates/default/components/Sidebar.tsx

@@ -51,7 +51,7 @@ const Sidebar = (props: SidebarProps) => {
                         'justify-between p-4': true,
                     })}
                 >
-                    <span className='bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[1em] hover:ring-0'>
+                    <span className='bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[0.1em] hover:ring-0'>
                         nextjs-cms
                     </span>
                 </div>

package/templates/default/components/form/Form.tsx

@@ -8,7 +8,7 @@ import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComp
 import classNames from 'classnames'
 import ProgressBar from '@/components/ProgressBar'
 import React, { RefObject, useEffect } from 'react'
-import { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from 'nextjs-cms/api'
 import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm, FormProvider } from 'react-hook-form'

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1766857134012
+export const configLastUpdated = 1767359297387

package/templates/default/package.json

@@ -64,7 +64,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.5.67",
+    "nextjs-cms": "0.5.68",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",
@@ -97,7 +97,7 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "fs-extra": "^11.3.3",
-    "nextjs-cms-kit": "0.5.67",
+    "nextjs-cms-kit": "0.5.68",
     "postcss": "^8.5.1",
     "prettier": "3.5.0",
     "raw-loader": "^4.0.2",

package/templates/default/app/(rootLayout)/analytics/page.tsx

@@ -1,7 +0,0 @@
-import AnalyticsPage from '@/components/AnalyticsPage'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page() {
-    return <AnalyticsPage />
-}

package/templates/default/app/(rootLayout)/dashboard/page.tsx

@@ -1,7 +0,0 @@
-import DashboardPage from '@/components/DashboardPage'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page() {
-    return <DashboardPage />
-}

package/templates/default/app/(rootLayout)/emails/page.tsx

@@ -1,6 +0,0 @@
-import EmailsPage from '@/components/EmailsPage'
-
-export const dynamic = 'force-dynamic'
-export default async function Page() {
-    return <EmailsPage />
-}