Componentes UI

TalentBricksAI usa ShadCN UI (estilo New York) con Radix UI primitives.

Ubicacion

Los componentes estan en app/src/client/components/ui/.

Componentes Disponibles

Formularios

Componente	Archivo	Descripcion
Button	`button.tsx`	Botones con variantes
Input	`input.tsx`	Campo de texto
Textarea	`textarea.tsx`	Area de texto
Select	`select.tsx`	Selector dropdown
Checkbox	`checkbox.tsx`	Casilla de verificacion
Switch	`switch.tsx`	Toggle switch
Label	`label.tsx`	Etiqueta para inputs
Form	`form.tsx`	Wrapper de formulario

Layout

Componente	Archivo	Descripcion
Card	`card.tsx`	Contenedor con borde
Dialog	`dialog.tsx`	Modal dialog
Sheet	`sheet.tsx`	Panel deslizante
Separator	`separator.tsx`	Linea divisora
Tabs	`tabs.tsx`	Navegacion por tabs

Feedback

Componente	Archivo	Descripcion
Alert	`alert.tsx`	Mensaje de alerta
Toast	`toaster.tsx`	Notificaciones toast
Progress	`progress.tsx`	Barra de progreso
Skeleton	`skeleton.tsx`	Placeholder de carga

Navegacion

Componente	Archivo	Descripcion
DropdownMenu	`dropdown-menu.tsx`	Menu desplegable
NavigationMenu	`navigation-menu.tsx`	Menu de navegacion
Breadcrumb	`breadcrumb.tsx`	Migas de pan

Datos

Componente	Archivo	Descripcion
Table	`table.tsx`	Tabla de datos
Avatar	`avatar.tsx`	Avatar de usuario
Badge	`badge.tsx`	Etiqueta/badge

Ejemplos de Uso

Button

import { Button } from '../client/components/ui/button';

// Variantes
<Button variant="default">Primario</Button>
<Button variant="secondary">Secundario</Button>
<Button variant="destructive">Eliminar</Button>
<Button variant="outline">Contorno</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Tamanos
<Button size="sm">Pequeno</Button>
<Button size="default">Normal</Button>
<Button size="lg">Grande</Button>

// Estados
<Button disabled>Deshabilitado</Button>
<Button loading>Cargando...</Button>

Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from '../client/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Titulo del Card</CardTitle>
    <CardDescription>Descripcion opcional</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Contenido principal aqui</p>
  </CardContent>
  <CardFooter>
    <Button>Accion</Button>
  </CardFooter>
</Card>

Dialog

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter
} from '../client/components/ui/dialog';

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Titulo</DialogTitle>
      <DialogDescription>
        Descripcion del dialog
      </DialogDescription>
    </DialogHeader>
    <div>Contenido...</div>
    <DialogFooter>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Form con React Hook Form

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '../client/components/ui/form';
import { Input } from '../client/components/ui/input';
import { Button } from '../client/components/ui/button';

const schema = z.object({
  email: z.string().email('Email invalido'),
  password: z.string().min(8, 'Minimo 8 caracteres')
});

function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '' }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="tu@email.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Contrasena</FormLabel>
              <FormControl>
                <Input type="password" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit">Iniciar Sesion</Button>
      </form>
    </Form>
  );
}

Toast Notifications

import { useToast } from '../client/components/ui/use-toast';

function MyComponent() {
  const { toast } = useToast();

  const handleClick = () => {
    toast({
      title: 'Exito!',
      description: 'La operacion se completo correctamente.',
    });
  };

  // Toast de error
  const handleError = () => {
    toast({
      variant: 'destructive',
      title: 'Error',
      description: 'Algo salio mal.',
    });
  };

  return <Button onClick={handleClick}>Mostrar Toast</Button>;
}

Table

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../client/components/ui/table';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Nombre</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Rol</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {users.map((user) => (
      <TableRow key={user.id}>
        <TableCell>{user.name}</TableCell>
        <TableCell>{user.email}</TableCell>
        <TableCell>{user.role}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Tema y Colores

Los colores se definen con CSS variables en tailwind.config.js:

/* Variables principales */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--secondary: 210 40% 96.1%;
--muted: 210 40% 96.1%;
--accent: 210 40% 96.1%;
--destructive: 0 84.2% 60.2%;

Modo Oscuro

El modo oscuro se activa con la clase dark en el <html>:

import { DarkModeSwitcher } from '../client/components/DarkModeSwitcher';

// El componente ya esta integrado en el NavBar
<DarkModeSwitcher />

Agregar Nuevos Componentes

Para agregar un componente de ShadCN:

cd app
npx shadcn-ui@latest add [component-name]

Ejemplo:

npx shadcn-ui@latest add calendar
npx shadcn-ui@latest add slider