chore: 🔖 release new version

.env.example

@@ -29,3 +29,4 @@ AWS_S3_REGION=sa-east-1
 AWS_S3_ACCESS_KEY_ID=
 AWS_S3_SECRET_ACCESS_KEY=
 AWS_S3_BUCKET=
+AWS_CLOUD_FRONT_URL=

next.config.mjs

@@ -1,17 +1,38 @@
 // @ts-check
+import bundleAnalyzer from '@next/bundle-analyzer'
+
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
  * This is especially useful for Docker builds.
  */
-!process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"));
+!process.env.SKIP_ENV_VALIDATION && (await import('./src/env/server.mjs'))
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+})
 
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
   swcMinify: true,
   i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+  images: {
+    // Follows TailwindCSS screens breakpoints
+    deviceSizes: [640, 768, 1024, 1280, 1536],
+    domains: [`${process.env.AWS_CLOUD_FRONT_URL?.replace('https://', '')}`],
+  },
+  experimental: {
+    swcPlugins: [
+      [
+        'next-superjson-plugin',
+        {
+          excluded: [],
+        },
+      ],
+    ],
   },
-};
-export default config;
+}
+export default withBundleAnalyzer(config)

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "analyze:build": "ANALYZE=true next build",
     "vercel-build": "prisma generate && prisma migrate deploy && yarn build",
     "dev": "next dev",
     "postinstall": "prisma generate",
@@ -18,6 +19,7 @@
     "@heroicons/react": "2.0.13",
     "@hookform/resolvers": "^2.9.10",
     "@next-auth/prisma-adapter": "^1.0.5",
+    "@next/bundle-analyzer": "^13.1.2",
     "@prisma/client": "^4.5.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.16.0",
@@ -31,10 +33,12 @@
     "lodash": "^4.17.21",
     "next": "13.1.1",
     "next-auth": "^4.18.3",
+    "next-superjson-plugin": "^0.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
     "react-hot-toast": "^2.4.0",
+    "sharp": "^0.31.3",
     "superjson": "1.9.1",
     "zod": "^3.18.0"
   },

prisma/migrations/20230115132923_adds_updatedat_and_createdat/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Deck" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;

prisma/schema.prisma

