create-nextjs-cms 0.9.23 → 0.9.24

package/templates/default/env/env.ts

@@ -0,0 +1,42 @@
+import { createEnv } from '@t3-oss/env-nextjs'
+import * as z from 'zod'
+
+export const env = createEnv({
+    /**
+     * Specify your server-side environment variables schema here. This way you can ensure the app
+     * isn't built with invalid env vars.
+     */
+    server: {
+        ACCESS_TOKEN_SECRET: z.string(),
+        REFRESH_TOKEN_SECRET: z.string(),
+        CSRF_TOKEN_SECRET: z.string(),
+        ACCESS_TOKEN_EXPIRATION: z.string(),
+        REFRESH_TOKEN_EXPIRATION: z.string(),
+        NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+    },
+
+    /**
+     * Specify your client-side environment variables schema here. This way you can ensure the app
+     * isn't built with invalid env vars. To expose them to the client, prefix them with
+     * `NEXT_PUBLIC_`.
+     */
+    client: {
+        NEXT_PUBLIC_RICHTEXT_INLINE_PUBLIC_URL: z.string().optional(),
+        NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: z.string().optional(),
+    },
+
+    experimental__runtimeEnv: {
+        NEXT_PUBLIC_RICHTEXT_INLINE_PUBLIC_URL: process.env.NEXT_PUBLIC_RICHTEXT_INLINE_PUBLIC_URL,
+        NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
+    },
+    /**
+     * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+     * useful for Docker builds.
+     */
+    skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+    /**
+     * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+     * `SOME_VAR=''` will throw an error.
+     */
+    emptyStringAsUndefined: true,
+})

