create-nextjs-cms 0.9.21 → 0.9.23

package/templates/default/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import { SidebarProps } from 'nextjs-cms/core/types'
 import SidebarItem from '@/components/SidebarItem'
 import SidebarDropdownItem from '@/components/SidebarDropdownItem'
+import SidebarPluginGroup from '@/components/SidebarPluginGroup'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useI18n } from 'nextjs-cms/translations/client'
 import ProtectedImage from '@/components/ProtectedImage'
@@ -89,6 +90,30 @@ const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string;
                                     </div>
                                 )}
 
+                                {navItems.plugin_sections && navItems.plugin_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('plugins')}</h2>
+                                        {navItems.plugin_sections.map((item, index) => {
+                                            if (item.kind === 'group') {
+                                                return (
+                                                    <SidebarPluginGroup
+                                                        closeSideBar={props.closeSideBar}
+                                                        key={index}
+                                                        group={item}
+                                                    />
+                                                )
+                                            }
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
                                 {navItems.cat_sections && navItems.cat_sections.length > 0 && (
                                     <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
                                         <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>

package/templates/default/components/SidebarPluginGroup.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+import { useState } from 'react'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import type { SidebarPluginGroupProps } from 'nextjs-cms/core/types'
+import SectionIcon from '@/components/SectionIcon'
+
+export default function SidebarPluginGroup({ group, closeSideBar }: SidebarPluginGroupProps) {
+    const [parent] = useAutoAnimate()
+    const [open, setOpen] = useState(false)
+    return (
+        <div ref={parent}>
+            <div
+                className={classNames({
+                    'flex cursor-pointer text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true,
+                    'gap-4 rounded-md p-2': true,
+                    'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
+                })}
+                onClick={() => setOpen((prev) => !prev)}
+            >
+                <li className='relative flex w-full items-center justify-between gap-2'>
+                    <span className='flex items-center gap-2 text-start'>
+                        {group.icon && <SectionIcon name={group.icon} className='size-4' />}
+                        <span>{group.title}</span>
+                    </span>
+                    <span>
+                        {open ? (
+                            <ChevronUpIcon className='h-5 w-5' />
+                        ) : (
+                            <ChevronDownIcon className='h-5 w-5' />
+                        )}
+                    </span>
+                </li>
+            </div>
+            {open && (
+                <div
+                    className={classNames({
+                        'rounded border border-t-0 border-indigo-700/50 text-white dark:border-emerald-600/50': true,
+                        'flex flex-col items-stretch rounded-md rounded-t-none py-2': true,
+                    })}
+                >
+                    {group.children.map((child, index) => (
+                        <Link
+                            key={index}
+                            onClick={closeSideBar}
+                            href={child.path}
+                            className={classNames({
+                                'flex rounded text-white hover:underline': true,
+                                'mx-3 gap-2 p-2': true,
+                            })}
+                        >
+                            <li className='flex flex-row items-center gap-2'>
+                                {child.icon && <SectionIcon name={child.icon} className='size-4' />}
+                                <span>{child.title}</span>
+                            </li>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

package/templates/default/components/VariantCard.tsx

@@ -3,7 +3,7 @@ import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
 import { Variant } from 'nextjs-cms/core/types'
 import useModal from '@/hooks/useModal'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { handleVariantDeletion } from '@/lib/apiHelpers'
 import { useToast } from '@/components/ui/use-toast'
 import { Button } from '@/components/ui/button'

package/templates/default/components/VariantEditPage.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { getVariantPage } from '@/lib/apiHelpers'
 import React, { RefObject, useEffect, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'

package/templates/default/components/analytics/BounceRate.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import { PieChartDataItem } from 'nextjs-cms/core/types'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useTheme } from 'next-themes'
 
 export const BounceRate = ({ fromDate, toDate }: { fromDate: Date | string | null; toDate: Date | string | null }) => {

package/templates/default/components/analytics/LivePageViews.tsx

@@ -2,7 +2,7 @@ import { useI18n } from 'nextjs-cms/translations/client'
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import ContainerBox from '@/components/ContainerBox'
 import React, { useEffect } from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 

package/templates/default/components/analytics/LiveUsersCount.tsx

@@ -2,7 +2,7 @@ import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/MonthlyPageViews.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { useTheme } from 'next-themes'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 
 export const MonthlyPageViews = ({
     fromDate,

package/templates/default/components/analytics/TopCountries.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TopDevices.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TopMediums.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React, { useEffect } from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TopSources.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@/components/ui/badge'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TotalPageViews.tsx

@@ -2,7 +2,7 @@ import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TotalSessions.tsx

@@ -2,7 +2,7 @@ import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/analytics/TotalUniqueUsers.tsx

@@ -2,7 +2,7 @@ import { useI18n } from 'nextjs-cms/translations/client'
 import { formatNumber } from 'nextjs-cms/utils'
 import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { useQuery } from '@tanstack/react-query'
 import { getAnalytics } from '@/lib/apiHelpers'
 import LoadingSpinners from '@/components/LoadingSpinners'

package/templates/default/components/custom/RightHomeRoomVariantCard.tsx

@@ -3,7 +3,7 @@ import ContainerBox from '@/components/ContainerBox'
 import React from 'react'
 import { Variant } from 'nextjs-cms/core/types'
 import useModal from '@/hooks/useModal'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { handleVariantDeletion } from '@/lib/apiHelpers'
 import { useToast } from '@/components/ui/use-toast'
 import { Button } from '@/components/ui/button'

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

@@ -1,4 +1,4 @@
-import type { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from '@/app/_trpc/types'
 import React, { RefObject, useCallback, useEffect } from 'react'
 import ContainerBox from '@/components/ContainerBox'
 import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
@@ -24,6 +24,7 @@ import {
     SelectFieldClientConfig,
     SelectMultipleFieldClientConfig,
     SlugFieldClientConfig,
+    TagsFieldClientConfig,
     TextAreaFieldClientConfig,
     TextFieldClientConfig,
     VideoFieldClientConfig,
@@ -44,6 +45,7 @@ import {
     selectFieldSchema,
     selectMultipleFieldSchema,
     slugFieldSchema,
+    tagsFieldSchema,
     textareaFieldSchema,
     textFieldSchema,
     videoFieldSchema,
@@ -230,6 +232,12 @@ export default function Form({
                     })
                     break
 
+                case 'tags':
+                    schema = schema.extend({
+                        [input.name]: tagsFieldSchema(input as TagsFieldClientConfig, language),
+                    })
+                    break
+
                 case 'slug':
                     schema = schema.extend({
                         [input.name]: slugFieldSchema(input as SlugFieldClientConfig, language),

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

@@ -1,136 +1,138 @@
-import React from 'react'
-import ColorFormInput from '@/components/form/inputs/ColorFormInput'
-import NumberFormInput from '@/components/form/inputs/NumberFormInput'
-import TextFormInput from '@/components/form/inputs/TextFormInput'
-import DateFormInput from '@/components/form/inputs/DateFormInput'
-import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
-import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
-import SelectFormInput from '@/components/form/inputs/SelectFormInput'
-import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
-import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
-import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
-import TagsFormInput from '@/components/form/inputs/TagsFormInput'
-import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
-import MapFormInput from '@/components/form/inputs/MapFormInput'
-import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
-import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
-import VideoFormInput from '@/components/form/inputs/VideoFormInput'
-import SlugFormInput from '@/components/form/inputs/SlugFormInput'
-import type { FieldClientConfig } from 'nextjs-cms/core/fields'
-import {
-    CheckboxFieldClientConfig,
-    ColorFieldClientConfig,
-    DateFieldClientConfig,
-    DateRangeFieldClientConfig,
-    DocumentFieldClientConfig,
-    MapFieldClientConfig,
-    NumberFieldClientConfig,
-    PasswordFieldClientConfig,
-    PhotoFieldClientConfig,
-    RichTextFieldClientConfig,
-    SelectFieldClientConfig,
-    SelectMultipleFieldClientConfig,
-    TagsFieldClientConfig,
-    TextAreaFieldClientConfig,
-    TextFieldClientConfig,
-    VideoFieldClientConfig,
-    SlugFieldClientConfig,
-} from 'nextjs-cms/core/fields'
-
-export default function FormInputs({
-    inputs,
-    sectionName,
-    submitSuccessCount = 0,
-}: {
-    inputs: FieldClientConfig[]
-    sectionName: string
-    submitSuccessCount?: number
-}) {
-    return (
-        <>
-            {inputs?.length > 0 &&
-                inputs?.map((input) => {
-                    switch (input.type) {
-                        case 'color':
-                            return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
-                        case 'number':
-                            return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
-                        case 'text':
-                            return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
-                        case 'date':
-                            return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
-                        case 'date_range':
-                            return (
-                                <DateRangeFormInput
-                                    input={input as DateRangeFieldClientConfig}
-                                    key={(input as DateRangeFieldClientConfig).startName}
-                                />
-                            )
-                        case 'rich_text':
-                            return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
-                        case 'textarea':
-                            return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
-                        case 'select':
-                            return (
-                                <SelectFormInput
-                                    sectionName={sectionName}
-                                    input={input as SelectFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'select_multiple':
-                            return (
-                                <MultipleSelectFormInput
-                                    input={input as SelectMultipleFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'photo':
-                            return (
-                                <PhotoFormInput
-                                    sectionName={sectionName}
-                                    input={input as PhotoFieldClientConfig}
-                                    submitSuccessCount={submitSuccessCount}
-                                    key={input.name}
-                                />
-                            )
-                        case 'video':
-                            return (
-                                <VideoFormInput
-                                    sectionName={sectionName}
-                                    input={input as VideoFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'document':
-                            return (
-                                <DocumentFormInput
-                                    sectionName={sectionName}
-                                    input={input as DocumentFieldClientConfig}
-                                    key={input.name}
-                                />
-                            )
-                        case 'password':
-                            return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
-                        case 'tags':
-                            return (
-                                <TagsFormInput
-                                    input={input as TagsFieldClientConfig}
-                                    sectionName={sectionName}
-                                    key={input.name}
-                                />
-                            )
-                        case 'map':
-                            return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
-                        case 'checkbox':
-                            // case 'permission':
-                            return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
-                        case 'slug':
-                            return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
-                        default:
-                            return null
-                    }
-                })}
-        </>
-    )
-}
+import type { FieldClientConfig } from 'nextjs-cms/core/fields'
+import React from 'react'
+import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
+import ColorFormInput from '@/components/form/inputs/ColorFormInput'
+import DateFormInput from '@/components/form/inputs/DateFormInput'
+import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
+import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
+import MapFormInput from '@/components/form/inputs/MapFormInput'
+import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
+import NumberFormInput from '@/components/form/inputs/NumberFormInput'
+import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
+import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
+import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
+import SelectFormInput from '@/components/form/inputs/SelectFormInput'
+import SlugFormInput from '@/components/form/inputs/SlugFormInput'
+import TagsFormInput from '@/components/form/inputs/TagsFormInput'
+import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
+import TextFormInput from '@/components/form/inputs/TextFormInput'
+import VideoFormInput from '@/components/form/inputs/VideoFormInput'
+import {
+    CheckboxFieldClientConfig,
+    ColorFieldClientConfig,
+    DateFieldClientConfig,
+    DateRangeFieldClientConfig,
+    DocumentFieldClientConfig,
+    MapFieldClientConfig,
+    NumberFieldClientConfig,
+    PasswordFieldClientConfig,
+    PhotoFieldClientConfig,
+    RichTextFieldClientConfig,
+    SelectFieldClientConfig,
+    SelectMultipleFieldClientConfig,
+    SlugFieldClientConfig,
+    TagsFieldClientConfig,
+    TextAreaFieldClientConfig,
+    TextFieldClientConfig,
+    VideoFieldClientConfig,
+} from 'nextjs-cms/core/fields'
+
+export default function FormInputs({
+    inputs,
+    sectionName,
+    submitSuccessCount = 0,
+}: {
+    inputs: FieldClientConfig[]
+    sectionName: string
+    submitSuccessCount?: number
+}) {
+    return (
+        <>
+            {inputs?.length > 0 &&
+                inputs?.map((input) => {
+                    switch (input.type) {
+                        case 'color':
+                            return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
+                        case 'number':
+                            return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
+                        case 'text':
+                            return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
+                        case 'date':
+                            return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
+                        case 'date_range':
+                            return (
+                                <DateRangeFormInput
+                                    input={input as DateRangeFieldClientConfig}
+                                    key={(input as DateRangeFieldClientConfig).startName}
+                                />
+                            )
+                        case 'rich_text':
+                            return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
+                        case 'textarea':
+                            return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
+                        case 'select':
+                            return (
+                                <SelectFormInput
+                                    sectionName={sectionName}
+                                    input={input as SelectFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'select_multiple':
+                            return (
+                                <MultipleSelectFormInput
+                                    input={input as SelectMultipleFieldClientConfig}
+                                    key={input.name}
+                                />
+                            )
+                        case 'photo':
+                            return (
+                                <PhotoFormInput
+                                    sectionName={sectionName}
+                                    input={input as PhotoFieldClientConfig}
+                                    submitSuccessCount={submitSuccessCount}
+                                    key={input.name}
+                                />
+                            )
+                        case 'video':
+                            return (
+                                <VideoFormInput
+                                    sectionName={sectionName}
+                                    input={input as VideoFieldClientConfig}
+                                    submitSuccessCount={submitSuccessCount}
+                                    key={input.name}
+                                />
+                            )
+                        case 'document':
+                            return (
+                                <DocumentFormInput
+                                    sectionName={sectionName}
+                                    input={input as DocumentFieldClientConfig}
+                                    submitSuccessCount={submitSuccessCount}
+                                    key={input.name}
+                                />
+                            )
+                        case 'password':
+                            return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
+                        case 'tags':
+                            return (
+                                <TagsFormInput
+                                    input={input as TagsFieldClientConfig}
+                                    sectionName={sectionName}
+                                    key={input.name}
+                                />
+                            )
+                        case 'map':
+                            return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
+                        case 'checkbox':
+                            // case 'permission':
+                            return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
+                        case 'slug':
+                            return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
+                        default:
+                            return null
+                    }
+                })}
+        </>
+    )
+}

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

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1776644832680
+export const configLastUpdated = 1778067978055