@streamotter/workbench 0.1.0-rc.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.
- package/LICENSE +21 -0
- package/README.md +9 -0
- package/dist/THIRD_PARTY_LICENSES.txt +133 -0
- package/dist/app.js +5 -0
- package/dist/app.js.map +7 -0
- package/dist/index.html +16 -0
- package/dist/styles.css +129 -0
- package/package.json +38 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<meta name="color-scheme" content="light dark">
|
|
7
|
+
<title>StreamOtter Workbench</title>
|
|
8
|
+
<link rel="icon" href="data:,">
|
|
9
|
+
<link rel="stylesheet" href="styles.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id="app" aria-live="polite"></div>
|
|
13
|
+
<noscript>The StreamOtter workbench requires JavaScript.</noscript>
|
|
14
|
+
<script type="module" src="app.js"></script>
|
|
15
|
+
</body>
|
|
16
|
+
</html>
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #f6f7f9;
|
|
3
|
+
--panel: #ffffff;
|
|
4
|
+
--panel-2: #f0f2f5;
|
|
5
|
+
--border: #d9dde3;
|
|
6
|
+
--text: #16181d;
|
|
7
|
+
--muted: #5b6270;
|
|
8
|
+
--accent: #1f6feb;
|
|
9
|
+
--accent-text: #ffffff;
|
|
10
|
+
--ok: #1a7f37;
|
|
11
|
+
--ok-bg: #dafbe1;
|
|
12
|
+
--warn: #9a6700;
|
|
13
|
+
--warn-bg: #fff8c5;
|
|
14
|
+
--bad: #cf222e;
|
|
15
|
+
--bad-bg: #ffebe9;
|
|
16
|
+
--info: #0969da;
|
|
17
|
+
--info-bg: #ddf4ff;
|
|
18
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
19
|
+
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
20
|
+
--radius: 8px;
|
|
21
|
+
}
|
|
22
|
+
@media (prefers-color-scheme: dark) {
|
|
23
|
+
:root {
|
|
24
|
+
--bg: #0e1116;
|
|
25
|
+
--panel: #161b22;
|
|
26
|
+
--panel-2: #1c222b;
|
|
27
|
+
--border: #30363d;
|
|
28
|
+
--text: #e6edf3;
|
|
29
|
+
--muted: #8d96a0;
|
|
30
|
+
--accent: #4493f8;
|
|
31
|
+
--accent-text: #0e1116;
|
|
32
|
+
--ok: #3fb950;
|
|
33
|
+
--ok-bg: #12261a;
|
|
34
|
+
--warn: #d29922;
|
|
35
|
+
--warn-bg: #2a2110;
|
|
36
|
+
--bad: #f85149;
|
|
37
|
+
--bad-bg: #2d1416;
|
|
38
|
+
--info: #58a6ff;
|
|
39
|
+
--info-bg: #0f2033;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
* { box-sizing: border-box; }
|
|
43
|
+
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); }
|
|
44
|
+
a { color: var(--accent); }
|
|
45
|
+
h1, h2, h3 { margin: 0; line-height: 1.25; }
|
|
46
|
+
h1 { font-size: 16px; }
|
|
47
|
+
h2 { font-size: 18px; margin-bottom: 4px; }
|
|
48
|
+
h3 { font-size: 14px; margin-bottom: 8px; }
|
|
49
|
+
p { margin: 0 0 8px; }
|
|
50
|
+
code, pre, textarea, .mono { font-family: var(--mono); font-size: 12.5px; }
|
|
51
|
+
pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
|
|
52
|
+
button, select, input, textarea {
|
|
53
|
+
font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border);
|
|
54
|
+
border-radius: 6px; padding: 6px 10px;
|
|
55
|
+
}
|
|
56
|
+
textarea { width: 100%; min-height: 360px; resize: vertical; line-height: 1.45; font-family: var(--mono); font-size: 12.5px; }
|
|
57
|
+
button { cursor: pointer; }
|
|
58
|
+
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
|
|
59
|
+
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
60
|
+
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
61
|
+
label { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }
|
|
62
|
+
label span.hint { font-weight: 400; color: var(--muted); }
|
|
63
|
+
|
|
64
|
+
.topbar {
|
|
65
|
+
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
|
66
|
+
padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
|
|
67
|
+
}
|
|
68
|
+
.topbar .spacer { flex: 1; }
|
|
69
|
+
.brand { display: flex; align-items: baseline; gap: 8px; }
|
|
70
|
+
.brand small { color: var(--muted); }
|
|
71
|
+
nav.tabs { display: flex; gap: 2px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; }
|
|
72
|
+
nav.tabs button {
|
|
73
|
+
border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none;
|
|
74
|
+
padding: 10px 14px; color: var(--muted); font-weight: 600;
|
|
75
|
+
}
|
|
76
|
+
nav.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
|
|
77
|
+
main { padding: 20px; max-width: 1280px; margin: 0 auto; display: grid; gap: 16px; }
|
|
78
|
+
.lede { color: var(--muted); max-width: 72ch; }
|
|
79
|
+
|
|
80
|
+
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-width: 0; }
|
|
81
|
+
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
|
|
82
|
+
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
83
|
+
.stack { display: grid; gap: 12px; }
|
|
84
|
+
.muted { color: var(--muted); }
|
|
85
|
+
.small { font-size: 12px; }
|
|
86
|
+
|
|
87
|
+
.pill {
|
|
88
|
+
display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
|
|
89
|
+
font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
|
|
90
|
+
}
|
|
91
|
+
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
|
92
|
+
.pill.ok { color: var(--ok); background: var(--ok-bg); }
|
|
93
|
+
.pill.warn { color: var(--warn); background: var(--warn-bg); }
|
|
94
|
+
.pill.bad { color: var(--bad); background: var(--bad-bg); }
|
|
95
|
+
.pill.info { color: var(--info); background: var(--info-bg); }
|
|
96
|
+
.pill.neutral { color: var(--muted); background: var(--panel-2); }
|
|
97
|
+
|
|
98
|
+
.banner { border-radius: var(--radius); padding: 10px 14px; border: 1px solid; }
|
|
99
|
+
.banner.warn { color: var(--warn); background: var(--warn-bg); border-color: currentColor; }
|
|
100
|
+
.banner.info { color: var(--info); background: var(--info-bg); border-color: currentColor; }
|
|
101
|
+
.banner.bad { color: var(--bad); background: var(--bad-bg); border-color: currentColor; }
|
|
102
|
+
.banner strong { color: inherit; }
|
|
103
|
+
|
|
104
|
+
table { width: 100%; border-collapse: collapse; }
|
|
105
|
+
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
|
|
106
|
+
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
|
|
107
|
+
.table-wrap { overflow: auto; max-height: 60vh; }
|
|
108
|
+
tbody tr:hover { background: var(--panel-2); }
|
|
109
|
+
|
|
110
|
+
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
|
|
111
|
+
.steps li { display: grid; grid-template-columns: 24px 110px 1fr; gap: 8px; }
|
|
112
|
+
.steps .ok { color: var(--ok); }
|
|
113
|
+
.steps .failed { color: var(--bad); }
|
|
114
|
+
.steps .skipped { color: var(--muted); }
|
|
115
|
+
|
|
116
|
+
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 280px; overflow: auto; }
|
|
117
|
+
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: start; }
|
|
118
|
+
.data-view { background: var(--panel-2); border-radius: 6px; padding: 10px; min-height: 80px; }
|
|
119
|
+
.issues { margin: 8px 0 0; padding-left: 18px; }
|
|
120
|
+
.issues li { margin-bottom: 4px; }
|
|
121
|
+
.gate { max-width: 460px; margin: 12vh auto; }
|
|
122
|
+
.explain dt { font-weight: 600; }
|
|
123
|
+
.explain dd { margin: 0 0 6px; color: var(--muted); }
|
|
124
|
+
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
125
|
+
@media (max-width: 640px) {
|
|
126
|
+
main { padding: 12px; }
|
|
127
|
+
.grid-2 { grid-template-columns: 1fr; }
|
|
128
|
+
.steps li { grid-template-columns: 24px 90px 1fr; }
|
|
129
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@streamotter/workbench",
|
|
3
|
+
"version": "0.1.0-rc.1",
|
|
4
|
+
"description": "StreamOtter local workbench (static assets), served by `streamotter dev` from the loopback management origin.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"streamotter",
|
|
7
|
+
"kafka",
|
|
8
|
+
"realtime",
|
|
9
|
+
"workbench",
|
|
10
|
+
"developer-tools"
|
|
11
|
+
],
|
|
12
|
+
"homepage": "https://github.com/jfricano/StreamOtter/tree/main/apps/workbench#readme",
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/jfricano/StreamOtter/issues"
|
|
15
|
+
},
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/jfricano/StreamOtter.git",
|
|
19
|
+
"directory": "apps/workbench"
|
|
20
|
+
},
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"author": "Orca Solutions",
|
|
23
|
+
"type": "module",
|
|
24
|
+
"files": [
|
|
25
|
+
"dist"
|
|
26
|
+
],
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"esbuild": "0.28.2",
|
|
32
|
+
"@streamotter/client": "0.1.0-rc.1",
|
|
33
|
+
"@streamotter/contracts": "0.1.0-rc.1"
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"build": "node build.mjs"
|
|
37
|
+
}
|
|
38
|
+
}
|