bitxu-ui-components

Componentes UI compartidos para las aplicaciones de la plataforma Bitxu.

Instalación

npm install bitxu-ui-components
# o
pnpm add bitxu-ui-components
# o
yarn add bitxu-ui-components

Peer Dependencies

Este paquete requiere las siguientes dependencias:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "framer-motion": "^11.0.0",
  "lucide-react": "^0.400.0",
  "firebase": "^11.0.0",
  "bitxu-auth-client": "^1.0.0",
  "bitxu-core-types": "workspace:*",
  "@core-features/firebase-config": "workspace:*"
}

Uso

AppShell

Componente principal que envuelve toda la aplicación con autenticación, contexto de tenant y menú.

import { AppShell } from 'bitxu-ui-components';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

export default function RootLayout({ children }) {
  return (
    <AppShell firebaseConfig={firebaseConfig}>
      {children}
    </AppShell>
  );
}

Props

| Prop | Tipo | Descripción | |------|------|-------------| | children | ReactNode | Contenido de la aplicación | | firebaseConfig | object | Configuración de Firebase (opcional) | | devMode | boolean | Modo desarrollo sin autenticación real |

Modo Desarrollo

Para desarrollo local sin Firebase:

<AppShell devMode>
  {children}
</AppShell>

AppLayout

Layout con sidebar colapsable y header.

import { AppLayout } from 'bitxu-ui-components';

export default function Dashboard() {
  return (
    <AppLayout>
      <h1>Mi Dashboard</h1>
    </AppLayout>
  );
}

Sidebar

Barra lateral de navegación.

import { Sidebar } from 'bitxu-ui-components';

export default function MySidebar() {
  const [collapsed, setCollapsed] = useState(false);
  
  return (
    <Sidebar 
      collapsed={collapsed} 
      onToggle={() => setCollapsed(!collapsed)} 
    />
  );
}

Props

| Prop | Tipo | Descripción | |------|------|-------------| | collapsed | boolean | Estado colapsado | | onToggle | () => void | Callback para toggle |

Header

Header con selector de tenant y menú de usuario.

import { Header } from 'bitxu-ui-components';

export default function MyHeader() {
  return <Header onMenuClick={() => setOpen(true)} />;
}

Props

| Prop | Tipo | Descripción | |------|------|-------------| | onMenuClick | () => void | Callback para abrir menú móvil |

Hooks

useTenant

Hook para acceder al contexto de tenant.

import { useTenant } from 'bitxu-ui-components';

function MyComponent() {
  const { currentTenant, tenants, setCurrentTenant, loading } = useTenant();
  
  if (loading) return <div>Cargando...</div>;
  
  return (
    <div>
      <p>Espacio actual: {currentTenant?.name}</p>
      <select onChange={(e) => setCurrentTenant(tenants.find(t => t.id === e.target.value))}>
        {tenants.map(t => (
          <option key={t.id} value={t.id}>{t.name}</option>
        ))}
      </select>
    </div>
  );
}

Retorna

| Campo | Tipo | Descripción | |-------|------|-------------| | currentTenant | Tenant \| null | Tenant seleccionado | | tenants | Tenant[] | Lista de tenants del usuario | | setCurrentTenant | (tenant: Tenant) => void | Cambiar tenant actual | | loading | boolean | Estado de carga |

useMenu

Hook para acceder al menú dinámico.

import { useMenu } from 'bitxu-ui-components';

function Navigation() {
  const { menuItems, loading, refreshMenu } = useMenu();
  
  if (loading) return <div>Cargando menú...</div>;
  
  return (
    <nav>
      {menuItems.map(item => (
        <a key={item.id} href={item.href}>{item.label}</a>
      ))}
      <button onClick={refreshMenu}>Actualizar</button>
    </nav>
  );
}

Retorna

| Campo | Tipo | Descripción | |-------|------|-------------| | menuItems | MenuItem[] | Items del menú | | loading | boolean | Estado de carga | | refreshMenu | () => void | Recargar menú |

useDevAuth

Hook para autenticación en modo desarrollo.

import { useDevAuth } from 'bitxu-ui-components';

function DevComponent() {
  const { user, isAuthenticated, hasPermission, hasRole } = useDevAuth();
  
  // En devMode, siempre retorna valores mock
  return <div>Usuario: {user?.displayName}</div>;
}

Componentes Individuales

Puedes importar componentes individuales si no necesitas el shell completo:

import { 
  AppShell,    // Shell completo con auth + tenant + menu
  AppLayout,   // Layout visual (sidebar + header + main)
  Sidebar,     // Solo sidebar
  Header,      // Solo header
  useTenant,   // Hook de tenant
  useMenu,     // Hook de menú
  useDevAuth   // Hook de auth en dev mode
} from 'bitxu-ui-components';

Estilos

Este paquete usa Tailwind CSS. Asegúrate de tener Tailwind configurado en tu proyecto.

Configuración de Tailwind

Añade el path del paquete a tu tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/bitxu-ui-components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

Tipos TypeScript

Los tipos están incluidos en el paquete:

import type { Tenant, MenuItem } from 'bitxu-core-types';

Desarrollo Local

# Clonar el repositorio
git clone <repo-url>
cd core-features/packages/bitxu-ui-components

# Instalar dependencias
pnpm install

# Build
pnpm build

# Los archivos se generan en dist/

Estructura del Paquete

bitxu-ui-components/
├── src/
│   ├── index.tsx              # Exports principales
│   ├── components/
│   │   ├── AppLayout.tsx      # Layout principal
│   │   ├── Sidebar.tsx        # Barra lateral
│   │   └── Header.tsx         # Header
│   ├── context/
│   │   ├── TenantContext.tsx  # Contexto de tenant
│   │   └── MenuContext.tsx    # Contexto de menú
│   └── utils/
│       └── cn.ts              # Utilidad para clases
├── dist/                       # Build output
├── package.json
├── tsconfig.json
└── tsup.config.ts

Licencia

MIT