Skip to content

Commit 133b785

Browse files
olaservoolaservo
committed
Fix formatting
1 parent f6860a8 commit 133b785

File tree

3 files changed

+104
-78
lines changed

3 files changed

+104
-78
lines changed

‎client/src/components/DynamicJsonForm.tsx

Lines changed: 85 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@ import { Input } from "@/components/ui/input";
44
import { Label } from "@/components/ui/label";
55
import JsonEditor from "./JsonEditor";
66

7-
export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
7+
export type JsonValue =
8+
| string
9+
| number
10+
| boolean
11+
| null
12+
| JsonValue[]
13+
| { [key: string]: JsonValue };
814

915
export type JsonSchemaType = {
10-
type: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
16+
type: "string" | "number" | "integer" | "boolean" | "array" | "object";
1117
description?: string;
1218
properties?: Record<string, JsonSchemaType>;
1319
items?: JsonSchemaType;
@@ -24,32 +30,32 @@ interface DynamicJsonFormProps {
2430

2531
const formatFieldLabel = (key: string): string => {
2632
return key
27-
.replace(/([A-Z])/g, ' $1') // Insert space before capital letters
28-
.replace(/_/g, ' ') // Replace underscores with spaces
29-
.replace(/^\w/, c => c.toUpperCase()); // Capitalize first letter
33+
.replace(/([A-Z])/g, " $1") // Insert space before capital letters
34+
.replace(/_/g, " ") // Replace underscores with spaces
35+
.replace(/^\w/, (c) => c.toUpperCase()); // Capitalize first letter
3036
};
3137

3238
const DynamicJsonForm = ({
3339
schema,
3440
value,
3541
onChange,
36-
maxDepth = 3
42+
maxDepth = 3,
3743
}: DynamicJsonFormProps) => {
3844
const [isJsonMode, setIsJsonMode] = useState(false);
3945
const [jsonError, setJsonError] = useState<string>();
4046

4147
const generateDefaultValue = (propSchema: JsonSchemaType): JsonValue => {
4248
switch (propSchema.type) {
43-
case 'string':
44-
return '';
45-
case 'number':
46-
case 'integer':
49+
case "string":
50+
return "";
51+
case "number":
52+
case "integer":
4753
return 0;
48-
case 'boolean':
54+
case "boolean":
4955
return false;
50-
case 'array':
56+
case "array":
5157
return [];
52-
case 'object': {
58+
case "object": {
5359
const obj: JsonObject = {};
5460
if (propSchema.properties) {
5561
Object.entries(propSchema.properties).forEach(([key, prop]) => {
@@ -67,20 +73,27 @@ const DynamicJsonForm = ({
6773
propSchema: JsonSchemaType,
6874
currentValue: JsonValue,
6975
path: string[] = [],
70-
depth: number = 0
76+
depth: number = 0,
7177
) => {
72-
if (depth >= maxDepth && (propSchema.type === 'object' || propSchema.type === 'array')) {
78+
if (
79+
depth >= maxDepth &&
80+
(propSchema.type === "object" || propSchema.type === "array")
81+
) {
7382
// Render as JSON editor when max depth is reached
7483
return (
7584
<JsonEditor
76-
value={JSON.stringify(currentValue ?? generateDefaultValue(propSchema), null, 2)}
85+
value={JSON.stringify(
86+
currentValue ?? generateDefaultValue(propSchema),
87+
null,
88+
2,
89+
)}
7790
onChange={(newValue) => {
7891
try {
7992
const parsed = JSON.parse(newValue);
8093
handleFieldChange(path, parsed);
8194
setJsonError(undefined);
8295
} catch (err) {
83-
setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
96+
setJsonError(err instanceof Error ? err.message : "Invalid JSON");
8497
}
8598
}}
8699
error={jsonError}
@@ -89,20 +102,25 @@ const DynamicJsonForm = ({
89102
}
90103

91104
switch (propSchema.type) {
92-
case 'string':
93-
case 'number':
94-
case 'integer':
105+
case "string":
106+
case "number":
107+
case "integer":
95108
return (
96109
<Input
97-
type={propSchema.type === 'string' ? 'text' : 'number'}
98-
value={(currentValue as string | number) ?? ''}
99-
onChange={(e) => handleFieldChange(path,
100-
propSchema.type === 'string' ? e.target.value : Number(e.target.value)
101-
)}
110+
type={propSchema.type === "string" ? "text" : "number"}
111+
value={(currentValue as string | number) ?? ""}
112+
onChange={(e) =>
113+
handleFieldChange(
114+
path,
115+
propSchema.type === "string"
116+
? e.target.value
117+
: Number(e.target.value),
118+
)
119+
}
102120
placeholder={propSchema.description}
103121
/>
104122
);
105-
case 'boolean':
123+
case "boolean":
106124
return (
107125
<Input
108126
type="checkbox"
@@ -111,7 +129,7 @@ const DynamicJsonForm = ({
111129
className="w-4 h-4"
112130
/>
113131
);
114-
case 'object':
132+
case "object":
115133
if (!propSchema.properties) return null;
116134
return (
117135
<div className="space-y-4 border rounded-md p-4">
@@ -122,21 +140,21 @@ const DynamicJsonForm = ({
122140
prop,
123141
(currentValue as JsonObject)?.[key],
124142
[...path, key],
125-
depth + 1
143+
depth + 1,
126144
)}
127145
</div>
128146
))}
129147
</div>
130148
);
131-
case 'array': {
149+
case "array": {
132150
const arrayValue = Array.isArray(currentValue) ? currentValue : [];
133151
if (!propSchema.items) return null;
134152
return (
135153
<div className="space-y-4">
136154
{propSchema.description && (
137155
<p className="text-sm text-gray-600">{propSchema.description}</p>
138156
)}
139-
157+
140158
{propSchema.items?.description && (
141159
<p className="text-sm text-gray-500">
142160
Items: {propSchema.items.description}
@@ -145,36 +163,40 @@ const DynamicJsonForm = ({
145163

146164
<div className="space-y-2">
147165
{arrayValue.map((item, index) => (
148-
<div key={index} className="flex items-center gap-2">
149-
{renderFormFields(
150-
propSchema.items as JsonSchemaType,
151-
item,
152-
[...path, index.toString()],
153-
depth + 1
154-
)}
155-
<Button
156-
variant="outline"
157-
size="sm"
158-
onClick={() => {
159-
const newArray = [...arrayValue];
160-
newArray.splice(index, 1);
161-
handleFieldChange(path, newArray);
162-
}}
163-
>
164-
Remove
165-
</Button>
166-
</div>
167-
))}
166+
<div key={index} className="flex items-center gap-2">
167+
{renderFormFields(
168+
propSchema.items as JsonSchemaType,
169+
item,
170+
[...path, index.toString()],
171+
depth + 1,
172+
)}
173+
<Button
174+
variant="outline"
175+
size="sm"
176+
onClick={() => {
177+
const newArray = [...arrayValue];
178+
newArray.splice(index, 1);
179+
handleFieldChange(path, newArray);
180+
}}
181+
>
182+
Remove
183+
</Button>
184+
</div>
185+
))}
168186
<Button
169187
variant="outline"
170188
size="sm"
171189
onClick={() => {
172-
handleFieldChange(
173-
path,
174-
[...arrayValue, generateDefaultValue(propSchema.items as JsonSchemaType)]
175-
);
190+
handleFieldChange(path, [
191+
...arrayValue,
192+
generateDefaultValue(propSchema.items as JsonSchemaType),
193+
]);
176194
}}
177-
title={propSchema.items?.description ? `Add new ${propSchema.items.description}` : 'Add new item'}
195+
title={
196+
propSchema.items?.description
197+
? `Add new ${propSchema.items.description}`
198+
: "Add new item"
199+
}
178200
>
179201
Add Item
180202
</Button>
@@ -193,17 +215,21 @@ const DynamicJsonForm = ({
193215
return;
194216
}
195217

196-
const newValue = { ...(typeof value === 'object' && value !== null && !Array.isArray(value) ? value : {}) } as JsonObject;
218+
const newValue = {
219+
...(typeof value === "object" && value !== null && !Array.isArray(value)
220+
? value
221+
: {}),
222+
} as JsonObject;
197223
let current: JsonObject = newValue;
198-
224+
199225
for (let i = 0; i < path.length - 1; i++) {
200226
const key = path[i];
201227
if (!(key in current)) {
202228
current[key] = {};
203229
}
204230
current = current[key] as JsonObject;
205231
}
206-
232+
207233
current[path[path.length - 1]] = fieldValue;
208234
onChange(newValue);
209235
};
@@ -228,7 +254,7 @@ const DynamicJsonForm = ({
228254
onChange(JSON.parse(newValue));
229255
setJsonError(undefined);
230256
} catch (err) {
231-
setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
257+
setJsonError(err instanceof Error ? err.message : "Invalid JSON");
232258
}
233259
}}
234260
error={jsonError}

‎client/src/components/JsonEditor.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import Editor from 'react-simple-code-editor';
2-
import Prism from 'prismjs';
3-
import 'prismjs/components/prism-json';
4-
import 'prismjs/themes/prism.css';
1+
import Editor from "react-simple-code-editor";
2+
import Prism from "prismjs";
3+
import "prismjs/components/prism-json";
4+
import "prismjs/themes/prism.css";
55
import { Button } from "@/components/ui/button";
66

77
interface JsonEditorProps {
@@ -32,28 +32,26 @@ const JsonEditor = ({ value, onChange, error }: JsonEditorProps) => {
3232
</div>
3333
<div
3434
className={`border rounded-md ${
35-
error ? 'border-red-500' : 'border-gray-200 dark:border-gray-800'
35+
error ? "border-red-500" : "border-gray-200 dark:border-gray-800"
3636
}`}
3737
>
3838
<Editor
3939
value={value}
4040
onValueChange={onChange}
41-
highlight={code =>
42-
Prism.highlight(code, Prism.languages.json, 'json')
41+
highlight={(code) =>
42+
Prism.highlight(code, Prism.languages.json, "json")
4343
}
4444
padding={10}
4545
style={{
4646
fontFamily: '"Fira code", "Fira Mono", monospace',
4747
fontSize: 14,
48-
backgroundColor: 'transparent',
49-
minHeight: '100px',
48+
backgroundColor: "transparent",
49+
minHeight: "100px",
5050
}}
5151
className="w-full"
5252
/>
5353
</div>
54-
{error && (
55-
<p className="text-sm text-red-500 mt-1">{error}</p>
56-
)}
54+
{error && <p className="text-sm text-red-500 mt-1">{error}</p>}
5755
</div>
5856
);
5957
};

‎client/src/components/ToolsTab.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -192,12 +192,14 @@ const ToolsTab = ({
192192
) : prop.type === "object" ? (
193193
<div className="mt-1">
194194
<DynamicJsonForm
195-
schema={{
196-
type: 'object',
197-
properties: prop.properties,
198-
description: prop.description,
199-
} as JsonSchemaType}
200-
value={params[key] as JsonValue ?? {}}
195+
schema={
196+
{
197+
type: "object",
198+
properties: prop.properties,
199+
description: prop.description,
200+
} as JsonSchemaType
201+
}
202+
value={(params[key] as JsonValue) ?? {}}
201203
onChange={(newValue: JsonValue) => {
202204
setParams({
203205
...params,
@@ -226,7 +228,7 @@ const ToolsTab = ({
226228
)}
227229
</div>
228230
);
229-
}
231+
},
230232
)}
231233
<Button onClick={() => callTool(selectedTool.name, params)}>
232234
<Send className="w-4 h-4 mr-2" />

0 commit comments

Comments
 (0)