Feat/RegistrationGameStyles

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint

.husky/pre-push

@@ -0,0 +1 @@
+npm run build

package.json

@@ -8,14 +8,18 @@
  "start": "next start",
  "lint": "next lint",
  "storybook": "storybook dev -p 6006",
- "build-storybook": "storybook build"
+ "build-storybook": "storybook build",
+ "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
+ "check": "prettier --check \"**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
+ "prepare": "husky"
  },
  "dependencies": {
  "@clerk/localizations": "^1.26.3",
  "@clerk/nextjs": "^4.25.3",
  "@hookform/resolvers": "^3.3.4",
  "@radix-ui/react-alert-dialog": "^1.0.5",
  "@radix-ui/react-avatar": "^1.0.4",
+ "@radix-ui/react-checkbox": "^1.0.4",
  "@radix-ui/react-dialog": "^1.0.5",
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-radio-group": "^1.1.3",
@@ -68,6 +72,7 @@
  "eslint-config-prettier": "^8.8.0",
  "eslint-plugin-prettier": "^5.0.0",
  "eslint-plugin-storybook": "^0.6.15",
+ "husky": "^9.0.11",
  "prettier": "3.0.0",
  "prettier-plugin-tailwindcss": "^0.4.1",
  "storybook": "^7.6.4"

src/app/cadastro/estilos-de-jogo/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { FormGameStyles } from '@/features/register-player/game-styles/FormGameStyles'
+
 export default function PagesStylesPlay() {
- return <div />
+ return <FormGameStyles />
 }

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+ React.ElementRef<typeof CheckboxPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+ <CheckboxPrimitive.Root
+ ref={ref}
+ className={cn(
+ "peer h-4 w-4 shrink-0 rounded-sm border border-slate-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900",
+ className
+ )}
+ {...props}
+ >
+ <CheckboxPrimitive.Indicator
+ className={cn("flex items-center justify-center text-current")}
+ >
+ <Check className="h-3 w-3" />
+ </CheckboxPrimitive.Indicator>
+ </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/features/register-player/game-styles/FormGameStyles.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Button } from '@/components/ui/button'
+import { Arrow } from '@/components/icons/Arrow'
+
+import { cn } from '@/lib/utils'
+import { validationCheckBoxLimitation } from './helpers/validationCheckBoxLimitation'
+import { FormAditionalText } from './components/FormAditionalText'
+import { FormTitle } from '../utils/title-form'
+import useSubmitGameStyles from './hooks/useSubmitGameStyles'
+import { useFormGameStyles } from './hooks/useFormGameStyles'
+import { Skeleton } from '../utils/Skeleton'
+
+export function FormGameStyles() {
+ const { gameStyles, isLoading, form } = useFormGameStyles()
+
+ return (
+ <Form {...form}>
+ <div>
+ <FormAditionalText className='text-center'>
+ Olá! Para aprimorarmos sua experiência no TVM, por favor, responda
+ algumas perguntas.
+ </FormAditionalText>
+ <FormTitle className='mb-0'>
+ Escolha o estilo de jogo que mais se alinha com seus interesses.
+ </FormTitle>
+ </div>
+ <form
+ onSubmit={form.handleSubmit(useSubmitGameStyles())}
+ className='flex flex-col items-center space-y-8'
+ >
+ <FormField
+ control={form.control}
+ name='rpgStyles'
+ render={() => (
+ <FormItem>
+ <FormItem className='flex max-w-[44.063rem] flex-wrap justify-center gap-2 space-y-0'>
+ {isLoading && (
+ <Skeleton
+ height='[2.875rem]'
+ width={40}
+ quantity={10}
+ className='rounded-full'
+ />
+ )}
+ {!isLoading &&
+ gameStyles &&
+ gameStyles.map(item => (
+ <FormField
+ key={item.id}
+ control={form.control}
+ name='rpgStyles'
+ render={({ field }) => {
+ return (
+ <FormItem
+ key={item.id}
+ aria-disabled={validationCheckBoxLimitation(
+ form.getValues('rpgStyles'),
+ item.id,
+ 3,
+ )}
+ className='group/checkbox aria-disabled:cursor-not-allowed'
+ >
+ <FormLabel
+ className={cn(
+ 'flex w-fit cursor-pointer items-center gap-2.5 space-y-0 rounded-full border-[1px] bg-primary-50 px-4 py-3 font-mono text-sm font-medium text-primary-900 group-aria-disabled/checkbox:pointer-events-none group-aria-disabled/checkbox:opacity-50',
+ field.value?.includes(item.id)
+ ? 'border-primary-900'
+ : 'border-transparent',
+ )}
+ >
+ {item.name}
+ <FormControl>
+ <Checkbox
+ checked={field.value?.includes(item.id)}
+ className='border-primary-900 data-[state=checked]:rounded-full data-[state=checked]:bg-primary-900'
+ onCheckedChange={(checked: boolean) => {
+ return checked
+ ? field.onChange([
+ ...field.value,
+ item.id,
+ ])
+ : field.onChange(
+ field.value?.filter(
+ value => value !== item.id,
+ ),
+ )
+ }}
+ />
+ </FormControl>
+ </FormLabel>
+ </FormItem>
+ )
+ }}
+ />
+ ))}
+ </FormItem>
+ {form.formState.errors.rpgStyles?.message && (
+ <div className='mx-auto w-fit [&>ul]:mt-5'>
+ <FormMessage />
+ </div>
+ )}
+ </FormItem>
+ )}
+ />
+ <div className='text-center'>
+ <Button
+ disabled={!form.formState.isValid}
+ className='h-full max-h-14 w-full max-w-[214px] text-base disabled:opacity-50'
+ variant='default'
+ type='submit'
+ >
+ Salvar e Continuar
+ <Arrow />
+ </Button>
+ </div>
+ </form>
+ </Form>
+ )
+}

