@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

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 (134) hide show
  1. package/README.md +3 -5
  2. package/dist/{panel.html → App.html} +3 -3
  3. package/dist/assets/App-CA1Fbh0I.js +25364 -0
  4. package/dist/assets/App-DoHQsY5s.css +1276 -0
  5. package/dist/event-source.cjs +22 -0
  6. package/dist/event-source.js +23 -0
  7. package/dist/react-native.cjs +8 -1
  8. package/dist/react-native.d.ts +1 -5
  9. package/dist/react-native.js +6 -171
  10. package/dist/rozenite.config.d.ts +7 -0
  11. package/dist/rozenite.json +1 -1
  12. package/dist/src/react-native/http/network-inspector.d.ts +8 -0
  13. package/dist/src/react-native/http/network-requests-registry.d.ts +6 -0
  14. package/dist/src/react-native/http/xhr-interceptor.d.ts +38 -0
  15. package/dist/src/react-native/sse/event-source.d.ts +2 -0
  16. package/dist/src/react-native/sse/sse-inspector.d.ts +9 -0
  17. package/dist/src/react-native/sse/sse-interceptor.d.ts +36 -0
  18. package/dist/src/react-native/sse/types.d.ts +6 -0
  19. package/dist/src/react-native/useNetworkActivityDevTools.d.ts +2 -0
  20. package/dist/src/react-native/utils.d.ts +6 -0
  21. package/dist/src/react-native/websocket/websocket-inspector.d.ts +9 -0
  22. package/dist/src/react-native/websocket/websocket-interceptor.d.ts +74 -0
  23. package/dist/src/shared/client.d.ts +68 -0
  24. package/dist/src/shared/sse-events.d.ts +35 -0
  25. package/dist/src/shared/websocket-events.d.ts +60 -0
  26. package/dist/src/ui/App.d.ts +1 -0
  27. package/dist/src/ui/components/Badge.d.ts +9 -0
  28. package/dist/src/ui/components/Button.d.ts +11 -0
  29. package/dist/src/ui/components/Input.d.ts +3 -0
  30. package/dist/src/ui/components/JsonTree.d.ts +5 -0
  31. package/dist/src/ui/components/JsonTreeCopyableItem.d.ts +7 -0
  32. package/dist/src/ui/components/RequestList.d.ts +25 -0
  33. package/dist/src/ui/components/ScrollArea.d.ts +4 -0
  34. package/dist/src/ui/components/Separator.d.ts +3 -0
  35. package/dist/src/ui/components/SidePanel.d.ts +1 -0
  36. package/dist/src/ui/components/Toolbar.d.ts +1 -0
  37. package/dist/src/ui/hooks/useCopyToClipboard.d.ts +4 -0
  38. package/dist/src/ui/state/derived.d.ts +5 -0
  39. package/dist/src/ui/state/hooks.d.ts +17 -0
  40. package/dist/src/ui/state/model.d.ts +98 -0
  41. package/dist/src/ui/state/store.d.ts +24 -0
  42. package/dist/src/ui/tabs/CookiesTab.d.ts +5 -0
  43. package/dist/src/ui/tabs/HeadersTab.d.ts +5 -0
  44. package/dist/src/ui/tabs/MessagesTab.d.ts +5 -0
  45. package/dist/src/ui/tabs/RequestTab.d.ts +5 -0
  46. package/dist/src/ui/tabs/ResponseTab.d.ts +6 -0
  47. package/dist/src/ui/tabs/SSEMessagesTab.d.ts +5 -0
  48. package/dist/src/ui/tabs/TimingTab.d.ts +5 -0
  49. package/dist/src/ui/types.d.ts +26 -0
  50. package/dist/src/ui/utils/assert.d.ts +1 -0
  51. package/dist/src/ui/utils/cn.d.ts +2 -0
  52. package/dist/src/ui/utils/copyToClipboard.d.ts +1 -0
  53. package/dist/src/ui/utils/getHttpHeaderValue.d.ts +2 -0
  54. package/dist/src/ui/utils/getId.d.ts +1 -0
  55. package/dist/src/ui/utils/getStatusColor.d.ts +1 -0
  56. package/dist/src/ui/views/InspectorView.d.ts +5 -0
  57. package/dist/src/ui/views/LoadingView.d.ts +1 -0
  58. package/dist/useNetworkActivityDevTools.cjs +759 -0
  59. package/dist/useNetworkActivityDevTools.js +757 -0
  60. package/package.json +31 -10
  61. package/postcss.config.js +6 -0
  62. package/project.json +12 -0
  63. package/react-native.ts +2 -1
  64. package/rozenite.config.ts +2 -2
  65. package/src/css-modules.d.ts +1 -1
  66. package/src/react-native/http/network-inspector.ts +226 -0
  67. package/src/react-native/http/network-requests-registry.ts +52 -0
  68. package/src/react-native/http/xhr-interceptor.ts +211 -0
  69. package/src/react-native/http/xml-request.d.ts +34 -0
  70. package/src/react-native/sse/event-source.ts +25 -0
  71. package/src/react-native/sse/sse-inspector.ts +117 -0
  72. package/src/react-native/sse/sse-interceptor.ts +162 -0
  73. package/src/react-native/sse/types.ts +9 -0
  74. package/src/react-native/useNetworkActivityDevTools.ts +73 -210
  75. package/src/react-native/utils.ts +43 -0
  76. package/src/react-native/websocket/websocket-inspector.ts +180 -0
  77. package/src/react-native/websocket/websocket-interceptor.d.ts +4 -0
  78. package/src/react-native/websocket/websocket-interceptor.ts +166 -0
  79. package/src/shared/client.ts +86 -0
  80. package/src/shared/sse-events.ts +44 -0
  81. package/src/shared/websocket-events.ts +79 -0
  82. package/src/ui/App.tsx +19 -0
  83. package/src/ui/components/Badge.tsx +36 -0
  84. package/src/ui/components/Button.tsx +56 -0
  85. package/src/ui/components/Input.tsx +22 -0
  86. package/src/ui/components/JsonTree.tsx +50 -0
  87. package/src/ui/components/JsonTreeCopyableItem.tsx +33 -0
  88. package/src/ui/components/RequestList.tsx +295 -0
  89. package/src/ui/components/ScrollArea.tsx +48 -0
  90. package/src/ui/components/Separator.tsx +31 -0
  91. package/src/ui/components/SidePanel.tsx +323 -0
  92. package/src/ui/components/Tabs.tsx +55 -0
  93. package/src/ui/components/Toolbar.tsx +45 -0
  94. package/src/ui/globals.css +90 -0
  95. package/src/ui/hooks/useCopyToClipboard.ts +28 -0
  96. package/src/ui/state/derived.ts +112 -0
  97. package/src/ui/state/hooks.ts +44 -0
  98. package/src/ui/state/model.ts +129 -0
  99. package/src/ui/state/store.ts +559 -0
  100. package/src/ui/tabs/CookiesTab.tsx +279 -0
  101. package/src/ui/tabs/HeadersTab.tsx +110 -0
  102. package/src/ui/tabs/MessagesTab.tsx +276 -0
  103. package/src/ui/tabs/RequestTab.tsx +69 -0
  104. package/src/ui/tabs/ResponseTab.tsx +138 -0
  105. package/src/ui/tabs/SSEMessagesTab.tsx +213 -0
  106. package/src/ui/tabs/TimingTab.tsx +60 -0
  107. package/src/ui/types.ts +34 -0
  108. package/src/ui/utils/assert.ts +5 -0
  109. package/src/ui/utils/cn.ts +6 -0
  110. package/src/ui/utils/copyToClipboard.ts +3 -0
  111. package/src/ui/utils/getHttpHeaderValue.ts +14 -0
  112. package/src/ui/utils/getId.ts +10 -0
  113. package/src/ui/utils/getStatusColor.ts +15 -0
  114. package/src/ui/views/InspectorView.tsx +53 -0
  115. package/src/ui/views/LoadingView.tsx +19 -0
  116. package/tailwind.config.ts +96 -0
  117. package/tsconfig.json +13 -6
  118. package/tsconfig.tsbuildinfo +1 -0
  119. package/vite.config.ts +13 -1
  120. package/dist/assets/panel-C5YgUUj5.js +0 -54
  121. package/dist/assets/panel-NCVczPb1.css +0 -1
  122. package/src/types/network.ts +0 -153
  123. package/src/ui/components.module.css +0 -158
  124. package/src/ui/components.tsx +0 -219
  125. package/src/ui/network-details.module.css +0 -57
  126. package/src/ui/network-details.tsx +0 -134
  127. package/src/ui/network-list.module.css +0 -122
  128. package/src/ui/network-list.tsx +0 -145
  129. package/src/ui/network-toolbar.module.css +0 -9
  130. package/src/ui/network-toolbar.tsx +0 -40
  131. package/src/ui/panel.module.css +0 -61
  132. package/src/ui/panel.tsx +0 -201
  133. package/src/ui/tanstack-query.tsx +0 -197
  134. package/src/ui/utils.ts +0 -89
