create-nextjs-cms 0.9.20 → 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 (13) hide show
  1. package/package.json +3 -3
  2. package/templates/default/components/GalleryPhoto.tsx +109 -93
  3. package/templates/default/components/PhotoGallery.tsx +47 -35
  4. package/templates/default/components/form/Form.tsx +385 -370
  5. package/templates/default/components/form/FormInputs.tsx +138 -136
  6. package/templates/default/components/form/helpers/_section-hot-reload.js +1 -1
  7. package/templates/default/components/form/inputs/DateFormInput.tsx +11 -10
  8. package/templates/default/components/form/inputs/DocumentFormInput.tsx +270 -222
  9. package/templates/default/components/form/inputs/PhotoFormInput.tsx +7 -9
  10. package/templates/default/components/form/inputs/SelectFormInput.tsx +16 -16
  11. package/templates/default/components/form/inputs/VideoFormInput.tsx +270 -118
  12. package/templates/default/dynamic-schemas/schema.ts +202 -31
  13. package/templates/default/package.json +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-nextjs-cms",
3
- "version": "0.9.20",
3
+ "version": "0.9.22",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "bin": {
@@ -29,8 +29,8 @@
29
29
  "tsx": "^4.20.6",
30
30
  "typescript": "^5.9.2",
31
31
  "@lzcms/eslint-config": "0.3.0",
32
- "@lzcms/tsconfig": "0.1.0",
33
- "@lzcms/prettier-config": "0.1.0"
32
+ "@lzcms/prettier-config": "0.1.0",
33
+ "@lzcms/tsconfig": "0.1.0"
34
34
  },
35
35
  "prettier": "@lzcms/prettier-config",
