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/templates/default/components/form/FormInputs.tsx CHANGED
@@ -1,136 +1,138 @@
1
- import React from 'react'
2
- import ColorFormInput from '@/components/form/inputs/ColorFormInput'
3
- import NumberFormInput from '@/components/form/inputs/NumberFormInput'
4
- import TextFormInput from '@/components/form/inputs/TextFormInput'
5
- import DateFormInput from '@/components/form/inputs/DateFormInput'
6
- import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
7
- import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
8
- import SelectFormInput from '@/components/form/inputs/SelectFormInput'
9
- import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
10
- import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
11
- import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
12
- import TagsFormInput from '@/components/form/inputs/TagsFormInput'
13
- import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
14
- import MapFormInput from '@/components/form/inputs/MapFormInput'
15
- import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
16
- import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
17
- import VideoFormInput from '@/components/form/inputs/VideoFormInput'
18
- import SlugFormInput from '@/components/form/inputs/SlugFormInput'
19
- import type { FieldClientConfig } from 'nextjs-cms/core/fields'
20
- import {
21
- CheckboxFieldClientConfig,
22
- ColorFieldClientConfig,
23
- DateFieldClientConfig,
24
- DateRangeFieldClientConfig,
25
- DocumentFieldClientConfig,
26
- MapFieldClientConfig,
27
- NumberFieldClientConfig,
28
- PasswordFieldClientConfig,
29
- PhotoFieldClientConfig,
30
- RichTextFieldClientConfig,
31
- SelectFieldClientConfig,
32
- SelectMultipleFieldClientConfig,
33
- TagsFieldClientConfig,
34
- TextAreaFieldClientConfig,
35
- TextFieldClientConfig,
36
- VideoFieldClientConfig,
37
- SlugFieldClientConfig,
38
- } from 'nextjs-cms/core/fields'
39
-
40
- export default function FormInputs({
41
- inputs,
42
- sectionName,
43
- submitSuccessCount = 0,
44
- }: {
45
- inputs: FieldClientConfig[]
46
- sectionName: string
47
- submitSuccessCount?: number
48
- }) {
49
- return (
50
- <>
51
- {inputs?.length > 0 &&
52
- inputs?.map((input) => {
53
- switch (input.type) {
54
- case 'color':
55
- return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
56
- case 'number':
57
- return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
58
- case 'text':
59
- return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
60
- case 'date':
61
- return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
62
- case 'date_range':
63
- return (
64
- <DateRangeFormInput
65
- input={input as DateRangeFieldClientConfig}
66
- key={(input as DateRangeFieldClientConfig).startName}
67
- />
68
- )
69
- case 'rich_text':
70
- return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
71
- case 'textarea':
72
- return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
73
- case 'select':
74
- return (
75
- <SelectFormInput
76
- sectionName={sectionName}
77
- input={input as SelectFieldClientConfig}
78
- key={input.name}
79
- />
80
- )
81
- case 'select_multiple':
82
- return (
83
- <MultipleSelectFormInput
84
- input={input as SelectMultipleFieldClientConfig}
85
- key={input.name}
86
- />
87
- )
88
- case 'photo':
89
- return (
90
- <PhotoFormInput
91
- sectionName={sectionName}
92
- input={input as PhotoFieldClientConfig}
93
- submitSuccessCount={submitSuccessCount}
94
- key={input.name}
95
- />
96
- )
97
- case 'video':
98
- return (
99
- <VideoFormInput
100
- sectionName={sectionName}
101
- input={input as VideoFieldClientConfig}
102
- key={input.name}
103
- />
104
- )
105
- case 'document':
106
- return (
107
- <DocumentFormInput
108
- sectionName={sectionName}
109
- input={input as DocumentFieldClientConfig}
110
- key={input.name}
111
- />
112
- )
113
- case 'password':
114
- return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
115
- case 'tags':
116
- return (
117
- <TagsFormInput
118
- input={input as TagsFieldClientConfig}
119
- sectionName={sectionName}
120
- key={input.name}
121
- />
122
- )
123
- case 'map':
124
- return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
125
- case 'checkbox':
126
- // case 'permission':
127
- return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
128
- case 'slug':
129
- return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
130
- default:
131
- return null
132
- }
133
- })}
134
- </>
135
- )
136
- }
1
+ import type { FieldClientConfig } from 'nextjs-cms/core/fields'
2
+ import React from 'react'
3
+ import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
4
+ import ColorFormInput from '@/components/form/inputs/ColorFormInput'
5
+ import DateFormInput from '@/components/form/inputs/DateFormInput'
6
+ import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
7
+ import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
8
+ import MapFormInput from '@/components/form/inputs/MapFormInput'
9
+ import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
10
+ import NumberFormInput from '@/components/form/inputs/NumberFormInput'
11
+ import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
12
+ import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
13
+ import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
14
+ import SelectFormInput from '@/components/form/inputs/SelectFormInput'
15
+ import SlugFormInput from '@/components/form/inputs/SlugFormInput'
16
+ import TagsFormInput from '@/components/form/inputs/TagsFormInput'
17
+ import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
18
+ import TextFormInput from '@/components/form/inputs/TextFormInput'
19
+ import VideoFormInput from '@/components/form/inputs/VideoFormInput'
20
+ import {
21
+ CheckboxFieldClientConfig,
22
+ ColorFieldClientConfig,
23
+ DateFieldClientConfig,
24
+ DateRangeFieldClientConfig,
25
+ DocumentFieldClientConfig,
26
+ MapFieldClientConfig,
27
+ NumberFieldClientConfig,
28
+ PasswordFieldClientConfig,
29
+ PhotoFieldClientConfig,
30
+ RichTextFieldClientConfig,
31
+ SelectFieldClientConfig,
32
+ SelectMultipleFieldClientConfig,
33
+ SlugFieldClientConfig,
34
+ TagsFieldClientConfig,
35
+ TextAreaFieldClientConfig,
36
+ TextFieldClientConfig,
37
+ VideoFieldClientConfig,
38
+ } from 'nextjs-cms/core/fields'
39
+
40
+ export default function FormInputs({
41
+ inputs,
42
+ sectionName,
43
+ submitSuccessCount = 0,
44
+ }: {
45
+ inputs: FieldClientConfig[]
46
+ sectionName: string
47
+ submitSuccessCount?: number
48
+ }) {
49
+ return (
50
+ <>
51
+ {inputs?.length > 0 &&
52
+ inputs?.map((input) => {
53
+ switch (input.type) {
54
+ case 'color':
55
+ return <ColorFormInput input={input as ColorFieldClientConfig} key={input.name} />
56
+ case 'number':
57
+ return <NumberFormInput input={input as NumberFieldClientConfig} key={input.name} />
58
+ case 'text':
59
+ return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
60
+ case 'date':
61
+ return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
62
+ case 'date_range':
63
+ return (
64
+ <DateRangeFormInput
65
+ input={input as DateRangeFieldClientConfig}
66
+ key={(input as DateRangeFieldClientConfig).startName}
67
+ />
68
+ )
69
+ case 'rich_text':
70
+ return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
71
+ case 'textarea':
72
+ return <TextareaFormInput input={input as TextAreaFieldClientConfig} key={input.name} />
73
+ case 'select':
74
+ return (
75
+ <SelectFormInput
76
+ sectionName={sectionName}
77
+ input={input as SelectFieldClientConfig}
78
+ key={input.name}
79
+ />
80
+ )
81
+ case 'select_multiple':
82
+ return (
83
+ <MultipleSelectFormInput
84
+ input={input as SelectMultipleFieldClientConfig}
85
+ key={input.name}
86
+ />
87
+ )
88
+ case 'photo':
89
+ return (
90
+ <PhotoFormInput
91
+ sectionName={sectionName}
92
+ input={input as PhotoFieldClientConfig}
93
+ submitSuccessCount={submitSuccessCount}
94
+ key={input.name}
95
+ />
96
+ )
97
+ case 'video':
98
+ return (
99
+ <VideoFormInput
100
+ sectionName={sectionName}
101
+ input={input as VideoFieldClientConfig}
102
+ submitSuccessCount={submitSuccessCount}
103
+ key={input.name}
104
+ />
105
+ )
106
+ case 'document':
107
+ return (
108
+ <DocumentFormInput
109
+ sectionName={sectionName}
110
+ input={input as DocumentFieldClientConfig}
111
+ submitSuccessCount={submitSuccessCount}
112
+ key={input.name}
113
+ />
114
+ )
115
+ case 'password':
116
+ return <PasswordFormInput input={input as PasswordFieldClientConfig} key={input.name} />
117
+ case 'tags':
118
+ return (
119
+ <TagsFormInput
120
+ input={input as TagsFieldClientConfig}
121
+ sectionName={sectionName}
122
+ key={input.name}
123
+ />
124
+ )
125
+ case 'map':
126
+ return <MapFormInput input={input as MapFieldClientConfig} key={input.name} />
127
+ case 'checkbox':
128
+ // case 'permission':
129
+ return <CheckboxFormInput input={input as CheckboxFieldClientConfig} key={input.name} />
130
+ case 'slug':
131
+ return <SlugFormInput input={input as SlugFieldClientConfig} key={input.name} />
132
+ default:
133
+ return null
134
+ }
135
+ })}
136
+ </>
137
+ )
138
+ }
package/templates/default/components/form/helpers/_section-hot-reload.js CHANGED
@@ -8,4 +8,4 @@ export const revalidate = 0
8
8
 
