@scmlatam/web-ui 0.2.66 → 0.2.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -4
- package/dist/src/stories/rb/ConfirmDialog.stories.d.ts +38 -0
- package/dist/web-ui.js +59 -51
- package/dist/web-ui.umd.cjs +9 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,109 @@
|
|
|
1
|
+
# @scmlatam/web-ui
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Desarrollo
|
|
6
|
+
|
|
7
|
+
Se recomienda usar [Bun](https://bun.sh/) para instalar dependencias y ejecutar los comandos del proyecto.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
bun install
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Aplicación
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
bun run dev # Inicia Vite en modo desarrollo
|
|
17
|
+
bun run build # Compila TypeScript y genera el build de producción
|
|
18
|
+
bun run preview # Previsualiza localmente el build de producción
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm run dev # Inicia Vite en modo desarrollo
|
|
23
|
+
npm run build # Compila TypeScript y genera el build de producción
|
|
24
|
+
npm run preview # Previsualiza localmente el build de producción
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Calidad y pruebas
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
bun run lint # Ejecuta ESLint
|
|
31
|
+
bun run test # Ejecuta las pruebas unitarias
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
`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:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
bunx vitest run --project storybook
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Storybook
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
bun run storybook # Inicia Storybook en http://localhost:6006
|
|
44
|
+
bun run build-storybook # Genera el Storybook estático
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm run storybook
|
|
49
|
+
npm run build-storybook
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Configuración local
|
|
53
|
+
|
|
54
|
+
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:
|
|
55
|
+
|
|
56
|
+
```dotenv
|
|
57
|
+
VITE_MS_CLIENT_ID=
|
|
58
|
+
VITE_MS_AUTHORITY=
|
|
59
|
+
VITE_MS_POSTLOGOUTREDIRECTURI=
|
|
60
|
+
VITE_API_DOMAIN=
|
|
61
|
+
VITE_API_APPKEY=
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
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.
|
|
65
|
+
|
|
66
|
+
### Estructura del repositorio
|
|
67
|
+
|
|
68
|
+
- `src/components/`: componentes Core, formularios, tablas y exportaciones públicas.
|
|
69
|
+
- `src/rb-components/`: componentes de interfaz RB.
|
|
70
|
+
- `src/stories/`: historias y documentación de componentes en Storybook.
|
|
71
|
+
- `src/pages/`, `src/App.tsx`: páginas y app de demostración.
|
|
72
|
+
- `src/themes/`, `src/css/`: temas y estilos.
|
|
73
|
+
- `public/`: imágenes y otros recursos estáticos.
|
|
74
|
+
|
|
75
|
+
### Consumir la librería
|
|
76
|
+
|
|
77
|
+
En una aplicación que use Bun, instala el paquete:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
bun add @scmlatam/web-ui
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Importa los estilos y los componentes desde el paquete:
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import "@scmlatam/web-ui/dist/web-ui.css";
|
|
87
|
+
import { CoreProvider, RBButton } from "@scmlatam/web-ui";
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
`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.
|
|
91
|
+
|
|
92
|
+
### Contribuir
|
|
93
|
+
|
|
94
|
+
- Al agregar un componente público, expórtalo desde `src/components/main.ts` o desde el punto de entrada RB correspondiente.
|
|
95
|
+
- Agrega o actualiza su historia en `src/stories/` y pruebas unitarias `*.test.ts` o `*.test.tsx` cuando corresponda.
|
|
96
|
+
- Antes de abrir un PR, valida los cambios con:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
bun run lint
|
|
100
|
+
bun run test
|
|
101
|
+
bun run build
|
|
102
|
+
```
|
|
103
|
+
|
|
1
104
|
## Componentes
|
|
2
105
|
|
|
3
|
-
Para implementar el componente Core primero
|
|
106
|
+
Para implementar el componente Core, primero importa `CoreProvider` en el punto de entrada de tu aplicación:
|
|
4
107
|
|
|
5
108
|
```js
|
|
6
109
|
import { StrictMode } from "react";
|
|
@@ -24,8 +127,8 @@ createRoot(document.getElementById("root")!).render(
|
|
|
24
127
|
### Visibilidad del sidebar
|
|
25
128
|
|
|
26
129
|
`Core` y `DashboardShell` aceptan `showSidebar`, activo por defecto.
|
|
27
|
-
Para conservar solo la
|
|
130
|
+
Para conservar solo la navegación propia de una página, utiliza
|
|
28
131
|
`<Core {...props} showSidebar={false} />`. Este modo elimina el menu principal,
|
|
29
|
-
su
|
|
30
|
-
La app de
|
|
132
|
+
su botón móvil y el espacio lateral reservado, sin ocultar la barra superior.
|
|
133
|
+
La app de demostración lo desactiva; los consumidores que omiten esta propiedad
|
|
31
134
|
conservan el sidebar.
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ConfirmDialog, ConfirmDialogProps } from '../../rb-components/ui/overlays/ConfirmDialog';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof ConfirmDialog;
|
|
6
|
+
tags: string[];
|
|
7
|
+
render: (args: ConfirmDialogProps) => import("react").JSX.Element;
|
|
8
|
+
parameters: {
|
|
9
|
+
docs: {
|
|
10
|
+
story: {
|
|
11
|
+
inline: boolean;
|
|
12
|
+
height: string;
|
|
13
|
+
autoplay: boolean;
|
|
14
|
+
};
|
|
15
|
+
description: {
|
|
16
|
+
component: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
args: {
|
|
21
|
+
open: false;
|
|
22
|
+
iconType: "warning";
|
|
23
|
+
title: string;
|
|
24
|
+
message: string;
|
|
25
|
+
confirmText: string;
|
|
26
|
+
cancelText: string;
|
|
27
|
+
onClose: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
28
|
+
onConfirm: import('@vitest/spy').Mock<(...args: any[]) => any>;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export default meta;
|
|
32
|
+
type Story = StoryObj<typeof meta>;
|
|
33
|
+
export declare const Responsive: Story;
|
|
34
|
+
export declare const TextosExtensos: Story;
|
|
35
|
+
export declare const UnaAccion: Story;
|
|
36
|
+
export declare const Loading: Story;
|
|
37
|
+
export declare const EtiquetasExtensas: Story;
|
|
38
|
+
export declare const CierreYRetornoDelFoco: Story;
|