Fase 2: 04_sanitize.py - scrubbing de secretos de skills/agentes/plans (10 secretos unicos, gate en verde)

2026-07-29 00:35:59 +00:00
parent 21bc219f31
commit 837f91060f
79 changed files with 10153 additions and 0 deletions
@@ -0,0 +1,128 @@
+# Plan: Migrar bordes de inline styles a SCSS
+
+## Contexto
+
+El CI falla porque el componente `Button` usa inline styles (`style={{ borderWidth, borderStyle, borderColor }}`) para los bordes. Los tests (Jest y Cypress) esperan clases CSS como `border-gold` y `border-black` que ya no se generan. El usuario quiere que los estilos se escriban con SCSS en lugar de inline styles.
+
+## Cambios necesarios
+
+### 1. Crear `src/components/Button/Button.scss`
+
+Crear archivo SCSS con clases por variante para bordes. Cada variante que tenga borde (todos excepto `primary`) recibe:
+- `border-width: 3px`
+- `border-style: solid`
+- `border-color` con el color correspondiente
+
+```scss
+$border-width: 3px;
+$gold: #EABF2D;
+$amber: #D4880F;
+$black: #1A1A2E;
+$white: #FFFFFF;
+$danger: #DE3626;
+
+.btn {
+  // variantes con borde
+  &.w-btnOutlineGold,
+  &.w-btnOutline,
+  &.w-btnOutlineLight,
+  &.w-btnCircle,
+  &.w-btnIcon,
+  &.file-upload {
+    border-width: $border-width;
+    border-style: solid;
+  }
+
+  &.w-btnOutlineGold {
+    border-color: $gold;
+  }
+
+  &.w-btnOutline {
+    border-color: $black;
+  }
+
+  &.w-btnOutlineLight {
+    border-color: $white;
+  }
+
+  &.w-btnCircle {
+    border-color: $black;
+  }
+
+  &.w-btnIcon {
+    // icon-edit usa gold, icon-delete usa danger — se maneja con clases adicionales
+  }
+
+  &.file-upload {
+    border-color: $gold;
+  }
+
+  // icon-edit específico
+  &.w-btnIcon--edit {
+    border-color: $gold;
+  }
+
+  // icon-delete específico
+  &.w-btnIcon--delete {
+    border-color: $danger;
+  }
+}
+```
+
+**Reflexión:** El componente actual no tiene clases separadas para icon-edit vs icon-delete en el border-color. Ambas comparten `w-btnIcon` pero tienen bordes distintos (gold vs danger). Necesito revisar si se puede resolver con clases adicionales o con un approach diferente.
+
+Mirando el código actual:
+- `icon-edit` → `border-color: var(--color-gold, #EABF2D)` (inline style)
+- `icon-delete` → `border-color: var(--color-danger, #DE3626)` (inline style)
+
+Opción A: Agregar clases `border-gold` y `border-danger` al button y manejar el color con CSS custom properties o clases específicas.
+Opción B: Usar `data-variant` attribute y selector `[data-variant="icon-edit"]`.
+Opción C: Agregar clases específicas `btn--icon-edit` y `btn--icon-delete`.
+
+La opción C es la más limpia y consistente con el patr Tailwind del proyecto.
+
+### 2. Actualizar `src/components/Button/index.tsx`
+
+- **Eliminar** `BORDER_WIDTH`, `variantBorders`, `variantBorderColors`, `getButtonStyle()`
+- **Eliminar** `style={getButtonStyle(variant)}` de los elementos renderizados
+- **Agregar** clases CSS específicas para bordes:
+  - `outline-gold` → `border-gold`
+  - `outline-dark` → `border-black`
+  - `outline-light` → `border-white`
+  - `ghost` → `border-black`
+  - `circular` → `border-black`
+  - `icon-edit` → `border-gold`
+  - `icon-delete` → `border-danger`
+  - `file-upload` → `border-gold`
+- **Importar** el SCSS al inicio del archivo: `import './Button.scss';`
+
+### 3. Actualizar tests
+
+**`Button.test.tsx`** (Jest):
+- Línea 58: `expect(outlineGoldBtn).toHaveClass('border-gold')` → ya funciona con la nueva clase
+- Línea 62: `expect(outlineDarkBtn).toHaveClass('border-black')` → ya funciona con la nueva clase
+
+**`Button.test.cy.tsx`** (Cypress):
+- Línea 13: `cy.get('button').should('have.class', 'border-gold')` → ya funciona
+- Línea 19: `cy.get('button').should('have.class', 'border-black')` → ya funciona
+
+Los tests de Cypress también verifican `border-top-width` con `have.css` — eso seguirá funcionando porque el border-width se define en SCSS.
+
+### 4. Actualizar Storybook
+
+- `Button.stories.tsx`: Agregar `border-gold` y `border-black` como opciones de control si aplica
+
+## Archivos a modificar
+
+| Archivo | Acción |
+|---------|--------|
+| `src/components/Button/Button.scss` | **Crear** — clases SCSS para bordes |
+| `src/components/Button/index.tsx` | **Editar** — eliminar inline styles, agregar clases CSS, importar SCSS |
+| `src/components/Button/Button.stories.tsx` | **Editar** — actualizar si es necesario |
+
+## Verificación
+
+1. `npm test` — todos los tests deben pasar (incluyendo las assertions de `border-gold` y `border-black`)
+2. `npm run build-storybook` — Storybook debe compilar sin errores
+3. `npm run build` — el bundle debe generar correctamente
+4. CI: Push a la rama y verificar que Gitea Actions pase en ambos jobs