@enlolab/enlolab-ui

v0.1.3

Published

4 months ago

Componentes React reutilizables basados en shadcn • UI moderna y accesible

Downloads

0High
0Medium
0Low

enlolab

2 @enlolab/enlolab-ui

Una biblioteca moderna de componentes React construida con TypeScript, Tailwind CSS v4 y Radix UI.

✨ Características

🎨 Componentes modernos y accesibles
🎯 Soporte completo de TypeScript
🎨 Integración con Tailwind CSS v4
♿ Accesibilidad integrada
📦 Tree-shakeable
🌙 Modo oscuro automático
🎭 Variantes de componentes
📱 Responsive por defecto

📦 Instalación

npm install @enlolab/enlolab-ui

Dependencias requeridas

npm install react react-dom
npm install tailwindcss@^4.0.0
npm install @radix-ui/react-* # Los componentes específicos se instalan automáticamente

🎨 Configuración de estilos

1. Configurar Tailwind CSS v4

Crea o actualiza tu archivo src/styles/globals.css:

@import 'tailwindcss';

/* Importar estilos de @enlolab/enlolab-ui */
@source "../../../node_modules/@enlolab/enlolab-ui/dist";

/* Variables CSS personalizadas (opcional) */
:root {
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --ring: oklch(0.723 0.219 149.579);
}

.dark {
  --primary: oklch(0.696 0.17 162.48);
  --primary-foreground: oklch(0.393 0.095 152.535);
  --ring: oklch(0.527 0.154 150.069);
}

2. Configurar Astro (si usas Astro)

/* En src/styles/global.css */
@import 'tailwindcss';
@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

/* Importar componentes de @enlolab/enlolab-ui */
@source "../../../node_modules/@enlolab/enlolab-ui/dist";

/* Variables CSS específicas de la aplicación */
:root {
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --ring: oklch(0.723 0.219 149.579);
}

.dark {
  --primary: oklch(0.696 0.17 162.48);
  --primary-foreground: oklch(0.393 0.095 152.535);
  --ring: oklch(0.527 0.154 150.069);
}

3. Configurar Next.js

/* En app/globals.css o styles/globals.css */
@import 'tailwindcss';

/* Importar estilos de @enlolab/enlolab-ui */
@source "../../node_modules/@enlolab/enlolab-ui/dist";

/* Variables CSS personalizadas */
:root {
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --ring: oklch(0.723 0.219 149.579);
}

🚀 Uso básico

import { Button, Card, Input } from '@enlolab/enlolab-ui'

function App() {
  return (
    <div className="p-4">
      <Card className="p-6">
        <h2 className="text-2xl font-bold mb-4">Mi aplicación</h2>
        <Input placeholder="Escribe algo..." className="mb-4" />
        <Button>Click me</Button>
      </Card>
    </div>
  )
}

🎭 Componentes disponibles

Botones

import { Button, ButtonPro } from '@enlolab/enlolab-ui'

// Botón básico
<Button>Click me</Button>

// Botón Pro con variantes
<ButtonPro variant="default" size="md">Default</ButtonPro>
<ButtonPro variant="destructive" size="lg">Delete</ButtonPro>
<ButtonPro variant="outline" size="sm">Outline</ButtonPro>

Formularios

import { Input, Form, FormField, FormItem, FormLabel, FormControl } from '@enlolab/enlolab-ui'

<Form>
  <FormField name="email">
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input type="email" placeholder="[email protected]" />
      </FormControl>
    </FormItem>
  </FormField>
</Form>

Select

import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@enlolab/enlolab-ui'

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Selecciona una opción" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Opción 1</SelectItem>
    <SelectItem value="option2">Opción 2</SelectItem>
  </SelectContent>
</Select>

Calendario

import { Calendar } from '@enlolab/enlolab-ui'

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>

🎨 Personalización

Variables CSS

Puedes personalizar los colores y estilos modificando las variables CSS:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.723 0.219 149.579);
  --primary-foreground: oklch(0.982 0.018 155.826);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.723 0.219 149.579);
  --radius: 0.65rem;
}

Modo oscuro

El modo oscuro se activa automáticamente con la clase .dark:

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.696 0.17 162.48);
  --primary-foreground: oklch(0.393 0.095 152.535);
  /* ... más variables */
}

🔧 Configuración avanzada

Monorepo con workspaces

Si usas un monorepo, puedes configurar los estilos así:

/* Para desarrollo (paquetes locales) */
@source "../../../packages/enlolab-ui/dist";

/* Para producción (paquetes publicados) */
@source "../../../node_modules/@enlolab/enlolab-ui/dist";

Safelist de clases críticas

Para asegurar que las clases críticas se generen:

@source inline("bg-popover", "text-popover-foreground", "border", "shadow-md", "rounded-md", "z-50");

📚 Ejemplos completos

Formulario de contacto

import { Form, FormField, FormItem, FormLabel, FormControl, Input, Textarea, Button } from '@enlolab/enlolab-ui'

function ContactForm() {
  return (
    <Form>
      <FormField name="name">
        <FormItem>
          <FormLabel>Nombre</FormLabel>
          <FormControl>
            <Input placeholder="Tu nombre" />
          </FormControl>
        </FormItem>
      </FormField>
      
      <FormField name="email">
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input type="email" placeholder="[email protected]" />
          </FormControl>
        </FormItem>
      </FormField>
      
      <FormField name="message">
        <FormItem>
          <FormLabel>Mensaje</FormLabel>
          <FormControl>
            <Textarea placeholder="Tu mensaje..." />
          </FormControl>
        </FormItem>
      </FormField>
      
      <Button type="submit">Enviar</Button>
    </Form>
  )
}

Dashboard con cards

import { Card, CardContent, CardHeader, CardTitle } from '@enlolab/enlolab-ui'

function Dashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <Card>
        <CardHeader>
          <CardTitle>Usuarios</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">1,234</p>
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <CardTitle>Ventas</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">$45,678</p>
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <CardTitle>Pedidos</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">567</p>
        </CardContent>
      </Card>
    </div>
  )
}

🤝 Contribuir

Fork el repositorio
Crea una rama para tu feature (git checkout -b feature/amazing-feature)
Commit tus cambios (git commit -m 'Add amazing feature')
Push a la rama (git push origin feature/amazing-feature)
Abre un Pull Request

📄 Licencia

MIT License - ver LICENSE para más detalles.

🔗 Enlaces

Hecho con ❤️ por el equipo de Enlolab