moby-accessibility

v1.0.0

Published

7 months ago

A reusable React component library with accessibility

0High
0Medium
0Low

esaraviam

react component-library accessibility typescript shadcn react-aria tailwindcss

Moby Accessibility

Una biblioteca de componentes reutilizables en React con TypeScript, enfocada en accesibilidad, construida con shadcn/ui y react-aria.

Características

🎨 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

Instalación

npm install moby-accessibility
# o
yarn add moby-accessibility
# o
pnpm add moby-accessibility

Configuración

1. Importar estilos CSS

En tu archivo CSS principal o en el punto de entrada de tu aplicación:

@import 'moby-accessibility/dist/index.css';

2. Configurar Tailwind 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
}

Uso

Button

import { Button } from 'moby-accessibility'

function App() {
  return (
    <Button variant="default" size="default" onPress={() => console.log('Clicked!')}>
      Click me
    </Button>
  )
}

Props del 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 AriaButtonProps de react-aria

Input

import { Input } from 'moby-accessibility'

function Form() {
  return (
    <Input
      label="Email"
      type="email"
      placeholder="[email protected]"
      description="Ingresa tu correo electrónico"
      isRequired
    />
  )
}

Props del Input

label: string - Etiqueta del campo
description: string - Texto de ayuda
error: boolean - Estado de error
errorMessage: string - Mensaje de error
Todas las props de AriaTextFieldProps de react-aria

Dialog

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>
  )
}

Dark Mode

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>

Desarrollo

Prerequisitos

Node.js >= 16
npm, yarn o pnpm

Instalación de dependencias

npm install

Scripts disponibles

# 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-check

Estructura del proyecto

moby-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

Probar localmente con npm link

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

Publicar en npm

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

Contribuir

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