create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/NewVariantComponent.tsx

@@ -1,229 +1,229 @@
-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/auth/hooks'
-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)
+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/auth/hooks'
+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/PhotoGallery.tsx

@@ -1,35 +1,35 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import { PhotoGalleryItem } from 'nextjs-cms/core/types'
-import GalleryPhoto from '@/components/GalleryPhoto'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import ContainerBox from '@/components/ContainerBox'
-
-const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery: PhotoGalleryItem[] }) => {
-    const t = useI18n()
-    return (
-        <ContainerBox title={t('gallery')}>
-            {gallery && gallery.length > 0 ? (
-                <div className='flex flex-wrap gap-4'>
-                    {gallery.map((photo: PhotoGalleryItem, index: number) => (
-                        <GalleryPhoto
-                            item={photo}
-                            sectionName={sectionName}
-                            key={photo.photo}
-                            action={() => {
-                                // This is the action that will be executed when the user removes a photo from the gallery
-                                // Remove the removed photo from the gallery
-                                gallery.splice(index, 1)
-                            }}
-                        />
-                    ))}
-                </div>
-            ) : (
-                <Alert variant='light' className='mt-4'>
-                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
-                </Alert>
-            )}
-        </ContainerBox>
-    )
-}
-
-export default PhotoGallery
+import { useI18n } from 'nextjs-cms/translations/client'
+import { PhotoGalleryItem } from 'nextjs-cms/core/types'
+import GalleryPhoto from '@/components/GalleryPhoto'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import ContainerBox from '@/components/ContainerBox'
+
+const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery: PhotoGalleryItem[] }) => {
+    const t = useI18n()
+    return (
+        <ContainerBox title={t('gallery')}>
+            {gallery && gallery.length > 0 ? (
+                <div className='flex flex-wrap gap-4'>
+                    {gallery.map((photo: PhotoGalleryItem, index: number) => (
+                        <GalleryPhoto
+                            item={photo}
+                            sectionName={sectionName}
+                            key={photo.photo}
+                            action={() => {
+                                // This is the action that will be executed when the user removes a photo from the gallery
+                                // Remove the removed photo from the gallery
+                                gallery.splice(index, 1)
+                            }}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <Alert variant='light' className='mt-4'>
+                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
+                </Alert>
+            )}
+        </ContainerBox>
+    )
+}
+
+export default PhotoGallery