create-nextjs-cms 0.9.5 → 0.9.7

package/dist/helpers/check-directory.d.ts

@@ -2,5 +2,6 @@ export declare const resolveDirectory: (appName: string) => Promise<{
     targetDir: string;
     projectName: string;
     targetIsCwd: boolean;
+    targetExistedBefore: boolean;
 }>;
 //# sourceMappingURL=check-directory.d.ts.map

package/dist/helpers/check-directory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"check-directory.d.ts","sourceRoot":"","sources":["../../src/helpers/check-directory.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,GACzB,SAAS,MAAM,KAChB,OAAO,CAAC;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,OAAO,CAAA;CACvB,CAwCA,CAAA"}
+{"version":3,"file":"check-directory.d.ts","sourceRoot":"","sources":["../../src/helpers/check-directory.ts"],"names":[],"mappings":"AA2HA,eAAO,MAAM,gBAAgB,GACzB,SAAS,MAAM,KAChB,OAAO,CAAC;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,OAAO,CAAA;IACpB,mBAAmB,EAAE,OAAO,CAAA;CAC/B,CAqCA,CAAA"}

package/dist/helpers/check-directory.js

@@ -6,6 +6,85 @@ import fs from 'fs-extra';
 import { isEmptyDir } from './utils.js';
 import * as p from '@clack/prompts';
 import chalk from 'chalk';