36
36
  "scripts": {
package/templates/default/components/GalleryPhoto.tsx CHANGED
@@ -1,93 +1,109 @@
1
- import { PhotoGalleryItem } from 'nextjs-cms/core/types'
2
- import { useI18n } from 'nextjs-cms/translations/client'
3
- import { MinusIcon } from '@radix-ui/react-icons'
4
- import ProtectedImage from '@/components/ProtectedImage'
5
- import useModal from '@/hooks/useModal'
6
- import { useToast } from '@/components/ui/use-toast'
7
- import { trpc } from '@/app/_trpc/client'
8
-
9
- const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; sectionName: string; action?: any }) => {
10
- const t = useI18n()
11
- const { setModal, setModalResponse } = useModal()
12
- const deleteMutation = trpc.gallery.deletePhoto.useMutation({
13
- onError: (error) => {
14
- toast({
15
- variant: 'destructive',
16
- title: t('deleteGalleryPhoto'),
17
- description: error.message,
18
- })
19
- },
20
-
21
- onSuccess: (data) => {
22
- setModal(null)
23
- setModalResponse(null)
24
- toast({
25
- variant: 'success',
26
- title: t('galleryPhotoDeleted'),
27
- })
28
- action()
29
- },
30
- })
31
- const { toast } = useToast()
32
- const handlePhotoDelete = async () => {
33
- deleteMutation.mutate({
34
- sectionName: sectionName,
35
- photoName: item.photo,
36
- referenceId: item.referenceId,
37
- })
38
- }
39
- return (
40
- <div className='relative'>
41
- {/* Delete Button */}
42
- <button
43
- type='button'
44
- className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
45
- onClick={() => {
46
- setModal({
47
- title: t('deleteGalleryPhoto'),
48
- body: (
49
- <div className='p-4'>
50
- <div className='flex flex-col gap-4'>
51
- <div>{t('deleteGalleryPhotoText')}</div>
52
- <div className='flex gap-2'>
53
- <button
54
- className='rounded bg-green-600 px-2 py-1 text-white'
55
- onClick={handlePhotoDelete}
56
- >
57
- Yes
58
- </button>
59
- <button
60
- className='rounded bg-red-800 px-2 py-1 text-white'
61
- onClick={() => {
62
- setModal(null)
63
- }}
64
- >
65
- No
66
- </button>
67
- </div>
68
- </div>
69
- </div>
70
- ),
71
- headerColor: 'bg-red-700',
72
- titleColor: 'text-white',
73
- lang: 'en',
74
- })
75
- }}
76
- >
77
- <MinusIcon className='text-white' />
78
- </button>
79
- <ProtectedImage
80
- section={sectionName}
81
- photo={item.photo}
82
- isThumb={true}
83
- alt={item.photo}
84
- height={150}
85
- width={150}
86
- // fill={true}
87
- className='mb-4 rounded p-1 ring-3 ring-gray-400'
88
- />
89
- </div>
90
- )
91
- }
92
-
93
- export default GalleryPhoto
1
+ import { trpc } from '@/app/_trpc/client'
2
+ import ProtectedImage from '@/components/ProtectedImage'
3
+ import { useToast } from '@/components/ui/use-toast'
4
+ import useModal from '@/hooks/useModal'
5
+ import { MinusIcon } from '@radix-ui/react-icons'
6
+ import { PhotoGalleryItem } from 'nextjs-cms/core/types'
7
+ import { useI18n } from 'nextjs-cms/translations/client'
8
+
9
+ type GalleryPhotoItem = PhotoGalleryItem & { locale?: string }
10
+
11
+ const GalleryPhoto = ({
12
+ item,
13
+ sectionName,
14
+ localized,
15
+ locale,
16
+ action,
17
+ }: {
18
+ item: GalleryPhotoItem
19
+ sectionName: string
20
+ localized?: boolean
21
+ locale?: string
22
+ action?: any
23
+ }) => {
24
+ const t = useI18n()
25
+ const { setModal, setModalResponse } = useModal()
26
+ const deleteMutation = trpc.gallery.deletePhoto.useMutation({
27
+ onError: (error) => {
28
+ toast({
29
+ variant: 'destructive',
30
+ title: t('deleteGalleryPhoto'),
31
+ description: error.message,
32
+ })
33
+ },
34
+
35
+ onSuccess: (data) => {
36
+ setModal(null)
37
+ setModalResponse(null)
38
+ toast({
39
+ variant: 'success',
40
+ title: t('galleryPhotoDeleted'),
41
+ })
42
+ action()
43
+ },
44
+ })
45
+ const { toast } = useToast()
46
+ const handlePhotoDelete = async () => {
47
+ const targetLocale = locale ?? item.locale
48
+ deleteMutation.mutate({
49
+ sectionName: sectionName,
50
+ photoName: item.photo,
51
+ referenceId: item.referenceId,
52
+ ...(localized && targetLocale ? { locale: targetLocale } : {}),
53
+ })
54
+ }
55
+ return (
56
+ <div className='relative'>
57
+ {/* Delete Button */}
58
+ <button
59
+ type='button'
60
+ className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
61
+ onClick={() => {
62
+ setModal({
63
+ title: t('deleteGalleryPhoto'),
64
+ body: (
65
+ <div className='p-4'>
66
+ <div className='flex flex-col gap-4'>
67
+ <div>{t('deleteGalleryPhotoText')}</div>
68
+ <div className='flex gap-2'>
69
+ <button
70
+ className='rounded bg-green-600 px-2 py-1 text-white'
71
+ onClick={handlePhotoDelete}
72
+ >
73
+ Yes
74
+ </button>
75
+ <button
76
+ className='rounded bg-red-800 px-2 py-1 text-white'
77
+ onClick={() => {
78
+ setModal(null)
79
+ }}
80
+ >
81
+ No
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ ),
87
+ headerColor: 'bg-red-700',
88
+ titleColor: 'text-white',
89
+ lang: 'en',
90
+ })
91
+ }}
92
+ >
93
+ <MinusIcon className='text-white' />
94
+ </button>
95
+ <ProtectedImage
96
+ section={sectionName}
97
+ photo={item.photo}
98
+ isThumb={true}
99
+ alt={item.photo}
100
+ height={150}
101
+ width={150}
102
+ // fill={true}
103
+ className='ring-3 mb-4 rounded p-1 ring-gray-400'
104
+ />
105
+ </div>
106
+ )
107
+ }
108
+
109
+ export default GalleryPhoto
package/templates/default/components/PhotoGallery.tsx CHANGED
@@ -1,35 +1,47 @@
1
- import { useI18n } from 'nextjs-cms/translations/client'
2
- import { PhotoGalleryItem } from 'nextjs-cms/core/types'
3
- import GalleryPhoto from '@/components/GalleryPhoto'
4
- import { Alert, AlertDescription } from '@/components/ui/alert'
5
- import ContainerBox from '@/components/ContainerBox'
6
-
7
- const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery: PhotoGalleryItem[] }) => {
8
- const t = useI18n()
9
- return (
10
- <ContainerBox title={t('gallery')}>
11
- {gallery && gallery.length > 0 ? (
12
- <div className='flex flex-wrap gap-4'>
13
- {gallery.map((photo: PhotoGalleryItem, index: number) => (
14
- <GalleryPhoto
15
- item={photo}
16
- sectionName={sectionName}
17
- key={photo.photo}
18
- action={() => {
19
- // This is the action that will be executed when the user removes a photo from the gallery
20
- // Remove the removed photo from the gallery
21
- gallery.splice(index, 1)
22
- }}
23
- />
24
- ))}
25
- </div>
26
- ) : (
27
- <Alert variant='light' className='mt-4'>
28
- <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
29
- </Alert>
30
- )}
31
- </ContainerBox>
32
- )
33
- }
34
-
35
- export default PhotoGallery
1
+ import ContainerBox from '@/components/ContainerBox'
2
+ import GalleryPhoto from '@/components/GalleryPhoto'
3
+ import { Alert, AlertDescription } from '@/components/ui/alert'
4
+ import { PhotoGalleryItem } from 'nextjs-cms/core/types'
5
+ import { useI18n } from 'nextjs-cms/translations/client'
6
+
7
+ const PhotoGallery = ({
8
+ sectionName,
9
+ gallery,
10
+ localized,
11
+ locale,
12
+ }: {
13
+ sectionName: string
14
+ gallery: PhotoGalleryItem[]
15
+ localized?: boolean
16
+ locale?: string
17
+ }) => {
18
+ const t = useI18n()
19
+ return (
20
+ <ContainerBox title={t('gallery')}>
21
+ {gallery && gallery.length > 0 ? (
22
+ <div className='flex flex-wrap gap-4'>
23
+ {gallery.map((photo: PhotoGalleryItem, index: number) => (
24
+ <GalleryPhoto
25
+ item={photo}
26
+ sectionName={sectionName}
27
+ localized={localized}
28
+ locale={locale}
29
+ key={photo.photo}
30
+ action={() => {
31
+ // This is the action that will be executed when the user removes a photo from the gallery
32
+ // Remove the removed photo from the gallery
33
+ gallery.splice(index, 1)
34
+ }}
35
+ />
36
+ ))}
37
+ </div>
38
+ ) : (
39
+ <Alert variant='light' className='mt-4'>
40
+ <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
41
+ </Alert>
42
+ )}
43
+ </ContainerBox>
44
+ )
45
+ }
46
+
47
+ export default PhotoGallery