create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/feedback/modal.tsx

@@ -1,166 +1,166 @@
-'use client'
-
-import { Suspense, useEffect, useRef, useState } from 'react'
-import { useModal } from '@/components/feedback/modal-context'
-import classNames from 'classnames'
-import { X, Loader2 } from 'lucide-react'
-
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
-
-function ModalLoadingFallback() {
-    return (
-        <div className='flex min-h-[200px] items-center justify-center p-8'>
-            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
-        </div>
-    )
-}
-
-function Modal() {
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const [open, setOpen] = useState(false)
-
-    const handleClose = () => {
-        setOpen(false)
-        // Close after 100ms
-        setTimeout(() => {
-            setModal(null)
-        }, 200)
-    }
-
-    const cancelButtonRef = useRef(null)
-
-    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 end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                            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'>
-                                    <Suspense fallback={<ModalLoadingFallback />}>
-                                        {modal?.body}
-                                    </Suspense>
-                                </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}>
-                <Transition.Child
-                    as={Fragment}
-                    enter='ease-out duration-300'
-                    enterFrom='opacity-0'
-                    enterTo='opacity-100'
-                    leave='ease-in duration-200'
-                    leaveFrom='opacity-100'
-                    leaveTo='opacity-0'
-                >
-                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
-                </Transition.Child>
-
-                <div className='fixed inset-0 z-10 overflow-y-auto'>
-                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
-                        <Transition.Child
-                            as={Fragment}
-                            enter='ease-out duration-300'
-                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                            enterTo='opacity-100 translate-y-0 sm:scale-100'
-                            leave='ease-in duration-200'
-                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                        >
-                            <Dialog.Panel
-                                className={classNames({
-                                    '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',
-                                    'max-w-4xl': modal?.size === 'lg',
-                                    'max-w-6xl': modal?.size === 'xl',
-                                })}
-                            >
-                                <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 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}
-                                                    </Dialog.Title>
-                                                    <X
-                                                        className={`absolute ${
-                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
-                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
-                                                        onClick={handleClose}
-                                                        ref={cancelButtonRef}
-                                                    />
-                                                </div>
-                                                <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>
-                            </Dialog.Panel>
-                        </Transition.Child>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
-    )
-    */
-}
-
-export default Modal
+'use client'
+
+import { Suspense, useEffect, useRef, useState } from 'react'
+import { useModal } from '@/components/feedback/modal-context'
+import classNames from 'classnames'
+import { X, Loader2 } from 'lucide-react'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/custom-dialog'
+
+function ModalLoadingFallback() {
+    return (
+        <div className='flex min-h-[200px] items-center justify-center p-8'>
+            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
+        </div>
+    )
+}
+
+function Modal() {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const [open, setOpen] = useState(false)
+
+    const handleClose = () => {
+        setOpen(false)
+        // Close after 100ms
+        setTimeout(() => {
+            setModal(null)
+        }, 200)
+    }
+
+    const cancelButtonRef = useRef(null)
+
+    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 end-5 size-6 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                            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'>
+                                    <Suspense fallback={<ModalLoadingFallback />}>
+                                        {modal?.body}
+                                    </Suspense>
+                                </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}>
+                <Transition.Child
+                    as={Fragment}
+                    enter='ease-out duration-300'
+                    enterFrom='opacity-0'
+                    enterTo='opacity-100'
+                    leave='ease-in duration-200'
+                    leaveFrom='opacity-100'
+                    leaveTo='opacity-0'
+                >
+                    <div className='fixed inset-0 bg-gray-500/50 backdrop-blur-md transition-opacity' />
+                </Transition.Child>
+
+                <div className='fixed inset-0 z-10 overflow-y-auto'>
+                    <div className='flex min-h-full items-end justify-center p-4 text-start sm:items-start sm:p-0'>
+                        <Transition.Child
+                            as={Fragment}
+                            enter='ease-out duration-300'
+                            enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                            enterTo='opacity-100 translate-y-0 sm:scale-100'
+                            leave='ease-in duration-200'
+                            leaveFrom='opacity-100 translate-y-0 sm:scale-100'
+                            leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+                        >
+                            <Dialog.Panel
+                                className={classNames({
+                                    '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',
+                                    'max-w-4xl': modal?.size === 'lg',
+                                    'max-w-6xl': modal?.size === 'xl',
+                                })}
+                            >
+                                <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 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}
+                                                    </Dialog.Title>
+                                                    <X
+                                                        className={`absolute ${
+                                                            modal.lang === 'ar' ? 'left-5' : 'right-5'
+                                                        } hidden h-7 w-7 cursor-pointer rounded bg-white text-gray-500 hover:opacity-90 md:block`}
+                                                        onClick={handleClose}
+                                                        ref={cancelButtonRef}
+                                                    />
+                                                </div>
+                                                <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>
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    )
+    */
+}
+
+export default Modal

package/templates/default/components/feedback/progress-bar.tsx

@@ -1,48 +1,48 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { Progress } from '@/components/ui/progress'
-
-export default function ProgressBar({ value, variant }: { value: number; variant?: 'determinate' | 'query' }) {
-    const { theme } = useTheme()
-    const isDark = theme === 'dark'
-
-    // Colors that match the original Material-UI version exactly
-    const bgColor = isDark ? '#424242' : '#eeeeee' // grey[800] : grey[200]
-    const progressColor = isDark ? '#308fe8' : '#1a90ff'
-
-    // Query variant shows indeterminate animation
-    const shouldShowIndeterminate = variant === 'query'
-
-    if (shouldShowIndeterminate) {
-        return (
-            <div
-                className='relative h-[10px] w-full overflow-hidden rounded-[5px]'
-                style={{ backgroundColor: bgColor }}
-            >
-                <div
-                    className='h-full rounded-[5px]'
-                    style={{
-                        backgroundColor: progressColor,
-                        width: '30%',
-                        animation: 'progress-indeterminate 1.5s ease-in-out infinite',
-                    }}
-                />
-            </div>
-        )
-    }
-
-    return (
-        <div
-            className='progress-bar-custom relative w-full'
-            style={
-                {
-                    '--progress-bg': bgColor,
-                    '--progress-fg': progressColor,
-                } as React.CSSProperties
-            }
-        >
-            <Progress value={value} className='h-[10px] rounded-[5px] border-0 p-0' />
-        </div>
-    )
-}
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Progress } from '@/components/ui/progress'
+
+export default function ProgressBar({ value, variant }: { value: number; variant?: 'determinate' | 'query' }) {
+    const { theme } = useTheme()
+    const isDark = theme === 'dark'
+
+    // Colors that match the original Material-UI version exactly
+    const bgColor = isDark ? '#424242' : '#eeeeee' // grey[800] : grey[200]
+    const progressColor = isDark ? '#308fe8' : '#1a90ff'
+
+    // Query variant shows indeterminate animation
+    const shouldShowIndeterminate = variant === 'query'
+
+    if (shouldShowIndeterminate) {
+        return (
+            <div
+                className='relative h-[10px] w-full overflow-hidden rounded-[5px]'
+                style={{ backgroundColor: bgColor }}
+            >
+                <div
+                    className='h-full rounded-[5px]'
+                    style={{
+                        backgroundColor: progressColor,
+                        width: '30%',
+                        animation: 'progress-indeterminate 1.5s ease-in-out infinite',
+                    }}
+                />
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className='progress-bar-custom relative w-full'
+            style={
+                {
+                    '--progress-bg': bgColor,
+                    '--progress-fg': progressColor,
+                } as React.CSSProperties
+            }
+        >
+            <Progress value={value} className='h-[10px] rounded-[5px] border-0 p-0' />
+        </div>
+    )
+}

package/templates/default/components/feedback/tooltip-component.tsx

@@ -1,27 +1,27 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-export default function TooltipComponent({
-    children,
-    content,
-    delayDuration = 200,
-}: {
-    children: React.ReactNode
-    content: React.ReactNode
-    delayDuration?: number
-}) {
-    if (!content) return children
-    return (
-        <TooltipProvider delayDuration={delayDuration}>
-            <Tooltip>
-                <TooltipTrigger
-                    onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                    }}
-                >
-                    {children}
-                </TooltipTrigger>
-                <TooltipContent>{content}</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    )
-}
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+export default function TooltipComponent({
+    children,
+    content,
+    delayDuration = 200,
+}: {
+    children: React.ReactNode
+    content: React.ReactNode
+    delayDuration?: number
+}) {
+    if (!content) return children
+    return (
+        <TooltipProvider delayDuration={delayDuration}>
+            <Tooltip>
+                <TooltipTrigger
+                    onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                    }}
+                >
+                    {children}
+                </TooltipTrigger>
+                <TooltipContent>{content}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    )
+}

package/templates/default/components/form/form-input-element.tsx

@@ -1,70 +1,70 @@
-import React from 'react'
-import classNames from 'classnames'
-import { Badge } from '@/components/ui/badge'
-import { FieldError } from 'react-hook-form'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function FormInputElement({
-    label,
-    required = false,
-    readonly = false,
-    classes = '',
-    direction = 'row',
-    value,
-    children,
-    validationError,
-}: {
-    label: string
-    required: boolean | string
-    readonly?: boolean
-    classes?: string
-    direction?: 'row' | 'col'
-    value?: any
-    children: React.ReactNode
-    validationError: FieldError | undefined
-}) {
-    const t = useI18n()
-    return (
-        <div
-            className={classNames({
-                'items-center py-2': true,
-                'flex flex-col': direction === 'col',
-                'items-center px-3 md-sidebar:grid md-sidebar:grid-cols-10': direction === 'row',
-                classes: classes,
-            })}
-        >
-            <label
-                className={classNames({
-                    'block pe-3 font-bold text-foreground': true,
-                    'w-full text-start': direction === 'col',
-                    'col-span-10 pb-1 md-sidebar:col-span-2 md-sidebar:pb-0 md-sidebar:text-end': direction === 'row',
-                })}
-            >
-                {label} {['true', 1, true].includes(required) ? '*' : null}
-                {readonly ? (
-                    <>
-                        {' '}
-                        <Badge variant={'primary'}>{t('readonly')}</Badge>
-                    </>
-                ) : null}
-            </label>
-            <div
-                className={classNames({
-                    'col-span-8': direction === 'row',
-                    'w-full': direction === 'col',
-                })}
-            >
-                {readonly ? (
-                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
-                ) : (
-                    <>
-                        {children}
-                        {validationError ? (
-                            <div className='mt-1 text-sm text-red-500'>{validationError.message}</div>
-                        ) : null}
-                    </>
-                )}
-            </div>
-        </div>
-    )
-}
+import React from 'react'
+import classNames from 'classnames'
+import { Badge } from '@/components/ui/badge'
+import { FieldError } from 'react-hook-form'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function FormInputElement({
+    label,
+    required = false,
+    readonly = false,
+    classes = '',
+    direction = 'row',
+    value,
+    children,
+    validationError,
+}: {
+    label: string
+    required: boolean | string
+    readonly?: boolean
+    classes?: string
+    direction?: 'row' | 'col'
+    value?: any
+    children: React.ReactNode
+    validationError: FieldError | undefined
+}) {
+    const t = useI18n()
+    return (
+        <div
+            className={classNames({
+                'items-center py-2': true,
+                'flex flex-col': direction === 'col',
+                'items-center px-3 md-sidebar:grid md-sidebar:grid-cols-10': direction === 'row',
+                classes: classes,
+            })}
+        >
+            <label
+                className={classNames({
+                    'block pe-3 font-bold text-foreground': true,
+                    'w-full text-start': direction === 'col',
+                    'col-span-10 pb-1 md-sidebar:col-span-2 md-sidebar:pb-0 md-sidebar:text-end': direction === 'row',
+                })}
+            >
+                {label} {['true', 1, true].includes(required) ? '*' : null}
+                {readonly ? (
+                    <>
+                        {' '}
+                        <Badge variant={'primary'}>{t('readonly')}</Badge>
+                    </>
+                ) : null}
+            </label>
+            <div
+                className={classNames({
+                    'col-span-8': direction === 'row',
+                    'w-full': direction === 'col',
+                })}
+            >
+                {readonly ? (
+                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
+                ) : (
+                    <>
+                        {children}
+                        {validationError ? (
+                            <div className='mt-1 text-sm text-red-500'>{validationError.message}</div>
+                        ) : null}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}

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

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