+import ora from 'ora';
+const abortInstallation = () => {
+    p.cancel('Aborting installation');
+    process.exit(1);
+};
+const abortDirectoryCleanup = (targetDir, error) => {
+    p.log.error(`Failed to empty ${targetDir === process.cwd() ? 'the current directory' : `"${targetDir}"`}.`);
+    p.log.message('Some files may already have been deleted.');
+    p.log.message(`Please review and clean this directory manually: ${targetDir}`);
+    p.log.message(`Reason: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    return abortInstallation();
+};
+const getDirectoryEntriesToDelete = async (targetDir, keepGit) => {
+    const entries = await fs.readdir(targetDir);
+    return entries.filter((entry) => !(keepGit && entry === '.git'));
+};
+const emptyDirectory = async (targetDir, entries, onEntryDeleted) => {
+    let deletedCount = 0;
+    for (const entry of entries) {
+        await fs.remove(path.join(targetDir, entry));
+        deletedCount += 1;
+        onEntryDeleted?.(deletedCount, entries.length);
+    }
+};
+const runDirectoryCleanup = async ({ targetDir, targetIsCwd, keepGit, }) => {
+    const spinnerText = keepGit
+        ? `Emptying ${targetIsCwd ? 'the current directory' : `"${targetDir}"`} and keeping .git...`
+        : `Emptying ${targetIsCwd ? 'the current directory' : `"${targetDir}"`}...`;
+    const successMessage = keepGit
+        ? `Emptied ${targetIsCwd ? 'the current directory' : `"${targetDir}"`} and kept ${chalk.green('.git')}.`
+        : `Emptied ${targetIsCwd ? 'the current directory' : `"${targetDir}"`}.`;
+    const entriesToDelete = await getDirectoryEntriesToDelete(targetDir, keepGit);
+    const spinner = ora(entriesToDelete.length > 0 ? `${spinnerText} (0/${entriesToDelete.length})` : spinnerText).start();
+    try {
+        await emptyDirectory(targetDir, entriesToDelete, (deletedCount, totalCount) => {
+            spinner.text = `${spinnerText} (${deletedCount}/${totalCount})`;
+        });
+    }
+    catch (error) {
+        spinner.stop();
+        abortDirectoryCleanup(targetDir, error);
+    }
+    spinner.stop();
+    p.log.info(successMessage);
+};
+const promptForNonEmptyDirectoryAction = async (targetDir, targetIsCwd) => {
+    if (targetIsCwd) {
+        p.log.error('Current directory is not empty.');
+        p.log.message(chalk.gray('Tip: You can also specify a directory name like this: \n') +
+            chalk.green('pnpm create nextjs-cms ') +
+            chalk.italic.magenta('my-app'));
+    }
+    else {
+        p.log.error(`Directory "${targetDir}" is not empty.`);
+    }
+    p.log.message('Choose how you want to proceed:');
+    const action = await p.select({
+        message: 'How would you like to proceed?',
+        initialValue: 'abort',
+        options: [
+            { value: 'abort', label: 'Abort' },
+            { value: 'empty', label: 'Empty directory ⚠️', hint: 'Delete everything in the target directory' },
+            {
+                value: 'empty-keep-git',
+                label: 'Empty directory and keep .git folder ⚠️',
+                hint: 'Delete everything except the root .git folder',
+            },
+            {
+                value: 'continue',
+                label: 'Continue anyway ⚠️',
+                hint: 'Existing files may be overwritten and the app may be unstable',
+            },
+        ],
+    });
+    if (p.isCancel(action) || action === 'abort') {
+        abortInstallation();
+    }
+    return action;
+};
 export const resolveDirectory = async (appName) => {
     // Resolve target path from the caller's CWD
     const rawTarget = expandHome(appName);
@@ -13,35 +92,31 @@ export const resolveDirectory = async (appName) => {
     // Derive package name from final path
     const projectName = basename(targetDir);
     const targetIsCwd = path.normalize(targetDir) === path.normalize(process.cwd());
-    if (targetIsCwd) {
-        // Using current directory (".")
-        if (!(await fs.pathExists(targetDir))) {
-            await fs.ensureDir(targetDir);
-        }
-        else if (!(await isEmptyDir(targetDir))) {
-            p.log.error('Current directory is not empty. Choose an empty folder or a new directory name.');
-            p.log.message(chalk.gray('Tip: You can also specify a directory name like this: \n') +
-                chalk.green('pnpm create nextjs-cms ') +
-                chalk.italic.magenta('my-app'));
-            p.log.message(' ');
-            process.exit(1);
-        }
+    const targetExistedBefore = await fs.pathExists(targetDir);
+    if (!targetExistedBefore) {
+        await fs.ensureDir(targetDir);
     }
-    else {
-        if (await fs.pathExists(targetDir)) {
-            if (!(await isEmptyDir(targetDir))) {
-                p.log.error(`Directory "${targetDir}" is not empty.`);
-                p.log.message('Please choose an empty directory or a different directory name.');
-                process.exit(1);
-            }
-        }
-        else {
-            await fs.ensureDir(targetDir);
+    else if (!(await isEmptyDir(targetDir))) {
+        const action = await promptForNonEmptyDirectoryAction(targetDir, targetIsCwd);
+        switch (action) {
+            case 'empty':
+                await runDirectoryCleanup({ targetDir, targetIsCwd, keepGit: false });
+                break;
+            case 'empty-keep-git':
+                await runDirectoryCleanup({ targetDir, targetIsCwd, keepGit: true });
+                break;
+            case 'continue':
+                p.log.warn('Continuing in a non-empty directory. Existing files may be overwritten.');
+                break;
+            default:
+                action;
+                break;
         }
     }
     return {
         targetDir,
         projectName,
         targetIsCwd,
+        targetExistedBefore,
     };
 };

package/dist/index.js

@@ -21,7 +21,7 @@ async function createNextjsCms() {
     // Run CLI to get user input
     const { appName, sectionsToAdd, git /*, databaseProvider*/ } = await runCli();
     // Resolve directory
-    const { targetDir, projectName, targetIsCwd } = await resolveDirectory(appName);
+    const { targetDir, projectName, targetIsCwd, targetExistedBefore } = await resolveDirectory(appName);
     try {
         // Detect package manager
         const preferredPM = detectPackageManager();
@@ -63,14 +63,19 @@ async function createNextjsCms() {
         p.outro(chalk.red(`❌ Failed to create project: ${error instanceof Error ? error.message : 'Unknown error'}`));
         // Clean up partial installation on error
         if ((await fs.pathExists(targetDir)) && !targetIsCwd) {
-            p.log.info('🧹 Cleaning up partial installation...');
-            try {
-                await fs.remove(targetDir);
-                p.log.success('✅ Cleanup completed.');
+            if (targetExistedBefore) {
+                p.log.warn('Project creation failed in a pre-existing directory. Existing files were left in place.');
             }
-            catch {
-                p.log.error('⚠️ Could not clean up partial installation.');
-                p.log.message(`   Please manually remove: ${targetDir}`);
+            else {
+                p.log.info('🧹 Cleaning up partial installation...');
+                try {
+                    await fs.remove(targetDir);
+                    p.log.success('✅ Cleanup completed.');
+                }
+                catch {
+                    p.log.error('⚠️ Could not clean up partial installation.');
+                    p.log.message(`   Please manually remove: ${targetDir}`);
+                }
             }
         }
         process.exit(1);

package/dist/lib/create-project.js

@@ -22,7 +22,7 @@ export const createProject = async ({ targetDir, sectionsToAdd, projectName, pre
                 !rel.startsWith('.turbo') &&
                 !rel.includes('tsconfig.tsbuildinfo'));
         },
-        // Overwrite is safe since target is ensured empty (or new)
+        // Overwrite is intentional because the target is new, user-approved, or was explicitly emptied
         overwrite: true,
         errorOnExist: false,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "private": false,
   "type": "module",
   "bin": {
@@ -29,8 +29,8 @@
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
     "@lzcms/eslint-config": "0.3.0",
-    "@lzcms/prettier-config": "0.1.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-language-provider.tsx

@@ -1,34 +1,34 @@
-'use client'
-
-import { createContext, useContext, type ReactNode } from 'react'
-
-export interface AuthLanguageValue {
-    supportedLanguages: readonly string[]
-    fallbackLanguage: string
-    initialLanguage: string
-}
-
-const AuthLanguageContext = createContext<AuthLanguageValue | null>(null)
-
-export function AuthLanguageProvider({
-    supportedLanguages,
-    fallbackLanguage,
-    initialLanguage,
-    children,
-}: AuthLanguageValue & { children: ReactNode }) {
-    return (
-        <AuthLanguageContext.Provider
-            value={{ supportedLanguages, fallbackLanguage, initialLanguage }}
-        >
-            {children}
-        </AuthLanguageContext.Provider>
-    )
-}
-
-export function useAuthLanguage(): AuthLanguageValue {
-    const ctx = useContext(AuthLanguageContext)
-    if (!ctx) {
-        throw new Error('useAuthLanguage must be used within AuthLanguageProvider')
-    }
-    return ctx
-}
+'use client'
+
+import { createContext, useContext, type ReactNode } from 'react'
+
+export interface AuthLanguageValue {
+    supportedLanguages: readonly string[]
+    fallbackLanguage: string
+    initialLanguage: string
+}
+
+const AuthLanguageContext = createContext<AuthLanguageValue | null>(null)
+
+export function AuthLanguageProvider({
+    supportedLanguages,
+    fallbackLanguage,
+    initialLanguage,
+    children,
+}: AuthLanguageValue & { children: ReactNode }) {
+    return (
+        <AuthLanguageContext.Provider
+            value={{ supportedLanguages, fallbackLanguage, initialLanguage }}
+        >
+            {children}
+        </AuthLanguageContext.Provider>
+    )
+}
+
+export function useAuthLanguage(): AuthLanguageValue {
+    const ctx = useContext(AuthLanguageContext)
+    if (!ctx) {
+        throw new Error('useAuthLanguage must be used within AuthLanguageProvider')
+    }
+    return ctx
+}

package/templates/default/components/AnalyticsPage.tsx

@@ -3,7 +3,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import React, { useEffect, useRef } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
-import { DatePickerWithRange } from '@/components/form/DateRangeFormInput'
+import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
 import { MonthlyPageViews } from '@/components/analytics/MonthlyPageViews'
 import { TopSources } from '@/components/analytics/TopSources'
 import { TopMediums } from '@/components/analytics/TopMediums'
@@ -15,17 +15,19 @@ import { BounceRate } from '@/components/analytics/BounceRate'
 import { LivePageViews } from '@/components/analytics/LivePageViews'
 import { TopCountries } from '@/components/analytics/TopCountries'
 import { TopDevices } from '@/components/analytics/TopDevices'
-import { trpc } from '@/app/_trpc/client'
+// import { trpc } from '@/app/_trpc/client'
 ChartJS.register(ArcElement, Tooltip, Legend)
 
+// TODO: MOVE THIS TO THE PLUGIN
+
 const AnalyticsPage = () => {
     const t = useI18n()
     const controller = new AbortController()
     const datePickerRangeRef = useRef<HTMLDivElement>(null)
-    const [fromDate, setFromDate] = React.useState<Date | string>('30daysAgo')
-    const [toDate, setToDate] = React.useState<Date | string>('today')
+    const [fromDate, setFromDate] = React.useState<string>('30daysAgo')
+    const [toDate, setToDate] = React.useState<string>('today')
 
-    const { data, isError } = trpc.googleAnalytics.test.useQuery()
+    // const { data, isError } = trpc.googleAnalytics.test.useQuery()
 
     useEffect(() => {
         return () => {
@@ -92,7 +94,21 @@ const AnalyticsPage = () => {
                         </Tabs>
                     </Tabs>
                     <div ref={datePickerRangeRef} className='hidden'>
-                        <DatePickerWithRange />
+                        <DateRangeFormInput input={{
+                            name: 'dateRange',
+                            label: 'Date Range',
+                            required: true,
+                            conditionalFields: [],
+                            readonly: false,
+                            defaultValue: undefined,
+                            value: undefined,
+                            startName: 'fromDate',
+                            endName: 'toDate',
+                            format: 'date',
+                            startValue: fromDate,
+                            endValue: toDate,
+                            type: 'date_range',
+                        }} />
                     </div>
                 </div>
                 <div className='my-2 grid grid-cols-2 gap-4 sm-sidebar:grid-cols-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -25,9 +25,9 @@ export default function CategorySectionSelectInput({
     /**
      * 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)
+    const exists = input?.options?.filter((option) => option.value === undefined)
     if (!exists || exists.length === 0) {
-        if (input.options) {
+        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') })
         }

package/templates/default/components/form/Form.tsx

@@ -16,6 +16,7 @@ import {
     CheckboxFieldClientConfig,
     ColorFieldClientConfig,
     DateFieldClientConfig,
+    DateRangeFieldClientConfig,
     DocumentFieldClientConfig,
     MapFieldClientConfig,
     NumberFieldClientConfig,
@@ -36,6 +37,7 @@ import {
     selectFieldSchema,
     selectMultipleFieldSchema,
     dateFieldSchema,
+    dateRangeFieldSchema,
     checkboxFieldSchema,
     textareaFieldSchema,
     richTextFieldSchema,
@@ -79,6 +81,8 @@ export default function Form({
               section: {
                   name: string
                   gallery?: boolean
+                  title?: { section?: string; singular?: string; plural?: string }
+                  configFile?: string
               }
               inputGroups:
                   | {
@@ -152,6 +156,12 @@ export default function Form({
                     })
                     break
 
+                case 'date_range':
+                    schema = schema.extend(
+                        dateRangeFieldSchema(input as DateRangeFieldClientConfig, language),
+                    )
+                    break
+
                 case 'checkbox':
                     schema = schema.extend({
                         [input.name]: checkboxFieldSchema(input as CheckboxFieldClientConfig, language),
@@ -263,7 +273,7 @@ export default function Form({
                                         <div className='rounded border border-amber-300 bg-amber-50 p-4 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'>
                                             <h3 className='font-semibold'>{t('noLocalizedFields')}</h3>
                                             <p className='mt-1'>
-                                                {t('noLocalizedFieldsHint', { section: data.section.title.section, file: data.section.configFile })}
+                                                {t('noLocalizedFieldsHint', { section: typeof data.section.title === 'object' ? (data.section.title?.section ?? '') : '', file: data.section.configFile })}
                                             </p>
                                         </div>
                                     ) : (
@@ -286,7 +296,7 @@ export default function Form({
                                     {data.section.gallery && !isTranslationMode ? (
                                         <>
                                         <div className='w-full'>
-                                            <PhotoGallery sectionName={data.section.name} gallery={data.gallery} />
+                                            <PhotoGallery sectionName={data.section.name} gallery={'gallery' in data ? data.gallery : []} />
                                         </div>
                                         <div className='w-full'>
                                             <Dropzone ref={dropzoneRef} />

package/templates/default/components/form/FormInputs.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React from 'react'
 import ColorFormInput from '@/components/form/inputs/ColorFormInput'
 import NumberFormInput from '@/components/form/inputs/NumberFormInput'
 import TextFormInput from '@/components/form/inputs/TextFormInput'
 import DateFormInput from '@/components/form/inputs/DateFormInput'
+import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
 import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
 import SelectFormInput from '@/components/form/inputs/SelectFormInput'
 import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
@@ -20,6 +21,7 @@ import {
     CheckboxFieldClientConfig,
     ColorFieldClientConfig,
     DateFieldClientConfig,
+    DateRangeFieldClientConfig,
     DocumentFieldClientConfig,
     MapFieldClientConfig,
     NumberFieldClientConfig,
@@ -35,15 +37,15 @@ import {
     SlugFieldClientConfig,
 } from 'nextjs-cms/core/fields'
 
-export default function FormInputs({
-    inputs,
-    sectionName,
-    submitSuccessCount = 0,
-}: {
-    inputs: FieldClientConfig[]
-    sectionName: string
-    submitSuccessCount?: number
-}) {
+export default function FormInputs({
+    inputs,
+    sectionName,
+    submitSuccessCount = 0,
+}: {
+    inputs: FieldClientConfig[]
+    sectionName: string
+    submitSuccessCount?: number
+}) {
     return (
         <>
             {inputs?.length > 0 &&
@@ -57,6 +59,13 @@ export default function FormInputs({
                             return <TextFormInput input={input as TextFieldClientConfig} key={input.name} />
                         case 'date':
                             return <DateFormInput input={input as DateFieldClientConfig} key={input.name} />
+                        case 'date_range':
+                            return (
+                                <DateRangeFormInput
+                                    input={input as DateRangeFieldClientConfig}
+                                    key={(input as DateRangeFieldClientConfig).startName}
+                                />
+                            )
                         case 'rich_text':
                             return <RichTextFormInput input={input as RichTextFieldClientConfig} key={input.name} />
                         case 'textarea':
@@ -78,12 +87,12 @@ export default function FormInputs({
                             )
                         case 'photo':
                             return (
-                                <PhotoFormInput
-                                    sectionName={sectionName}
-                                    input={input as PhotoFieldClientConfig}
-                                    submitSuccessCount={submitSuccessCount}
-                                    key={input.name}
-                                />
+                                <PhotoFormInput
+                                    sectionName={sectionName}
+                                    input={input as PhotoFieldClientConfig}
+                                    submitSuccessCount={submitSuccessCount}
+                                    key={input.name}
+                                />
                             )
                         case 'video':
                             return (