@@ -65,6 +65,8 @@ model Deck {
   visibility  Visibility @default(Public)
   ownerId     String
   image       String     @unique
+  updatedAt   DateTime   @default(now()) @updatedAt
+  createdAt   DateTime   @default(now())
   user        User       @relation(fields: [ownerId], references: [id], onDelete: Cascade)
   topics      Topic[]
   cards       Card[]

src/components/deck-card-list/deck-card-list.component.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link'
+
+import { Image } from '~/components/image'
+import { routes } from '~/utils/navigation'
+
+import type { DeckCardListProps } from './deck-card-list.types'
+import { Error } from './error.component'
+import { Loading } from './loading.component'
+
+export function DeckCardList({ decks }: DeckCardListProps) {
+  return (
+    <div className='flex-w grid grid-cols-1 gap-5 sm:grid-cols-2'>
+      {decks.map((deck, idx) => (
+        <Link
+          href={routes.editDeck(deck.id)}
+          key={deck.id}
+          className='flex flex-col overflow-hidden rounded-md border border-primary-900 bg-primary-50 shadow-md hover:bg-primary-100 lg:h-64 lg:flex-row'
+        >
+          <div className='relative flex aspect-square w-full lg:w-2/5'>
+            <Image
+              fill
+              src={deck.image}
+              priority={idx === 0}
+              style={{ objectFit: 'cover' }}
+              alt={`${deck.title} image`}
+              sizes='(min-width: 1024px) 250px,
+                (min-width: 640px) 50vw, 
+                100vw'
+            />
+          </div>
+          <div className='flex flex-1 flex-col p-4'>
+            <h5 className='mb-2 text-2xl font-bold tracking-tight text-primary-900'>
+              {deck.title}
+            </h5>
+            <p className='mb-3 font-normal text-primary-900'>
+              {deck.description}
+            </p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+DeckCardList.Loading = Loading
+DeckCardList.Error = Error

src/components/deck-card-list/deck-card-list.types.ts

@@ -0,0 +1,9 @@
+import type { Deck } from '@prisma/client'
+
+export type DeckCardListProps = {
+  decks: Array<Deck>
+}
+
+export type ErrorProps = {
+  onRetryPress: () => void
+}

src/components/deck-card-list/error.component.tsx

@@ -0,0 +1,18 @@
+import { Button } from '../button'
+import type { ErrorProps } from './deck-card-list.types'
+
+export function Error(props: ErrorProps) {
+  const { onRetryPress } = props
+
+  return (
+    <div className='m-auto flex max-w-xl flex-col items-center gap-10 p-10 sm:p-20'>
+      <h2 className='text-center text-xl text-primary-900'>
+        ❌ Ocorreu um erro ao buscas os seus Decks. Por favor, tente novamente
+        mais tarde!
+      </h2>
+      <Button onClick={onRetryPress} variant='secondary'>
+        Tentar Novamente
+      </Button>
+    </div>
+  )
+}

src/components/deck-card-list/index.ts

@@ -0,0 +1 @@
+export { DeckCardList } from './deck-card-list.component'

src/components/deck-card-list/loading.component.tsx

@@ -0,0 +1,9 @@
+export function Loading() {
+  return (
+    <div className='grid w-full animate-pulse grid-cols-1 gap-5 sm:grid-cols-2'>
+      {Array.from({ length: 6 }).map((_, index) => (
+        <div key={index} className='h-96 rounded-md bg-primary-200 sm:h-64' />
+      ))}
+    </div>
+  )
+}

src/components/full-screen-loader/full-screen-load.tsx

@@ -4,18 +4,19 @@ import { Dialog, Transition } from '@headlessui/react'
 import { useAtomValue } from 'jotai'
 import noop from 'lodash/noop'
 
+import { useDebounce } from '~/hooks/use-debounce'
 import { useRouteChangeLoader } from '~/hooks/use-route-change-loader'
 import { fullScreenLoaderAtom } from '~/utils/atoms'
 
 import { Loader } from '../loader'
 
 export function FullScreenLoader() {
   const isLoading = useAtomValue(fullScreenLoaderAtom)
-
+  const debouncedIsLoading = useDebounce(isLoading, 200)
   useRouteChangeLoader()
 
   return (
-    <Transition appear show={isLoading} as={Fragment}>
+    <Transition appear show={debouncedIsLoading} as={Fragment}>
       <Dialog as='div' className='relative z-40' onClose={noop}>
         <Transition.Child
           as={Fragment}
@@ -26,7 +27,10 @@ export function FullScreenLoader() {
           leaveFrom='opacity-100'
           leaveTo='opacity-0'
         >
-          <div className='fixed inset-0 flex items-center justify-center bg-primary-900 bg-opacity-25'>
+          <div
+            tabIndex={0}
+            className='fixed inset-0 flex items-center justify-center bg-primary-900 bg-opacity-25'
+          >
             <Loader />
           </div>
         </Transition.Child>

src/components/image-uploader/image-uploader.component.tsx

@@ -13,10 +13,10 @@ export const ImageUploader = React.forwardRef<
   HTMLInputElement,
   ImageUploaderProps
 >(function ImageUploader(props, ref) {
-  const { id, onChange, error, ...otherProps } = props
+  const { id, onChange, error, defaultValue, ...otherProps } = props
 
   const [image, setImage] = useState<File>()
-  const previewImage = useFilePreview(image)
+  const previewImage = useFilePreview(image) || defaultValue
 
   const renderIconAndImageTypes = () => {
     if (!!previewImage) return null

src/components/image-uploader/image-uploader.types.ts

@@ -1,10 +1,11 @@
 export type ImageUploaderProps = {
   id: string
   error?: string
+  defaultValue?: string
 } & Omit<
   React.DetailedHTMLProps<
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   >,
-  'type' | 'id'
+  'type' | 'id' | 'defaultValue'
 >

src/components/modal/new-card/new-card-modal.component.tsx

@@ -7,18 +7,22 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Button } from '~/components/button'
 import { TextArea } from '~/components/text-area'
 import { withoutPropagation } from '~/utils/forms'
-import { CardSchema } from '~/utils/validators/card'
+import { CardInputSchema } from '~/utils/validators/card'
 
 import { BaseModal } from '../base/base-modal.component'
-import type { CardFormValues, NewCardModalProps } from './new-card-modal.types'
+import type {
+  CardFormInputValues,
+  NewCardModalProps,
+} from './new-card-modal.types'
 
 export function NewCardModal(props: NewCardModalProps) {
   const { isOpen, setIsOpen, onSubmit, defaultValues } = props
 
-  const { reset, handleSubmit, register, formState } = useForm<CardFormValues>({
-    resolver: zodResolver(CardSchema),
-    defaultValues: useMemo(() => defaultValues, [defaultValues]),
-  })
+  const { reset, handleSubmit, register, formState } =
+    useForm<CardFormInputValues>({
+      resolver: zodResolver(CardInputSchema),
+      defaultValues: useMemo(() => defaultValues, [defaultValues]),
+    })
 
   useEffect(() => {
     reset(defaultValues)

src/components/modal/new-card/new-card-modal.types.ts

@@ -2,13 +2,13 @@ import type { SubmitHandler } from 'react-hook-form'
 
 import type { z } from 'zod'
 
-import type { CardSchema } from '~/utils/validators/card'
+import type { CardInputSchema } from '~/utils/validators/card'
 
 import type { BaseModalProps } from '../base/base-modal.types'
 
-export type CardFormValues = z.infer<typeof CardSchema>
+export type CardFormInputValues = z.infer<typeof CardInputSchema>
 
 export type NewCardModalProps = Pick<BaseModalProps, 'isOpen' | 'setIsOpen'> & {
-  onSubmit: SubmitHandler<CardFormValues>
-  defaultValues?: CardFormValues
+  onSubmit: SubmitHandler<CardFormInputValues>
+  defaultValues?: CardFormInputValues
 }

src/components/modal/new-topic/new-topic-modal.component.tsx

@@ -9,16 +9,17 @@ import { withoutPropagation } from '~/utils/forms'
 import { BaseModal } from '../base/base-modal.component'
 import type {
   NewTopicModalProps,
-  TopicFormValues,
+  TopicFormInputValues,
 } from './new-topic-modal.types'
-import { TopicFormSchema } from './new-topic-modal.types'
+import { TopicFormInputSchema } from './new-topic-modal.types'
 
 export function NewTopicModal(props: NewTopicModalProps) {
   const { isOpen, setIsOpen, onSubmit } = props
 
-  const { handleSubmit, reset, formState, register } = useForm<TopicFormValues>(
-    { resolver: zodResolver(TopicFormSchema) },
-  )
+  const { handleSubmit, reset, formState, register } =
+    useForm<TopicFormInputValues>({
+      resolver: zodResolver(TopicFormInputSchema),
+    })
 
   const close = () => {
     setIsOpen(false)

src/components/modal/new-topic/new-topic-modal.types.ts

@@ -2,16 +2,18 @@ import type { SubmitHandler } from 'react-hook-form'
 
 import { z } from 'zod'
 
-import { TopicSchema } from '~/utils/validators/topic'
+import { TopicInputSchema } from '~/utils/validators/topic'
 
 import type { BaseModalProps } from '../base/base-modal.types'
 
-export const TopicFormSchema = z.object({ title: TopicSchema })
-export type TopicFormValues = z.infer<typeof TopicFormSchema>
+export const TopicFormInputSchema = z.object({
+  title: TopicInputSchema.shape.title,
+})
+export type TopicFormInputValues = z.infer<typeof TopicFormInputSchema>
 
 export type NewTopicModalProps = Pick<
   BaseModalProps,
   'isOpen' | 'setIsOpen'
 > & {
-  onSubmit: SubmitHandler<TopicFormValues>
+  onSubmit: SubmitHandler<TopicFormInputValues>
 }