create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/sections/category-section-select-input.tsx

@@ -1,140 +1,140 @@
-import React, { useEffect, useState } from 'react'
-import FormInputElement from '@/components/form/form-input-element'
-import SelectBox from '@/components/select-box'
-import LoadingSpinners from '@/components/feedback/loading-spinners'
-import { useAutoAnimate } from '@formkit/auto-animate/react'
-import SelectInputButtons from '@/components/sections/select-input-buttons'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { trpc } from '@/app/_trpc/client'
-import { SelectOption } from 'nextjs-cms/core/fields'
+import React, { useEffect, useState } from 'react'
+import FormInputElement from '@/components/form/form-input-element'
+import SelectBox from '@/components/select-box'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import SelectInputButtons from '@/components/sections/select-input-buttons'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { trpc } from '@/app/_trpc/client'
+import { SelectOption } from 'nextjs-cms/core/fields'
 import type { RouterOutputs } from '@/app/_trpc/types'
-import { nanoid } from 'nanoid'
-
-type CategorySelect = RouterOutputs['categorySections']['get']['data']
-
-export default function CategorySectionSelectInput({
-    input,
-    refetch,
-    isChild = false,
-}: {
-    input: CategorySelect
-    refetch?: any
-    isChild?: boolean
-}) {
-    const t = useI18n()
-    /**
-     * Check and add the select option if it does not exist, the select option has a value of undefined
-     */
-    const exists = input?.options?.filter((option) => option.value === undefined)
-    if (!exists || exists.length === 0) {
-        if (input?.options) {
-            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
-            input.options.unshift({ value: undefined, label: t('select') })
-        }
-    }
-
-    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [hasMounted, setHasMounted] = useState<boolean>(false)
-    const [value, setValue] = useState<string | number | undefined>(/*getValue(input?.value)*/)
-    const [child, setChild] = useState<CategorySelect | null>(null)
-    const [randomKey, setRandomKey] = useState<string>(nanoid())
-
-    useEffect(() => {
-        if (input) {
-            setChild(null)
-            if (input.depth && input.depth <= 1) return
-            if (value === undefined) {
-                return
-            }
-            setIsLoading(true)
-            childrenMutation.mutate({
-                parentId: value,
-                sectionName: input.sectionName,
-                level: input.level,
-            })
-        }
-    }, [value])
-
-    if (!input) return null
-
-    const childrenMutation = trpc.categorySections.getChildren.useMutation({
-        onSuccess: (data) => {
-            if (data && data.options) {
-                const childInput: CategorySelect = {
-                    parentId: data.parentId,
-                    sectionName: input.sectionName,
-                    required: input.required,
-                    label: input.label,
-                    name: input.name,
-                    options: data.options,
-                    level: data.level,
-                    depth: input.depth,
-                    value: hasMounted ? undefined : input.value,
-                    allowRecursiveDelete: input.allowRecursiveDelete,
-                }
-                setChild(childInput)
-            } else {
-                setChild(null)
-            }
-
-            setIsLoading(false)
-            setHasMounted(true)
-        },
-        onError: (error) => {},
-        // console.log('Error', error)
-    })
-
-    return (
-        <>
-            {/* @ts-ignore no need for validations in this case */}
-            <FormInputElement label={isChild ? '|->' : input.label} required={input.required}>
-                <SelectBox
-                    // The key is to tell react to re-render the select
-                    // box whenever we change the randomKey value
-                    // (we're doing this after deleting an item from the select)
-                    key={randomKey}
-                    items={input.options ? input.options : []}
-                    onChange={(value: SelectOption | undefined) => {
-                        setValue(value?.value)
-                    }}
-                    classname='w-full shadow-xs'
-                />
-
-                <SelectInputButtons
-                    value={value}
-                    level={input.level}
-                    sectionTitle={input.label}
-                    section={input.name}
-                    parentId={input.parentId}
-                    refetch={() => {
-                        refetch()
-                    }}
-                    reset={() => {
-                        setValue(undefined)
-                        setRandomKey(nanoid())
-                    }}
-                    allowRecursiveDelete={input.allowRecursiveDelete ?? false}
-                />
-            </FormInputElement>
-            <div ref={parent}>
-                {isLoading && <LoadingSpinners />}
-                {child && (
-                    <div className='ps-4'>
-                        <CategorySectionSelectInput
-                            refetch={() => {
-                                childrenMutation.mutate({
-                                    parentId: value,
-                                    sectionName: input.sectionName,
-                                    level: input.level,
-                                })
-                            }}
-                            isChild={true}
-                            input={child}
-                        />
-                    </div>
-                )}
-            </div>
-        </>
-    )
-}
+import { nanoid } from 'nanoid'
+
+type CategorySelect = RouterOutputs['categorySections']['get']['data']
+
+export default function CategorySectionSelectInput({
+    input,
+    refetch,
+    isChild = false,
+}: {
+    input: CategorySelect
+    refetch?: any
+    isChild?: boolean
+}) {
+    const t = useI18n()
+    /**
+     * Check and add the select option if it does not exist, the select option has a value of undefined
+     */
+    const exists = input?.options?.filter((option) => option.value === undefined)
+    if (!exists || exists.length === 0) {
+        if (input?.options) {
+            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
+            input.options.unshift({ value: undefined, label: t('select') })
+        }
+    }
+
+    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [hasMounted, setHasMounted] = useState<boolean>(false)
+    const [value, setValue] = useState<string | number | undefined>(/*getValue(input?.value)*/)
+    const [child, setChild] = useState<CategorySelect | null>(null)
+    const [randomKey, setRandomKey] = useState<string>(nanoid())
+
+    useEffect(() => {
+        if (input) {
+            setChild(null)
+            if (input.depth && input.depth <= 1) return
+            if (value === undefined) {
+                return
+            }
+            setIsLoading(true)
+            childrenMutation.mutate({
+                parentId: value,
+                sectionName: input.sectionName,
+                level: input.level,
+            })
+        }
+    }, [value])
+
+    if (!input) return null
+
+    const childrenMutation = trpc.categorySections.getChildren.useMutation({
+        onSuccess: (data) => {
+            if (data && data.options) {
+                const childInput: CategorySelect = {
+                    parentId: data.parentId,
+                    sectionName: input.sectionName,
+                    required: input.required,
+                    label: input.label,
+                    name: input.name,
+                    options: data.options,
+                    level: data.level,
+                    depth: input.depth,
+                    value: hasMounted ? undefined : input.value,
+                    allowRecursiveDelete: input.allowRecursiveDelete,
+                }
+                setChild(childInput)
+            } else {
+                setChild(null)
+            }
+
+            setIsLoading(false)
+            setHasMounted(true)
+        },
+        onError: (error) => {},
+        // console.log('Error', error)
+    })
+
+    return (
+        <>
+            {/* @ts-ignore no need for validations in this case */}
+            <FormInputElement label={isChild ? '|->' : input.label} required={input.required}>
+                <SelectBox
+                    // The key is to tell react to re-render the select
+                    // box whenever we change the randomKey value
+                    // (we're doing this after deleting an item from the select)
+                    key={randomKey}
+                    items={input.options ? input.options : []}
+                    onChange={(value: SelectOption | undefined) => {
+                        setValue(value?.value)
+                    }}
+                    classname='w-full shadow-xs'
+                />
+
+                <SelectInputButtons
+                    value={value}
+                    level={input.level}
+                    sectionTitle={input.label}
+                    section={input.name}
+                    parentId={input.parentId}
+                    refetch={() => {
+                        refetch()
+                    }}
+                    reset={() => {
+                        setValue(undefined)
+                        setRandomKey(nanoid())
+                    }}
+                    allowRecursiveDelete={input.allowRecursiveDelete ?? false}
+                />
+            </FormInputElement>
+            <div ref={parent}>
+                {isLoading && <LoadingSpinners />}
+                {child && (
+                    <div className='ps-4'>
+                        <CategorySectionSelectInput
+                            refetch={() => {
+                                childrenMutation.mutate({
+                                    parentId: value,
+                                    sectionName: input.sectionName,
+                                    level: input.level,
+                                })
+                            }}
+                            isChild={true}
+                            input={child}
+                        />
+                    </div>
+                )}
+            </div>
+        </>
+    )
+}

