create-nextjs-cms 0.8.9 → 0.9.0

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,44 +1,44 @@
-import React, { useState } from 'react'
-
-const ProtectedDocument = ({
-    section,
-    fieldName,
-    file,
-    width,
-    height,
-    className = 'rounded-3xl object-cover',
-}: {
-    section: string
-    fieldName: string
-    file: string
-    width: number
-    height: number
-    className?: string
-}) => {
-    const [loading, setLoading] = useState(true)
-
-    const params = new URLSearchParams({
-        name: file,
-        sectionName: section,
-        fieldName: fieldName,
-    })
-    const url = `/api/document?${params.toString()}`
-
-    return (
-        <div className={className}>
-            {loading && (
-                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
-            )}
-            <embed
-                src={url}
-                className='max-w-full'
-                width={width}
-                height={height}
-                onLoad={() => setLoading(false)}
-                style={loading ? { width: 0, height: 0, position: 'absolute' } : undefined}
-            />
-        </div>
-    )
-}
-
-export default ProtectedDocument
+import React, { useState } from 'react'
+
+const ProtectedDocument = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+}) => {
+    const [loading, setLoading] = useState(true)
+
+    const params = new URLSearchParams({
+        name: file,
+        sectionName: section,
+        fieldName: fieldName,
+    })
+    const url = `/api/document?${params.toString()}`
+
+    return (
+        <div className={className}>
+            {loading && (
+                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
+            )}
+            <embed
+                src={url}
+                className='max-w-full'
+                width={width}
+                height={height}
+                onLoad={() => setLoading(false)}
+                style={loading ? { width: 0, height: 0, position: 'absolute' } : undefined}
+            />
+        </div>
+    )
+}
+
+export default ProtectedDocument

package/templates/default/components/ProtectedImage.tsx

