[Docs Site] Support JSON arrays in APIRequest and CURL (#21297)

Author: KianNH

src/components/APIRequest.astro

@@ -8,13 +8,15 @@ import Details from "./Details.astro";
 
 type Props = z.input<typeof props>;
 
+const Record = z.record(z.string(), z.any());
+
 const props = z
 	.object({
 		path: z.string(),
 		method: z.enum(["GET", "HEAD", "POST", "PUT", "DELETE", "PATCH"]),
 		parameters: z.record(z.string(), z.any()).optional(),
-		json: z.record(z.string(), z.any()).optional(),
-		form: z.record(z.string(), z.any()).optional(),
+		json: z.union([Record, z.array(Record)]).optional(),
+		form: Record.optional(),
 	})
 	.strict();
 
@@ -109,17 +111,27 @@ const jsonSchema = requestBody?.content?.["application/json"]?.schema as
 	| undefined;
 
 if (jsonSchema?.required) {
-	const providedProperties = Object.keys(json ?? {});
-	const requiredProperties = jsonSchema.required;
-
-	const missingProperties = requiredProperties.filter(
-		(property) => !providedProperties.includes(property),
-	);
+	const checkProperties = (obj?: object) => {
+		const providedProperties = Object.keys(obj ?? {});
+		const requiredProperties = jsonSchema.required!;
 
-	if (missingProperties.length > 0) {
-		throw new Error(
-			`[APIRequest] Missing the following required properties for ${method} ${path}: ${missingProperties.join(", ")}`,
+		const missingProperties = requiredProperties.filter(
+			(property) => !providedProperties.includes(property),
 		);
+
+		if (missingProperties.length > 0) {
+			throw new Error(
+				`[APIRequest] Missing the following required properties for ${method} ${path}: ${missingProperties.join(", ")}`,
+			);
+		}
+	};
+
+	if (Array.isArray(json)) {
+		for (const obj of json) {
+			checkProperties(obj);
+		}
+	} else {
+		checkProperties(json);
 	}
 }
 
@@ -136,7 +148,9 @@ const tokenGroups = operation["x-api-token-group"];
 			</span>
 			<ul>
 				{tokenGroups.map((group) => (
-					<li><code>{group}</code></li>
+					<li>
+						<code>{group}</code>
+					</li>
 				))}
 			</ul>
 		</Details>

src/components/CURL.astro

@@ -5,14 +5,16 @@ import { Code } from "@astrojs/starlight/components";
 
 type Props = z.input<typeof props>;
 
+const Record = z.record(z.string(), z.any());
+
 const props = z.object({
 	method: z
 		.enum(["GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"])
 		.default("GET"),
 	url: z.string().url(),
 	headers: z.record(z.string(), z.string()).default({}),
-	json: z.record(z.string(), z.any()).optional(),
-	form: z.record(z.string(), z.any()).optional(),
+	json: z.union([Record, z.array(Record)]).optional(),
+	form: Record.optional(),
 	code: z
 		.custom<Omit<ComponentProps<typeof Code>, "code" | "lang">>()
 		.optional(),

src/content/docs/style-guide/components/api-request.mdx

@@ -39,6 +39,21 @@ import { APIRequest } from "~/components";
 		metadata: '{"key":"value"}'
 	}}
 />
+
+<APIRequest
+	path="/zones/{zone_id}/cloud_connector/rules"
+	method="PUT"
+	json={[
+		{
+			expression: 'http.request.uri.path wildcard "/images/*"',
+			provider: "cloudflare_r2",
+			description: "Connect to R2 bucket containing images",
+			parameters: {
+				host: "mybucketcustomdomain.example.com",
+			},
+		},
+	]}
+/>
 ```
 
 ## `<APIRequest>` Props
@@ -71,7 +86,7 @@ If not provided, the component will default to an environment variable. For exam
 
 ### `json`
 
-**type:** `Record<string, any>`
+**type:** `Record<string, any> | Record<string, any>[]`
 
 The JSON payload to send.
 

src/content/docs/style-guide/components/curl.mdx

@@ -66,7 +66,7 @@ The headers to include in the request.
 
 ### `json`
 
-**type:** `Record<string, any>`
+**type:** `Record<string, any> | Record<string, any>[]`
 
 JSON data to include in the request.