@@ -1 +0,0 @@
1
- ._container_1098q_1{height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,sans-serif}._mainContent_1098q_8{flex:1;display:flex;overflow:hidden;min-height:0}._networkListContainer_1098q_15{width:60%;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;min-width:0}._listContent_1098q_23{flex:1}._detailsContainer_1098q_27{width:40%;display:flex;flex-direction:column;min-width:0}._headerStatus_1098q_34{width:60px;text-align:center;flex-shrink:0}._headerMethod_1098q_40{width:80px;text-align:center;flex-shrink:0}._headerName_1098q_46{flex:1;min-width:0}._headerTime_1098q_51,._headerSize_1098q_57{width:80px;text-align:right;flex-shrink:0}._button_7nfhi_2{border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s ease}._button_7nfhi_2:disabled{opacity:.6;cursor:not-allowed}._buttonSmall_7nfhi_15{font-size:12px;padding:4px 8px}._buttonMedium_7nfhi_20{font-size:14px;padding:8px 16px}._buttonLarge_7nfhi_25{font-size:16px;padding:12px 24px}._buttonPrimary_7nfhi_30{background-color:#007aff;color:#fff}._buttonSecondary_7nfhi_35{background-color:#6c757d;color:#fff}._buttonDanger_7nfhi_40{background-color:#dc3545;color:#fff}._buttonSuccess_7nfhi_45{background-color:#28a745;color:#fff}._card_7nfhi_51{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a}._badge_7nfhi_60{background-color:#007aff;color:#fff;padding:2px 6px;border-radius:12px;font-size:11px;font-weight:500;display:inline-block}._toolbar_7nfhi_71{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f8f9fa}._panelHeader_7nfhi_80{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f8f9fa;font-size:12px;font-weight:700;color:#333}._emptyState_7nfhi_92{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:#666;font-size:14px;text-align:center}._loadingSpinner_7nfhi_103{border:2px solid #e0e0e0;border-top:2px solid #007AFF;border-radius:50%;animation:_spin_7nfhi_1 1s linear infinite}._tooltipReference_7nfhi_111{display:inline-block}._tooltipFloating_7nfhi_115{padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:1000;max-width:300px;word-break:break-all;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:system-ui,-apple-system,sans-serif;line-height:1.4}._tooltipDefault_7nfhi_130{background-color:#333;color:#fff;border:1px solid rgba(255,255,255,.1)}._tooltipInfo_7nfhi_136{background-color:#06c;color:#fff;border:1px solid rgba(255,255,255,.2)}._tooltipWarning_7nfhi_142{background-color:#ff8c00;color:#fff;border:1px solid rgba(255,255,255,.2)}._tooltipError_7nfhi_148{background-color:#dc3545;color:#fff;border:1px solid rgba(255,255,255,.2)}@keyframes _spin_7nfhi_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._recordingButton_1dfw3_1{margin-right:8px}._requestCount_1dfw3_5{margin-left:auto;font-size:12px;color:#666}._container_1s7a9_1{height:100%;overflow:auto}._virtualContainer_1s7a9_6{height:100%;width:100%;position:relative}._virtualItem_1s7a9_12{position:absolute;top:0;left:0;width:100%;height:60px}._listItem_1s7a9_20{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#fff;cursor:pointer;font-size:12px;font-family:monospace;height:60px;box-sizing:border-box;min-width:0}._listItemSelected_1s7a9_34{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #e0e0e0;background-color:#f5f5f5;cursor:pointer;font-size:12px;font-family:monospace;height:60px;box-sizing:border-box;min-width:0}._statusColumn_1s7a9_48{width:60px;text-align:center;flex-shrink:0}._methodColumn_1s7a9_54{width:80px;text-align:center;flex-shrink:0}._urlColumn_1s7a9_60{flex:1;overflow:hidden;min-width:0}._domainText_1s7a9_66{font-weight:700;color:#333;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._pathText_1s7a9_75{color:#666;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._fullUrlText_1s7a9_83{color:#999;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}._durationColumn_1s7a9_92{width:80px;text-align:right;margin-right:8px;flex-shrink:0}._sizeColumn_1s7a9_99{width:80px;text-align:right;flex-shrink:0}._columnText_1s7a9_105{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}._emptyContainer_1s7a9_112{height:100%;display:flex;align-items:center;justify-content:center}._emptyText_1s7a9_119{color:#666;font-size:14px}._container_felnd_1{padding:16px;height:100%;overflow:auto}._card_felnd_7{margin-bottom:20px}._cardTitle_felnd_11{margin:0 0 8px;font-size:16px}._cardTitleError_felnd_16{margin:0 0 8px;font-size:16px;color:#f44336}._infoText_felnd_22{font-size:12px;font-family:monospace}._infoRow_felnd_27,._infoRowUrl_felnd_32{margin-bottom:4px;word-break:break-all}._urlText_felnd_37{cursor:help;border-bottom:1px dotted #666}._headersContainer_felnd_42{font-size:12px;font-family:monospace;background-color:#f5f5f5;padding:8px;border-radius:4px}._headerRow_felnd_50{margin-bottom:2px;word-break:break-all}._headerValue_felnd_55{word-break:break-all}
@@ -1,153 +0,0 @@
1
- // Types for Chrome DevTools Protocol Network events
2
-
3
- export interface NetworkRequest {
4
- requestId: string;
5
- loaderId: string;
6
- documentURL: string;
7
- request: {
8
- url: string;
9
- method: string;
10
- headers: Record<string, string>;
11
- postData?: string;
12
- hasPostData?: boolean;
13
- };
14
- timestamp: number;
15
- wallTime: number;
16
- initiator: {
17
- type: string;
18
- stack?: {
19
- callFrames: Array<{
20
- functionName: string;
21
- scriptId: string;
22
- url: string;
23
- lineNumber: number;
24
- columnNumber: number;
25
- }>;
26
- };
27
- };
28
- redirectHasExtraInfo: boolean;
29
- redirectResponse?: any;
30
- referrerPolicy: string;
31
- type: string;
32
- frameId: string;
33
- hasUserGesture: boolean;
34
- }
35
-
36
- export interface NetworkRequestExtraInfo {
37
- requestId: string;
38
- blockedCookies: Array<{
39
- blockedReasons: string[];
40
- cookie: {
41
- name: string;
42
- value: string;
43
- domain: string;
44
- path: string;
45
- expires: number;
46
- size: number;
47
- httpOnly: boolean;
48
- secure: boolean;
49
- session: boolean;
50
- sameSite: string;
51
- };
52
- }>;
53
- headers: Record<string, string>;
54
- connectTiming: {
55
- requestTime: number;
56
- };
57
- clientSecurityState?: {
58
- initiatorIsSecureContext: boolean;
59
- initiatorIPAddressSpace: string;
60
- privateNetworkRequestPolicy: string;
61
- };
62
- siteHasCookieInOtherPartition: boolean;
63
- }
64
-
65
- export interface NetworkResponse {
66
- requestId: string;
67
- loaderId: string;
68
- timestamp: number;
69
- type: string;
70
- response: {
71
- url: string;
72
- status: number;
73
- statusText: string;
74
- headers: Record<string, string>;
75
- mimeType: string;
76
- requestHeaders: Record<string, string>;
77
- requestHeadersText?: string;
78
- connectionReused: boolean;
79
- connectionId: number;
80
- remoteIPAddress?: string;
81
- remotePort?: number;
82
- protocol?: string;
83
- securityState: string;
84
- encodedDataLength: number;
85
- timing?: {
86
- requestTime: number;
87
- proxyStart: number;
88
- proxyEnd: number;
89
- dnsStart: number;
90
- dnsEnd: number;
91
- connectStart: number;
92
- connectEnd: number;
93
- sslStart: number;
94
- sslEnd: number;
95
- workerStart: number;
96
- workerReadyStart: number;
97
- workerReadyEnd: number;
98
- sendStart: number;
99
- sendEnd: number;
100
- pushStart: number;
101
- pushEnd: number;
102
- receiveHeadersEnd: number;
103
- };
104
- responseTime: number;
105
- fromDiskCache: boolean;
106
- fromServiceWorker: boolean;
107
- fromPrefetchCache: boolean;
108
- encodedBodySize: number;
109
- decodedBodySize: number;
110
- headersText?: string;
111
- serviceWorkerResponseSource?: string;
112
- responseSource: string;
113
- statusCode: number;
114
- };
115
- hasExtraInfo: boolean;
116
- }
117
-
118
- export interface NetworkLoadingFinished {
119
- requestId: string;
120
- timestamp: number;
121
- encodedDataLength: number;
122
- shouldReportCorbBlocking: boolean;
123
- }
124
-
125
- export interface NetworkLoadingFailed {
126
- requestId: string;
127
- timestamp: number;
128
- type: string;
129
- errorText: string;
130
- canceled?: boolean;
131
- blockedReason?: string;
132
- }
133
-
134
- export interface NetworkEventMap extends Record<string, unknown> {
135
- 'Network.requestWillBeSent': NetworkRequest;
136
- 'Network.requestWillBeSentExtraInfo': NetworkRequestExtraInfo;
137
- 'Network.responseReceived': NetworkResponse;
138
- 'Network.loadingFinished': NetworkLoadingFinished;
139
- 'Network.loadingFailed': NetworkLoadingFailed;
140
- }
141
-
142
- export interface NetworkEntry {
143
- requestId: string;
144
- request: NetworkRequest;
145
- extraInfo?: NetworkRequestExtraInfo;
146
- response?: NetworkResponse;
147
- loadingFinished?: NetworkLoadingFinished;
148
- loadingFailed?: NetworkLoadingFailed;
149
- status: 'pending' | 'loading' | 'finished' | 'failed';
150
- startTime: number;
151
- endTime?: number;
152
- duration?: number;
153
- }
@@ -1,158 +0,0 @@
1
- /* Button Component */
2
- .button {
3
- border: none;
4
- border-radius: 4px;
5
- cursor: pointer;
6
- font-weight: 500;
7
- transition: all 0.2s ease;
8
- }
9
-
10
- .button:disabled {
11
- opacity: 0.6;
12
- cursor: not-allowed;
13
- }
14
-
15
- .buttonSmall {
16
- font-size: 12px;
17
- padding: 4px 8px;
18
- }
19
-
20
- .buttonMedium {
21
- font-size: 14px;
22
- padding: 8px 16px;
23
- }
24
-
25
- .buttonLarge {
26
- font-size: 16px;
27
- padding: 12px 24px;
28
- }
29
-
30
- .buttonPrimary {
31
- background-color: #007AFF;
32
- color: white;
33
- }
34
-
35
- .buttonSecondary {
36
- background-color: #6c757d;
37
- color: white;
38
- }
39
-
40
- .buttonDanger {
41
- background-color: #dc3545;
42
- color: white;
43
- }
44
-
45
- .buttonSuccess {
46
- background-color: #28a745;
47
- color: white;
48
- }
49
-
50
- /* Card Component */
51
- .card {
52
- background-color: #ffffff;
53
- border: 1px solid #e0e0e0;
54
- border-radius: 8px;
55
- padding: 16px;
56
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
57
- }
58
-
59
- /* Badge Component */
60
- .badge {
61
- background-color: #007AFF;
62
- color: white;
63
- padding: 2px 6px;
64
- border-radius: 12px;
65
- font-size: 11px;
66
- font-weight: 500;
67
- display: inline-block;
68
- }
69
-
70
- /* Toolbar Component */
71
- .toolbar {
72
- display: flex;
73
- align-items: center;
74
- padding: 8px 12px;
75
- border-bottom: 1px solid #e0e0e0;
76
- background-color: #f8f9fa;
77
- }
78
-
79
- /* Panel Header Component */
80
- .panelHeader {
81
- display: flex;
82
- align-items: center;
83
- padding: 8px 12px;
84
- border-bottom: 1px solid #e0e0e0;
85
- background-color: #f8f9fa;
86
- font-size: 12px;
87
- font-weight: bold;
88
- color: #333;
89
- }
90
-
91
- /* Empty State Component */
92
- .emptyState {
93
- display: flex;
94
- align-items: center;
95
- justify-content: center;
96
- padding: 40px 20px;
97
- color: #666;
98
- font-size: 14px;
99
- text-align: center;
100
- }
101
-
102
- /* Loading Spinner Component */
103
- .loadingSpinner {
104
- border: 2px solid #e0e0e0;
105
- border-top: 2px solid #007AFF;
106
- border-radius: 50%;
107
- animation: spin 1s linear infinite;
108
- }
109
-
110
- /* Tooltip Component */
111
- .tooltipReference {
112
- display: inline-block;
113
- }
114
-
115
- .tooltipFloating {
116
- padding: 6px 10px;
117
- border-radius: 6px;
118
- font-size: 12px;
119
- white-space: nowrap;
120
- z-index: 1000;
121
- max-width: 300px;
122
- word-break: break-all;
123
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
124
- -webkit-backdrop-filter: blur(8px);
125
- backdrop-filter: blur(8px);
126
- font-family: system-ui, -apple-system, sans-serif;
127
- line-height: 1.4;
128
- }
129
-
130
- .tooltipDefault {
131
- background-color: #333;
132
- color: white;
133
- border: 1px solid rgba(255, 255, 255, 0.1);
134
- }
135
-
136
- .tooltipInfo {
137
- background-color: #0066cc;
138
- color: white;
139
- border: 1px solid rgba(255, 255, 255, 0.2);
140
- }
141
-
142
- .tooltipWarning {
143
- background-color: #ff8c00;
144
- color: white;
145
- border: 1px solid rgba(255, 255, 255, 0.2);
146
- }
147
-
148
- .tooltipError {
149
- background-color: #dc3545;
150
- color: white;
151
- border: 1px solid rgba(255, 255, 255, 0.2);
152
- }
153
-
154
- /* Spinner Animation */
155
- @keyframes spin {
156
- 0% { transform: rotate(0deg); }
157
- 100% { transform: rotate(360deg); }
158
- }
@@ -1,219 +0,0 @@
1
- import React, { useState, useRef } from 'react';
2
- import {
3
- useFloating,
4
- useHover,
5
- useInteractions,
6
- useRole,
7
- useDismiss,
8
- FloatingPortal,
9
- offset,
10
- shift,
11
- flip,
12
- autoUpdate,
13
- } from '@floating-ui/react';
14
- import styles from './components.module.css';
15
-
16
- // Button Component
17
- interface ButtonProps {
18
- onClick: () => void;
19
- children: React.ReactNode;
20
- variant?: 'primary' | 'secondary' | 'danger' | 'success';
21
- size?: 'small' | 'medium' | 'large';
22
- disabled?: boolean;
23
- style?: React.CSSProperties;
24
- className?: string;
25
- }
26
-
27
- export const Button: React.FC<ButtonProps> = ({
28
- onClick,
29
- children,
30
- variant = 'primary',
31
- size = 'medium',
32
- disabled = false,
33
- style,
34
- className,
35
- }) => {
36
- const sizeClass = size === 'small' ? styles.buttonSmall : size === 'large' ? styles.buttonLarge : styles.buttonMedium;
37
- const variantClass = styles[`button${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
38
-
39
- return (
40
- <button
41
- onClick={onClick}
42
- disabled={disabled}
43
- className={`${styles.button} ${sizeClass} ${variantClass} ${className || ''}`}
44
- style={style}
45
- >
46
- {children}
47
- </button>
48
- );
49
- };
50
-
51
- // Card Component
52
- interface CardProps {
53
- children: React.ReactNode;
54
- style?: React.CSSProperties;
55
- className?: string;
56
- }
57
-
58
- export const Card: React.FC<CardProps> = ({ children, style, className }) => (
59
- <div className={`${styles.card} ${className || ''}`} style={style}>
60
- {children}
61
- </div>
62
- );
63
-
64
- // Badge Component
65
- interface BadgeProps {
66
- children: React.ReactNode;
67
- color?: string;
68
- style?: React.CSSProperties;
69
- }
70
-
71
- export const Badge: React.FC<BadgeProps> = ({ children, color = '#007AFF', style }) => (
72
- <span
73
- className={styles.badge}
74
- style={{ backgroundColor: color, ...style }}
75
- >
76
- {children}
77
- </span>
78
- );
79
-
80
- // Toolbar Component
81
- interface ToolbarProps {
82
- children: React.ReactNode;
83
- style?: React.CSSProperties;
84
- }
85
-
86
- export const Toolbar: React.FC<ToolbarProps> = ({ children, style }) => (
87
- <div className={styles.toolbar} style={style}>
88
- {children}
89
- </div>
90
- );
91
-
92
- // Panel Header Component
93
- interface PanelHeaderProps {
94
- children: React.ReactNode;
95
- style?: React.CSSProperties;
96
- }
97
-
98
- export const PanelHeader: React.FC<PanelHeaderProps> = ({ children, style }) => (
99
- <div className={styles.panelHeader} style={style}>
100
- {children}
101
- </div>
102
- );
103
-
104
- // Empty State Component
105
- interface EmptyStateProps {
106
- message: string;
107
- style?: React.CSSProperties;
108
- }
109
-
110
- export const EmptyState: React.FC<EmptyStateProps> = ({ message, style }) => (
111
- <div className={styles.emptyState} style={style}>
112
- {message}
113
- </div>
114
- );
115
-
116
- // Loading Spinner Component
117
- interface LoadingSpinnerProps {
118
- size?: number;
119
- color?: string;
120
- style?: React.CSSProperties;
121
- }
122
-
123
- export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
124
- size = 16,
125
- color = '#007AFF',
126
- style
127
- }) => (
128
- <div
129
- className={styles.loadingSpinner}
130
- style={{
131
- width: size,
132
- height: size,
133
- borderTopColor: color,
134
- ...style,
135
- }}
136
- />
137
- );
138
-
139
- // Tooltip Component using Floating UI
140
- interface TooltipProps {
141
- children: React.ReactNode;
142
- content: string;
143
- style?: React.CSSProperties;
144
- showOnlyWhenTruncated?: boolean;
145
- placement?: 'top' | 'bottom' | 'left' | 'right';
146
- variant?: 'default' | 'info' | 'warning' | 'error';
147
- }
148
-
149
- export const Tooltip: React.FC<TooltipProps> = ({
150
- children,
151
- content,
152
- style,
153
- showOnlyWhenTruncated = false,
154
- placement = 'top',
155
- variant = 'default'
156
- }) => {
157
- const [isOpen, setIsOpen] = useState(false);
158
- const [isTruncated, setIsTruncated] = useState(false);
159
-
160
- const { refs, floatingStyles, context } = useFloating({
161
- open: isOpen,
162
- onOpenChange: setIsOpen,
163
- placement,
164
- middleware: [offset(8), shift(), flip()],
165
- whileElementsMounted: autoUpdate,
166
- });
167
-
168
- const hover = useHover(context, {
169
- move: false,
170
- delay: { open: 200, close: 0 },
171
- });
172
-
173
- const dismiss = useDismiss(context);
174
- const role = useRole(context, { role: 'tooltip' });
175
-
176
- const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role]);
177
-
178
- React.useEffect(() => {
179
- if (showOnlyWhenTruncated && refs.reference.current) {
180
- const element = refs.reference.current as HTMLElement;
181
- if (element && 'scrollWidth' in element && 'clientWidth' in element) {
182
- setIsTruncated(element.scrollWidth > element.clientWidth);
183
- }
184
- }
185
- }, [content, showOnlyWhenTruncated, refs.reference]);
186
-
187
- const shouldShowTooltip = showOnlyWhenTruncated ? isTruncated : true;
188
-
189
- const variantClass = styles[`tooltip${variant.charAt(0).toUpperCase() + variant.slice(1)}` as keyof typeof styles];
190
-
191
- return (
192
- <>
193
- <div
194
- ref={refs.setReference}
195
- className={styles.tooltipReference}
196
- style={style}
197
- {...getReferenceProps()}
198
- >
199
- {children}
200
- </div>
201
-
202
- <FloatingPortal>
203
- {isOpen && (
204
- <div
205
- ref={refs.setFloating}
206
- className={`${styles.tooltipFloating} ${variantClass}`}
207
- style={floatingStyles}
208
- {...getFloatingProps()}
209
- >
210
- {content}
211
- </div>
212
- )}
213
- </FloatingPortal>
214
-
215
- </>
216
- );
217
- };
218
-
219
-
@@ -1,57 +0,0 @@
1
- .container {
2
- padding: 16px;
3
- height: 100%;
4
- overflow: auto;
5
- }
6
-
7
- .card {
8
- margin-bottom: 20px;
9
- }
10
-
11
- .cardTitle {
12
- margin: 0 0 8px 0;
13
- font-size: 16px;
14
- }
15
-
16
- .cardTitleError {
17
- margin: 0 0 8px 0;
18
- font-size: 16px;
19
- color: #f44336;
20
- }
21
-
22
- .infoText {
23
- font-size: 12px;
24
- font-family: monospace;
25
- }
26
-
27
- .infoRow {
28
- margin-bottom: 4px;
29
- word-break: break-all;
30
- }
31
-
32
- .infoRowUrl {
33
- margin-bottom: 4px;
34
- word-break: break-all;
35
- }
36
-
37
- .urlText {
38
- cursor: help;
39
- border-bottom: 1px dotted #666;
40
- }
41
-
42
- .headersContainer {
43
- font-size: 12px;
44
- font-family: monospace;
45
- background-color: #f5f5f5;
46
- padding: 8px;
47
- border-radius: 4px;
48
- }
49
-
50
- .headerRow {
51
- margin-bottom: 2px;
52
- word-break: break-all;
53
- }
54
-
55
- .headerValue {
56
- word-break: break-all;
57
- }