Sistema de Componentes

El sistema de componentes Creative Minds está construido sobre un ecosistema modular que utiliza el registro de npm para organizar y distribuir componentes, características y módulos de manera eficiente.

Visión General del Registro

Creative Minds utiliza un sistema de registro de paquetes organizado en scopes de npm para mantener un ecosistema de componentes escalable y mantenible. Esta arquitectura permite:

Reutilización de código a través de paquetes independientes
Control de versiones individual por paquete
Actualizaciones independientes de componentes
Documentación centralizada para cada paquete

Estructura del Registro

Nuestro ecosistema está organizado en los siguientes scopes principales:

1. `@crtv-mnds/ui`

Componentes de interfaz de usuario reutilizables basados en Radix UI y Shadcn/ui.


# Instalar componentes UI
npm install @crtv-mnds/ui

2. `@crtv-mnds/features`

Características listas para implementar que encapsulan lógica de negocio.


# Instalar características específicas
npm install @crtv-mnds/features-auth
npm install @crtv-mnds/features-dashboard

3. `@crtv-mnds/modules`

Módulos funcionales completos que pueden incluir múltiples características.


# Instalar módulos completos
npm install @crtv-mnds/module-ecommerce

Flujo de Trabajo con el Registro

Instalación de Paquetes


# Instalar un paquete específico
npm install @crtv-mnds/ui-button
 
# Instalar versión específica
npm install @crtv-mnds/features-auth@1.2.0

Actualización de Paquetes


# Ver paquetes desactualizados
npm outdated
 
# Actualizar un paquete
npm update @crtv-mnds/ui

Configuración del `.npmrc`

Para trabajar con nuestro registro privado, asegúrate de tener la siguiente configuración:


@crtv-mnds:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

Arquitectura de Componentes

Jerarquía de Componentes

Niveles de Componentes

Primitives (Radix UI) - Componentes sin estilo, accesibles
Base Components (Shadcn/ui) - Componentes estilizados básicos
Composite Components - Combinaciones de componentes base
Feature Components - Componentes específicos de features
Page Components - Componentes específicos de páginas

Uso de Componentes

Instalación


# Instalar un componente específico
npm install @crtv-mnds/ui-button
 
# Instalar todos los componentes UI
npm install @crtv-mnds/ui

Ejemplo Básico


import { Button } from '@crtv-mnds/ui/button';
 
function MyComponent() {
  return (
    <Button variant="primary" onClick={() => console.log('Clicked!')}>
      Hacer clic
    </Button>
  );
}

Próximos Pasos

Componentes Base - Documentación detallada de los componentes base
Patrones de Diseño - Patrones comunes de implementación
Convenciones - Estándares de código y convenciones