@sfperusacdev/sf-ui

Librería de componentes React para aplicaciones SF Perú.

Repositorio: github.com/sfperusacdev/sf-ui

Estructura

sf-ui/
├── src/              Librería
├── playground/       App de pruebas
└── COMPONENT_MEMORY.md   Mapa de componentes y fases

Clonar desde GitHub (otra PC)

Requisitos

• Node.js 20+ (LTS recomendado)
• Git
• npm

Pasos

# HTTPS
git clone https://github.com/sfperusacdev/sf-ui.git
cd sf-ui

# o SSH (si tienes llave configurada en GitHub)
# git clone [email protected]:sfperusacdev/sf-ui.git
# cd sf-ui

npm install
npm run dev

Abre la URL que indique Vite (normalmente http://localhost:5173).

Después de clonar

| Objetivo | Comando | |---|---| | Playground / probar componentes | npm run dev | | Compilar librería (dist/ no va en Git) | npm run build | | Verificar tipos | npm run type-check | | Lint | npm run lint |

Playground

• Pestañas Referencia e Agregado (Fases 1–15; CEO Demo al final).
• Selector Tema visual: Referencia (slate) · ERP (naranja ISP) · Agro (verde SARK).
• URL: ?tab=inputs-f8&theme=erp

Documentación viva: ver COMPONENT_MEMORY.md. Contratos oficiales de consumo: ver SF_UI_COMPONENT_CONTRACTS.md. Cambios de release: ver CHANGELOG.md.

SF Geo + SF Maps

Arquitectura cerrada para mapas neutrales, Google/Leaflet y roadmap geo: ver SF_GEO_MAPS_ARCHITECTURE.md.

MVP 1 vive dentro de este paquete y se consume desde @sfperusacdev/sf-ui con SfProvider, MapView, LocationPicker, AddressSearchInput, AreaInput y RouteInput. AreaInput y RouteInput permiten añadir puntos, arrastrar vértices, eliminar con doble clic, deshacer y limpiar; validan mínimos cuando son requeridos y el renderer Google conserva mapa/markers/shapes entre renders para edición sin parpadeos.

La base de pruebas de mapas cubre helpers de coordenadas y servicios puros (distance, routing) con Vitest.

MVP 2 inició fuera de sf-ui como paquete independiente en ../sf-geo-core, para mantener las reglas geoespaciales sin React, DOM ni provider de mapas.

Scripts

npm install
npm run dev           # Playground
npm run build         # Build librería → dist/
npm run type-check
npm test
npm run lint

Uso en otra app (local)

Tras npm run build en este repo:

# en tu app
npm install ../sf-ui

import "@sfperusacdev/sf-ui/dist/sf-ui.css";
import "@sfperusacdev/sf-ui/theme/erp.css"; // opcional: erp | sark
import { Input, CustomTable, Button } from "@sfperusacdev/sf-ui";

Temas npm: @sfperusacdev/sf-ui/theme/sf-tokens.css, theme/erp.css, theme/sark.css.

Migracion desde sarksdk

Para migrar consumo de validators, createFormSchema y useCustomForm desde @sfperusac/sarksdk, ver SARKSDK_CONSUMER_MIGRATION.md.

Publicar cambios a GitHub

git add .
git commit -m "tu mensaje"
git push origin main

En la otra PC:

git pull origin main
npm install
npm run build   # si usas dist/ o empaquetas la lib