Una biblioteca de componentes reutilizables en React con TypeScript, enfocada en accesibilidad, construida con shadcn/ui y react-aria.
- 🎨 Componentes estilizados con shadcn/ui - Diseño moderno y personalizable
- ♿ Accesibilidad con react-aria - Cumple con estándares WCAG 2.1 AA
- 🌓 Soporte para Dark Mode - Tema claro y oscuro incluidos
- 📦 Bundle optimizado con tsup - Salidas ESM, CJS y tipos TypeScript
- 🎯 Compatible con Tailwind CSS - Integración perfecta con tu configuración existente
- 📚 Documentación con Storybook - Explora componentes interactivamente
- ✅ Testing con Vitest - Tests unitarios con React Testing Library
npm install moby-accessibility
# o
yarn add moby-accessibility
# o
pnpm add moby-accessibilityEn tu archivo CSS principal o en el punto de entrada de tu aplicación:
@import 'moby-accessibility/dist/index.css';Si aún no tienes Tailwind CSS configurado, necesitarás instalarlo. Si ya lo tienes, agrega nuestra biblioteca a tu configuración:
// tailwind.config.js
module.exports = {
content: [
// ... tu contenido existente
"./node_modules/moby-accessibility/**/*.{js,ts,jsx,tsx}",
],
// ... resto de tu configuración
}import { Button } from 'moby-accessibility'
function App() {
return (
<Button variant="default" size="default" onPress={() => console.log('Clicked!')}>
Click me
</Button>
)
}-
variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' -
size: 'default' | 'sm' | 'lg' | 'icon' -
asChild: boolean - Renderizar como componente hijo -
isDisabled: boolean - Estado deshabilitado - Todas las props de
AriaButtonPropsde react-aria
import { Input } from 'moby-accessibility'
function Form() {
return (
<Input
label="Email"
type="email"
placeholder="tu@ejemplo.com"
description="Ingresa tu correo electrónico"
isRequired
/>
)
}-
label: string - Etiqueta del campo -
description: string - Texto de ayuda -
error: boolean - Estado de error -
errorMessage: string - Mensaje de error - Todas las props de
AriaTextFieldPropsde react-aria
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from 'moby-accessibility'
function MyDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Abrir Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Título del Dialog</DialogTitle>
<DialogDescription>
Descripción del contenido del dialog.
</DialogDescription>
</DialogHeader>
{/* Contenido */}
</DialogContent>
</Dialog>
)
}La biblioteca soporta dark mode automáticamente. Para activarlo, agrega la clase dark al elemento html o body:
<html class="dark">
<!-- Tu aplicación -->
</html>- Node.js >= 16
- npm, yarn o pnpm
npm install# Modo desarrollo con hot reload
npm run dev
# Construir la biblioteca
npm run build
# Ejecutar tests
npm run test
# Ejecutar tests con UI
npm run test:ui
# Ejecutar Storybook
npm run storybook
# Construir Storybook
npm run build-storybook
# Linting
npm run lint
# Formateo de código
npm run format
# Type checking
npm run type-checkmoby-accessibility/
├── src/
│ ├── components/ # Componentes React
│ │ ├── button/
│ │ ├── input/
│ │ └── dialog/
│ ├── lib/ # Utilidades
│ ├── styles/ # Estilos globales
│ └── index.ts # Punto de entrada
├── tests/ # Tests unitarios
├── .storybook/ # Configuración de Storybook
└── example/ # Aplicación de ejemplo
- En el directorio de la biblioteca:
npm run build
npm link- En tu proyecto donde quieres usar la biblioteca:
npm link moby-accessibility- Para desvincularlo cuando termines:
# En tu proyecto
npm unlink moby-accessibility
# En la biblioteca
npm unlink- Asegúrate de estar logueado en npm:
npm login-
Actualiza la versión en package.json
-
Construye la biblioteca:
npm run build- Publica:
npm publish --access public- Fork el repositorio
- Crea tu rama de feature (
git checkout -b feature/amazing-feature) - Commit tus cambios (
git commit -m 'Add some amazing feature') - Push a la rama (
git push origin feature/amazing-feature) - Abre un Pull Request
MIT © [Tu nombre]