@projectcor/people-microfront

Módulo People de COR. Contiene tres tabs principales:

• Usuarios — Gestión de usuarios de la organización
• Equipos — Creación y administración de equipos de trabajo
• Posiciones — Alta, baja y modificación de posiciones/categorías de usuario

Requisitos previos

| Herramienta | Versión requerida | |-------------|-------------------| | Node.js | 16 (ver .nvmrc) | | npm | 6 |

nvm use

Tech Stack

| Tecnología | Versión | Uso | |------------|---------|-----| | React | 18.2 | UI library | | TypeScript | 4.9 | Tipado estático | | Webpack | 5 | Bundler / Dev server | | Babel | 7 | Transpilación y build de lib/ | | Apollo Client | 3.x | Cliente GraphQL | | GraphQL | 15.x | Lenguaje de consultas | | MUI (Material UI) | 5.15 | Componentes UI | | Emotion | 11.x | CSS-in-JS (motor de estilos de MUI) | | i18next | 22.x | Internacionalización (es, en, fr) | | Framer Motion | 10.x | Animaciones | | Jest | 29 | Testing | | Testing Library | 12.x | Utilidades de testing | | Storybook | 6.5 | Documentación de componentes | | Husky | 7.x | Git hooks | | ESLint + Prettier | 8.x / 2.x | Linting y formateo |

Instalación

git clone git+https://github.com/ProjectCORTeam/people.git
cd people
nvm use
npm install

Levantar el proyecto

1. Instalar dependencias y ejecutar el dev server:

nvm use
npm install
npm st

2. Cookie ATS: Para que la aplicación funcione correctamente en local, es necesario agregar la cookie ATS en el navegador. Copiar el valor de la cookie desde el entorno local y agregarla manualmente en las DevTools del navegador (Application → Cookies → localhost:6006).

Scripts disponibles

| Script | Comando | Descripción | |--------|---------|-------------| | Dev server | npm start | Inicia Webpack Dev Server en localhost:3000 | | Build (Babel) | npm run build:babel | Build de producción con Babel → lib/ | | Build (Webpack) | npm run build:webpack | Build de producción con Webpack → build/ | | Build local | npm run build:local | Build + copia a web/node_modules local | | Lint | npm run eslint | Ejecuta ESLint en src/ | | Tests | npm run test:jest | Ejecuta los tests con Jest | | Test coverage | npm run test:coverage | Tests con reporte de cobertura | | Storybook | npm run st | Inicia Storybook en localhost:6006 | | Publicar | npm run np-publish | Build + publicación con np |

Estructura del proyecto

people/
├── .husky/                  # Git hooks (pre-push)
├── .storybook/              # Configuración de Storybook
├── lib/                     # Output del build de Babel
├── public/                  # Assets estáticos (index.html)
├── src/
│   ├── components/          # Componentes UI reutilizables
│   │   ├── Backdrop/
│   │   ├── DeleteTeamModal/
│   │   ├── EmptyStateTeams/
│   │   ├── Filters/         # FilterChip, LabelFilter, SearchComponent
│   │   ├── HeaderTeams/
│   │   ├── Icons/
│   │   ├── Layout/
│   │   ├── Loader/
│   │   ├── Modal/
│   │   ├── ModalBlockedUser/
│   │   ├── ModalEditUserPosition/
│   │   ├── Pagination/
│   │   ├── Snackbar/
│   │   ├── Table/           # Header, Row, TeamRow (con AddMember, RemoveMember)
│   │   ├── TeamDetailsModal/
│   │   └── UserRow/
│   ├── constants/           # Constantes y configuración del cliente GQL
│   ├── container/           # Contenedores / vistas principales
│   │   ├── Body/
│   │   ├── Filters/
│   │   ├── MainView/
│   │   ├── Pagination/
│   │   ├── RouterComponent/ # Router de vistas (users, teams, userCategoryAbm)
│   │   └── TableContainer/
│   ├── context/             # React Context (UsersContext, TeamsContext)
│   ├── hooks/               # Custom hooks
│   ├── lang/                # Traducciones i18n
│   │   └── translation/     # Archivos de traducción (es, en, fr)
│   ├── mocks/               # Datos mock para desarrollo y tests
│   ├── query/               # Queries y mutations GraphQL
│   ├── types/               # Definiciones de tipos TypeScript
│   ├── utils/               # Funciones utilitarias
│   ├── App.tsx              # Componente raíz
│   ├── index.tsx            # Entry point (ReactDOM.createRoot)
│   ├── index.css            # Estilos globales
│   └── Providers.tsx        # Proveedores (Apollo, i18n, Theme, Context)
├── alias_cfg.js             # Configuración de aliases (Webpack/Jest/Babel)
├── .babelrc                 # Configuración de Babel
├── .eslintrc.js             # Configuración de ESLint
├── .prettierrc.cjs          # Configuración de Prettier
├── jest.config.js           # Configuración de Jest
├── tsconfig.json            # Configuración de TypeScript
├── webpack.config.js        # Configuración de Webpack
└── package.json

