create-nextjs-cms 0.9.23 → 0.9.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.23",
+  "version": "0.9.24",
   "private": false,
   "type": "module",
   "bin": {
@@ -28,9 +28,9 @@
     "prettier": "^3.3.3",
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
-    "@lzcms/prettier-config": "0.1.0",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/tsconfig": "0.1.0"
+    "@lzcms/tsconfig": "0.1.0",
+    "@lzcms/prettier-config": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",
   "scripts": {

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useI18n } from 'nextjs-cms/translations/client'
-import InfoCard from '@/components/InfoCard'
+import InfoCard from '@/components/feedback/info-card'
 import Link from 'next/link'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
@@ -12,7 +12,7 @@ import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { useTheme } from 'next-themes'
 import { login, useSession } from 'nextjs-cms/auth/react'
 import { wasLanguageChangedOnLogin } from 'nextjs-cms/translations'
-import LoginLanguageDropdown from '@/components/login-language-dropdown'
+import LoginLanguageDropdown from '@/components/i18n/login-language-dropdown'
 import { useAuthLanguage } from '../../auth-language-provider'
 
 type fromErrors = {

package/templates/default/app/(auth)/layout.tsx

@@ -3,7 +3,7 @@ import { cookies } from 'next/headers'
 import '../globals.css'
 import type { Metadata } from 'next'
 import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/ThemeProvider'
+import { ThemeProvider } from '@/components/layout/theme-provider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'

package/templates/default/app/(rootLayout)/admins/page.tsx

@@ -1,4 +1,4 @@
-import AdminsPage from '@/components/AdminsPage'
+import AdminsPage from '@/components/pages/admins-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 export default async function Page() {
     await api.admins.list.prefetch()

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx

@@ -1,4 +1,4 @@
-import BrowsePage from '@/components/BrowsePage'
+import BrowsePage from '@/components/pages/browse-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string; page: string }>
 type SearchParams = Promise<{ q: string | undefined }>

package/templates/default/app/(rootLayout)/categorized/[section]/page.tsx

@@ -1,4 +1,4 @@
-import CategorizedSectionPage from '@/components/CategorizedSectionPage'
+import CategorizedSectionPage from '@/components/pages/categorized-section-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 

package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx

@@ -1,4 +1,4 @@
-import ItemEditPage from '@/components/ItemEditPage'
+import ItemEditPage from '@/components/pages/item-edit-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string; itemId: string }>
 type SearchParams = Promise<{ locale?: string }>

package/templates/default/app/(rootLayout)/layout.tsx

@@ -2,7 +2,7 @@ import { Inter, Cairo } from 'next/font/google'
 import '../globals.css'
 import type { Metadata } from 'next'
 import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/ThemeProvider'
+import { ThemeProvider } from '@/components/layout/theme-provider'
 import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'
@@ -10,7 +10,7 @@ import { I18nProviderClient } from 'nextjs-cms/translations/client'
 import { resolveLanguage, RTL_LANGUAGES } from 'nextjs-cms/translations'
 import { getClientDictionaries } from 'nextjs-cms/translations/server'
 import { api, HydrateClient } from '@/app/_trpc/server'
-import Layout from '@/components/Layout'
+import Layout from '@/components/layout/layout'
 import { redirect } from 'next/navigation'
 import { DirectionProvider } from "@/components/ui/direction"
 

package/templates/default/app/(rootLayout)/loading.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinners from '@/components/LoadingSpinners'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 
 export default function Loading() {
     // You can add any UI inside Loading, including a Skeleton.

package/templates/default/app/(rootLayout)/log/page.tsx

@@ -1,4 +1,4 @@
-import LogPage from '@/components/LogPage'
+import LogPage from '@/components/pages/log-page'
 
 export const dynamic = 'force-dynamic'
 

package/templates/default/app/(rootLayout)/new/[section]/page.tsx

@@ -1,4 +1,4 @@
-import NewPage from '@/components/NewPage'
+import NewPage from '@/components/pages/new-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 

package/templates/default/app/(rootLayout)/section/[section]/page.tsx

@@ -1,4 +1,4 @@
-import SectionPage from '@/components/SectionPage'
+import SectionPage from '@/components/pages/section-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 type Params = Promise<{ section: string }>
 type SearchParams = Promise<{ locale?: string }>

package/templates/default/app/(rootLayout)/settings/page.tsx

@@ -1,4 +1,4 @@
-import SettingsPage from '@/components/SettingsPage'
+import SettingsPage from '@/components/pages/settings-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 
 export const dynamic = 'force-dynamic'

package/templates/default/app/providers.tsx

@@ -2,7 +2,7 @@
 
 import type { Session } from 'nextjs-cms/auth'
 import { NextjsCmsProvider } from '@/app/_trpc/client'
-import { ModalProvider } from '@/context/ModalProvider'
+import { ModalProvider } from '@/components/feedback/modal-context'
 
 export default function Providers({ children, session }: { children: React.ReactNode; session: Session | undefined }) {
     return (

package/templates/default/cms.config.ts

@@ -1,5 +1,7 @@
-import { defineConfig } from 'nextjs-cms/core/config'
+import { defineConfig } from 'nextjs-cms/core/config'
+import process from 'process'
 import { resolve } from 'path'
+import { env } from './env/env'
 
 export default defineConfig({
     ui: {
@@ -17,7 +19,7 @@ export default defineConfig({
     media: {
         upload: {
             path:
-                process.env.NODE_ENV === 'development'
+                env.NODE_ENV === 'development'
                     ? 'D:/Work/WebstormProjects/turbo-expo-next/apps/web/public/content/'
                     : '/home2/syriasell/public_html/assets/content',
             preserveExtension: true,

package/templates/default/components/{AdminCard.tsx → admin/admin-card.tsx}

@@ -1,8 +1,8 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
-import ProtectedImage from '@/components/ProtectedImage'
-import AdminEditPage from '@/components/AdminEditPage'
+import { useModal } from '@/components/feedback/modal-context'
+import ProtectedImage from '@/components/media/protected-image'
+import AdminEditPage from '@/components/admin/admin-edit-page'
 import { useToast } from '@/components/ui/use-toast'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'

package/templates/default/components/{AdminEditPage.tsx → admin/admin-edit-page.tsx}

@@ -1,9 +1,9 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from './AdminPrivilegeCard'
-import LoadingSpinners from './LoadingSpinners'
+import AdminRoleCard from '@/components/admin/admin-privilege-card'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 import { Button } from '@/components/ui/button'
 
 export default function AdminEditPage({ id, action }: { id: string; action: any }) {

package/templates/default/components/{NewAdminForm.tsx → admin/new-admin-form.tsx}

@@ -1,10 +1,10 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
-import InfoCard from '@/components/InfoCard'
+import { useModal } from '@/components/feedback/modal-context'
+import InfoCard from '@/components/feedback/info-card'
 import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from '@/components/AdminPrivilegeCard'
+import AdminRoleCard from '@/components/admin/admin-privilege-card'
 import { Button } from '@/components/ui/button'
 import type { RouterOutputs } from '@/app/_trpc/types'
 

package/templates/default/components/{ContainerBox.tsx → container-box.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-// import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
     return (

package/templates/default/components/{ErrorComponent.tsx → feedback/error-component.tsx}

@@ -1,4 +1,4 @@
-import { Alert, AlertDescription } from './ui/alert'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export default function ErrorComponent({ message }: { message: string }) {

package/templates/default/{context/ModalProvider.tsx → components/feedback/modal-context.tsx}

@@ -1,53 +1,56 @@
-'use client'
-
-import React, { createContext, useState } from 'react'
-
-export type ModalResponse = {
-    message: React.ReactNode | string
-    messageColor?: string
-    borderColor?: string
-    bgColor?: string
-}
-
-export type Modal = {
-    title: string
-    titleColor: string
-    headerColor: string
-    body: React.ReactNode
-    lang: string
-    size?: 'sm' | 'md' | 'lg' | 'xl'
-}
-
-const ModalContext = createContext<{
-    modal: Modal | null
-    setModal: React.Dispatch<React.SetStateAction<Modal | null>>
-    modalResponse: ModalResponse | null
-    setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
-}>(
-    {} as {
-        modal: Modal | null
-        setModal: React.Dispatch<React.SetStateAction<Modal | null>>
-        modalResponse: ModalResponse | null
-        setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
-    },
-)
-
-export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
-    const [modal, setModal] = useState<Modal | null>(null)
-    const [modalResponse, setModalResponse] = useState<ModalResponse | null>(null)
-
-    return (
-        <ModalContext.Provider
-            value={{
-                modal,
-                setModal,
-                modalResponse,
-                setModalResponse,
-            }}
-        >
-            {children}
-        </ModalContext.Provider>
-    )
-}
-
-export default ModalContext
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+export type ModalResponse = {
+    message: React.ReactNode | string
+    messageColor?: string
+    borderColor?: string
+    bgColor?: string
+}
+
+export type Modal = {
+    title: string
+    titleColor: string
+    headerColor: string
+    body: React.ReactNode
+    lang: string
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+type ModalContextValue = {
+    modal: Modal | null
+    setModal: React.Dispatch<React.SetStateAction<Modal | null>>
+    modalResponse: ModalResponse | null
+    setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
+}
+
+const ModalContext = createContext<ModalContextValue | null>(null)
+
+export function ModalProvider({ children }: { children: React.ReactNode }) {
+    const [modal, setModal] = useState<Modal | null>(null)
+    const [modalResponse, setModalResponse] = useState<ModalResponse | null>(null)
+
+    return (
+        <ModalContext.Provider
+            value={{
+                modal,
+                setModal,
+                modalResponse,
+                setModalResponse,
+            }}
+        >
+            {children}
+        </ModalContext.Provider>
+    )
+}
+
+export function useModal() {
+    const context = useContext(ModalContext)
+
+    if (!context) {
+        throw new Error('useModal must be used within ModalProvider')
+    }
+
+    return context
+}

package/templates/default/components/{Modal.tsx → feedback/modal.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import { Suspense, useEffect, useRef, useState } from 'react'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import classNames from 'classnames'
 import { X, Loader2 } from 'lucide-react'
 

package/templates/default/components/form/{FormInputs.tsx → form-inputs.tsx}

@@ -1,22 +1,22 @@
 import type { FieldClientConfig } from 'nextjs-cms/core/fields'
 import React from 'react'
-import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
-import ColorFormInput from '@/components/form/inputs/ColorFormInput'
-import DateFormInput from '@/components/form/inputs/DateFormInput'
-import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
-import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
-import MapFormInput from '@/components/form/inputs/MapFormInput'
-import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
-import NumberFormInput from '@/components/form/inputs/NumberFormInput'
-import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
-import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
-import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
-import SelectFormInput from '@/components/form/inputs/SelectFormInput'
-import SlugFormInput from '@/components/form/inputs/SlugFormInput'
-import TagsFormInput from '@/components/form/inputs/TagsFormInput'
-import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
-import TextFormInput from '@/components/form/inputs/TextFormInput'
-import VideoFormInput from '@/components/form/inputs/VideoFormInput'
+import CheckboxFormInput from '@/components/form/inputs/checkbox-form-input'
+import ColorFormInput from '@/components/form/inputs/color-form-input'
+import DateFormInput from '@/components/form/inputs/date-form-input'
+import DateRangeFormInput from '@/components/form/inputs/date-range-form-input'
+import DocumentFormInput from '@/components/form/inputs/document-form-input'
+import MapFormInput from '@/components/form/inputs/map-form-input'
+import MultipleSelectFormInput from '@/components/form/inputs/multiple-select-form-input'
+import NumberFormInput from '@/components/form/inputs/number-form-input'
+import PasswordFormInput from '@/components/form/inputs/password-form-input'
+import PhotoFormInput from '@/components/form/inputs/photo-form-input'
+import RichTextFormInput from '@/components/form/inputs/rich-text-form-input'
+import SelectFormInput from '@/components/form/inputs/select-form-input'
+import SlugFormInput from '@/components/form/inputs/slug-form-input'
+import TagsFormInput from '@/components/form/inputs/tags-form-input'
+import TextareaFormInput from '@/components/form/inputs/textarea-form-input'
+import TextFormInput from '@/components/form/inputs/text-form-input'
+import VideoFormInput from '@/components/form/inputs/video-form-input'
 import {
     CheckboxFieldClientConfig,
     ColorFieldClientConfig,

package/templates/default/components/form/{Form.tsx → form.tsx}

@@ -1,12 +1,11 @@
 import type { RouterOutputs } from '@/app/_trpc/types'
 import React, { RefObject, useCallback, useEffect } from 'react'
-import ContainerBox from '@/components/ContainerBox'
-import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
-import { LocalizationProvider } from '@/components/form/ContentLocaleContext'
-import FormInputs from '@/components/form/FormInputs'
+import ContainerBox from '@/components/container-box'
+import Dropzone, { DropzoneHandles } from '@/components/media/dropzone'
+import { LocalizationProvider } from '@/components/form/content-locale-context'
+import FormInputs from '@/components/form/form-inputs'
 import { configLastUpdated } from '@/components/form/helpers/util'
-import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
-import ProgressBar from '@/components/ProgressBar'
+import ProgressBar from '@/components/feedback/progress-bar'
 import { zodResolver } from '@hookform/resolvers/zod'
 import classNames from 'classnames'
 import { useSession } from 'nextjs-cms/auth/react'
@@ -53,7 +52,7 @@ import {
 import { FormProvider, useForm } from 'react-hook-form'
 import * as z from 'zod'
 
-import PhotoGallery from '../PhotoGallery'
+import PhotoGallery from '@/components/media/photo-gallery'
 
 export const revalidate = 1
 
@@ -61,7 +60,6 @@ export default function Form({
     formType,
     data,
     dropzoneRef,
-    variantRef,
     handleSubmit,
     isSubmitting,
     response,
@@ -104,7 +102,6 @@ export default function Form({
                   | undefined
           }
     dropzoneRef?: RefObject<DropzoneHandles | null>
-    variantRef?: RefObject<VariantHandles[]>
     handleSubmit: any
     isSubmitting: boolean
     response?: any
@@ -353,7 +350,8 @@ export default function Form({
                                                             className={classNames({
                                                                 'w-full': buttonType === 'big',
                                                                 'float-end': buttonType === 'small',
-                                                                'bg-linear-to-r rounded px-4 py-2 font-bold text-white drop-shadow-sm': true,
+                                                                'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
+                                                                    true,
                                                                 'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
                                                                     !isSubmitting,
                                                                 'from-gray-600 via-gray-500 to-gray-400': isSubmitting,

package/templates/default/components/form/inputs/{CheckboxFormInput.tsx → checkbox-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { CheckboxFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 import { Switch } from '@/components/ui/switch'

package/templates/default/components/form/inputs/{ColorFormInput.tsx → color-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { ColorFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 

package/templates/default/components/form/inputs/{DateFormInput.tsx → date-form-input.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import dayjs from 'dayjs'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

package/templates/default/components/form/inputs/{DateRangeFormInput.tsx → date-range-form-input.tsx}

@@ -8,7 +8,7 @@ import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { DateRangeFieldClientConfig } from 'nextjs-cms/core/fields'
 
 const seasonEmoji: Record<string, string> = {

package/templates/default/components/form/inputs/{DocumentFormInput.tsx → document-form-input.tsx}

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedDocument from '@/components/ProtectedDocument'
+import FormInputElement from '@/components/form/form-input-element'
+import ProtectedDocument from '@/components/media/protected-document'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useI18n } from 'nextjs-cms/translations/client'

package/templates/default/components/form/inputs/{MapFormInput.tsx → map-form-input.tsx}

@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react'
 import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps'
-import ContainerBox from '@/components/ContainerBox'
+import ContainerBox from '@/components/container-box'
 import { Button } from '@/components/ui/button'
-import TooltipComponent from '@/components/TooltipComponent'
+import TooltipComponent from '@/components/feedback/tooltip-component'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { MapFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
+import { env } from '@/env/env'
 
 export default function MapFormInput({ input }: { input: MapFieldClientConfig }) {
     const t = useI18n()
@@ -62,7 +63,7 @@ export default function MapFormInput({ input }: { input: MapFieldClientConfig })
                         onBlur={field.onBlur}
                         ref={field.ref}
                     />
-                    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ''}>
+                    <APIProvider apiKey={env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ''}>
                         <Map
                             clickableIcons={false}
                             zoomControl={true}

package/templates/default/components/form/inputs/{MultipleSelectFormInput.tsx → multiple-select-form-input.tsx}

@@ -1,4 +1,4 @@
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { useEffect, useState } from 'react'
 import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'

package/templates/default/components/form/inputs/{NumberFormInput.tsx → number-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { NumberFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 import { isNumber, toNumber } from 'lodash-es'

package/templates/default/components/form/inputs/{PasswordFormInput.tsx → password-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { PasswordFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 

package/templates/default/components/form/inputs/{PhotoFormInput.tsx → photo-form-input.tsx}

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedImage from '@/components/ProtectedImage'
+import FormInputElement from '@/components/form/form-input-element'
+import ProtectedImage from '@/components/media/protected-image'
 import Image from 'next/image'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'

package/templates/default/components/form/inputs/{RichTextFormInput.tsx → rich-text-form-input.tsx}

@@ -1,11 +1,11 @@
 import React, { useRef, useState } from 'react'
 import { Editor } from '@tinymce/tinymce-react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 // import { useTheme } from 'next-themes'
 import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useFormContext } from 'react-hook-form'
-import { useLocale } from '@/components/form/ContentLocaleContext'
+import { useLocale } from '@/components/form/content-locale-context'
 
 export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
     const { setValue, register, formState } = useFormContext()

package/templates/default/components/form/inputs/{SelectFormInput.tsx → select-form-input.tsx}

@@ -1,13 +1,13 @@
 import { useEffect, useState, useMemo } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import SelectBox from '@/components/SelectBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
+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 { useI18n } from 'nextjs-cms/translations/client'
 import { useSession } from 'nextjs-cms/auth/react'
 import { trpc } from '@/app/_trpc/client'
 import { SelectFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
-import { ConditionalFields } from '@/components/ConditionalFields'
+import { ConditionalFields } from '@/components/sections/conditional-fields'
 import { useController, useFormContext } from 'react-hook-form'
 
 export default function SelectFormInput({

package/templates/default/components/form/inputs/{SlugFormInput.tsx → slug-form-input.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useCallback, useEffect, useRef } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController, useWatch } from 'react-hook-form'
 import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'

package/templates/default/components/form/inputs/{TagsFormInput.tsx → tags-form-input.tsx}

@@ -1,4 +1,4 @@
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'

package/templates/default/components/form/inputs/{TextFormInput.tsx → text-form-input.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { TextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController } from 'react-hook-form'
-import { useLocale } from '@/components/form/ContentLocaleContext'
+import { useLocale } from '@/components/form/content-locale-context'
 
 export default function TextFormInput({
     input,