package/templates/default/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/default/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from 'next'
+import '@/env/env'
 
 const nextConfig: NextConfig = {
     serverExternalPackages: [

package/templates/default/package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@t3-oss/env-nextjs": "^0.13.11",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tinymce/tinymce-react": "^6.3.0",

package/templates/default/components/AnalyticsPage.tsx

@@ -1,144 +0,0 @@
-'use client'
-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 DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
-import { MonthlyPageViews } from '@/components/analytics/MonthlyPageViews'
-import { TopSources } from '@/components/analytics/TopSources'
-import { TopMediums } from '@/components/analytics/TopMediums'
-import { LiveUsersCount } from '@/components/analytics/LiveUsersCount'
-import { TotalPageViews } from '@/components/analytics/TotalPageViews'
-import { TotalSessions } from '@/components/analytics/TotalSessions'
-import { TotalUniqueUsers } from '@/components/analytics/TotalUniqueUsers'
-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'
-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<string>('30daysAgo')
-    const [toDate, setToDate] = React.useState<string>('today')
-
-    // const { data, isError } = trpc.googleAnalytics.test.useQuery()
-
-    useEffect(() => {
-        return () => {
-            controller.abort()
-        }
-    }, [])
-
-    return (
-        <div className='w-full'>
-            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{t('analytics')}</h1>
-            </div>
-            <div className='p-4'>
-                <div className='flex gap-2'>
-                    <Tabs
-                        defaultValue='account'
-                        onValueChange={(value) => {
-                            if (value === 'custom') {
-                                // Remove hidden class from date picker range
-                                datePickerRangeRef.current?.classList.remove('hidden')
-                            } else {
-                                // Add hidden class to date picker range
-                                datePickerRangeRef.current?.classList.add('hidden')
-                            }
-                        }}
-                    >
-                        <Tabs
-                            defaultValue='lastMonth'
-                            onValueChange={(value) => {
-                                if (value === 'custom') {
-                                    // Remove hidden class from date picker range
-                                    datePickerRangeRef.current?.classList.remove('hidden')
-                                } else {
-                                    switch (value) {
-                                        case 'today':
-                                            setFromDate('yesterday')
-                                            setToDate('today')
-                                            break
-                                        case 'lastWeek':
-                                            setFromDate('10daysAgo')
-                                            setToDate('today')
-                                            break
-                                        case 'lastMonth':
-                                            setFromDate('30daysAgo')
-                                            setToDate('today')
-                                            break
-                                        case 'lastYear':
-                                            setFromDate('365daysAgo')
-                                            setToDate('today')
-                                            break
-                                    }
-                                    // Add hidden class to date picker range
-                                    datePickerRangeRef.current?.classList.add('hidden')
-                                }
-                            }}
-                        >
-                            <TabsList>
-                                <TabsTrigger value='today'>{t('today')}</TabsTrigger>
-                                <TabsTrigger value='lastWeek'>{t('last7Days')}</TabsTrigger>
-                                <TabsTrigger value='lastMonth'>{t('last30Days')}</TabsTrigger>
-                                <TabsTrigger value='lastYear'>{t('last365Days')}</TabsTrigger>
-                                <TabsTrigger value='custom'>{t('custom')}</TabsTrigger>
-                            </TabsList>
-                        </Tabs>
-                    </Tabs>
-                    <div ref={datePickerRangeRef} className='hidden'>
-                        <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'>
-                    <LiveUsersCount />
-                    <TotalPageViews fromDate={fromDate} toDate={toDate} />
-                    <TotalSessions fromDate={fromDate} toDate={toDate} />
-                    <TotalUniqueUsers fromDate={fromDate} toDate={toDate} />
-                </div>
-                <div className='my-4 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>
-                    <div className='col-span-2'>
-                        <MonthlyPageViews fromDate={fromDate} toDate={toDate} />
-                    </div>
-                    <div className='col-span-2 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2'>
-                        <TopCountries fromDate={fromDate} toDate={toDate} />
-                        <BounceRate fromDate={fromDate} toDate={toDate} />
-                    </div>
-                </div>
-                <div className='my-4 grid grid-cols-1 gap-4 sm-sidebar:grid-cols-1 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-4'>
-                    <div className='col-span-2'>
-                        <TopSources fromDate={fromDate} toDate={toDate} />
-                    </div>
-                    <TopMediums fromDate={fromDate} toDate={toDate} />
-                    <TopDevices fromDate={fromDate} toDate={toDate} />
-                </div>
-                <div className='my-2'>
-                    <LivePageViews />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default AnalyticsPage

package/templates/default/components/BarChartBox.tsx

@@ -1,42 +0,0 @@
-import ContainerBox from '@/components/ContainerBox'
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts'
-import { BarChartDataItem } from 'nextjs-cms/core/types'
-import LoadingSpinners from '@/components/LoadingSpinners'
-
-export default function BarChartBox({
-    chartData,
-    title,
-    fill = '#adfa1d',
-    isLoading,
-}: {
-    chartData: BarChartDataItem[]
-    title: string
-    fill?: string
-    isLoading?: boolean
-}) {
-    return (
-        <ContainerBox title={title}>
-            <div>
-                <div style={{ width: '100%', height: 300 }}>
-                    {isLoading ? (
-                        <LoadingSpinners single={true} />
-                    ) : (
-                        <ResponsiveContainer width='100%' height='100%'>
-                            <BarChart data={chartData}>
-                                <XAxis
-                                    dataKey='name'
-                                    stroke='#888888'
-                                    fontSize={12}
-                                    tickLine={false}
-                                    axisLine={false}
-                                />
-                                <YAxis stroke='#888888' fontSize={12} tickLine={false} axisLine={true} />
-                                <Bar dataKey='value' fill={fill} radius={[4, 4, 0, 0]} />
-                            </BarChart>
-                        </ResponsiveContainer>
-                    )}
-                </div>
-            </div>
-        </ContainerBox>
-    )
-}

package/templates/default/components/NewVariantComponent.tsx

@@ -1,229 +0,0 @@
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
-import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
-import ContainerBox from '@/components/ContainerBox'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Button } from '@/components/ui/button'
-import { useQuery } from '@tanstack/react-query'
-import { getNewVariantPage } from '@/lib/apiHelpers'
-import { useAxiosPrivate } from 'nextjs-cms/api/client'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import { InputGroup, Variant, VariantItem } from 'nextjs-cms/core/types'
-import FormInputs from '@/components/form/FormInputs'
-import classNames from 'classnames'
-import ProgressBar from '@/components/ProgressBar'
-import { AxiosError } from 'axios'
-import InfoCard from '@/components/InfoCard'
-import { useToast } from '@/components/ui/use-toast'
-import { nanoid } from 'nanoid'
-import { MinusIcon } from '@radix-ui/react-icons'
-
-export interface VariantHandles {
-    getVariants: () => VariantItem[]
-    removeVariants: () => void
-}
-
-function NewVariantComponent(
-    {
-        section,
-        variantInfo,
-        xsrfToken,
-    }: {
-        section: string
-        variantInfo: Variant
-        xsrfToken: string
-    },
-    ref: Ref<VariantHandles>,
-) {
-    const t = useI18n()
-    const [open, setOpen] = React.useState(false)
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-    const { isLoading, isError, data, error } = useQuery({
-        queryKey: ['newVariant', variantInfo.variant_name],
-        queryFn: () => getNewVariantPage(section, variantInfo.variant_name, axiosPrivate, controller),
-    })
-
-    const [variants, setVariants] = useState<VariantItem[]>([])
-    const [progress, setProgress] = useState(0)
-    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [response, setResponse] = useState<any>(null)
-    const { toast } = useToast()
-
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        setIsSubmitting(true)
-        e.preventDefault()
-        e.stopPropagation()
-        setResponse(null)
-        const formData = new FormData(e.currentTarget)
-
-        formData.append('section', section)
-        formData.append('variant', variantInfo.variant_name)
-        formData.append('preSubmit', 'true')
-        formData.append('form_type', 'new')
-
-        const body = Object.fromEntries(formData.entries())
-        try {
-            const res = await axiosPrivate.post(`/api-submit`, body, {
-                signal: controller.signal,
-                onUploadProgress: (progressEvent) => {
-                    if (!progressEvent.total) return
-                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
-                    // Update progress bar value here
-                    setProgress(progress)
-
-                    if (progress === 100) {
-                        setProgressVariant('query')
-                    }
-                },
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            })
-
-            if (res) {
-                setIsSubmitting(false)
-                setProgress(0)
-                setProgressVariant('determinate')
-                if (res.data.code === 200) {
-                    setOpen(false)
-                    // Handle closure
-                    setResponse(null)
-
-                    // Add the new variant to the list
-                    // But first, let's remove the 'preSubmit' key
-                    delete body.preSubmit
-                    setVariants([
-                        ...variants,
-                        {
-                            id: nanoid(),
-                            // @ts-ignore
-                            title: formData.get(data?.variant.heading_input_name),
-                            data: body,
-                        } as VariantItem,
-                    ])
-                }
-            }
-        } catch (error: AxiosError | any) {
-            setIsSubmitting(false)
-            setProgress(0)
-            setProgressVariant('determinate')
-            if (error?.response?.data) {
-                setResponse(
-                    <InfoCard result={{ key: 'danger', title: error.response.data.error.message, status: false }} />,
-                )
-            }
-        }
-    }
-
-    function cancelSubmit() {
-        controller.abort()
-        setIsSubmitting(false)
-        setProgress(0)
-        setProgressVariant('determinate')
-    }
-
-    useEffect(() => {
-        // console.log('variants', variants)
-        return () => {
-            cancelSubmit()
-        }
-    }, [variants])
-
-    useImperativeHandle(ref, () => ({
-        getVariants: () => variants,
-        removeVariants: () => {
-            setVariants([])
-        },
-    }))
-
-    return (
-        <ContainerBox title={`${t('add')} ${variantInfo.variant_html_name_en}`}>
-            <div className='mb-4 grid grid-cols-1 gap-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent p-2 md:grid-cols-2 lg:grid-cols-4'>
-                {variants.map((v) => (
-                    <ContainerBox title={v.title} key={v.id}>
-                        {/* Delete Button */}
-                        <button
-                            type='button'
-                            className='absolute end-1 top-1 rounded-lg bg-red-500 p-1'
-                            onClick={() => {
-                                setVariants((prev) =>
-                                    prev.filter((prevVariant) => {
-                                        if (prevVariant.id !== v.id) {
-                                            return prevVariant
-                                        }
-                                    }),
-                                )
-                            }}
-                        >
-                            <MinusIcon className='text-white' />
-                        </button>
-                        <div className='truncate'>{JSON.stringify(v.data)}</div>
-                    </ContainerBox>
-                ))}
-            </div>
-            <Sheet open={open} onOpenChange={setOpen}>
-                <SheetTrigger>
-                    <Button type='button'>{t('add')} +</Button>
-                </SheetTrigger>
-                <SheetContent className='w-1/2 max-w-[2/3] sm:w-[940px] sm:max-w-full'>
-                    <SheetHeader>
-                        <SheetTitle>{t('newVariant')}</SheetTitle>
-                        <SheetDescription>
-                            <form onSubmit={handleSubmit}>
-                                <div className=''>
-                                    {isLoading && (
-                                        <div>
-                                            <LoadingSpinners />
-                                        </div>
-                                    )}
-
-                                    {data && data.inputGroups && (
-                                        <div className='flex flex-col gap-4'>
-                                            {data?.inputGroups?.length > 0 &&
-                                                data?.inputGroups?.map((inputGroup: InputGroup, index: number) => {
-                                                    return (
-                                                        <ContainerBox title={inputGroup.groupTitle} key={index}>
-                                                            <FormInputs
-                                                                inputs={[]}
-                                                                sectionName={variantInfo.variant_name}
-                                                            />
-                                                        </ContainerBox>
-                                                    )
-                                                })}
-                                        </div>
-                                    )}
-                                    <div className='my-4 flex flex-col gap-3 p-4'>
-                                        <div className='mt-5'>
-                                            <button
-                                                className={classNames({
-                                                    'w-full rounded bg-linear-to-r p-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,
-                                                })}
-                                                type='submit'
-                                                disabled={isSubmitting}
-                                            >
-                                                {isSubmitting ? t('loading') : t('create')}
-                                            </button>
-                                            {isSubmitting && (
-                                                <div className='mt-0.5'>
-                                                    <ProgressBar variant={progressVariant} value={progress} />
-                                                </div>
-                                            )}
-                                        </div>
-                                        {response && <div className='w-full'>{response}</div>}
-                                    </div>
-                                </div>
-                            </form>
-                        </SheetDescription>
-                    </SheetHeader>
-                </SheetContent>
-            </Sheet>
-        </ContainerBox>
-    )
-}
-
-export default forwardRef(NewVariantComponent)

package/templates/default/components/PieChartBox.tsx

@@ -1,101 +0,0 @@
-import React from 'react'
-import { PieChartDataItem, PieChartTitles } from 'nextjs-cms/core/types'
-import ContainerBox from '@/components/ContainerBox'
-import { Badge } from '@/components/ui/badge'
-import { ResponsiveContainer, PieChart, Pie, Legend } from 'recharts'
-import LoadingSpinners from '@/components/LoadingSpinners'
-
-const RADIAN = Math.PI / 180
-const renderCustomizedLabel = ({
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    percent,
-    index,
-    name,
-}: {
-    cx: number
-    cy: number
-    midAngle: number
-    innerRadius: number
-    outerRadius: number
-    percent: number
-    index: number
-    name: string
-}) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5
-    const x = cx + radius * Math.cos(-midAngle * RADIAN)
-    const y = cy + radius * Math.sin(-midAngle * RADIAN)
-
-    return (
-        <text
-            x={x}
-            y={y}
-            fill='white'
-            className='font-semibold'
-            textAnchor={x > cx ? 'start' : 'end'}
-            dominantBaseline='central'
-        >
-            {`${(percent * 100).toFixed(0)}%`}
-        </text>
-    )
-}
-
-export default function PieChartBox({
-    chartData,
-    chartBoxTitles,
-    height = 300,
-    legend = true,
-    isLoading,
-}: {
-    chartData: PieChartDataItem[]
-    chartBoxTitles: PieChartTitles
-    height?: number
-    legend?: boolean
-    isLoading?: boolean
-}) {
-    return (
-        <ContainerBox title={chartBoxTitles.mainTitle}>
-            {isLoading ? (
-                <LoadingSpinners single={true} />
-            ) : (
-                <>
-                    <div className='text-muted-foreground'>
-                        {chartBoxTitles.totalUnitSubtitle && (
-                            <div>
-                                {`${chartBoxTitles.totalUnitSubtitle.key}: `}{' '}
-                                <Badge variant='secondary'>{chartBoxTitles.totalUnitSubtitle.value}</Badge>
-                            </div>
-                        )}
-
-                        {chartBoxTitles.usedUnitSubtitle && (
-                            <div>
-                                {`${chartBoxTitles.usedUnitSubtitle.key}: `}
-                                <Badge variant='secondary'>{chartBoxTitles.usedUnitSubtitle.value}</Badge>
-                            </div>
-                        )}
-                    </div>
-                    <div>
-                        <div style={{ width: '100%', height: height }}>
-                            <ResponsiveContainer>
-                                <PieChart>
-                                    {legend && <Legend />}
-                                    <Pie
-                                        dataKey='value'
-                                        data={chartData}
-                                        fill='#8884d8'
-                                        label={renderCustomizedLabel}
-                                        labelLine={false}
-                                        startAngle={-180}
-                                    />
-                                </PieChart>
-                            </ResponsiveContainer>
-                        </div>
-                    </div>
-                </>
-            )}
-        </ContainerBox>
-    )
-}