@megalabs/shared-components

Librería de componentes React compartida.

Stack

• React 19 + TypeScript
• Vite (library mode)
• Tailwind CSS 4
• Storybook 8

Desarrollo

pnpm install
pnpm storybook        # Storybook en localhost:6006
pnpm dev              # Build en modo watch
pnpm build            # Build de producción

Uso en otro proyecto (link local)

1. Buildear la librería

Antes de linkear, asegurate de tener el build generado:

cd megalabs-shared-components
pnpm build

Si estás desarrollando activamente, podés dejar el build en modo watch:

pnpm dev

2. Linkear desde el proyecto consumidor

Desde la raíz del proyecto que va a consumir la librería:

pnpm link ../megalabs-shared-components

Esto crea un symlink de @megalabs/shared-components en el node_modules del proyecto consumidor apuntando al directorio local.

3. Importar componentes y estilos

import { HelloWorld } from "@megalabs/shared-components";
import "@megalabs/shared-components/styles.css";

4. Deslinkear

Para remover el link y volver a usar la versión del registry (cuando exista):

pnpm unlink @megalabs/shared-components
pnpm install

Nota sobre peerDependencies

pnpm link puede mostrar un warning de peerDependencies (react, react-dom) no resueltas. Esto es normal y no causa problemas en la mayoría de los casos. Si encontrás errores de "múltiples instancias de React", usá el protocolo file: en el package.json del consumidor como alternativa:

{
  "dependencies": {
    "@megalabs/shared-components": "file:../megalabs-shared-components"
  }
}

Luego ejecutá pnpm install para que resuelva las peer dependencies correctamente.

Estructura

src/
  components/
    HelloWorld/
      HelloWorld.tsx
      HelloWorld.stories.tsx
      index.ts
  index.ts        # barrel export
  styles.css      # tailwind

Para agregar un componente nuevo, crear su carpeta en src/components/ y re-exportarlo desde src/index.ts.

Arquitectura de componentes

Desde este punto en adelante, para componentes con secciones internas o comportamiento extensible, usar el patrón de compound components como estándar:

• Exponer subcomponentes como propiedades estáticas (Componente.Subcomponente)
• Compartir estado interno vía context
• Mantener una composición por defecto para no romper <Componente />
• Reflejar el patrón en Storybook y en el JSDoc del componente