@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.
- package/README.md +3 -5
- package/dist/{panel.html → App.html} +3 -3
- package/dist/assets/App-CA1Fbh0I.js +25364 -0
- package/dist/assets/App-DoHQsY5s.css +1276 -0
- package/dist/event-source.cjs +22 -0
- package/dist/event-source.js +23 -0
- package/dist/react-native.cjs +8 -1
- package/dist/react-native.d.ts +1 -5
- package/dist/react-native.js +6 -171
- package/dist/rozenite.config.d.ts +7 -0
- package/dist/rozenite.json +1 -1
- package/dist/src/react-native/http/network-inspector.d.ts +8 -0
- package/dist/src/react-native/http/network-requests-registry.d.ts +6 -0
- package/dist/src/react-native/http/xhr-interceptor.d.ts +38 -0
- package/dist/src/react-native/sse/event-source.d.ts +2 -0
- package/dist/src/react-native/sse/sse-inspector.d.ts +9 -0
- package/dist/src/react-native/sse/sse-interceptor.d.ts +36 -0
- package/dist/src/react-native/sse/types.d.ts +6 -0
- package/dist/src/react-native/useNetworkActivityDevTools.d.ts +2 -0
- package/dist/src/react-native/utils.d.ts +6 -0
- package/dist/src/react-native/websocket/websocket-inspector.d.ts +9 -0
- package/dist/src/react-native/websocket/websocket-interceptor.d.ts +74 -0
- package/dist/src/shared/client.d.ts +68 -0
- package/dist/src/shared/sse-events.d.ts +35 -0
- package/dist/src/shared/websocket-events.d.ts +60 -0
- package/dist/src/ui/App.d.ts +1 -0
- package/dist/src/ui/components/Badge.d.ts +9 -0
- package/dist/src/ui/components/Button.d.ts +11 -0
- package/dist/src/ui/components/Input.d.ts +3 -0
- package/dist/src/ui/components/JsonTree.d.ts +5 -0
- package/dist/src/ui/components/JsonTreeCopyableItem.d.ts +7 -0
- package/dist/src/ui/components/RequestList.d.ts +25 -0
- package/dist/src/ui/components/ScrollArea.d.ts +4 -0
- package/dist/src/ui/components/Separator.d.ts +3 -0
- package/dist/src/ui/components/SidePanel.d.ts +1 -0
- package/dist/src/ui/components/Toolbar.d.ts +1 -0
- package/dist/src/ui/hooks/useCopyToClipboard.d.ts +4 -0
- package/dist/src/ui/state/derived.d.ts +5 -0
- package/dist/src/ui/state/hooks.d.ts +17 -0
- package/dist/src/ui/state/model.d.ts +98 -0
- package/dist/src/ui/state/store.d.ts +24 -0
- package/dist/src/ui/tabs/CookiesTab.d.ts +5 -0
- package/dist/src/ui/tabs/HeadersTab.d.ts +5 -0
- package/dist/src/ui/tabs/MessagesTab.d.ts +5 -0
- package/dist/src/ui/tabs/RequestTab.d.ts +5 -0
- package/dist/src/ui/tabs/ResponseTab.d.ts +6 -0
- package/dist/src/ui/tabs/SSEMessagesTab.d.ts +5 -0
- package/dist/src/ui/tabs/TimingTab.d.ts +5 -0
- package/dist/src/ui/types.d.ts +26 -0
- package/dist/src/ui/utils/assert.d.ts +1 -0
- package/dist/src/ui/utils/cn.d.ts +2 -0
- package/dist/src/ui/utils/copyToClipboard.d.ts +1 -0
- package/dist/src/ui/utils/getHttpHeaderValue.d.ts +2 -0
- package/dist/src/ui/utils/getId.d.ts +1 -0
- package/dist/src/ui/utils/getStatusColor.d.ts +1 -0
- package/dist/src/ui/views/InspectorView.d.ts +5 -0
- package/dist/src/ui/views/LoadingView.d.ts +1 -0
- package/dist/useNetworkActivityDevTools.cjs +759 -0
- package/dist/useNetworkActivityDevTools.js +757 -0
- package/package.json +31 -10
- package/postcss.config.js +6 -0
- package/project.json +12 -0
- package/react-native.ts +2 -1
- package/rozenite.config.ts +2 -2
- package/src/css-modules.d.ts +1 -1
- package/src/react-native/http/network-inspector.ts +226 -0
- package/src/react-native/http/network-requests-registry.ts +52 -0
- package/src/react-native/http/xhr-interceptor.ts +211 -0
- package/src/react-native/http/xml-request.d.ts +34 -0
- package/src/react-native/sse/event-source.ts +25 -0
- package/src/react-native/sse/sse-inspector.ts +117 -0
- package/src/react-native/sse/sse-interceptor.ts +162 -0
- package/src/react-native/sse/types.ts +9 -0
- package/src/react-native/useNetworkActivityDevTools.ts +73 -210
- package/src/react-native/utils.ts +43 -0
- package/src/react-native/websocket/websocket-inspector.ts +180 -0
- package/src/react-native/websocket/websocket-interceptor.d.ts +4 -0
- package/src/react-native/websocket/websocket-interceptor.ts +166 -0
- package/src/shared/client.ts +86 -0
- package/src/shared/sse-events.ts +44 -0
- package/src/shared/websocket-events.ts +79 -0
- package/src/ui/App.tsx +19 -0
- package/src/ui/components/Badge.tsx +36 -0
- package/src/ui/components/Button.tsx +56 -0
- package/src/ui/components/Input.tsx +22 -0
- package/src/ui/components/JsonTree.tsx +50 -0
- package/src/ui/components/JsonTreeCopyableItem.tsx +33 -0
- package/src/ui/components/RequestList.tsx +295 -0
- package/src/ui/components/ScrollArea.tsx +48 -0
- package/src/ui/components/Separator.tsx +31 -0
- package/src/ui/components/SidePanel.tsx +323 -0
- package/src/ui/components/Tabs.tsx +55 -0
- package/src/ui/components/Toolbar.tsx +45 -0
- package/src/ui/globals.css +90 -0
- package/src/ui/hooks/useCopyToClipboard.ts +28 -0
- package/src/ui/state/derived.ts +112 -0
- package/src/ui/state/hooks.ts +44 -0
- package/src/ui/state/model.ts +129 -0
- package/src/ui/state/store.ts +559 -0
- package/src/ui/tabs/CookiesTab.tsx +279 -0
- package/src/ui/tabs/HeadersTab.tsx +110 -0
- package/src/ui/tabs/MessagesTab.tsx +276 -0
- package/src/ui/tabs/RequestTab.tsx +69 -0
- package/src/ui/tabs/ResponseTab.tsx +138 -0
- package/src/ui/tabs/SSEMessagesTab.tsx +213 -0
- package/src/ui/tabs/TimingTab.tsx +60 -0
- package/src/ui/types.ts +34 -0
- package/src/ui/utils/assert.ts +5 -0
- package/src/ui/utils/cn.ts +6 -0
- package/src/ui/utils/copyToClipboard.ts +3 -0
- package/src/ui/utils/getHttpHeaderValue.ts +14 -0
- package/src/ui/utils/getId.ts +10 -0
- package/src/ui/utils/getStatusColor.ts +15 -0
- package/src/ui/views/InspectorView.tsx +53 -0
- package/src/ui/views/LoadingView.tsx +19 -0
- package/tailwind.config.ts +96 -0
- package/tsconfig.json +13 -6
- package/tsconfig.tsbuildinfo +1 -0
- package/vite.config.ts +13 -1
- package/dist/assets/panel-C5YgUUj5.js +0 -54
- package/dist/assets/panel-NCVczPb1.css +0 -1
- package/src/types/network.ts +0 -153
- package/src/ui/components.module.css +0 -158
- package/src/ui/components.tsx +0 -219
- package/src/ui/network-details.module.css +0 -57
- package/src/ui/network-details.tsx +0 -134
- package/src/ui/network-list.module.css +0 -122
- package/src/ui/network-list.tsx +0 -145
- package/src/ui/network-toolbar.module.css +0 -9
- package/src/ui/network-toolbar.tsx +0 -40
- package/src/ui/panel.module.css +0 -61
- package/src/ui/panel.tsx +0 -201
- package/src/ui/tanstack-query.tsx +0 -197
- 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}
|
package/src/types/network.ts
DELETED
|
@@ -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
|
-
}
|
package/src/ui/components.tsx
DELETED
|
@@ -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
|
-
}
|