create-nextjs-cms 0.9.21 → 0.9.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/templates/default/components/form/FormInputs.tsx +138 -136
  3. package/templates/default/components/form/helpers/_section-hot-reload.js +1 -1
  4. package/templates/default/components/form/inputs/DocumentFormInput.tsx +270 -222
  5. package/templates/default/components/form/inputs/SelectFormInput.tsx +16 -16
  6. package/templates/default/components/form/inputs/VideoFormInput.tsx +270 -118
  7. package/templates/default/dynamic-schemas/schema.ts +202 -31
  8. package/templates/default/package.json +1 -1
package/templates/default/components/form/inputs/DocumentFormInput.tsx CHANGED
@@ -1,222 +1,270 @@
1
- import React, { useRef, useState } from 'react'
2
- import { useI18n } from 'nextjs-cms/translations/client'
3
- import FormInputElement from '@/components/form/FormInputElement'
4
- import ProtectedDocument from '@/components/ProtectedDocument'
5
- import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
6
- import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
7
- import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
8
- import { Badge } from '@/components/ui/badge'
9
- import useModal from '@/hooks/useModal'
10
- import { useController, useFormContext } from 'react-hook-form'
11
-
12
- export default function DocumentFormInput({
13
- input,
14
- sectionName,
15
- }: {
16
- input: DocumentFieldClientConfig
17
- sectionName: string
18
- }) {
19
- const t = useI18n()
20
- const { control } = useFormContext()
21
- const {
22
- field,
23
- fieldState: { invalid, isTouched, isDirty, error },
24
- } = useController({
25
- name: input.name,
26
- control,
27
- defaultValue: undefined,
28
- })
29
-
30
- const [fileName, setFileName] = useState(t('noFileSelected'))
31
- const fileInputContainerRef = useRef<HTMLDivElement>(null)
32
- const [image, setImage] = useState<string | null>(null)
33
- const { setModal } = useModal()
34
-
35
- const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
36
- if (event.target.files && event.target.files[0]) {
37
- const file = event.target.files[0]
38
- const fileExtension = file.name.split('.').pop()?.toLowerCase()
39
-
40
- // Check if file extension is allowed
41
- if (input.extensions && !input.extensions.includes(fileExtension || '')) {
42
- // File extension not allowed - reset and don't display
43
- setFileName(t('noFileSelected'))
44
- setImage(null)
45
- // Clear the input value
46
- if (fileInputContainerRef.current?.firstChild) {
47
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
48
- }
49
- return
50
- }
51
-
52
- setFileName(file.name || t('noFileSelected'))
53
- setImage(URL.createObjectURL(file))
54
- } else {
55
- setFileName(t('noFileSelected'))
56
- setImage(null)
57
- }
58
- }
59
-
60
- const document = (
61
- <ProtectedDocument
62
- section={sectionName}
63
- fieldName={input.name}
64
- file={input.value}
65
- width={450}
66
- height={620}
67
- className='mb-4 rounded p-1 ring-3 ring-gray-400'
68
- />
69
- )
70
-
71
- const handleDocumentDelete = () => {}
72
-
73
- return (
74
- <FormInputElement
75
- validationError={error}
76
- value={document}
77
- readonly={input.readonly}
78
- label={input.label}
79
- required={input.required}
80
- >
81
- <Card className='flex max-w-full flex-col'>
82
- <CardHeader>
83
- <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
84
- <span>{input.label} </span>
85
- {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
86
- </CardTitle>
87
- </CardHeader>
88
- <CardContent className='flex flex-col gap-1'>
89
- <div className='mb-2 flex flex-col text-sm'>
90
- {input.maxFileSize ? (
91
- <div dir='ltr' className='flex flex-wrap items-center gap-2'>
92
- <InfoIcon size={14} />
93
- <span>{t('maxFileSize')}:</span>
94
- <Badge
95
- variant={'secondary'}
96
- >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
97
- </div>
98
- ) : null}
99
- {input.extensions ? (
100
- <div dir='ltr' className='flex flex-wrap items-center gap-2'>
101
- <InfoIcon size={14} />
102
- <span>{t('allowedExtensions')}:</span>
103
- <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
104
- </div>
105
- ) : null}
106
- </div>
107
- <div className='flex flex-col gap-4'>
108
- {input.value ? document : null}
109
- {image ? (
110
- <div className='relative flex items-center'>
111
- <ChevronRight fontSize='large' />
112
- <div className='relative'>
113
- <X
114
- className='absolute -top-3 -right-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
115
- onClick={() => {
116
- setImage(null)
117
- setFileName(t('noFileSelected'))
118
- field.onChange(undefined)
119
- if (fileInputContainerRef.current) {
120
- /**
121
- * Clear the child input value
122
- */
123
- if (fileInputContainerRef.current?.firstChild) {
124
- ;(
125
- fileInputContainerRef.current.firstChild as HTMLInputElement
126
- ).value = ''
127
- }
128
- }
129
- }}
130
- />
131
- <embed
132
- src={image}
133
- className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
134
- width={350}
135
- height={520}
136
- />
137
- </div>
138
- </div>
139
- ) : null}
140
- </div>
141
- <div ref={fileInputContainerRef}>
142
- <input
143
- type='file'
144
- className='hidden'
145
- name={field.name}
146
- ref={field.ref}
147
- accept={input.extensions ? input.extensions.map((ext) => `.${ext}`).join(',') : undefined}
148
- onChange={(e) => {
149
- onImageChange(e)
150
- if (!input.value) {
151
- field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
152
- }
153
- }}
154
- />
155
- </div>
156
- <div className='flex flex-col items-center gap-2 md:flex-row'>
157
- <div className='flex w-full flex-col'>
158
- {[false, 'false', 0].includes(input.required) &&
159
- !['', null, undefined].includes(input.value) ? (
160
- <div className='w-[400px] max-w-full'>
161
- <button
162
- type='button'
163
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-red-400 hover:to-amber-400'
164
- onClick={() => {
165
- setModal({
166
- title: t('deletePhoto'),
167
- body: (
168
- <div className='p-4'>
169
- <div className='flex flex-col gap-4'>
170
- <div>{t('deletePhotoText')}</div>
171
- <div className='flex gap-2'>
172
- <button
173
- className='rounded bg-green-600 px-2 py-1 text-white'
174
- onClick={handleDocumentDelete}
175
- >
176
- {t('yes')}
177
- </button>
178
- <button
179
- className='rounded bg-red-800 px-2 py-1 text-white'
180
- onClick={() => {
181
- setModal(null)
182
- }}
183
- >
184
- {t('no')}
185
- </button>
186
- </div>
187
- </div>
188
- </div>
189
- ),
190
- headerColor: 'bg-red-700',
191
- titleColor: 'text-white',
192
- lang: 'en',
193
- })
194
- }}
195
- >
196
- <Trash2Icon size={20} /> {t('delete')}
197
- </button>
198
- </div>
199
- ) : null}
200
- <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
201
- <button
202
- type='button'
203
- className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold text-white uppercase drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
204
- onClick={() => {
205
- if (fileInputContainerRef.current?.firstChild) {
206
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
207
- }
208
- }}
209
- >
210
- <UploadIcon size={20} /> {t('selectFile')}
211
- </button>
212
- <div className='flex w-full ps-2'>
213
- <div className='break-all'>{fileName}</div>
214
- </div>
215
- </div>
216
- </div>
217
- </div>
218
- </CardContent>
219
- </Card>
220
- </FormInputElement>
221
- )
222
- }
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react'
2
+ import FormInputElement from '@/components/form/FormInputElement'
3
+ import ProtectedDocument from '@/components/ProtectedDocument'
4
+ import { Badge } from '@/components/ui/badge'
5
+ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
6
+ import useModal from '@/hooks/useModal'
7
+ import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
8
+ import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
9
+ import { useI18n } from 'nextjs-cms/translations/client'
10
+ import { useController, useFormContext } from 'react-hook-form'
11
+
12
+ export default function DocumentFormInput({
13
+ input,
14
+ sectionName,
15
+ submitSuccessCount = 0,
16
+ }: {
17
+ input: DocumentFieldClientConfig
18
+ sectionName: string
19
+ submitSuccessCount?: number
20
+ }) {
21
+ const t = useI18n()
22
+ const { control } = useFormContext()
23
+ const {
24
+ field,
25
+ fieldState: { invalid, isTouched, isDirty, error },
26
+ } = useController({
27
+ name: input.name,
28
+ control,
29
+ defaultValue: input.value,
30
+ })
31
+
32
+ const [fileName, setFileName] = useState(t('noFileSelected'))
33
+ const fileInputContainerRef = useRef<HTMLDivElement>(null)
34
+ const [image, setImage] = useState<string | null>(null)
35
+ const [markedForDeletion, setMarkedForDeletion] = useState(false)
36
+ const handledSubmitSuccessCountRef = useRef(0)
37
+ const { setModal } = useModal()
38
+
39
+ const clearSelectedFile = useCallback(() => {
40
+ setFileName(t('noFileSelected'))
41
+ setImage(null)
42
+ field.onChange(undefined)
43
+ if (fileInputContainerRef.current?.firstChild) {
44
+ ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
45
+ }
46
+ }, [field.onChange, t])
47
+
48
+ useEffect(() => {
49
+ return () => {
50
+ if (image?.startsWith('blob:')) {
51
+ URL.revokeObjectURL(image)
52
+ }
53
+ }
54
+ }, [image])
55
+
56
+ useEffect(() => {
57
+ if (!submitSuccessCount || handledSubmitSuccessCountRef.current === submitSuccessCount) return
58
+
59
+ handledSubmitSuccessCountRef.current = submitSuccessCount
60
+ setMarkedForDeletion(false)
61
+ clearSelectedFile()
62
+ }, [clearSelectedFile, submitSuccessCount])
63
+
64
+ const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
65
+ if (event.target.files && event.target.files[0]) {
66
+ const file = event.target.files[0]
67
+ const fileExtension = file.name.split('.').pop()?.toLowerCase()
68
+
69
+ if (input.extensions && !input.extensions.includes(fileExtension || '')) {
70
+ clearSelectedFile()
71
+ return undefined
72
+ }
73
+
74
+ setFileName(file.name || t('noFileSelected'))
75
+ setImage(URL.createObjectURL(file))
76
+ return file
77
+ } else {
78
+ setFileName(t('noFileSelected'))
79
+ setImage(null)
80
+ return undefined
81
+ }
82
+ }
83
+
84
+ const document = (
85
+ <ProtectedDocument
86
+ section={sectionName}
87
+ fieldName={input.name}
88
+ file={input.value}
89
+ width={450}
90
+ height={620}
91
+ className='ring-3 mb-4 rounded p-1 ring-gray-400'
92
+ />
93
+ )
94
+
95
+ const handleDocumentDelete = () => {
96
+ setMarkedForDeletion(true)
97
+ clearSelectedFile()
98
+ setModal(null)
99
+ }
100
+
101
+ const handleUndoDeletion = () => {
102
+ setMarkedForDeletion(false)
103
+ }
104
+
105
+ return (
106
+ <FormInputElement
107
+ validationError={error}
108
+ value={document}
109
+ readonly={input.readonly}
110
+ label={input.label}
111
+ required={input.required}
112
+ >
113
+ {markedForDeletion && input.value ? (
114
+ <input
115
+ type='hidden'
116
+ name='__removedFile'
117
+ value={JSON.stringify({ fieldName: input.name, fileName: input.value })}
118
+ />
119
+ ) : null}
120
+ <Card className='flex max-w-full flex-col'>
121
+ <CardHeader>
122
+ <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
123
+ <span>{input.label} </span>
124
+ {['true', 1, true].includes(input.required) ? <Badge>{t('mandatory')}</Badge> : null}
125
+ </CardTitle>
126
+ </CardHeader>
127
+ <CardContent className='flex flex-col gap-1'>
128
+ <div className='mb-2 flex flex-col text-sm'>
129
+ {input.maxFileSize ? (
130
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
131
+ <InfoIcon size={14} />
132
+ <span>{t('maxFileSize')}:</span>
133
+ <Badge
134
+ variant={'secondary'}
135
+ >{`${input.maxFileSize.size} ${input.maxFileSize.unit.toUpperCase()}`}</Badge>
136
+ </div>
137
+ ) : null}
138
+ {input.extensions ? (
139
+ <div dir='ltr' className='flex flex-wrap items-center gap-2'>
140
+ <InfoIcon size={14} />
141
+ <span>{t('allowedExtensions')}:</span>
142
+ <Badge variant={'secondary'}>{input.extensions.join(', ')}</Badge>
143
+ </div>
144
+ ) : null}
145
+ </div>
146
+ {markedForDeletion ? (
147
+ <div className='flex items-center gap-3 rounded border border-amber-400 bg-amber-50 p-3 dark:border-amber-600 dark:bg-amber-950'>
148
+ <span className='text-sm text-amber-800 dark:text-amber-200'>
149
+ {t('documentMarkedForDeletion')}
150
+ </span>
151
+ <button
152
+ type='button'
153
+ className='flex items-center gap-1 text-sm font-medium text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
154
+ onClick={handleUndoDeletion}
155
+ >
156
+ <Undo2Icon size={14} /> {t('undo')}
157
+ </button>
158
+ </div>
159
+ ) : (
160
+ <>
161
+ <div className='flex flex-col gap-4'>
162
+ {input.value ? document : null}
163
+ {image ? (
164
+ <div className='relative flex items-center'>
165
+ <ChevronRight fontSize='large' />
166
+ <div className='relative'>
167
+ <X
168
+ className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
169
+ onClick={clearSelectedFile}
170
+ />
171
+ <embed
172
+ src={image}
173
+ className='ring-3 mb-4 max-w-full rounded p-1 ring-green-600'
174
+ width={350}
175
+ height={520}
176
+ />
177
+ </div>
178
+ </div>
179
+ ) : null}
180
+ </div>
181
+ <div ref={fileInputContainerRef}>
182
+ <input
183
+ type='file'
184
+ className='hidden'
185
+ name={field.name}
186
+ ref={field.ref}
187
+ accept={
188
+ input.extensions
189
+ ? input.extensions.map((ext) => `.${ext}`).join(',')
190
+ : undefined
191
+ }
192
+ onChange={(e) => {
193
+ const selectedFile = onImageChange(e)
194
+ if (!input.value) {
195
+ field.onChange(selectedFile)
196
+ }
197
+ }}
198
+ />
199
+ </div>
200
+ <div className='flex flex-col items-center gap-2 md:flex-row'>
201
+ <div className='flex w-full flex-col'>
202
+ {[false, 'false', 0].includes(input.required) &&
203
+ !['', null, undefined].includes(input.value) ? (
204
+ <div className='w-[400px] max-w-full'>
205
+ <button
206
+ type='button'
207
+ className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
208
+ onClick={() => {
209
+ setModal({
210
+ title: t('deleteDocument'),
211
+ body: (
212
+ <div className='p-4'>
213
+ <div className='flex flex-col gap-4'>
214
+ <div>{t('deleteDocumentText')}</div>
215
+ <div className='flex gap-2'>
216
+ <button
217
+ className='rounded bg-green-600 px-2 py-1 text-white'
218
+ onClick={handleDocumentDelete}
219
+ >
220
+ {t('yes')}
221
+ </button>
222
+ <button
223
+ className='rounded bg-red-800 px-2 py-1 text-white'
224
+ onClick={() => {
225
+ setModal(null)
226
+ }}
227
+ >
228
+ {t('no')}
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ ),
234
+ headerColor: 'bg-red-700',
235
+ titleColor: 'text-white',
236
+ lang: 'en',
237
+ })
238
+ }}
239
+ >
240
+ <Trash2Icon size={20} /> {t('delete')}
241
+ </button>
242
+ </div>
243
+ ) : null}
244
+ <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
245
+ <button
246
+ type='button'
247
+ className='bg-linear-to-r flex w-full flex-wrap items-center justify-center gap-1.5 rounded border from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
248
+ onClick={() => {
249
+ if (fileInputContainerRef.current?.firstChild) {
250
+ ;(
251
+ fileInputContainerRef.current.firstChild as HTMLInputElement
252
+ ).click()
253
+ }
254
+ }}
255
+ >
256
+ <UploadIcon size={20} /> {t('selectFile')}
257
+ </button>
258
+ <div className='flex w-full ps-2'>
259
+ <div className='break-all'>{fileName}</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </>
265
+ )}
266
+ </CardContent>
267
+ </Card>
268
+ </FormInputElement>
269
+ )
270
+ }
package/templates/default/components/form/inputs/SelectFormInput.tsx CHANGED
@@ -125,24 +125,24 @@ export default function SelectFormInput({
125
125
  return (
126
126
  <>
127
127
  <FormInputElement validationError={error} label={input.label} required={input.required}>
128
- <input
129
- type='hidden'
130
- disabled={field.disabled}
131
- name={field.name}
132
- onBlur={field.onBlur}
133
- ref={field.ref}
134
- value={field.value}
135
- />
128
+ <input
129
+ type='hidden'
130
+ disabled={field.disabled}
131
+ name={field.name}
132
+ onBlur={field.onBlur}
133
+ ref={field.ref}
134
+ value={field.value ?? ''}
135
+ />
136
136
  <SelectBox
137
137
  defaultValue={value?.value ? value?.value.toString() : undefined}
138
- // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
139
- items={optionsWithPlaceholder}
140
- onChange={(value: SelectOption) => {
141
- field.onChange(value.value)
142
- if (value) setValue(value)
143
- }}
144
- classname='w-full shadow-xs'
145
- />
138
+ // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
139
+ items={optionsWithPlaceholder}
140
+ onChange={(value: SelectOption) => {
141
+ field.onChange(value.value ?? '')
142
+ if (value) setValue(value)
143
+ }}
144
+ classname='w-full shadow-xs'
145
+ />
146
146
  </FormInputElement>
147
147
  <div ref={parent}>
148
148
  {isLoading && <LoadingSpinners />}