package/templates/default/components/sections/conditional-fields.tsx

@@ -1,49 +1,49 @@
-import { FieldClientConfig } from 'nextjs-cms/core/fields'
-import React, { useEffect, useState } from 'react'
-import FormInputs from '@/components/form/form-inputs'
-import { ConditionalField } from 'nextjs-cms/core/types'
-
-export function ConditionalFields({
-    sectionName,
-    conditionalFields,
-    value,
-}: {
-    sectionName: string
-    conditionalFields: ConditionalField[]
-    value: string | number | undefined
-}) {
-    const [conditionalInputs, setConditionalInputs] = useState<FieldClientConfig[]>([])
-
-    useEffect(() => {
-        if (!value) setConditionalInputs([])
-        // Check if the value is in the conditional inputs
-        const _conditionalFields: FieldClientConfig[] = []
-        conditionalFields.filter((conditionalField) => {
-            switch (conditionalField.rule.condition) {
-                case 'equals':
-                    if (value?.toString() === conditionalField.rule.value.toString()) {
-                        // Add the input to the conditional inputs
-                        _conditionalFields.push(conditionalField.field)
-                    }
-                    break
-                case 'notEquals':
-                    if (value?.toString() !== conditionalField.rule.value.toString()) {
-                        // Add the input to the conditional inputs
-                        _conditionalFields.push(conditionalField.field)
-                    }
-                    break
-                default:
-                    return null
-            }
-        })
-        if (_conditionalFields && _conditionalFields.length > 0) {
-            setConditionalInputs(_conditionalFields)
-        } else {
-            setConditionalInputs([])
-        }
-    }, [value])
-
-    return (
-        <>{conditionalInputs.length > 0 ? <FormInputs inputs={conditionalInputs} sectionName={sectionName} /> : null}</>
-    )
-}
+import { FieldClientConfig } from 'nextjs-cms/core/fields'
+import React, { useEffect, useState } from 'react'
+import FormInputs from '@/components/form/form-inputs'
+import { ConditionalField } from 'nextjs-cms/core/types'
+
+export function ConditionalFields({
+    sectionName,
+    conditionalFields,
+    value,
+}: {
+    sectionName: string
+    conditionalFields: ConditionalField[]
+    value: string | number | undefined
+}) {
+    const [conditionalInputs, setConditionalInputs] = useState<FieldClientConfig[]>([])
+
+    useEffect(() => {
+        if (!value) setConditionalInputs([])
+        // Check if the value is in the conditional inputs
+        const _conditionalFields: FieldClientConfig[] = []
+        conditionalFields.filter((conditionalField) => {
+            switch (conditionalField.rule.condition) {
+                case 'equals':
+                    if (value?.toString() === conditionalField.rule.value.toString()) {
+                        // Add the input to the conditional inputs
+                        _conditionalFields.push(conditionalField.field)
+                    }
+                    break
+                case 'notEquals':
+                    if (value?.toString() !== conditionalField.rule.value.toString()) {
+                        // Add the input to the conditional inputs
+                        _conditionalFields.push(conditionalField.field)
+                    }
+                    break
+                default:
+                    return null
+            }
+        })
+        if (_conditionalFields && _conditionalFields.length > 0) {
+            setConditionalInputs(_conditionalFields)
+        } else {
+            setConditionalInputs([])
+        }
+    }, [value])
+
+    return (
+        <>{conditionalInputs.length > 0 ? <FormInputs inputs={conditionalInputs} sectionName={sectionName} /> : null}</>
+    )
+}

package/templates/default/components/sections/section-icon.tsx

@@ -1,8 +1,8 @@
-'use client'
-
-import {DynamicIcon} from 'lucide-react/dynamic'
-import type { IconName } from 'lucide-react/dynamic'
-
-export default function SectionIcon({ name, className }: { name: string; className?: string }) {
-    return <DynamicIcon name={name as IconName} className={className} />
-}
+'use client'
+
+import {DynamicIcon} from 'lucide-react/dynamic'
+import type { IconName } from 'lucide-react/dynamic'
+
+export default function SectionIcon({ name, className }: { name: string; className?: string }) {
+    return <DynamicIcon name={name as IconName} className={className} />
+}