Skip to content

Commit a3ac319

Browse files
softmarshmallowsoftmarshmallow
authored
Merge pull request #218 from gridaco/playground
codetest/server - local reports coverage serving
2 parents 5c4ed5a + 43bb62d commit a3ac319

21 files changed

Lines changed: 855 additions & 70 deletions

File tree

‎editor-packages/editor-ui/icon-button.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import styled from "@emotion/styled";
44
export const IconButton = React.forwardRef(function (
55
{
66
children,
7+
title,
78
outline,
89
onClick,
910
disabled,
1011
...props
1112
}: React.PropsWithChildren<{
13+
title?: string;
1214
outline?: React.CSSProperties["outline"];
1315
onClick?: React.MouseEventHandler<HTMLButtonElement>;
1416
disabled?: boolean;
@@ -20,6 +22,7 @@ export const IconButton = React.forwardRef(function (
2022
ref={ref}
2123
onClick={onClick}
2224
disabled={disabled}
25+
title={title}
2326
{...props}
2427
style={{
2528
outline,

‎editor/components/community-files/readme.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,13 +176,36 @@ export function Readme({
176176
}
177177

178178
const ReadmeWrapper = styled.main`
179+
color: black;
179180
margin: auto;
180181
181182
width: 100%;
182183
183184
overflow: hidden;
184185
overflow-y: scroll;
185186
187+
h1,
188+
h2,
189+
h3,
190+
h4,
191+
h5,
192+
h6 {
193+
color: black;
194+
}
195+
196+
p {
197+
color: black;
198+
}
199+
200+
a {
201+
color: black;
202+
opacity: 0.8;
203+
204+
&:hover {
205+
opacity: 1;
206+
}
207+
}
208+
186209
.cta {
187210
display: flex;
188211
flex-direction: column;

‎editor/next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ const packages = [
7474
"@web-builder/styles",
7575
// endregion web builders
7676
// -----------------------------
77+
78+
// region codetest
79+
"@codetest/editor-client",
7780
];
7881

7982
const withPlugins = require("next-compose-plugins");

‎editor/pages/_app.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ function GlobalCss() {
1313
<Global
1414
styles={css`
1515
html {
16-
background-color: ${colors.color_editor_bg_on_dark};
1716
touch-action: none;
1817
}
1918
`}

‎editor/pages/qa/files/[key]/index.tsx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

editor/pages/qa/index.tsx renamed to editor/pages/tests/index.tsx

File renamed without changes.

‎editor/pages/tests/reports/[key]/index.tsx‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import React, { useEffect } from "react";
2+
import Head from "next/head";
3+
import { InferGetServerSidePropsType } from "next";
4+
import styled from "@emotion/styled";
5+
import { Client, NodeReportCoverage } from "@codetest/editor-client";
6+
import { CircleIcon, LightningBoltIcon, CodeIcon } from "@radix-ui/react-icons";
7+
import { IconButton } from "@code-editor/ui";
8+
type P = InferGetServerSidePropsType<typeof getServerSideProps>;
9+
10+
export default function ReportPage({ _key, data }: P) {
11+
const onRegenerate = () => {
12+
alert("regenerate (not implemented)");
13+
};
14+
15+
return (
16+
<>
17+
<Head>
18+
<title>Report Coverages - @codetest/reports</title>
19+
{/* */}
20+
</Head>
21+
<Main>
22+
<header className="header">
23+
<span>
24+
<code>@codetest/reports</code>
25+
<h1>{_key}</h1>
26+
</span>
27+
<div>
28+
<IconButton title="regenerate" onClick={onRegenerate}>
29+
<LightningBoltIcon />
30+
</IconButton>
31+
</div>
32+
</header>
33+
{/* <code>
34+
<pre>{JSON.stringify(data, null, 2)}</pre>
35+
</code> */}
36+
<div className="nodes">
37+
{Object.keys(data).map((k) => {
38+
const record: NodeReportCoverage = data[k];
39+
return <Item key={k} id={k} {...record} />;
40+
})}
41+
</div>
42+
<footer />
43+
</Main>
44+
</>
45+
);
46+
}
47+
48+
const Main = styled.main`
49+
color: white;
50+
font-family: monospace;
51+
width: 400px;
52+
margin: auto;
53+
54+
/* */
55+
.nodes {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 16px;
59+
}
60+
61+
header.header {
62+
margin: 120px 0 40px 0;
63+
display: flex;
64+
align-items: center;
65+
justify-content: space-between;
66+
67+
h1 {
68+
margin: 0;
69+
}
70+
71+
.actions {
72+
display: flex;
73+
align-items: center;
74+
gap: 4px;
75+
}
76+
}
77+
78+
footer {
79+
height: 200px;
80+
}
81+
`;
82+
83+
function Item({ id, a, b, diff, report }: NodeReportCoverage & { id: string }) {
84+
const [focus, setFocus] = React.useState<"a" | "b" | null>(null);
85+
86+
const onInspect = () => {
87+
alert("inspect (not implemented)");
88+
};
89+
90+
const onRegenerate = () => {
91+
alert("regenerate (not implemented)");
92+
};
93+
94+
return (
95+
<ItemContainer>
96+
<header>
97+
<p className="title">
98+
<CircleIcon />
99+
{id} {focus && <span>({focus})</span>}
100+
</p>
101+
<div className="actions">
102+
<IconButton title="inspect" onClick={onInspect}>
103+
<CodeIcon />
104+
</IconButton>
105+
<IconButton title="regenerate" onClick={onRegenerate}>
106+
<LightningBoltIcon />
107+
</IconButton>
108+
</div>
109+
</header>
110+
<div className="view" data-focus={focus}>
111+
<img className="a" src={a} alt="A" />
112+
<img className="b" src={b} alt="B" />
113+
<img className="c" src={diff} alt="C" />
114+
<div
115+
className="hover-area hover-area-left"
116+
onMouseEnter={() => setFocus("a")}
117+
onMouseLeave={() => setFocus(null)}
118+
/>
119+
<div
120+
className="hover-area hover-area-right"
121+
onMouseEnter={() => setFocus("b")}
122+
onMouseLeave={() => setFocus(null)}
123+
/>
124+
</div>
125+
</ItemContainer>
126+
);
127+
}
128+
129+
const ItemContainer = styled.div`
130+
display: flex;
131+
flex-direction: column;
132+
133+
border-radius: 2px;
134+
border: 1px solid rgba(255, 255, 255, 0.1);
135+
overflow: hidden;
136+
137+
width: 400px;
138+
height: 100%;
139+
140+
header {
141+
color: white;
142+
display: flex;
143+
flex-direction: row;
144+
align-items: center;
145+
justify-content: space-between;
146+
padding: 16px;
147+
.title {
148+
display: flex;
149+
align-items: center;
150+
gap: 8px;
151+
}
152+
153+
.actions {
154+
display: flex;
155+
align-items: center;
156+
gap: 4px;
157+
}
158+
}
159+
160+
.view {
161+
position: relative;
162+
display: flex;
163+
flex-direction: row;
164+
align-items: center;
165+
166+
.a,
167+
.b,
168+
.c {
169+
position: relative;
170+
z-index: 1;
171+
flex: 1 0 auto;
172+
width: 100%;
173+
height: auto;
174+
}
175+
176+
.a,
177+
.b {
178+
pointer-events: none;
179+
position: absolute;
180+
top: 0;
181+
left: 0;
182+
right: 0;
183+
bottom: 0;
184+
width: 100%;
185+
height: 100%;
186+
opacity: 0.5;
187+
transition: opacity 0.1s ease-in-out;
188+
}
189+
190+
&[data-focus="a"] .a {
191+
z-index: 9;
192+
opacity: 1;
193+
}
194+
195+
&[data-focus="b"] .b {
196+
z-index: 9;
197+
opacity: 1;
198+
}
199+
200+
.hover-area {
201+
position: absolute;
202+
top: 0;
203+
bottom: 0;
204+
width: 50%;
205+
height: 100%;
206+
z-index: 2;
207+
}
208+
209+
.hover-area-left {
210+
cursor: w-resize;
211+
left: 0;
212+
}
213+
214+
.hover-area-right {
215+
cursor: e-resize;
216+
right: 0;
217+
}
218+
}
219+
`;
220+
221+
export async function getServerSideProps(context: any) {
222+
const key = context.params.key;
223+
224+
const client = Client({
225+
baseURL: "http://localhost:6627",
226+
});
227+
228+
try {
229+
const { data } = await client.file({ file: key });
230+
231+
return {
232+
props: {
233+
_key: key,
234+
data,
235+
},
236+
};
237+
} catch (e) {
238+
return {
239+
notFound: true,
240+
};
241+
}
242+
}

0 commit comments

Comments
 (0)