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/VideoFormInput.tsx CHANGED
@@ -1,118 +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 ProtectedVideo from '@/components/ProtectedVideo'
5
- import { VideoFieldClientConfig } from 'nextjs-cms/core/fields'
6
- import { ChevronRight, X } from 'lucide-react'
7
- import { useController, useFormContext } from 'react-hook-form'
8
-
9
- export default function VideoFormInput({ input, sectionName }: { input: VideoFieldClientConfig; sectionName: string }) {
10
- const t = useI18n()
11
- const { control } = useFormContext()
12
- const {
13
- field,
14
- fieldState: { invalid, isTouched, isDirty, error },
15
- } = useController({
16
- name: input.name,
17
- control,
18
- defaultValue: undefined,
19
- })
20
-
21
- const [fileName, setFileName] = useState(t('noFileSelected'))
22
- const fileInputContainerRef = useRef<HTMLInputElement>(null)
23
- const [image, setImage] = useState<string | null>(null)
24
-
25
- const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
26
- if (event.target.files && event.target.files[0]) {
27
- setFileName(event.target.files?.[0].name || t('noFileSelected'))
28
- setImage(URL.createObjectURL(event.target.files[0]))
29
- } else {
30
- setFileName(t('noFileSelected'))
31
- setImage(null)
32
- }
33
- }
34
-
35
- const protectedVideo = (
36
- <ProtectedVideo
37
- section={sectionName}
38
- fieldName={input.name}
39
- file={input.value}
40
- width={400}
41
- height={280}
42
- className='mb-4 rounded p-1 ring-3 ring-gray-400'
43
- />
44
- )
45
-
46
- return (
47
- <FormInputElement
48
- validationError={error}
49
- value={protectedVideo}
50
- readonly={input.readonly}
51
- label={input.label}
52
- required={input.required}
53
- >
54
- <div className='flex flex-row gap-2'>
55
- {input.value ? protectedVideo : null}
56
- {image && (
57
- <div className='relative flex items-center'>
58
- <ChevronRight fontSize='large' />
59
- <div className='relative'>
60
- <X
61
- className='absolute -top-3 -right-3 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
62
- onClick={() => {
63
- setImage(null)
64
- setFileName(t('noFileSelected'))
65
- field.onChange(undefined)
66
- /**
67
- * Clear the child input value
68
- */
69
- if (fileInputContainerRef.current?.firstChild) {
70
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
71
- }
72
- }}
73
- />
74
- <embed
75
- src={image}
76
- className='mb-4 max-w-full rounded p-1 ring-3 ring-green-600'
77
- width={300}
78
- height={190}
79
- />
80
- </div>
81
- </div>
82
- )}
83
- </div>
84
- <div ref={fileInputContainerRef}>
85
- <input
86
- type='file'
87
- className='hidden'
88
- name={field.name}
89
- ref={field.ref}
90
- onChange={(e) => {
91
- onImageChange(e)
92
- if (!input.value) {
93
- field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
94
- }
95
- }}
96
- />
97
- </div>
98
- <div className='flex flex-col items-center gap-2 md:flex-row'>
99
- <div className='w-full flex-1 md:flex-[0.5]'>
100
- <button
101
- type='button'
102
- className='w-full 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'
103
- onClick={() => {
104
- if (fileInputContainerRef.current?.firstChild) {
105
- ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
106
- }
107
- }}
108
- >
109
- {t('upload')}
110
- </button>
111
- </div>
112
- <div className='w-full flex-1'>
113
- <span>{fileName}</span>
114
- </div>
115
- </div>
116
- </FormInputElement>
117
- )
118
- }
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react'
2
+ import FormInputElement from '@/components/form/FormInputElement'
3
+ import ProtectedVideo from '@/components/ProtectedVideo'
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 { VideoFieldClientConfig } 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 VideoFormInput({
13
+ input,
14
+ sectionName,
15
+ submitSuccessCount = 0,
16
+ }: {
17
+ input: VideoFieldClientConfig
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 protectedVideo = (
85
+ <ProtectedVideo
86
+ section={sectionName}
87
+ fieldName={input.name}
88
+ file={input.value}
89
+ width={400}
90
+ height={280}
91
+ className='ring-3 mb-4 rounded p-1 ring-gray-400'
92
+ />
93
+ )
94
+
95
+ const handleVideoDelete = () => {
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={protectedVideo}
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('videoMarkedForDeletion')}
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 ? protectedVideo : 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={300}
175
+ height={190}
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('deleteVideo'),
211
+ body: (
212
+ <div className='p-4'>
213
+ <div className='flex flex-col gap-4'>
214
+ <div>{t('deleteVideoText')}</div>
215
+ <div className='flex gap-2'>
216
+ <button
217
+ className='rounded bg-green-600 px-2 py-1 text-white'
218
+ onClick={handleVideoDelete}
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
+ }