src/features/register-player/game-styles/components/FormAditionalText.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils'
+
+interface FormTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+ children: string
+}
+
+export function FormAditionalText({
+ className,
+ children,
+ ...props
+}: FormTitleProps) {
+ return (
+ <h1
+ className={cn('mb-6 text-base text-neutral-600', className)}
+ {...props}
+ >
+ {children}
+ </h1>
+ )
+}

src/features/register-player/game-styles/helpers/defaultValues.ts

@@ -0,0 +1,3 @@
+export const defaultValues = {
+ rpgStyles: [],
+}

src/features/register-player/game-styles/helpers/validationCheckBoxLimitation.ts

@@ -0,0 +1,7 @@
+export function validationCheckBoxLimitation(
+ array: string[],
+ field: string,
+ maxNumber: number,
+) {
+ return array.length >= maxNumber && !array.includes(field)
+}

src/features/register-player/game-styles/hooks/useFetchData.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export function useFetchData<T>(url: string) {
+ const [data, setData] = useState<T | null>(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [error, setError] = useState<Error | null>(null)
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(url)
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`)
+ }
+ const jsonData = await response.json()
+ setData(jsonData)
+ } catch (err) {
+ setError(err as Error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ fetchData()
+ }, [url])
+
+ return { data, isLoading, error }
+}

src/features/register-player/game-styles/hooks/useFormGameStyles.ts

@@ -0,0 +1,27 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import useLocalStorageGetItem from '@/features/register-player/address registration/hooks/useLocalStorageGetItem'
+import { FormGameStylesSchema } from '../validation'
+import { GameStyle, FormGameStylesType } from '../types/gameStyles'
+import { useFetchData } from './useFetchData'
+import { defaultValues } from '../helpers/defaultValues'
+
+export function useFormGameStyles() {
+ const {
+ data: gameStyles,
+ isLoading,
+ error,
+ } = useFetchData<GameStyle[]>(
+ 'https://tem-vaga-mestre-api-nnf7bytugq-uc.a.run.app/rpg-style',
+ )
+ const savedData = useLocalStorageGetItem<FormGameStylesType>('game_styles')
+
+ const initalValue = savedData || defaultValues
+
+ const form = useForm<FormGameStylesType>({
+ resolver: zodResolver(FormGameStylesSchema),
+ defaultValues: initalValue,
+ })
+
+ return { form, gameStyles, isLoading, error }
+}

src/features/register-player/game-styles/hooks/useSubmitGameStyles.ts

@@ -0,0 +1,12 @@
+import uselocalStorageSetItem from '@/features/register-player/address registration/hooks/uselocalStorageSetItem'
+import { RegisterRoutes } from '@/services/routers'
+import { useRouter } from 'next/navigation'
+import { FormGameStylesType } from '../types/gameStyles'
+
+export default function useSubmitGameStyles() {
+ const router = useRouter()
+ return (values: FormGameStylesType) => {
+ uselocalStorageSetItem('game_styles', values)
+ router.push(RegisterRoutes.PlayerProfile)
+ }
+}