create-nextjs-cms 0.5.21 → 0.5.24

package/templates/default/components/NewVariantComponent.tsx

@@ -196,7 +196,7 @@ function NewVariantComponent(
                                         <div className='mt-5'>
                                             <button
                                                 className={classNames({
-                                                    'w-full rounded bg-gradient-to-r p-2 font-bold text-white drop-shadow':
+                                                    'w-full rounded bg-linear-to-r p-2 font-bold text-white drop-shadow-sm':
                                                         true,
                                                     'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
                                                         !isSubmitting,

package/templates/default/components/ProgressBar.tsx

@@ -1,24 +1,48 @@
-import * as React from 'react'
-import { styled } from '@mui/material/styles'
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
+'use client'
 
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-    height: 10,
-    borderRadius: 5,
-    [`&.${linearProgressClasses.colorPrimary}`]: {
-        backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
-    },
-    [`& .${linearProgressClasses.bar}`]: {
-        borderRadius: 5,
-        backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
-    },
-}))
-export default function ProgressBar({
-    value,
-    variant,
-}: {
-    value: number
-    variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query'
-}) {
-    return <BorderLinearProgress variant={variant} value={value} />
+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/SectionItemCard.tsx

@@ -67,7 +67,7 @@ export default function SectionItemCard({
 
     return (
         <>
-            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow'>
+            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
                 {item.coverPhoto ? (
                     <div className='relative h-[200px]'>
                         {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}

package/templates/default/components/SectionItemStatusBadge.tsx

@@ -6,7 +6,7 @@ const SectionItemStatusBadge = ({ status }: { status: number }) => {
     return (
         <Badge
             variant={status === 1 ? 'success' : 'destructive'}
-            className='absolute top-3 shadow left-3 z-30 font-bold'
+            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
         >
             {status === 1 ? getString('approved') : getString('pending_approval')}
         </Badge>

package/templates/default/components/SectionPage.tsx

@@ -100,8 +100,8 @@ export default function SectionPage({ section }: { section: string }) {
             {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-gradient-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                    <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}</h1>
                         <span>
                             /{getString('edit')} {data.section?.title}

package/templates/default/components/SelectBox.tsx

@@ -44,7 +44,7 @@ export default function SelectBox({
                 <>
                     {/*<Listbox.Label className='block text-sm font-medium leading-6 text-gray-900'>Fabrics</Listbox.Label>*/}
                     <div className={`relative ${classname}`}>
-                        <ListboxButton className='relative w-full cursor-default rounded bg-input p-3 pe-1 ps-1 text-start text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6'>
+                        <ListboxButton className='relative w-full cursor-default rounded bg-input p-3 pe-1 ps-1 text-start text-foreground shadow-xs outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6'>
                             <span className='ml-3 block truncate'>{selected?.label ? selected.label : ''}</span>
                             <span className='pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2'>
                                 <ChevronDownIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
@@ -58,7 +58,7 @@ export default function SelectBox({
                             leaveFrom='opacity-100'
                             leaveTo='opacity-0'
                         >
-                            <ListboxOptions className='absolute z-40 mt-1 max-h-56 w-full overflow-auto rounded-md border bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
+                            <ListboxOptions className='absolute z-40 mt-1 max-h-56 w-full overflow-auto rounded-md border bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden sm:text-sm'>
                                 {items.map((item: SelectOption, index: number) => (
                                     <ListboxOption
                                         key={`${item.label}-${index}`}

package/templates/default/components/SettingsPage.tsx

@@ -113,7 +113,7 @@ export default function SettingsPage() {
     return (
         <div>
             <div className='w-full overflow-hidden bg-background'>
-                <div className='bg-gradient-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
+                <div className='bg-linear-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
                     <h1 className='text-3xl'>{getString('accountSettings')}</h1>
                 </div>
                 <div className='flex w-full flex-col'>

package/templates/default/components/Sidebar.tsx

@@ -32,7 +32,7 @@ const Sidebar = (props: SidebarProps) => {
     return (
         <div
             className={classNames({
-                'fixed z-20 h-full bg-gradient-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950 md:translate-x-0':
+                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950 md:translate-x-0':
                     true,
                 'transition-all duration-100 ease-in-out': true,
                 'w-[300px] md:w-[275px]': true,
@@ -55,7 +55,7 @@ const Sidebar = (props: SidebarProps) => {
                         LAZEMNI
                     </span>
                 </div>
-                <ScrollArea type='always' className='flex-grow'>
+                <ScrollArea type='always' className='grow'>
                     <ul
                         className={classNames({
                             'my-2 flex flex-col items-stretch gap-2': true,
@@ -182,7 +182,7 @@ const Sidebar = (props: SidebarProps) => {
                                 width={40}
                                 height={40}
                                 // fill={true}
-                                className='rounded-full ring ring-foreground'
+                                className='rounded-full ring-3 ring-foreground'
                             />
                         ) : (
                             <Image

package/templates/default/components/VariantEditPage.tsx

@@ -154,7 +154,7 @@ export default function VariantEditPage({
         <div>
             <div className='w-full overflow-hidden'>
                 <form onSubmit={handleSubmit}>
-                    <div className='bg-gradient-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-black'>
+                    <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-black'>
                         {data && data.variant && (
                             <>
                                 <h1 className='pb-4 text-4xl'>{data?.variant?.variant_html_name_en}</h1>
@@ -200,7 +200,7 @@ export default function VariantEditPage({
                                         <div className='mt-5'>
                                             <button
                                                 className={classNames({
-                                                    'w-full rounded bg-gradient-to-r p-2 font-bold text-white drop-shadow':
+                                                    'w-full rounded bg-linear-to-r p-2 font-bold text-white drop-shadow-sm':
                                                         true,
                                                     'from-emerald-700 via-green-700 to-green-500': !isSubmitting,
                                                     'from-gray-600 via-gray-500 to-gray-400': isSubmitting,

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

@@ -1,8 +1,8 @@
 'use client'
 
 import * as React from 'react'
-import { addDays, format } from 'date-fns'
-import { DateRange } from 'react-day-picker'
+import dayjs from 'dayjs'
+import type { DateRange } from 'react-day-picker'
 
 import { cn } from 'nextjs-cms/utils'
 import { Button } from '@/components/ui/button'
@@ -13,7 +13,9 @@ import { CalendarIcon } from '@radix-ui/react-icons'
 export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
     const [date, setDate] = React.useState<DateRange | undefined>({
         from: new Date(2020, 0, 20),
-        to: addDays(new Date(2023, 0, 20), 20),
+        to: dayjs(new Date(2023, 0, 20))
+            .add(20, 'day')
+            .toDate(),
     })
 
     return (
@@ -29,10 +31,10 @@ export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivE
                         {date?.from ? (
                             date.to ? (
                                 <>
-                                    {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+                                    {dayjs(date.from).format('MMM DD, YYYY')} - {dayjs(date.to).format('MMM DD, YYYY')}
                                 </>
                             ) : (
-                                format(date.from, 'LLL dd, y')
+                                dayjs(date.from).format('MMM DD, YYYY')
                             )
                         ) : (
                             <span>Pick a date</span>
@@ -41,7 +43,7 @@ export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivE
                 </PopoverTrigger>
                 <PopoverContent className='w-auto p-0' align='start'>
                     <Calendar
-                        initialFocus
+                        autoFocus
                         mode='range'
                         defaultMonth={date?.from}
                         selected={date}

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

@@ -263,7 +263,7 @@ export default function Form({
                                                 className={classNames({
                                                     'w-full': buttonType === 'big',
                                                     'float-end': buttonType === 'small',
-                                                    'rounded bg-gradient-to-r px-4 py-2 font-bold text-white drop-shadow':
+                                                    'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
                                                         true,
                                                     'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
                                                         !isSubmitting,

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

@@ -53,7 +53,7 @@ export default function FormInputElement({
                 })}
             >
                 {readonly ? (
-                    <div className='w-full rounded bg-input p-3 text-foreground shadow-sm outline-0'>{value}</div>
+                    <div className='w-full rounded bg-input p-3 text-foreground shadow-xs outline-0'>{value}</div>
                 ) : (
                     <>
                         {children}

package/templates/default/components/form/helpers/{_section-hot-reload.ts → _section-hot-reload.js}

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const sectionSchemaLastUpdated = 1765801231072
+export const sectionSchemaLastUpdated = 1766066280270

package/templates/default/components/form/helpers/util.ts

@@ -9,7 +9,7 @@ try {
     // Try to import the auto-generated file from root
     // Using dynamic require to handle missing file gracefully
     // @/ alias resolves to the app root directory
-    const sectionInfo = require('./_section-hot-reload.ts')
+    const sectionInfo = require('./_section-hot-reload.js')
     sectionSchemaLastUpdated = sectionInfo?.sectionSchemaLastUpdated ?? Date.now()
 } catch {
     // If file doesn't exist or can't be loaded, use current timestamp as fallback

package/templates/default/components/form/inputs/ColorFormInput.tsx

@@ -37,7 +37,7 @@ export default function ColorFormInput({ input }: { input: ColorFieldClientConfi
                 onBlur={field.onBlur}
                 value={field.value}
                 ref={field.ref}
-                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-sm outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
+                className='h-10 w-full rounded bg-input p-1 text-foreground shadow-xs outline-0 ring-2 ring-blue-300 focus:ring-blue-500'
             />
         </FormInputElement>
     )

package/templates/default/components/form/inputs/DateFormInput.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import dayjs from 'dayjs'
 import FormInputElement from '@/components/form/FormInputElement'
-import { format } from 'date-fns'
-import { cn } from 'nextjs-cms/utils'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { CalendarIcon } from '@radix-ui/react-icons'
+import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import getString from 'nextjs-cms/translations'
 import { DateFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Clock2Icon } from 'lucide-react'
 
 const seasonEmoji: Record<string, string> = {
     winter: '⛄️',
@@ -28,23 +29,29 @@ const getSeason = (month: Date): string => {
 
 const formatCaption = (month: Date, options?: any) => {
     const season = getSeason(month)
-    return seasonEmoji[season] + ' ' + format(month, 'LLLL', { locale: options?.locale })
+    return seasonEmoji[season] + ' ' + dayjs(month).format('MMMM')
 }
 
 export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
     const { control } = useFormContext()
+    const [open, setOpen] = React.useState(false)
     const {
         field,
         fieldState: { invalid, isTouched, isDirty, error },
     } = useController({
         name: input.name,
         control,
-        // defaultValue: input.value ?? undefined,
+        defaultValue: input.value
+            ? dayjs(input.value).isValid()
+                ? dayjs(input.value).toDate()
+                : undefined
+            : undefined,
     })
 
     const [date, setDate] = React.useState<Date | undefined>(
-        dayjs(input.value).isValid() ? dayjs(input.value).toDate() : undefined,
+        input.value ? (dayjs(input.value).isValid() ? dayjs(input.value).toDate() : undefined) : undefined,
     )
+
     return (
         <FormInputElement
             validationError={error}
@@ -58,48 +65,89 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
                 disabled={field.disabled}
                 name={field.name}
                 onBlur={field.onBlur}
-                value={date ? format(date, 'yyyy-MM-dd') : undefined}
+                value={
+                    date
+                        ? dayjs(date).format(input.format !== 'date' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
+                        : undefined
+                }
                 ref={field.ref}
                 className='rounded border p-2'
             />
 
-            <div className='flex flex-col items-start gap-2'>
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <Button
-                            variant={'outline'}
-                            className={cn(
-                                'min-w-[250px] justify-start rounded bg-input px-3 py-6 text-start font-normal text-foreground shadow-sm outline-0 ring-2 ring-gray-300 hover:ring-gray-400 focus:ring-blue-500',
-                                !date && 'text-muted-foreground',
-                            )}
-                        >
-                            <CalendarIcon className='mr-2 h-4 w-4' />
-                            {date ? format(date, 'PPP') : <span>Pick a date</span>}
-                        </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className='w-auto p-0'>
-                        <Calendar
-                            mode='single'
-                            selected={date}
-                            onSelect={(date) => {
-                                setDate(date)
-                                field.onChange(date)
+            <div className='flex flex-row items-start gap-2'>
+                <div>
+                    <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                            <Button variant='outline' id='date' className='justify-between font-normal'>
+                                <div className='flex items-center gap-2'>
+                                    <CalendarIcon />
+                                    {date ? dayjs(date).format('MMMM D, YYYY') : <span>Pick a date</span>}
+                                </div>
+                                <ChevronDownIcon />
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+                            <Calendar
+                                endMonth={new Date(2099, 11)}
+                                mode='single'
+                                captionLayout='dropdown'
+                                selected={date}
+                                onSelect={(newDate) => {
+                                    /**
+                                     * We should preserve the time from the previous date if it is set
+                                     */
+                                    if (input.format !== 'date') {
+                                        const [hours, minutes, seconds] = dayjs(date)
+                                            .format('HH:mm:ss')
+                                            .split(':')
+                                            .map(Number)
+                                        newDate?.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
+                                    }
+                                    setDate(newDate)
+                                    field.onChange(newDate)
+                                }}
+                                autoFocus
+                                className='rounded-lg border'
+                                formatters={{ formatCaption }}
+                            />
+                        </PopoverContent>
+                    </Popover>
+                </div>
+
+                {input.format !== 'date' ? (
+                    <div className='relative flex items-center gap-2'>
+                        <Clock2Icon className='text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none' />
+                        <Input
+                            type='time'
+                            step='1'
+                            defaultValue={'--:--:--'}
+                            value={date ? dayjs(date).format('HH:mm:ss') : '--:--:--'}
+                            onChange={(e) => {
+                                const time = e.target.value
+                                if (time && date) {
+                                    const [hours, minutes, seconds] = time.split(':').map(Number)
+                                    const newDate = new Date(date)
+                                    newDate.setHours(hours ?? 0, minutes ?? 0, seconds ?? 0, 0)
+                                    setDate(newDate)
+                                    field.onChange(newDate)
+                                }
                             }}
-                            initialFocus
-                            formatters={{ formatCaption }}
+                            className='appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
                         />
-                    </PopoverContent>
-                </Popover>
+                    </div>
+                ) : null}
+
                 <Button
+                    className='px-1.5'
                     onClick={() => {
                         setDate(undefined)
                         field.onChange(undefined)
                     }}
                     variant='default'
                     type='button'
-                    size='sm'
+                    size='default'
                 >
-                    {getString('cancel')}
+                    {getString('unset')}
                 </Button>
             </div>
         </FormInputElement>

package/templates/default/components/form/inputs/DocumentFormInput.tsx

@@ -44,7 +44,7 @@ export default function DocumentFormInput({
             file={input.value}
             width={450}
             height={620}
-            className='mb-4 rounded p-1 ring ring-gray-400'
+            className='mb-4 rounded p-1 ring-3 ring-gray-400'
         />
     )
 
@@ -79,7 +79,7 @@ export default function DocumentFormInput({
                             />
                             <embed
                                 src={image}
-                                className='mb-4 max-w-full rounded p-1 ring ring-green-600'
+                                className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
                                 width={350}
                                 height={520}
                             />
@@ -105,7 +105,7 @@ export default function DocumentFormInput({
                 <div className='w-full flex-1 md:flex-[0.5]'>
                     <button
                         type='button'
-                        className='w-full rounded border bg-gradient-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow'
+                        className='w-full rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm'
                         onClick={() => {
                             if (fileInputContainerRef.current?.firstChild) {
                                 ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()