create-nextjs-cms 0.9.4 → 0.9.6

package/templates/default/components/AnalyticsPage.tsx

@@ -1,128 +1,144 @@
-'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 { DatePickerWithRange } from '@/components/form/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)
-
-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 { 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'>
-                        <DatePickerWithRange />
-                    </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
+'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<Date | string>('30daysAgo')
+    const [toDate, setToDate] = React.useState<Date | 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 +1,42 @@
-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>
-    )
-}
+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/BrowsePage.tsx

@@ -1,106 +1,106 @@
-'use client'
-
-import { useRef } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import SectionItemCard from '@/components/SectionItemCard'
-import ContainerBox from '@/components/ContainerBox'
-import Pagination from '@/components/pagination/Pagination'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card'
-import { Input } from './ui/input'
-import { Button } from './ui/button'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { trpc } from '@/app/_trpc/client'
-import { capitalizeWords } from 'nextjs-cms/utils'
-import ErrorComponent from '@/components/ErrorComponent'
-
-export default function BrowsePage({ section, page }: { section: string; page: string }) {
-    const t = useI18n()
-    const pageInt = parseInt(page) ?? 1
-    const params = useSearchParams()
-    const router = useRouter()
-    const q = params.get('q') ?? ''
-    const searchInputRef = useRef<HTMLInputElement>(null)
-    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
-        sectionName: section,
-        page: pageInt,
-        q,
-    })
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div>
-            <div className='text-foreground relative z-1 border-b-2 p-8 pt-12 font-extrabold'>
-                <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-sky-300 via-gray-300 to-blue-400'></div>
-                <h1 className='text-3xl'>{data?.section?.title}</h1>
-            </div>
-            <div className='p-4'>
-                {data?.section?.hasSearch ? (
-                    <Card className='border-accent-foreground mb-4 border'>
-                        <form
-                            onSubmit={(event) => {
-                                event.preventDefault()
-                                event.stopPropagation()
-
-                                router.push(
-                                    decodeURIComponent(`/browse/${section}?q=${searchInputRef.current?.value || ''}`),
-                                )
-                            }}
-                        >
-                            <CardHeader>
-                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
-                                {/*<CardDescription>Search by title</CardDescription>*/}
-                            </CardHeader>
-                            <CardContent>
-                                <Input
-                                    className='border-accent-foreground bg-input'
-                                    ref={searchInputRef}
-                                    placeholder={`${capitalizeWords(t('search'))}...`}
-                                    defaultValue={q || ''}
-                                />
-                            </CardContent>
-                            <CardFooter className='border-t px-6 py-4'>
-                                <Button>{capitalizeWords(t('search'))}</Button>
-                            </CardFooter>
-                        </form>
-                    </Card>
-                ) : null}
-                <ContainerBox title={t('browse')}>
-                    
-                        
-                            { data.items && data.items.length > 0 ? (
-                                <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
-                                    {data.items.map((item, index: number) => (
-                                        <SectionItemCard
-                                            key={`${data.section.name}-${item.id}-${index}`}
-                                            item={item}
-                                            sectionName={data.section.name}
-                                            action={() => refetch()}
-                                        />
-                                    ))}
-                                </div>
-                            ) : (
-                                <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
-                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
-                                </Alert>
-                            )}
-                     
-                </ContainerBox>
-                {data?.totalCount && data?.totalCount > 0 ? (
-                    <Pagination
-                        page={pageInt}
-                        totalCount={data?.totalCount}
-                        limit={12}
-                        route={`browse/${section}`}
-                        lang='en'
-                        paginationLinksToShow={4}
-                        searchParams={q ? `q=${q}` : null}
-                    />
-                ) : null}
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import { useRef } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import SectionItemCard from '@/components/SectionItemCard'
+import ContainerBox from '@/components/ContainerBox'
+import Pagination from '@/components/pagination/Pagination'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card'
+import { Input } from './ui/input'
+import { Button } from './ui/button'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { trpc } from '@/app/_trpc/client'
+import { capitalizeWords } from 'nextjs-cms/utils'
+import ErrorComponent from '@/components/ErrorComponent'
+
+export default function BrowsePage({ section, page }: { section: string; page: string }) {
+    const t = useI18n()
+    const pageInt = parseInt(page) ?? 1
+    const params = useSearchParams()
+    const router = useRouter()
+    const q = params.get('q') ?? ''
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
+        sectionName: section,
+        page: pageInt,
+        q,
+    })
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div>
+            <div className='text-foreground relative z-1 border-b-2 p-8 pt-12 font-extrabold'>
+                <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-sky-300 via-gray-300 to-blue-400'></div>
+                <h1 className='text-3xl'>{data?.section?.title}</h1>
+            </div>
+            <div className='p-4'>
+                {data?.section?.hasSearch ? (
+                    <Card className='border-accent-foreground mb-4 border'>
+                        <form
+                            onSubmit={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+
+                                router.push(
+                                    decodeURIComponent(`/browse/${section}?q=${searchInputRef.current?.value || ''}`),
+                                )
+                            }}
+                        >
+                            <CardHeader>
+                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
+                                {/*<CardDescription>Search by title</CardDescription>*/}
+                            </CardHeader>
+                            <CardContent>
+                                <Input
+                                    className='border-accent-foreground bg-input'
+                                    ref={searchInputRef}
+                                    placeholder={`${capitalizeWords(t('search'))}...`}
+                                    defaultValue={q || ''}
+                                />
+                            </CardContent>
+                            <CardFooter className='border-t px-6 py-4'>
+                                <Button>{capitalizeWords(t('search'))}</Button>
+                            </CardFooter>
+                        </form>
+                    </Card>
+                ) : null}
+                <ContainerBox title={t('browse')}>
+                    
+                        
+                            { data.items && data.items.length > 0 ? (
+                                <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+                                    {data.items.map((item, index: number) => (
+                                        <SectionItemCard
+                                            key={`${data.section.name}-${item.id}-${index}`}
+                                            item={item}
+                                            sectionName={data.section.name}
+                                            action={() => refetch()}
+                                        />
+                                    ))}
+                                </div>
+                            ) : (
+                                <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
+                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
+                                </Alert>
+                            )}
+                     
+                </ContainerBox>
+                {data?.totalCount && data?.totalCount > 0 ? (
+                    <Pagination
+                        page={pageInt}
+                        totalCount={data?.totalCount}
+                        limit={12}
+                        route={`browse/${section}`}
+                        lang='en'
+                        paginationLinksToShow={4}
+                        searchParams={q ? `q=${q}` : null}
+                    />
+                ) : null}
+            </div>
+        </div>
+    )
+}