feat: anade app playground con catalogo de componentes

libs/ui/README.md

@@ -33,7 +33,8 @@ no cubren.
 ## Formularios: Signal Forms
 
 Los campos ya no son `ControlValueAccessor` ni reciben `formControlName`.
-Implementan los contratos de Signal Forms, así que basta con enlazar `[field]`:
+Implementan los contratos de Signal Forms, así que basta con enlazar
+`[formField]` — ése es el selector de la directiva `FormField`, no `[field]`:
 
 ```ts
 import { form, required, min, FormField } from '@angular/forms/signals';
@@ -41,9 +42,9 @@ import { form, required, min, FormField } from '@angular/forms/signals';
 @Component({
   imports: [FormField, PiTextFieldComponent, PiNumberFieldComponent, PiSlideToggleComponent],
   template: `
-    <pi-text-field [field]="f.name" placeholder="Nombre" />
-    <pi-number-field [field]="f.age" />
-    <pi-slide-toggle [field]="f.active" />
+    <pi-text-field [formField]="f.name" placeholder="Nombre" />
+    <pi-number-field [formField]="f.age" />
+    <pi-slide-toggle [formField]="f.active" />
   `,
 })
 export class Ejemplo {
@@ -57,7 +58,12 @@ export class Ejemplo {
 ```
 
 La directiva `FormField` sincroniza sola `value`, `disabled`, `errors`,
-`touched`, `required`, `min`/`max`, `maxLength`… con el campo enlazado.
+`touched`, `required`, `min`/`max`, `maxLength`… con el campo enlazado. De
+hecho **no se pueden enlazar a mano** esas entradas en un elemento que ya use
+`[formField]`: Angular lo rechaza con `NG8022`. Los validadores van en el
+`form()`, no en la plantilla.
+
+Se puede ver funcionando en la app `playground` (`nx serve playground`).
 
 | Componente                                           | Contrato              | Tipo del valor                        |
 | ---------------------------------------------------- | --------------------- | ------------------------------------- |
@@ -93,6 +99,11 @@ Detalles a tener en cuenta:
 Los selects (`ui/select`) siguen con `ControlValueAccessor`; quedaron fuera del
 alcance de esta migración.
 
+**El loader de servidor de traducciones ya no está en el barrel.**
+`util/translate/loaders/translate-server.loader` usa `fs`, `path` y `process`;
+exportarlo desde `@pi/ui` rompía el bundle de navegador de cualquier app que
+importase la librería. Se importa por su ruta directa desde el arranque de SSR.
+
 ## Decisiones que cambian comportamiento
 
 Revisar estos puntos antes de usar la librería en producción:

libs/ui/src/index.ts

@@ -13,14 +13,7 @@ export * from './lib/util/form-control';
 export * from './lib/util/icon-registry';
 export * from './lib/util/infinite-scroll';
 // ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
-export {
-  getListMode,
-  ListConfigsFacade,
-  listConfigsReducer,
-  ListModeActionsType,
-  resetListMode,
-  setListMode,
-} from './lib/util/list-configs';
+export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
 export type { ListConfigsState, ListMode } from './lib/util/list-configs';
 export * from './lib/util/loaders';
 export * from './lib/util/local-storage';
@@ -63,31 +56,6 @@ export * from './lib/ui/slider';
 export * from './lib/ui/spinner';
 export * from './lib/ui/tab';
 // ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
-export {
-  PiBaseTextViewerComponent,
-  PiTextAreaExpansionComponent,
-  PiTextCenteredDirective,
-  PiTextColorDirective,
-  PiTextCoveredDirective,
-  PiTextGroupDirective,
-  PiTextGroupIndicatorDirective,
-  PiTextLargeDirective,
-  PiTextLetterSpacingDirective,
-  PiTextMediumDirective,
-  PiTextSizeDirective,
-  PiTextSmallDirective,
-  PiTextViewerComponent,
-  PiTextViewerLinkComponent,
-  PiTextWeightBlackDirective,
-  PiTextWeightBoldDirective,
-  PiTextWeightLightDirective,
-  PiTextWeightMediumDirective,
-  PiTextWeightNormalDirective,
-  PiTextXLargeDirective,
-  PiTextXSmallDirective,
-  PiTextXXLargeDirective,
-  PiTextXXSmallDirective,
-  PiTextXXXLargeDirective,
-} from './lib/ui/text';
+export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
 export * from './lib/ui/tooltip';
 export * from './lib/ui/wrapper';

libs/ui/src/lib/ui/text/base-text-viewer.component.ts

@@ -55,7 +55,7 @@ export abstract class PiBaseTextViewerComponent implements OnInit {
   readonly isDisabled = input(false);
 
   // Content
-  readonly label = input.required<string | unknown>();
+  readonly label = input<string | unknown>();
   readonly value = input<string>();
 
   ngOnInit(): void {

libs/ui/src/lib/util/translate/index.ts

@@ -9,9 +9,12 @@ export * from './translate.data';
 // Model
 export * from './translate.model';
 
-// Translate server
 export * from './loaders/translate-browser.loader';
-export * from './loaders/translate-server.loader';
+
+// `loaders/translate-server.loader` NO se exporta aquí a propósito: usa `fs`,
+// `path` y `process`, así que incluirlo en el barrel del navegador rompe el
+// bundle de cualquier app que importe `@pi/ui`. Impórtalo por su ruta directa
+// desde el arranque de SSR.
 
 // Service
 export * from './i18n.service';