Skip to content

Commit 05ead0a

Browse files
gwleclercclaude
gwleclerc
and
claude
committed
style(client): apply prettier formatting
Run the repo's prettier config over the client so the committed frontend matches 'npm run format' (no behavior change). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent bc7da53 commit 05ead0a

20 files changed

Lines changed: 236 additions & 201 deletions

‎client/components/App.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
// them here (otherwise the browser default 16px applies).
33
body {
44
font-size: 14px;
5-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
6-
Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
7-
"Noto Color Emoji";
5+
font-family:
6+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
7+
Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
8+
"Segoe UI Symbol", "Noto Color Emoji";
89
}
910

1011
html,

‎client/components/Code.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Code = ({
8484
const readOnly = !onChange;
8585
const extensions = React.useMemo(
8686
() => [...baseExtensions, ...languageExtensions(language)],
87-
[language]
87+
[language],
8888
);
8989

9090
// Show line numbers in every instance, including read-only previews; the active-line

‎client/components/History.tsx‎

Lines changed: 122 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -67,130 +67,131 @@ const EntryComponent = React.memo(
6767
value: Entry;
6868
onCreateMock: (mock: string) => void;
6969
}) => {
70-
const path =
71-
value.request.path + formatQueryParams(value.request.query_params);
70+
const path =
71+
value.request.path + formatQueryParams(value.request.query_params);
7272

73-
let responseStatusColor = "blue";
74-
if (value.response.status >= 600) {
75-
responseStatusColor = "magenta";
76-
} else if (value.context.mock_type === "proxy") {
77-
if (value.response.status >= 500) {
78-
responseStatusColor = "red";
79-
} else if (value.response.status >= 400) {
80-
responseStatusColor = "orange";
73+
let responseStatusColor = "blue";
74+
if (value.response.status >= 600) {
75+
responseStatusColor = "magenta";
76+
} else if (value.context.mock_type === "proxy") {
77+
if (value.response.status >= 500) {
78+
responseStatusColor = "red";
79+
} else if (value.response.status >= 400) {
80+
responseStatusColor = "orange";
81+
}
8182
}
82-
}
8383

84-
let responseStatusTitle = "Unknown HTTP status code";
85-
try {
86-
responseStatusTitle = getReasonPhrase(value.response.status);
87-
} catch {
88-
if (value.response.status >= 600) {
89-
responseStatusTitle = "Smocker error";
84+
let responseStatusTitle = "Unknown HTTP status code";
85+
try {
86+
responseStatusTitle = getReasonPhrase(value.response.status);
87+
} catch {
88+
if (value.response.status >= 600) {
89+
responseStatusTitle = "Smocker error";
90+
}
9091
}
91-
}
9292

93-
return (
94-
<div className="entry">
95-
<div className="request">
96-
<div className="details">
97-
<Tag color="blue">{value.request.method}</Tag>
98-
<Typography.Text ellipsis className="path" title={path}>
99-
{path}
100-
</Typography.Text>
101-
<span className="date">
102-
{dayjs(value.request.date).format(dateFormat)}
103-
</span>
104-
</div>
105-
{value.request.headers && (
106-
<table>
107-
<tbody>
108-
{Object.entries(value.request.headers).map((entry) =>
109-
TableRow(entry)
110-
)}
111-
</tbody>
112-
</table>
113-
)}
114-
{value.request.body ? (
115-
<Code
116-
value={
117-
JSON.stringify(value.request.body, null, " ") ||
118-
`${value.request.body}`
119-
}
120-
language="json"
121-
/>
122-
) : null}
123-
<div className="actions">
124-
<Typography.Paragraph copyable={{ text: entryToCurl(value) }}>
125-
Copy as curl
126-
</Typography.Paragraph>
127-
</div>
128-
</div>
129-
<div className="response">
130-
<div className="details">
131-
{value.context.mock_type === "proxy" && <Tag>Proxified</Tag>}
132-
<Tag color={responseStatusColor} title={responseStatusTitle}>
133-
{value.response.status}
134-
</Tag>
135-
{value.response.status >= 600 && (
136-
<Typography.Text
137-
className="error"
138-
ellipsis
139-
title={(value.response.body as SmockerError).message}
140-
>
141-
{(value.response.body as SmockerError).message}
93+
return (
94+
<div className="entry">
95+
<div className="request">
96+
<div className="details">
97+
<Tag color="blue">{value.request.method}</Tag>
98+
<Typography.Text ellipsis className="path" title={path}>
99+
{path}
142100
</Typography.Text>
143-
)}
144-
{value.context.mock_id && (
145-
<span>
146-
<Link to={`/pages/mocks/${value.context.mock_id}`}>
147-
Matched Mock
148-
</Link>
101+
<span className="date">
102+
{dayjs(value.request.date).format(dateFormat)}
149103
</span>
104+
</div>
105+
{value.request.headers && (
106+
<table>
107+
<tbody>
108+
{Object.entries(value.request.headers).map((entry) =>
109+
TableRow(entry),
110+
)}
111+
</tbody>
112+
</table>
150113
)}
151-
<span className="date">
152-
{dayjs(value.response.date).format(dateFormat)}
153-
</span>
114+
{value.request.body ? (
115+
<Code
116+
value={
117+
JSON.stringify(value.request.body, null, " ") ||
118+
`${value.request.body}`
119+
}
120+
language="json"
121+
/>
122+
) : null}
123+
<div className="actions">
124+
<Typography.Paragraph copyable={{ text: entryToCurl(value) }}>
125+
Copy as curl
126+
</Typography.Paragraph>
127+
</div>
154128
</div>
155-
<Typography.Paragraph>
156-
<Button
157-
block
158-
type="dashed"
159-
onClick={() => onCreateMock(newMockFromEntry(value))}
160-
>
161-
<PlusCircleOutlined />
162-
{value.response.status >= 600
163-
? "Create a new mock from request"
164-
: "Create a new mock from entry"}
165-
</Button>
166-
</Typography.Paragraph>
167-
{value.response.headers && (
168-
<table>
169-
<tbody>
170-
{Object.entries(value.response.headers).map((entry) =>
171-
TableRow(entry)
172-
)}
173-
</tbody>
174-
</table>
175-
)}
176-
{value.response.body ? (
177-
<Code
178-
value={
179-
JSON.stringify(value.response.body, null, " ") ||
180-
`${value.response.body}`
181-
}
182-
language="json"
183-
/>
184-
) : null}
185-
{value.context.delay && (
186-
<Typography.Paragraph className="delay">
187-
This response was delayed by <span>{value.context.delay}</span>
129+
<div className="response">
130+
<div className="details">
131+
{value.context.mock_type === "proxy" && <Tag>Proxified</Tag>}
132+
<Tag color={responseStatusColor} title={responseStatusTitle}>
133+
{value.response.status}
134+
</Tag>
135+
{value.response.status >= 600 && (
136+
<Typography.Text
137+
className="error"
138+
ellipsis
139+
title={(value.response.body as SmockerError).message}
140+
>
141+
{(value.response.body as SmockerError).message}
142+
</Typography.Text>
143+
)}
144+
{value.context.mock_id && (
145+
<span>
146+
<Link to={`/pages/mocks/${value.context.mock_id}`}>
147+
Matched Mock
148+
</Link>
149+
</span>
150+
)}
151+
<span className="date">
152+
{dayjs(value.response.date).format(dateFormat)}
153+
</span>
154+
</div>
155+
<Typography.Paragraph>
156+
<Button
157+
block
158+
type="dashed"
159+
onClick={() => onCreateMock(newMockFromEntry(value))}
160+
>
161+
<PlusCircleOutlined />
162+
{value.response.status >= 600
163+
? "Create a new mock from request"
164+
: "Create a new mock from entry"}
165+
</Button>
188166
</Typography.Paragraph>
189-
)}
167+
{value.response.headers && (
168+
<table>
169+
<tbody>
170+
{Object.entries(value.response.headers).map((entry) =>
171+
TableRow(entry),
172+
)}
173+
</tbody>
174+
</table>
175+
)}
176+
{value.response.body ? (
177+
<Code
178+
value={
179+
JSON.stringify(value.response.body, null, " ") ||
180+
`${value.response.body}`
181+
}
182+
language="json"
183+
/>
184+
) : null}
185+
{value.context.delay && (
186+
<Typography.Paragraph className="delay">
187+
This response was delayed by <span>{value.context.delay}</span>
188+
</Typography.Paragraph>
189+
)}
190+
</div>
190191
</div>
191-
</div>
192-
);
193-
});
192+
);
193+
},
194+
);
194195
EntryComponent.displayName = "Entry";
195196

196197
const HistoryComponent = (): React.JSX.Element => {
@@ -210,7 +211,7 @@ const HistoryComponent = (): React.JSX.Element => {
210211
const [order, setOrder] = useLocalStorage("history.order.by.date", "desc");
211212
const [entryField, setEntryField] = useLocalStorage(
212213
"history.order.by.entry.field",
213-
"response"
214+
"response",
214215
);
215216
const [filter, setFilter] = useLocalStorage("history.filter", "all");
216217

@@ -228,7 +229,7 @@ const HistoryComponent = (): React.JSX.Element => {
228229
const [newMockValue, setNewMockValue] = React.useState<string | null>(null);
229230
const handleCreateMock = React.useCallback(
230231
(mock: string) => setNewMockValue(mock),
231-
[]
232+
[],
232233
);
233234

234235
const historyQuery = useHistory(sessionID, {
@@ -257,8 +258,11 @@ const HistoryComponent = (): React.JSX.Element => {
257258
} else {
258259
const filteredEntries = orderBy(
259260
historyEntries,
260-
[(entry) => (entryField === "request" ? entry.request.date : entry.response.date)],
261-
[order as "asc" | "desc"]
261+
[
262+
(entry) =>
263+
entryField === "request" ? entry.request.date : entry.response.date,
264+
],
265+
[order as "asc" | "desc"],
262266
).filter((entry) => {
263267
if (filter === "http-errors") {
264268
return entry.response.status >= 400 && entry.response.status <= 599;
@@ -305,7 +309,7 @@ const HistoryComponent = (): React.JSX.Element => {
305309
{filteredEntries
306310
.slice(
307311
Math.max((page - 1) * pageSize, 0),
308-
Math.min(page * pageSize, filteredEntries.length)
312+
Math.min(page * pageSize, filteredEntries.length),
309313
)
310314
.map((entry, index) => (
311315
<EntryComponent

‎client/components/MockEditor/MockEditor.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ const MockEditor = ({
5353
// Emit the initial mock on mount so the parent's YAML stays in sync even before the first edit
5454
// (and reflects the pre-filled form after hydrating from the raw editor).
5555
React.useEffect(() => {
56-
onChange?.(dump([MockEditorFormToMock(initialValues)], { skipInvalid: true }));
56+
onChange?.(
57+
dump([MockEditorFormToMock(initialValues)], { skipInvalid: true }),
58+
);
5759
// eslint-disable-next-line react-hooks/exhaustive-deps
5860
}, []);
5961

‎client/components/MockEditor/convert.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,7 @@ describe("mockToEditorForm (YAML -> form round-trip)", () => {
376376
it.each(cases)("round-trips %#", (mock) => {
377377
expectValid(mock);
378378
const back = JSON.parse(
379-
JSON.stringify(MockEditorFormToMock(mockToEditorForm(mock)))
379+
JSON.stringify(MockEditorFormToMock(mockToEditorForm(mock))),
380380
);
381381
expect(back).toEqual(mock);
382382
expectValid(back);

‎client/components/MockEditor/convert.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ const asString = (v: unknown): string | undefined =>
221221
v === undefined || v === null ? undefined : String(v);
222222

223223
// Parses a string matcher (a plain value or a { matcher, value } object) into an editor pair.
224-
const parseStringMatcher = (v: unknown): { matcher: string; value?: string } => {
224+
const parseStringMatcher = (
225+
v: unknown,
226+
): { matcher: string; value?: string } => {
225227
if (v && typeof v === "object" && !Array.isArray(v) && "matcher" in v) {
226228
const o = v as { matcher?: unknown; value?: unknown };
227229
return {
@@ -358,4 +360,3 @@ export const mockToEditorForm = (mock: unknown): MockEditorForm => {
358360
},
359361
};
360362
};
361-

‎client/components/Mocks.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ const MockRequestComponent = ({ request }: { request: MockRequest }) => {
184184
<strong className="body-matcher">{"In Body"}</strong>
185185
<ul>
186186
{Object.entries<StringMatcher>(
187-
request.body as StringMatcherMap
187+
request.body as StringMatcherMap,
188188
).map(([key, value]) => (
189189
<li key={key}>
190190
<strong>{`${key}`}</strong>
@@ -301,7 +301,7 @@ const MocksComponent = (): React.JSX.Element => {
301301
?.newMock;
302302
// Value of the mock creation drawer, or null when it is closed.
303303
const [newMockValue, setNewMockValue] = React.useState<string | null>(
304-
initialNewMock ?? null
304+
initialNewMock ?? null,
305305
);
306306

307307
const togglePolling = () => setPolling((p) => !p);
@@ -328,7 +328,7 @@ const MocksComponent = (): React.JSX.Element => {
328328
});
329329
const paginatedMocks = filteredMocks.slice(
330330
Math.max((page - 1) * pageSize, 0),
331-
Math.min(page * pageSize, mocks.length)
331+
Math.min(page * pageSize, mocks.length),
332332
);
333333
const onChangePage = (p: number) => setPage(p);
334334
const onChangePagSize = (p: number, ps: number) => setPageAndSize(p, ps);

‎client/components/Navbar.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ const Navbar = (): React.JSX.Element => {
1212
const items = [
1313
{
1414
key: "/pages/history",
15-
label: (
16-
<Link to={{ pathname: "/pages/history", search }}>History</Link>
17-
),
15+
label: <Link to={{ pathname: "/pages/history", search }}>History</Link>,
1816
},
1917
{
2018
key: "/pages/mocks",

‎client/components/NewMock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const NewMock = ({
2424
const addMocksMut = useAddMocks();
2525
const [mock, setMock] = React.useState(defaultValue);
2626
const [view, setView] = React.useState<"visual" | "raw">(
27-
defaultValue.trim() === "" ? "visual" : "raw"
27+
defaultValue.trim() === "" ? "visual" : "raw",
2828
);
2929
// Bumped to remount MockEditor with a fresh initial form when switching in from YAML.
3030
const [formSeed, setFormSeed] = React.useState(0);

0 commit comments

Comments
 (0)