@tap-payments/os-micro-frontend-shared 0.1.109-test.3 → 0.1.109-test.4

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 (3) hide show
  1. package/build/components/ReceiptViewer/ReceiptViewer.js +6 -145
  2. package/build/components/ReceiptViewer/ReceiptViewerList.js +2 -2
  3. package/package.json +2 -2
package/build/components/ReceiptViewer/ReceiptViewer.js CHANGED
@@ -1,21 +1,16 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useEffect, useMemo, useRef, useState } from 'react';
3
- import { Box, Dialog } from '@mui/material';
4
- import JsonView from '@uiw/react-json-view';
5
- import { AnimatePresence, motion } from 'framer-motion';
3
+ import { Dialog } from '@mui/material';
6
4
  import { Resizable } from 're-resizable';
7
5
  import Draggable from 'react-draggable';
8
- import { APP_WINDOW_Z_INDEX, codeIcon, collapseArrowsIcon, copyIcon, expandArrowsIcon, greenCheckIcon, idIcon } from '../../constants/index.js';
6
+ import { APP_WINDOW_Z_INDEX } from '../../constants/index.js';
9
7
  import { useMouseState, useWindowDimensions } from '../../hooks/index.js';
10
8
  import { isSafariBrowser } from '../../utils/index.js';
11
- import AnimatedButton from './components/FooterButton';
12
- import JSONTitleBar from './components/ReceiptTitleBar';
13
- import { ButtonsWrapper, FooterWrapper, JSONContainer, JSONViewerWrapper, SectionWrapper, StyledCopyButton, StyledHeaderWrapper, StyledTitle, jsonTheme, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
14
- import TableFooter from '../VirtualTables/components/TableFooter';
9
+ import { VIEWER_HEIGHT, } from './style';
15
10
  const VIEWER_WIDTH = 400;
16
11
  const animationDuration = 0.5;
17
12
  export default function ReceiptViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
18
- var _a, _b, _c, _d;
13
+ var _a, _b;
19
14
  const [isMaximized, setIsMaximized] = useState(false);
20
15
  const [isResized, setIsResized] = useState(false);
21
16
  const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
@@ -118,139 +113,5 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
118
113
  flex: 1,
119
114
  })), (isMaximized && {
120
115
  position: 'relative',
121
- })) }, { children: _jsxs(JSONContainer, { children: [_jsx(motion.div, Object.assign({ style: Object.assign({}, (isMaximized && {
122
- height: TITLE_BAR_HEIGHT,
123
- position: 'fixed',
124
- zIndex: 1000,
125
- })), animate: Object.assign(Object.assign({ width: isRequestShown ? currentRequestWidth * 2 : currentRequestWidth }, (isMaximized && {
126
- width: '100vw',
127
- })), (!isMaximized && {
128
- transform: `translateX(${isRequestShown ? -currentRequestWidth : 0}px)`,
129
- })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
130
- duration: 0,
131
- })) }, { children: _jsx(JSONTitleBar, { title: isRequestShown ? 'JSON Request & Response' : 'JSON Response', onClose: () => onClose(), onMaximize: () => {
132
- setIsMaximized((prev) => !prev);
133
- setIsToolbarAnimationDisabled(true);
134
- setTimeout(() => {
135
- setIsToolbarAnimationDisabled(false);
136
- }, animationDuration * 1000);
137
- }, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "draggable-dialog-title", onRequestClick: () => {
138
- var _a;
139
- setIsRequestShown((prev) => !prev);
140
- setIsToolbarAnimationDisabled(false);
141
- if (!isRequestShown) {
142
- (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
143
- width: VIEWER_WIDTH,
144
- height: VIEWER_HEIGHT,
145
- });
146
- }
147
- }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestObjectPropertiesCount) }) })), _jsxs(Box, Object.assign({ sx: {
148
- display: 'flex',
149
- flexDirection: 'row',
150
- justifyContent: 'space-between',
151
- alignItems: 'flex-start',
152
- height: isMaximized
153
- ? `calc(100vh - ${FOOTER_HEIGHT}px)`
154
- : (Number((_d = (_c = resizableRef.current) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.height) || VIEWER_HEIGHT) - FOOTER_HEIGHT + 5,
155
- background: 'transparent',
156
- position: 'fixed',
157
- width: '100%',
158
- } }, { children: [_jsx(AnimatePresence, { children: isRequestShown && (_jsxs(motion.div, Object.assign({ initial: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
159
- position: 'relative',
160
- left: '-50vw',
161
- })), animate: Object.assign(Object.assign({ left: isMaximized ? '50vw' : -currentRequestWidth }, (isMaximized && {
162
- position: 'relative',
163
- left: '0',
164
- })), (!isRequestShown && {
165
- left: 0,
166
- })), exit: Object.assign({ left: isMaximized ? '50vw' : 0 }, (isMaximized && {
167
- position: 'relative',
168
- left: '0',
169
- })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
170
- duration: 0,
171
- })), style: {
172
- flex: 1,
173
- backgroundColor: '#E7E7E7B2',
174
- backdropFilter: 'blur(12px)',
175
- height: isMaximized ? '100vh' : '100%',
176
- overflowY: 'auto',
177
- position: 'absolute',
178
- width: isMaximized ? '100vw' : currentRequestWidth,
179
- zIndex: 19,
180
- display: 'flex',
181
- flexDirection: 'column',
182
- borderBottomLeftRadius: '12px',
183
- }, onScroll: () => {
184
- setIsScrollingRequest(true);
185
- setTimeout(() => {
186
- setIsScrollingRequest(false);
187
- }, 2000);
188
- } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingRequest, sx: {
189
- background: '#E7E7E7B2',
190
- }, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Request" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
191
- setIsRequestCollapsed((prev) => !prev);
192
- }, icon: !isRequestCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
193
- navigator.clipboard.writeText(JSON.stringify(json)).then(() => { });
194
- }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
195
- navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
196
- }, icon: idIcon })] })] })), "Hello My Receipt", _jsx(AnimatePresence, { children: isRequestShown && (_jsx(FooterWrapper, Object.assign({ sx: {
197
- flex: 1,
198
- height: FOOTER_HEIGHT,
199
- left: 0,
200
- } }, { children: _jsx(TableFooter, { sx: {
201
- paddingLeft: '12px',
202
- borderBottomRightRadius: '0',
203
- background: '#f8f9fb',
204
- flex: 1,
205
- }, totalCount: requestObjectPropertiesCount }) }))) })] }))) }), _jsxs(JSONViewerWrapper, Object.assign({ isMaximized: isMaximized, isRequestShown: isRequestShown, style: {
206
- left: 0,
207
- maxHeight: '100vw',
208
- }, initial: Object.assign({}, (isMaximized && {
209
- width: '100vw',
210
- left: 0,
211
- })), animate: Object.assign({}, (isMaximized && {
212
- position: 'absolute',
213
- left: isRequestShown ? '50vw' : '0',
214
- })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
215
- duration: 0,
216
- })), onScroll: () => {
217
- setIsScrollingResponse(true);
218
- setTimeout(() => {
219
- setIsScrollingResponse(false);
220
- }, 2000);
221
- } }, { children: [_jsxs(SectionWrapper, Object.assign({ isMaximized: isMaximized, isScrollingRequest: isScrollingResponse, isRequestShown: isRequestShown }, { children: [_jsx(StyledHeaderWrapper, { children: _jsx(StyledTitle, Object.assign({ variant: "subtitle1" }, { children: "API Response" })) }), _jsxs(ButtonsWrapper, { children: [_jsx(AnimatedButton, { disableAnimation: true, onClick: () => {
222
- setIsResponseCollapsed((prev) => !prev);
223
- }, icon: !isResponseCollapsed ? collapseArrowsIcon : expandArrowsIcon }), _jsx(AnimatedButton, { onClick: () => {
224
- navigator.clipboard.writeText(JSON.stringify(json, null, 2)).then(() => { });
225
- }, icon: codeIcon }), _jsx(AnimatedButton, { onClick: () => {
226
- navigator.clipboard.writeText((json === null || json === void 0 ? void 0 : json.id) || '').then(() => { });
227
- }, icon: idIcon })] })] })), _jsxs(JsonView, Object.assign({ value: json, style: jsonTheme, displayDataTypes: false, collapsed: isResponseCollapsed ? 1 : undefined, onCopied: (_, value) => {
228
- if (typeof value === 'string') {
229
- onCopied(value);
230
- }
231
- } }, { children: [_jsx(JsonView.CountInfo, { render: (_, { keyName }) => {
232
- if (!keyName) {
233
- return _jsx("span", {});
234
- }
235
- } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
236
- if (!keyName) {
237
- return _jsx("span", {});
238
- }
239
- return (_jsxs(StyledCopyButton, Object.assign({ style: style, onClick: (e) => {
240
- onClick === null || onClick === void 0 ? void 0 : onClick(e);
241
- } }, { children: [_jsx(AnimatePresence, { children: copied && (_jsx(motion.img, { style: {
242
- height: '14px',
243
- width: '14px',
244
- }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: greenCheckIcon, alt: "icon" }, "id-icon")) }), _jsx(AnimatePresence, { children: !copied && (_jsx(motion.img, { style: {
245
- height: '14px',
246
- width: '14px',
247
- }, initial: { opacity: 0 }, animate: { opacity: 1, position: 'absolute' }, exit: { opacity: 0 }, transition: { duration: 0.4 }, src: copyIcon, alt: "icon" }, "id-icon")) })] })));
248
- } })] })), _jsx(FooterWrapper, Object.assign({ sx: {
249
- flex: 1,
250
- height: FOOTER_HEIGHT,
251
- } }, { children: _jsx(TableFooter, { sx: {
252
- borderBottomLeftRadius: isRequestShown ? 0 : '12px',
253
- background: '#f8f9fb',
254
- flex: 1,
255
- }, totalCount: objectPropertiesCount }) }))] }))] }))] }) })) })) })));
116
+ })) }, { children: "Hello" })) })) })));
256
117
  }
package/build/components/ReceiptViewer/ReceiptViewerList.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
- import JSONViewer from './ReceiptViewer';
2
+ import ReceiptViewer from './ReceiptViewer';
3
3
  export const ReceiptViewerList = ({ list, onClose, isWindowMinimized, windowOrder }) => {
4
4
  if (!(list === null || list === void 0 ? void 0 : list.length)) {
5
5
  return null;
6
6
  }
7
- return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(JSONViewer, { index: index, json: item.json, requestJson: item === null || item === void 0 ? void 0 : item.requestJson, onClose: () => {
7
+ return (_jsx(_Fragment, { children: list.map((item, index) => (_jsx(ReceiptViewer, { index: index, json: item.json, requestJson: item === null || item === void 0 ? void 0 : item.requestJson, onClose: () => {
8
8
  onClose(index);
9
9
  }, isWindowMinimized: isWindowMinimized, windowOrder: windowOrder }, item.json.id))) }));
10
10
  };
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.109-test.3",
5
- "testVersion": 3,
4
+ "version": "0.1.109-test.4",
5
+ "testVersion": 4,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",