@scmlatam/web-ui 0.2.65 → 0.2.67

package/README.md

@@ -1,6 +1,109 @@
+# @scmlatam/web-ui
+
+Librería de componentes React y TypeScript de SCMLATAM. Incluye componentes de interfaz, formularios, tablas, temas y los componentes Core y RB. La app del repositorio sirve como entorno de demostración y desarrollo.
+
+## Desarrollo
+
+Se recomienda usar [Bun](https://bun.sh/) para instalar dependencias y ejecutar los comandos del proyecto.
+
+```bash
+bun install
+```
+
+### Aplicación
+
+```bash
+bun run dev       # Inicia Vite en modo desarrollo
+bun run build     # Compila TypeScript y genera el build de producción
+bun run preview   # Previsualiza localmente el build de producción
+```
+
+```bash
+npm run dev       # Inicia Vite en modo desarrollo
+npm run build     # Compila TypeScript y genera el build de producción
+npm run preview   # Previsualiza localmente el build de producción
+```
+
+### Calidad y pruebas
+
+```bash
+bun run lint      # Ejecuta ESLint
+bun run test      # Ejecuta las pruebas unitarias
+```
+
+`bun run test` ejecuta solo el proyecto `unit` de Vitest. Las historias tienen un proyecto separado, `storybook`, configurado en `vite.config.ts`; para ejecutarlo en Chromium usa:
+
+```bash
+bunx vitest run --project storybook
+```
+
+### Storybook
+
+```bash
+bun run storybook         # Inicia Storybook en http://localhost:6006
+bun run build-storybook   # Genera el Storybook estático
+```
+
+```bash
+npm run storybook
+npm run build-storybook
+```
+
+### Configuración local
+
+La app de demostración utiliza Microsoft Authentication Library (MSAL) y se conecta a una API. Para probar esos flujos, crea un archivo `.env.local` en la raíz y solicita los valores de desarrollo al equipo:
+
+```dotenv
+VITE_MS_CLIENT_ID=
+VITE_MS_AUTHORITY=
+VITE_MS_POSTLOGOUTREDIRECTURI=
+VITE_API_DOMAIN=
+VITE_API_APPKEY=
+```
+
+Estas variables son leídas por Vite y quedan disponibles en el código del navegador; no incluyas secretos ni credenciales privadas. `.env.local` está excluido de Git. Sin configuración de autenticación y API, algunos flujos de la demo no estarán disponibles.
+
+### Estructura del repositorio
+
+- `src/components/`: componentes Core, formularios, tablas y exportaciones públicas.
+- `src/rb-components/`: componentes de interfaz RB.
+- `src/stories/`: historias y documentación de componentes en Storybook.
+- `src/pages/`, `src/App.tsx`: páginas y app de demostración.
+- `src/themes/`, `src/css/`: temas y estilos.
+- `public/`: imágenes y otros recursos estáticos.
+
+### Consumir la librería
+
+En una aplicación que use Bun, instala el paquete:
+
+```bash
+bun add @scmlatam/web-ui
+```
+
+Importa los estilos y los componentes desde el paquete:
+
+```tsx
+import "@scmlatam/web-ui/dist/web-ui.css";
+import { CoreProvider, RBButton } from "@scmlatam/web-ui";
+```
+
+`CoreProvider` debe envolver los componentes Core. La librería declara dependencias peer —incluidos React, React DOM y Material UI— que también deben estar instaladas en la aplicación consumidora; revisa `peerDependencies` en `package.json` para la lista completa y las versiones compatibles.
+
+### Contribuir
+
+- Al agregar un componente público, expórtalo desde `src/components/main.ts` o desde el punto de entrada RB correspondiente.
+- Agrega o actualiza su historia en `src/stories/` y pruebas unitarias `*.test.ts` o `*.test.tsx` cuando corresponda.
+- Antes de abrir un PR, valida los cambios con:
+
+  ```bash
+  bun run lint
+  bun run test
+  bun run build
+  ```
+
 ## Componentes
 
-Para implementar el componente Core primero tienes que importar el CoreProvider en tu archivo princial como se muesta a continuación.
+Para implementar el componente Core, primero importa `CoreProvider` en el punto de entrada de tu aplicación:
 
 ```js
 import { StrictMode } from "react";
@@ -24,8 +127,8 @@ createRoot(document.getElementById("root")!).render(
 ### Visibilidad del sidebar
 
 `Core` y `DashboardShell` aceptan `showSidebar`, activo por defecto.
-Para conservar solo la navegacion propia de una pagina, utiliza
+Para conservar solo la navegación propia de una página, utiliza
 `<Core {...props} showSidebar={false} />`. Este modo elimina el menu principal,
-su boton movil y el espacio lateral reservado, sin ocultar la barra superior.
-La app de demostracion lo desactiva; los consumidores que omiten esta propiedad
+su botón móvil y el espacio lateral reservado, sin ocultar la barra superior.
+La app de demostración lo desactiva; los consumidores que omiten esta propiedad
 conservan el sidebar.

package/dist/src/rb-components/ui/primitives/Input.d.ts

@@ -3,6 +3,7 @@ export type InputLabelVariant = "stacked" | "notched";
 export type InputFormat = "duration";
 export type BaseInputProps = {
     containerClassName?: string;
+    isAlphanumericOnly?: boolean;
     /** Duration input accepts HH:mm or HHmm and normalizes to HH:mm on blur. */
     format?: InputFormat;
     /** Maximum absolute duration in hours. Applies only when format="duration". */
@@ -26,6 +27,7 @@ type TextareaInputProps = BaseInputProps & Omit<React.TextareaHTMLAttributes<HTM
     as: "textarea";
 };
 export type InputProps = TextInputProps | TextareaInputProps;
+export declare function isValidAlphanumericInput(value: string): boolean;
 export declare function isValidNumericInput(value: string): boolean;
 export declare function isValidNumericInputInsertion(value: string, insertedText: string, selectionStart?: number, selectionEnd?: number): boolean;
 export declare function isValidDurationInput(value: string, limit?: number): boolean;

package/dist/src/stories/rb/ConfirmDialog.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ConfirmDialog, ConfirmDialogProps } from '../../rb-components/ui/overlays/ConfirmDialog';
+declare const meta: {
+    title: string;
+    component: typeof ConfirmDialog;
+    tags: string[];
+    render: (args: ConfirmDialogProps) => import("react").JSX.Element;
+    parameters: {
+        docs: {
+            story: {
+                inline: boolean;
+                height: string;
+                autoplay: boolean;
+            };
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        open: false;
+        iconType: "warning";
+        title: string;
+        message: string;
+        confirmText: string;
+        cancelText: string;
+        onClose: import('@vitest/spy').Mock<(...args: any[]) => any>;
+        onConfirm: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Responsive: Story;
+export declare const TextosExtensos: Story;
+export declare const UnaAccion: Story;
+export declare const Loading: Story;
+export declare const EtiquetasExtensas: Story;
+export declare const CierreYRetornoDelFoco: Story;