Arquitectura

Flujo de la aplicación

index.tsx → App.tsx → Providers.tsx → RouterComponent
                         │
                         ├── Apollo Provider (GraphQL)
                         ├── i18n Provider
                         ├── Theme Provider (MUI)
                         ├── UsersContext
                         └── TeamsContext

Vistas principales

| Vista | Descripción | |-------|-------------| | Usuarios | Listado y gestión de usuarios de la organización | | Equipos | Creación, edición y gestión de miembros de equipos | | Posiciones | Alta, baja y modificación de posiciones/categorías de usuario |

Patrón de datos

• GraphQL con Apollo Client para comunicación con el backend
• React Context para estado local compartido entre componentes
• Las queries y mutations se encuentran en src/query/

Aliases de paths

Configurados en alias_cfg.js y disponibles en Babel y Jest:

| Alias | Path real | |-------|-----------| | components | ./src/components | | lang | ./src/lang | | mocks | ./src/mocks | | types | ./src/types |

Para agregar nuevos aliases, editar el objeto aliasRelPath en alias_cfg.js.

Internacionalización (i18n)

El proyecto soporta tres idiomas:

• Español (es)
• Inglés (en)
• Francés (fr)
• Portugués (br)

Los archivos de traducción están en src/lang/translation/. La app se envuelve con el provider de i18n en src/Providers.tsx.

Variables de entorno

El proyecto usa dotenv y dotenv-webpack para cargar variables de entorno. Copiar el archivo de ejemplo y ajustar los valores según el entorno:

cp .env.example .env

| Variable | Valor por defecto | Descripción | |----------|-------------------|-------------| | NODE_ENV | development | Entorno de ejecución | | APP_MODE | development | Modo de la aplicación | | APP_PORT | 3000 | Puerto del dev server | | APP_URL | http://localhost:3000/ | URL base de la aplicación | | GRAPHQL_URL | http://localhost:2020/graphql | Endpoint del servidor GraphQL | | USER_CUSTOMIZATION_URL | http://cor.com:3030/v1 | URL del servicio de customización de usuario |

Configuración de Webpack

• Dev Server: Puerto configurable via APP_PORT, default 3000
• Loaders: Babel (JS), ts-loader (TS/TSX), css-loader, svg-url-loader
• Plugins: dotenv-webpack, HtmlWebpackPlugin, TerserPlugin
• Optimización: Code splitting por vendor chunks, TerserPlugin en paralelo
• Polyfills habilitados: stream, buffer, path, zlib, fs, process/browser

Testing

# Ejecutar tests
npm run test:jest

# Tests con cobertura
npm run test:coverage

• Framework: Jest 29 con jsdom
• Utilidades: Testing Library (React, user-event, react-hooks)
• Los aliases de paths se resuelven automáticamente via alias_cfg.js
• Mock de canvas con jest-canvas-mock

Linting y formateo

npm run eslint

• ESLint: Airbnb + TypeScript + Prettier + React
• Prettier: Sin punto y coma, comillas simples, printWidth: 120

Build y publicación

Build para librería (Babel)

npm run build:babel

Genera la carpeta lib/ con los archivos transpilados. Este es el build que se publica como paquete npm.

Build local (desarrollo integrado)

npm run build:local

Ejecuta el build de Babel y copia lib/ a ~/cor/dockerEnviroment/web/node_modules/@projectcor/people-microfront/lib para testing integrado con la app principal.

Publicación

npm run np-publish

Ejecuta build + publicación usando np.

Antes de publicar, asegurarse de que el campo repository en package.json apunte al repositorio correcto.