@zauru-sdk/components 2.11.0 → 2.14.0
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,34 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.14.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.13.0...v2.14.0) (2025-08-08)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zauru-sdk/components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [2.13.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.12.0...v2.13.0) (2025-08-08)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @zauru-sdk/components
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [2.12.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.11.0...v2.12.0) (2025-08-08)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* agregando nuevos tipos ([d3efa76](https://github.com/intuitiva/zauru-typescript-sdk/commit/d3efa7679ffcd1f4d2ddee0bb6a3bb23bd737784))
|
|
28
|
+
* modal ([ba07e93](https://github.com/intuitiva/zauru-typescript-sdk/commit/ba07e93ec9918406c00081d14b52792ae431c391))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
6
34
|
# [2.11.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.10.0...v2.11.0) (2025-07-28)
|
|
7
35
|
|
|
8
36
|
**Note:** Version bump only for package @zauru-sdk/components
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface ProgressModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
title: string;
|
|
6
|
+
current: number;
|
|
7
|
+
total: number;
|
|
8
|
+
currentItem?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const ProgressModal: React.FC<ProgressModalProps>;
|
|
12
|
+
export {};
|
package/dist/Modal/index.d.ts
CHANGED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { motion, AnimatePresence } from "framer-motion";
|
|
3
|
+
export const ProgressModal = ({ isOpen, onClose, title, current, total, currentItem, description, }) => {
|
|
4
|
+
const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
|
|
5
|
+
return (_jsx(AnimatePresence, { children: isOpen && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "absolute inset-0 bg-black bg-opacity-50", onClick: onClose }), _jsxs(motion.div, { initial: { opacity: 0, scale: 0.9, y: 20 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.9, y: 20 }, transition: { type: "spring", damping: 20, stiffness: 300 }, className: "relative bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: title }), percentage === 100 && (_jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 transition-colors", children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }), _jsxs("div", { className: "space-y-4", children: [description && (_jsx("p", { className: "text-sm text-gray-600", children: description })), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsxs("span", { className: "text-gray-600", children: [current, " de ", total, " completado"] }), _jsxs("span", { className: "font-medium text-blue-600", children: [percentage, "%"] })] }), _jsx("div", { className: "w-full bg-gray-200 rounded-full h-3", children: _jsx(motion.div, { initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.3 }, className: "h-3 bg-blue-600 rounded-full flex items-center justify-end pr-1", children: percentage > 10 && (_jsx("div", { className: "w-2 h-2 bg-white rounded-full" })) }) })] }), currentItem && (_jsx("div", { className: "bg-blue-50 border-l-4 border-blue-400 p-3 rounded", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex-shrink-0", children: _jsxs("svg", { className: "w-5 h-5 text-blue-400 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }), _jsx("div", { className: "ml-3", children: _jsxs("p", { className: "text-sm font-medium text-blue-800", children: ["Procesando: ", currentItem] }) })] }) })), percentage === 100 && (_jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, className: "bg-green-50 border-l-4 border-green-400 p-3 rounded", children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("svg", { className: "w-5 h-5 text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("div", { className: "ml-3", children: _jsx("p", { className: "text-sm font-medium text-green-800", children: "\u00A1PDF generado exitosamente!" }) })] }) }))] })] })] })) }));
|
|
6
|
+
};
|
package/dist/esm/Modal/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zauru-sdk/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.14.0",
|
|
4
4
|
"description": "Componentes reutilizables en las WebApps de Zauru.",
|
|
5
5
|
"main": "./dist/esm/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@rails/activestorage": "^8.0.200",
|
|
36
36
|
"@reduxjs/toolkit": "^2.2.1",
|
|
37
37
|
"@remix-run/react": "^2.8.1",
|
|
38
|
-
"@zauru-sdk/common": "^2.
|
|
39
|
-
"@zauru-sdk/hooks": "^2.
|
|
38
|
+
"@zauru-sdk/common": "^2.14.0",
|
|
39
|
+
"@zauru-sdk/hooks": "^2.14.0",
|
|
40
40
|
"@zauru-sdk/icons": "^2.0.188",
|
|
41
|
-
"@zauru-sdk/types": "^2.
|
|
42
|
-
"@zauru-sdk/utils": "^2.
|
|
41
|
+
"@zauru-sdk/types": "^2.14.0",
|
|
42
|
+
"@zauru-sdk/utils": "^2.14.0",
|
|
43
43
|
"browser-image-compression": "^2.0.2",
|
|
44
44
|
"framer-motion": "^11.7.0",
|
|
45
45
|
"jsonwebtoken": "^9.0.2",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"styled-components": "^5.3.5",
|
|
53
53
|
"zod": "^3.23.8"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "280469a3b4600c9ee61233f8618bab7e015daa2f"
|
|
56
56
|
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { motion, AnimatePresence } from "framer-motion";
|
|
3
|
+
|
|
4
|
+
interface ProgressModalProps {
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
title: string;
|
|
8
|
+
current: number;
|
|
9
|
+
total: number;
|
|
10
|
+
currentItem?: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const ProgressModal: React.FC<ProgressModalProps> = ({
|
|
15
|
+
isOpen,
|
|
16
|
+
onClose,
|
|
17
|
+
title,
|
|
18
|
+
current,
|
|
19
|
+
total,
|
|
20
|
+
currentItem,
|
|
21
|
+
description,
|
|
22
|
+
}) => {
|
|
23
|
+
const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<AnimatePresence>
|
|
27
|
+
{isOpen && (
|
|
28
|
+
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
29
|
+
{/* Backdrop */}
|
|
30
|
+
<motion.div
|
|
31
|
+
initial={{ opacity: 0 }}
|
|
32
|
+
animate={{ opacity: 1 }}
|
|
33
|
+
exit={{ opacity: 0 }}
|
|
34
|
+
className="absolute inset-0 bg-black bg-opacity-50"
|
|
35
|
+
onClick={onClose}
|
|
36
|
+
/>
|
|
37
|
+
|
|
38
|
+
{/* Modal */}
|
|
39
|
+
<motion.div
|
|
40
|
+
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
41
|
+
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
42
|
+
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
43
|
+
transition={{ type: "spring", damping: 20, stiffness: 300 }}
|
|
44
|
+
className="relative bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4"
|
|
45
|
+
>
|
|
46
|
+
{/* Header */}
|
|
47
|
+
<div className="flex items-center justify-between mb-4">
|
|
48
|
+
<h3 className="text-lg font-medium text-gray-900">{title}</h3>
|
|
49
|
+
{percentage === 100 && (
|
|
50
|
+
<button
|
|
51
|
+
onClick={onClose}
|
|
52
|
+
className="text-gray-400 hover:text-gray-600 transition-colors"
|
|
53
|
+
>
|
|
54
|
+
<svg
|
|
55
|
+
className="w-6 h-6"
|
|
56
|
+
fill="none"
|
|
57
|
+
stroke="currentColor"
|
|
58
|
+
viewBox="0 0 24 24"
|
|
59
|
+
>
|
|
60
|
+
<path
|
|
61
|
+
strokeLinecap="round"
|
|
62
|
+
strokeLinejoin="round"
|
|
63
|
+
strokeWidth={2}
|
|
64
|
+
d="M6 18L18 6M6 6l12 12"
|
|
65
|
+
/>
|
|
66
|
+
</svg>
|
|
67
|
+
</button>
|
|
68
|
+
)}
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
{/* Progress Content */}
|
|
72
|
+
<div className="space-y-4">
|
|
73
|
+
{/* Description */}
|
|
74
|
+
{description && (
|
|
75
|
+
<p className="text-sm text-gray-600">{description}</p>
|
|
76
|
+
)}
|
|
77
|
+
|
|
78
|
+
{/* Progress Bar */}
|
|
79
|
+
<div className="space-y-2">
|
|
80
|
+
<div className="flex justify-between text-sm">
|
|
81
|
+
<span className="text-gray-600">
|
|
82
|
+
{current} de {total} completado
|
|
83
|
+
</span>
|
|
84
|
+
<span className="font-medium text-blue-600">
|
|
85
|
+
{percentage}%
|
|
86
|
+
</span>
|
|
87
|
+
</div>
|
|
88
|
+
<div className="w-full bg-gray-200 rounded-full h-3">
|
|
89
|
+
<motion.div
|
|
90
|
+
initial={{ width: 0 }}
|
|
91
|
+
animate={{ width: `${percentage}%` }}
|
|
92
|
+
transition={{ duration: 0.3 }}
|
|
93
|
+
className="h-3 bg-blue-600 rounded-full flex items-center justify-end pr-1"
|
|
94
|
+
>
|
|
95
|
+
{percentage > 10 && (
|
|
96
|
+
<div className="w-2 h-2 bg-white rounded-full"></div>
|
|
97
|
+
)}
|
|
98
|
+
</motion.div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
{/* Current Item */}
|
|
103
|
+
{currentItem && (
|
|
104
|
+
<div className="bg-blue-50 border-l-4 border-blue-400 p-3 rounded">
|
|
105
|
+
<div className="flex items-center">
|
|
106
|
+
<div className="flex-shrink-0">
|
|
107
|
+
<svg
|
|
108
|
+
className="w-5 h-5 text-blue-400 animate-spin"
|
|
109
|
+
fill="none"
|
|
110
|
+
viewBox="0 0 24 24"
|
|
111
|
+
>
|
|
112
|
+
<circle
|
|
113
|
+
className="opacity-25"
|
|
114
|
+
cx="12"
|
|
115
|
+
cy="12"
|
|
116
|
+
r="10"
|
|
117
|
+
stroke="currentColor"
|
|
118
|
+
strokeWidth="4"
|
|
119
|
+
/>
|
|
120
|
+
<path
|
|
121
|
+
className="opacity-75"
|
|
122
|
+
fill="currentColor"
|
|
123
|
+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
124
|
+
/>
|
|
125
|
+
</svg>
|
|
126
|
+
</div>
|
|
127
|
+
<div className="ml-3">
|
|
128
|
+
<p className="text-sm font-medium text-blue-800">
|
|
129
|
+
Procesando: {currentItem}
|
|
130
|
+
</p>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
)}
|
|
135
|
+
|
|
136
|
+
{/* Completion Message */}
|
|
137
|
+
{percentage === 100 && (
|
|
138
|
+
<motion.div
|
|
139
|
+
initial={{ opacity: 0, y: 10 }}
|
|
140
|
+
animate={{ opacity: 1, y: 0 }}
|
|
141
|
+
className="bg-green-50 border-l-4 border-green-400 p-3 rounded"
|
|
142
|
+
>
|
|
143
|
+
<div className="flex items-center">
|
|
144
|
+
<div className="flex-shrink-0">
|
|
145
|
+
<svg
|
|
146
|
+
className="w-5 h-5 text-green-400"
|
|
147
|
+
fill="none"
|
|
148
|
+
stroke="currentColor"
|
|
149
|
+
viewBox="0 0 24 24"
|
|
150
|
+
>
|
|
151
|
+
<path
|
|
152
|
+
strokeLinecap="round"
|
|
153
|
+
strokeLinejoin="round"
|
|
154
|
+
strokeWidth={2}
|
|
155
|
+
d="M5 13l4 4L19 7"
|
|
156
|
+
/>
|
|
157
|
+
</svg>
|
|
158
|
+
</div>
|
|
159
|
+
<div className="ml-3">
|
|
160
|
+
<p className="text-sm font-medium text-green-800">
|
|
161
|
+
¡PDF generado exitosamente!
|
|
162
|
+
</p>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</motion.div>
|
|
166
|
+
)}
|
|
167
|
+
</div>
|
|
168
|
+
</motion.div>
|
|
169
|
+
</div>
|
|
170
|
+
)}
|
|
171
|
+
</AnimatePresence>
|
|
172
|
+
);
|
|
173
|
+
};
|
package/src/Modal/index.tsx
CHANGED