9
9
  // @refresh reset
10
10
 
11
- export const configLastUpdated = 1776644832680
11
+ export const configLastUpdated = 1777249094688
package/templates/default/components/form/inputs/DateFormInput.tsx CHANGED
@@ -70,6 +70,11 @@ function getTimeBoundForSelectedDate(selectedDate: Date | undefined, bound: Date
70
70
  return dayjs(bound).format('HH:mm:ss')
71
71
  }
72
72
 
73
+ function formatHiddenValue(date: Date | undefined, format: DateFieldClientConfig['format']): string {
74
+ if (!date) return ''
75
+ return dayjs(date).format(format !== 'date' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
76
+ }
77
+
73
78
  export default function DateFormInput({ input }: { input: DateFieldClientConfig }) {
74
79
  const t = useI18n()
75
80
  const { control } = useFormContext()
@@ -108,16 +113,12 @@ export default function DateFormInput({ input }: { input: DateFieldClientConfig
108
113
  <input
109
114
  type='hidden'
110
115
  disabled={field.disabled}
111
- name={field.name}
112
- onBlur={field.onBlur}
113
- value={
114
- date
115
- ? dayjs(date).format(input.format !== 'date' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')
116
- : undefined
117
- }
118
- ref={field.ref}
119
- className='rounded border p-2'
120
- />
116
+ name={field.name}
117
+ onBlur={field.onBlur}
118
+ value={formatHiddenValue(date, input.format)}
119
+ ref={field.ref}
120
+ className='rounded border p-2'
121
+ />
121
122
 
122
123
  <div className='flex flex-row items-start gap-2'>
123
124
  <div>