create-nextjs-cms 0.5.23 → 0.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.23",
+  "version": "0.5.24",
   "private": false,
   "bin": {
     "create-nextjs-cms": "./dist/index.js"
@@ -15,20 +15,18 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.3",
     "js-yaml": "^4.1.1",
-    "prompts": "^2.4.2",
-    "nextjs-cms": "0.5.23"
+    "prompts": "^2.4.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/minimatch": "^5.1.2",
     "@types/prompts": "^2.4.9",
     "eslint": "^9.12.0",
     "prettier": "^3.3.3",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "@lzcms/prettier-config": "0.1.0",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
+    "@lzcms/prettier-config": "0.1.0",
     "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",

package/templates/default/components/NewPage.tsx

@@ -181,8 +181,8 @@ export default function NewPage({
             {isError ? <div>{error?.message}</div> : null}
             {data ? (
                 <div className='flex w-full flex-col'>
-                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                    <div className='text-foreground relative z-1 border-b-2 p-8 pt-12 font-extrabold'>
+                        <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
                         <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
                         <span>
                             /{getString('new')} {data.section?.title.singular}

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/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/helpers/_section-hot-reload.js

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

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-xs 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/MultipleSelectFormInput.tsx

@@ -1,16 +1,10 @@
 import FormInputElement from '@/components/form/FormInputElement'
-import { Autocomplete, Checkbox, Chip, TextField } from '@mui/material'
 import { useEffect, useState } from 'react'
 import * as React from 'react'
-import { useTheme } from 'next-themes'
-
-import { styled } from '@mui/material/styles'
 import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
-import { Square, CheckSquare2 } from 'lucide-react'
 import { useController, useFormContext } from 'react-hook-form'
+import { MultiSelect, MultiSelectOption } from '@/components/multi-select'
 
-const icon = <Square fontSize='small' />
-const checkedIcon = <CheckSquare2 fontSize='small' />
 export default function MultipleSelectFormInput({ input }: { input: SelectMultipleFieldClientConfig }) {
     const { control } = useFormContext()
     const {
@@ -23,42 +17,29 @@ export default function MultipleSelectFormInput({ input }: { input: SelectMultip
     })
 
     const [value, setValue] = useState<SelectOption[] | undefined>([])
-    const { theme } = useTheme()
 
-    const borderColor = theme === 'dark' ? 'rgba(66,72,79,0.46)' : 'rgb(204,204,204)'
-    const darkColor = 'rgba(66,72,79,0.46)' // Replace with the actual color from your screenshot
-    const lightColor = '#f8f9fa' // Replace with the actual color from your screenshot
-    const textColor = theme === 'dark' ? '#f8f9fa' : '#111111'
-    const placeholderColor = theme === 'dark' ? '#bdbdbd' : '#a1a1a1'
+    // Convert SelectOption[] to MultiSelectOption[]
+    const convertToMultiSelectOptions = (options: SelectOption[] | undefined): MultiSelectOption[] => {
+        if (!options) return []
+        return options.map((option) => ({
+            label: option.label.toString(),
+            value: option.value.toString(),
+        }))
+    }
 
-    // Custom styled TextField for Autocomplete
-    const CustomTextField = styled(TextField)({
-        '& .MuiFormLabel-root': {
-            color: placeholderColor,
-        },
-        '& label.Mui-focused': {
-            color: placeholderColor,
-        },
-        '& .MuiInput-underline:after': {
-            borderBottomColor: theme === 'dark' ? lightColor : darkColor,
-        },
-        '& .MuiOutlinedInput-root': {
-            '& fieldset': {
-                borderColor: borderColor,
-                borderWidth: 2,
-                borderRadius: 8,
-            },
-            '&:hover fieldset': {
-                borderColor: theme === 'dark' ? lightColor : darkColor,
-            },
-            '&.Mui-focused fieldset': {
-                borderColor: '#5572fa',
-            },
-            '& input': {
-                color: textColor,
-            },
-        },
-    })
+    // Convert string[] to SelectOption[]
+    const convertFromStringArray = (values: string[], options: SelectOption[] | undefined): SelectOption[] => {
+        if (!options || !values) return []
+        return values
+            .map((value) => options.find((option) => option.value.toString() === value))
+            .filter(Boolean) as SelectOption[]
+    }
+
+    // Convert SelectOption[] to string[]
+    const convertToStringArray = (options: SelectOption[] | undefined): string[] => {
+        if (!options) return []
+        return options.map((option) => option.value.toString())
+    }
 
     useEffect(() => {
         if (input.value && input.value?.length > 0) {
@@ -66,6 +47,15 @@ export default function MultipleSelectFormInput({ input }: { input: SelectMultip
         }
     }, [input.value])
 
+    const multiSelectOptions = convertToMultiSelectOptions(input.options)
+    const currentValue = convertToStringArray(field.value || [])
+
+    const handleValueChange = (newValues: string[]) => {
+        const selectOptions = convertFromStringArray(newValues, input.options)
+        field.onChange(selectOptions)
+        setValue(selectOptions)
+    }
+
     return (
         <FormInputElement validationError={error} label={input.label} required={input.required}>
             <input
@@ -78,72 +68,15 @@ export default function MultipleSelectFormInput({ input }: { input: SelectMultip
                 value={JSON.stringify(field.value)}
             />
 
-            <Autocomplete
-                className=''
-                multiple
-                options={input.options ? input.options : []}
-                disableCloseOnSelect
-                getOptionLabel={(option) => option.label.toString()}
-                renderOption={(props, option, { selected }) => (
-                    <li {...props}>
-                        <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
-                        {option.label}
-                    </li>
-                )}
-                sx={{
-                    '& .MuiAutocomplete-inputRoot': {
-                        color: lightColor, // text color
-                        '& .MuiAutocomplete-endAdornment': {
-                            color: lightColor,
-                        },
-                    },
-                    '& .MuiAutocomplete-popupIndicator': {
-                        color: lightColor,
-                    },
-                    '& .MuiAutocomplete-clearIndicator': {
-                        color: lightColor,
-                    },
-                    '& .MuiPaper-root': {
-                        bgcolor: darkColor, // dropdown background color
-                        color: lightColor, // option text color
-                        '& .MuiAutocomplete-option': {
-                            '&:hover': {
-                                bgcolor: lightColor, // option hover color
-                                color: darkColor,
-                            },
-                            '&[aria-selected="true"]': {
-                                bgcolor: lightColor, // option selected color
-                                color: darkColor,
-                            },
-                            '&[data-focus="true"]': {
-                                bgcolor: lightColor, // option focused color
-                                color: darkColor,
-                            },
-                        },
-                    },
-                }}
-                defaultValue={input.value ? input.value : []}
-                renderInput={(params) => (
-                    <CustomTextField
-                        className='w-full bg-input text-foreground'
-                        {...params}
-                        label={input.label}
-                        placeholder={input.label}
-                    />
-                )}
-                isOptionEqualToValue={(option, value) => option.value.toString() === value.value.toString()}
-                onChange={(event, newInputValue) => {
-                    if (newInputValue) {
-                        field.onChange(newInputValue)
-                        setValue(newInputValue)
-                    }
-                }}
-                disableClearable={true}
-                renderTags={(tagValue, getTagProps) => {
-                    return tagValue.map((option, index) => (
-                        <Chip color='primary' {...getTagProps({ index })} key={option.value} label={option.label} />
-                    ))
-                }}
+            <MultiSelect
+                variant='default'
+                maxCount={100}
+                options={multiSelectOptions}
+                onValueChange={handleValueChange}
+                defaultValue={currentValue}
+                // placeholder={input.label || 'Select options'}
+                disabled={field.disabled}
+                className='w-full py-3 ring-2 ring-gray-300'
             />
         </FormInputElement>
     )

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

@@ -86,6 +86,8 @@ export default function RichTextFormInput({ input }: { input: RichTextFieldClien
             required={input.required}
         >
             <Editor
+                api-key='no-api-key'
+                licenseKey='gpl'
                 // TODO: Is this expensive?
                 onEditorChange={(content) => {
                     setValue(input.name, content, { shouldValidate: true })