@@ -1,143 +1,143 @@
-import Image from 'next/image'
-import React, { useEffect } from 'react'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { AxiosInstance } from 'axios'
-import { base64ToBlob } from 'nextjs-cms/utils'
-
-const defaultDataPlaceholder: string =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkY2Q8AgABCwDWK6njxAAAAABJRU5ErkJggg=='
-
-async function getProtectedPhoto({
-    src,
-    axiosPrivate,
-}: {
-    src: string
-    axiosPrivate: AxiosInstance
-}): Promise<string | null> {
-    try {
-        const res = await axiosPrivate.get(src)
-        return res.data
-    } catch (error) {
-        return null
-    }
-}
-
-const ProtectedImage = ({
-    section,
-    photo,
-    isThumb = false,
-    alt,
-    width,
-    height,
-    fill = false,
-    className = 'rounded-3xl object-cover',
-    displayAs = 'blob',
-}: {
-    section: string
-    photo: string
-    isThumb?: boolean
-    alt: string
-    width: number
-    height: number
-    fill?: boolean
-    className?: string
-    displayAs?: 'blob' | 'base64'
-}) => {
-    const axiosPrivate = useAxiosPrivate()
-    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
-
-    // Use trpc?
-    /*
-    const { data, isLoading } = trpc.files.getPhoto.useQuery({
-        name: photo,
-        folder: section,
-        isThumb: isThumb,
-    })
-
-    useEffect(() => {
-        if (!data) return
-        switch (displayAs) {
-            case 'blob':
-                setSrcUrl(
-                    URL.createObjectURL(
-                        base64ToBlob({
-                            base64: data,
-                            contentType: 'image/webp',
-                            stripHeader: true,
-                        }),
-                    ),
-                )
-                break
-            case 'base64':
-                setSrcUrl(data)
-                break
-        }
-
-        return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
-            }
-        }
-    }, [data])
-    */
-    useEffect(() => {
-        if (!photo || !section) return
-        getProtectedPhoto({
-            src: `/photo?name=${photo}&folder=${section}&isThumb=${isThumb}`,
-            axiosPrivate: axiosPrivate,
-        }).then((res) => {
-            if (!res) return
-            switch (displayAs) {
-                case 'blob':
-                    setSrcUrl(
-                        URL.createObjectURL(
-                            base64ToBlob({
-                                base64: res,
-                                contentType: 'image/webp',
-                                stripHeader: true,
-                            }),
-                        ),
-                    )
-                    break
-                case 'base64':
-                    setSrcUrl(res)
-                    break
-            }
-        })
-
-        return () => {
-            setSrcUrl(null)
-            if (displayAs === 'blob' && srcUrl) {
-                URL.revokeObjectURL(srcUrl)
-            }
-        }
-    }, [])
-
-    return (
-        <Image
-            alt={alt}
-            className={className}
-            src={srcUrl ? srcUrl : defaultDataPlaceholder}
-            width={fill ? undefined : width}
-            height={fill ? undefined : height}
-            style={
-                !fill
-                    ? {
-                          width: `${width}px`,
-                          height: 'auto',
-                      }
-                    : undefined
-            }
-            fill={fill ? true : undefined}
-            onLoad={(e) => {
-                // Revoke the blob url after the image is loaded
-                if (displayAs === 'blob' && srcUrl) {
-                    URL.revokeObjectURL(srcUrl)
-                }
-            }}
-        />
-    )
-}
-
-export default ProtectedImage
+import Image from 'next/image'
+import React, { useEffect } from 'react'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { AxiosInstance } from 'axios'
+import { base64ToBlob } from 'nextjs-cms/utils'
+
+const defaultDataPlaceholder: string =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPkY2Q8AgABCwDWK6njxAAAAABJRU5ErkJggg=='
+
+async function getProtectedPhoto({
+    src,
+    axiosPrivate,
+}: {
+    src: string
+    axiosPrivate: AxiosInstance
+}): Promise<string | null> {
+    try {
+        const res = await axiosPrivate.get(src)
+        return res.data
+    } catch (error) {
+        return null
+    }
+}
+
+const ProtectedImage = ({
+    section,
+    photo,
+    isThumb = false,
+    alt,
+    width,
+    height,
+    fill = false,
+    className = 'rounded-3xl object-cover',
+    displayAs = 'blob',
+}: {
+    section: string
+    photo: string
+    isThumb?: boolean
+    alt: string
+    width: number
+    height: number
+    fill?: boolean
+    className?: string
+    displayAs?: 'blob' | 'base64'
+}) => {
+    const axiosPrivate = useAxiosPrivate()
+    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
+
+    // Use trpc?
+    /*
+    const { data, isLoading } = trpc.files.getPhoto.useQuery({
+        name: photo,
+        folder: section,
+        isThumb: isThumb,
+    })
+
+    useEffect(() => {
+        if (!data) return
+        switch (displayAs) {
+            case 'blob':
+                setSrcUrl(
+                    URL.createObjectURL(
+                        base64ToBlob({
+                            base64: data,
+                            contentType: 'image/webp',
+                            stripHeader: true,
+                        }),
+                    ),
+                )
+                break
+            case 'base64':
+                setSrcUrl(data)
+                break
+        }
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [data])
+    */
+    useEffect(() => {
+        if (!photo || !section) return
+        getProtectedPhoto({
+            src: `/photo?name=${photo}&folder=${section}&isThumb=${isThumb}`,
+            axiosPrivate: axiosPrivate,
+        }).then((res) => {
+            if (!res) return
+            switch (displayAs) {
+                case 'blob':
+                    setSrcUrl(
+                        URL.createObjectURL(
+                            base64ToBlob({
+                                base64: res,
+                                contentType: 'image/webp',
+                                stripHeader: true,
+                            }),
+                        ),
+                    )
+                    break
+                case 'base64':
+                    setSrcUrl(res)
+                    break
+            }
+        })
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [])
+
+    return (
+        <Image
+            alt={alt}
+            className={className}
+            src={srcUrl ? srcUrl : defaultDataPlaceholder}
+            width={fill ? undefined : width}
+            height={fill ? undefined : height}
+            style={
+                !fill
+                    ? {
+                          width: `${width}px`,
+                          height: 'auto',
+                      }
+                    : undefined
+            }
+            fill={fill ? true : undefined}
+            onLoad={(e) => {
+                // Revoke the blob url after the image is loaded
+                if (displayAs === 'blob' && srcUrl) {
+                    URL.revokeObjectURL(srcUrl)
+                }
+            }}
+        />
+    )
+}
+
+export default ProtectedImage