sgc-coppel-ui 0.1.0 → 0.1.1

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.
Files changed (2) hide show
  1. package/README.md +60 -60
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,73 +1,73 @@
1
- # React + TypeScript + Vite
1
+ # sgc-coppel-ui
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ Librería de componentes UI para proyectos de Coppel SGC, construida con React, TypeScript y Vite.
4
4
 
5
- Currently, two official plugins are available:
5
+ ## Instalación
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7
+ Instala el paquete desde npm:
9
8
 
10
- ## React Compiler
9
+ ```bash
10
+ npm install sgc-coppel-ui
11
+ ```
12
+
13
+ ### Peer Dependencies
14
+ Asegúrate de tener instaladas las siguientes dependencias en tu proyecto:
15
+ - `react` >= 18.0.0
16
+ - `react-dom` >= 18.0.0
17
+ - `primereact` >= 10.0.0
18
+ - `primeicons` >= 7.0.0
11
19
 
12
- The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
20
+ ## Uso
13
21
 
14
- ## Expanding the ESLint configuration
22
+ ### 1. Importar Estilos
23
+ Es **crucial** importar el archivo de estilos CSS en el punto de entrada de tu aplicación (por ejemplo, `App.tsx` o `main.tsx`):
15
24
 
16
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
25
+ ```tsx
26
+ import 'sgc-coppel-ui/style.css';
27
+ ```
17
28
 
18
- ```js
19
- export default defineConfig([
20
- globalIgnores(['dist']),
21
- {
22
- files: ['**/*.{ts,tsx}'],
23
- extends: [
24
- // Other configs...
29
+ ### 2. Importar Componentes
30
+ Importa los componentes directamente desde la librería:
25
31
 
26
- // Remove tseslint.configs.recommended and replace with this
27
- tseslint.configs.recommendedTypeChecked,
28
- // Alternatively, use this for stricter rules
29
- tseslint.configs.strictTypeChecked,
30
- // Optionally, add this for stylistic rules
31
- tseslint.configs.stylisticTypeChecked,
32
+ ```tsx
33
+ import { CopelLogo, CopelDialogoGenerico } from 'sgc-coppel-ui';
32
34
 
33
- // Other configs...
34
- ],
35
- languageOptions: {
36
- parserOptions: {
37
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
- tsconfigRootDir: import.meta.dirname,
39
- },
40
- // other options...
41
- },
42
- },
43
- ])
35
+ function App() {
36
+ return (
37
+ <div>
38
+ <CopelLogo modo="claro" />
39
+ <CopelDialogoGenerico
40
+ titulo="Alerta"
41
+ mensaje="Operación exitosa"
42
+ tipo="exito"
43
+ visible={true}
44
+ onHide={() => console.log('Cerrado')}
45
+ />
46
+ </div>
47
+ );
48
+ }
44
49
  ```
45
50
 
46
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
-
48
- ```js
49
- // eslint.config.js
50
- import reactX from 'eslint-plugin-react-x'
51
- import reactDom from 'eslint-plugin-react-dom'
52
-
53
- export default defineConfig([
54
- globalIgnores(['dist']),
55
- {
56
- files: ['**/*.{ts,tsx}'],
57
- extends: [
58
- // Other configs...
59
- // Enable lint rules for React
60
- reactX.configs['recommended-typescript'],
61
- // Enable lint rules for React DOM
62
- reactDom.configs.recommended,
63
- ],
64
- languageOptions: {
65
- parserOptions: {
66
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
- tsconfigRootDir: import.meta.dirname,
68
- },
69
- // other options...
70
- },
71
- },
72
- ])
51
+ ## Desarrollo (Storybook)
52
+
53
+ Esta librería incluye un entorno de documentación interactiva con **Storybook**. Para ver los componentes en desarrollo o explorar la documentación:
54
+
55
+ 1. Clona el repositorio.
56
+ 2. Instala las dependencias:
57
+ ```bash
58
+ npm install
59
+ ```
60
+ 3. Ejecuta Storybook:
61
+ ```bash
62
+ npm run storybook
63
+ ```
64
+
65
+ Esto abrirá una interfaz local (usualmente en `http://localhost:6006`) donde podrás probar cada componente de forma aislada.
66
+
67
+ ## Construcción (Build)
68
+
69
+ Para generar los archivos de distribución (`dist`):
70
+
71
+ ```bash
72
+ npm run build
73
73
  ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sgc-coppel-ui",
3
3
  "private": false,
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "type": "module",
6
6
  "description": "Librería de componentes UI para Coppel SGC",
7
7
  "author": "Coppel",