🇺🇸 EN

🚀 Introducción

El Design System de RustLangES es la fuente única de verdad para los componentes UI en los proyectos de la comunidad Rust en español. Proporciona componentes accesibles, consistentes y de alta calidad para múltiples tecnologías.

📦 Instalación

# Para proyectos React
pnpm add @rustlanges/react

# Para proyectos Leptos (Rust)
cargo add rustlanges-leptos

✨ Características principales

• Multi-framework: Soporte para React, Leptos y más
• Modo claro/oscuro: Compatibilidad automática con el tema del sistema
• Accesibilidad: Componentes WCAG 2.1 AA compliant
• Sistema de diseño: Basado en Figma

🏗️ Estructura del proyecto

.
├── crates/          # Componentes Rust
└── js/              # Componentes JavaScript

🎨 Uso de componentes

React

import { Button, TelegramIcon } from "@rustlanges/react";

function App() {
  return (
    <Button 
      variant="primary"
      icon={<TelegramIcon />}
      label="Enviar"
    />
  );
}

Leptos

use rustlanges_leptos::components::Button;

view! {
    <Button variant=ButtonVariant::Primary>
        "Hola Rust!"
    </Button>
}

🖌️ Sistema de diseño

Todos los componentes siguen las especificaciones de nuestro Figma oficial:

• 📐 Guías de diseño
• 🎨 Paleta de colores
• ✏️ Iconografía

🛠️ Desarrollo

1. Clona el repositorio:

git clone https://github.com/RustLangES/design-system-components.git
cd design-system-components

2. Instala dependencias:

pnpm install

3. Inicia el entorno de desarrollo:

pnpm run dev

🤝 Cómo contribuir

Sigue nuestra guía de contribución para:

• 🆕 Añadir nuevos componentes
• 🐛 Reportar errores
• ✨ Proponer mejoras

Importante: Todos los componentes deben:

1. Seguir las especificaciones de Figma
2. Pasar los tests de accesibilidad
3. Incluir documentación

📄 Licencia

Este proyecto está licenciado bajo MIT License - ver el archivo LICENSE para más detalles.

---

Parte del ecosistema RustLangES