rustlanges-components 0.1.0

RustLangES components library
Documentation

:rocket: 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.

:package: Instalación

# Para proyectos React
pnpm add @rustlanges/react

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

:sparkles: 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

:building_construction: Estructura del proyecto

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

:art: 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>
}

:paintbrush: Sistema de diseño

Todos los componentes siguen las especificaciones de nuestro Figma oficial:

:hammer_and_wrench: Desarrollo

  1. Clona el repositorio:
git clone https://github.com/RustLangES/design-system-components.git
cd design-system-components
  1. Instala dependencias:
pnpm install
  1. Inicia el entorno de desarrollo:
pnpm run dev

:handshake: Cómo contribuir

Sigue nuestra guía de contribución para:

  • :new: Añadir nuevos componentes
  • :bug: Reportar errores
  • :sparkles: Proponer mejoras

Importante: Todos los componentes deben:

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

:page_facing_up: Licencia

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