create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/PieChartBox.tsx

@@ -1,101 +1,101 @@
-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>
-    )
-}
+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>
+    )
+}

package/templates/default/components/ProgressBar.tsx

@@ -1,48 +1,48 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { Progress } from '@/components/ui/progress'
-
-export default function ProgressBar({ value, variant }: { value: number; variant?: 'determinate' | 'query' }) {
-    const { theme } = useTheme()
-    const isDark = theme === 'dark'
-
-    // Colors that match the original Material-UI version exactly
-    const bgColor = isDark ? '#424242' : '#eeeeee' // grey[800] : grey[200]
-    const progressColor = isDark ? '#308fe8' : '#1a90ff'
-
-    // Query variant shows indeterminate animation
-    const shouldShowIndeterminate = variant === 'query'
-
-    if (shouldShowIndeterminate) {
-        return (
-            <div
-                className='relative h-[10px] w-full overflow-hidden rounded-[5px]'
-                style={{ backgroundColor: bgColor }}
-            >
-                <div
-                    className='h-full rounded-[5px]'
-                    style={{
-                        backgroundColor: progressColor,
-                        width: '30%',
-                        animation: 'progress-indeterminate 1.5s ease-in-out infinite',
-                    }}
-                />
-            </div>
-        )
-    }
-
-    return (
-        <div
-            className='progress-bar-custom relative w-full'
-            style={
-                {
-                    '--progress-bg': bgColor,
-                    '--progress-fg': progressColor,
-                } as React.CSSProperties
-            }
-        >
-            <Progress value={value} className='h-[10px] rounded-[5px] border-0 p-0' />
-        </div>
-    )
-}
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Progress } from '@/components/ui/progress'
+
+export default function ProgressBar({ value, variant }: { value: number; variant?: 'determinate' | 'query' }) {
+    const { theme } = useTheme()
+    const isDark = theme === 'dark'
+
+    // Colors that match the original Material-UI version exactly
+    const bgColor = isDark ? '#424242' : '#eeeeee' // grey[800] : grey[200]
+    const progressColor = isDark ? '#308fe8' : '#1a90ff'
+
+    // Query variant shows indeterminate animation
+    const shouldShowIndeterminate = variant === 'query'
+
+    if (shouldShowIndeterminate) {
+        return (
+            <div
+                className='relative h-[10px] w-full overflow-hidden rounded-[5px]'
+                style={{ backgroundColor: bgColor }}
+            >
+                <div
+                    className='h-full rounded-[5px]'
+                    style={{
+                        backgroundColor: progressColor,
+                        width: '30%',
+                        animation: 'progress-indeterminate 1.5s ease-in-out infinite',
+                    }}
+                />
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className='progress-bar-custom relative w-full'
+            style={
+                {
+                    '--progress-bg': bgColor,
+                    '--progress-fg': progressColor,
+                } as React.CSSProperties
+            }
+        >
+            <Progress value={value} className='h-[10px] rounded-[5px] border-0 p-0' />
+        </div>
+    )
+}

package/templates/default/components/ProtectedDocument.tsx

@@ -1,78 +1,78 @@
-import React, { useEffect } from 'react'
-import { trpc } from '@/app/_trpc/client'
-import { base64ToBlob } from 'nextjs-cms/utils'
-
-const ProtectedDocument = ({
-    section,
-    fieldName,
-    file,
-    width,
-    height,
-    className = 'rounded-3xl object-cover',
-    displayAs = 'base64',
-}: {
-    section: string
-    fieldName: string
-    file: string
-    width: number
-    height: number
-    className?: string
-    displayAs?: 'blob' | 'base64'
-}) => {
-    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
-    const { data, error, isLoading } = trpc.files.getDocument.useQuery({
-        name: file,
-        sectionName: section,
-        fieldName: fieldName,
-    })
-
-    useEffect(() => {
-        if (!data) return
-        if (error) return
-        switch (displayAs) {
-            case 'blob':
-                setSrcUrl(
-                    URL.createObjectURL(
-                        base64ToBlob({
-                            base64: data.base64,
-                            contentType: data.mimeType,
-                            stripHeader: true,
-                        }),
-                    ),
-                )
-                break
-            case 'base64':
-                setSrcUrl(data.base64)
-                break
-        }
-
-        return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
-            }
-        }
-    }, [data])
-    return (
-        <div className={className}>
-            {srcUrl ? (
-                <embed
-                    src={srcUrl}
-                    className='max-w-full'
-                    width={width}
-                    height={height}
-                    onLoad={(e) => {
-                        // Revoke the blob url after the image is loaded
-                        if (displayAs === 'blob' && srcUrl) {
-                            URL.revokeObjectURL(srcUrl)
-                        }
-                    }}
-                />
-            ) : (
-                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
-            )}
-        </div>
-    )
-}
-
-export default ProtectedDocument
+import React, { useEffect } from 'react'
+import { trpc } from '@/app/_trpc/client'
+import { base64ToBlob } from 'nextjs-cms/utils'
+
+const ProtectedDocument = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+    displayAs = 'base64',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+    displayAs?: 'blob' | 'base64'
+}) => {
+    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
+    const { data, error, isLoading } = trpc.files.getDocument.useQuery({
+        name: file,
+        sectionName: section,
+        fieldName: fieldName,
+    })
+
+    useEffect(() => {
+        if (!data) return
+        if (error) return
+        switch (displayAs) {
+            case 'blob':
+                setSrcUrl(
+                    URL.createObjectURL(
+                        base64ToBlob({
+                            base64: data.base64,
+                            contentType: data.mimeType,
+                            stripHeader: true,
+                        }),
+                    ),
+                )
+                break
+            case 'base64':
+                setSrcUrl(data.base64)
+                break
+        }
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [data])
+    return (
+        <div className={className}>
+            {srcUrl ? (
+                <embed
+                    src={srcUrl}
+                    className='max-w-full'
+                    width={width}
+                    height={height}
+                    onLoad={(e) => {
+                        // Revoke the blob url after the image is loaded
+                        if (displayAs === 'blob' && srcUrl) {
+                            URL.revokeObjectURL(srcUrl)
+                        }
+                    }}
+                />
+            ) : (
+                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
+            )}
+        </div>
+    )
+}
+
+export default ProtectedDocument