Add a page that displays all components

Reviewers: #reviewers

Subscribers: jenkins-user

Differential Revision: https://hub.sealcode.org/D1451

package.json

@@ -59,7 +59,7 @@
 		"qs": "^6.12.0",
 		"sealious": "^0.19.6",
 		"stimulus": "^2.0.0",
-		"tempstream": "^0.3.15"
+		"tempstream": "^0.3.16"
 	},
 	"devDependencies": {
 		"@sealcode/ansi-html-stream": "^1.0.1",

src/back/jdd-components/image-demo/image-demo.jdd.tsx

@@ -43,6 +43,7 @@ export class ImageDemo extends Component<typeof component_arguments> {
 								height: 200,
 								objectFit: "cover",
 							},
+							alt: "demo",
 						})
 					)}
 				</div>
@@ -57,6 +58,7 @@ export class ImageDemo extends Component<typeof component_arguments> {
 								objectFit: "cover",
 							},
 							crop: { width: 200, height: 200 },
+							alt: "demo",
 						})
 					)}
 				</div>

src/back/jdd-components/registry.ts

@@ -0,0 +1,2 @@
+// this is to help IDEs see the .gitignored files
+export * from "./components.js";

src/back/routes/all-components.page.tsx

@@ -0,0 +1,36 @@
+import type { Context } from "koa";
+import { TempstreamJSX } from "tempstream";
+import { Page } from "@sealcode/sealgen";
+import html from "../html.js";
+import { registry } from "../jdd-components/components.js";
+import { jdd_context } from "../jdd-context.js";
+import { render } from "@sealcode/jdd";
+import { shuffle } from "../util.js";
+
+export const actionName = "AllComponents";
+
+export default new (class AllComponentsPage extends Page {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async canAccess(_: Context) {
+		return { canAccess: true, message: "" };
+	}
+
+	async render(ctx: Context) {
+		const components = registry.getAll();
+		const document = await Promise.all(
+			shuffle(Object.entries(components)).map(
+				async ([component_name, component]) => {
+					return {
+						component_name,
+						args: await component.getExampleValues(jdd_context),
+					};
+				}
+			)
+		);
+		return html(
+			ctx,
+			"AllComponents",
+			<div>{render(registry, document, jdd_context)}</div>
+		);
+	}
+})();

src/back/routes/all-components.test.ts

@@ -0,0 +1,40 @@
+import { withProdApp } from "../test_utils/with-prod-app.js";
+import { VERY_LONG_TEST_TIMEOUT, webhintURL } from "../test_utils/webhint.js";
+import { AllComponentsURL } from "./urls.js";
+import { getBrowser } from "../test_utils/browser-creator.js";
+import type { Browser, BrowserContext, Page } from "@playwright/test";
+
+describe("AllComponents webhint", () => {
+	it("doesn't crash", async function () {
+		return withProdApp(async ({ base_url, rest_api }) => {
+			await rest_api.get(AllComponentsURL);
+			await webhintURL(base_url + AllComponentsURL);
+			// alternatively you can use webhintHTML for faster but less precise scans
+			// or for scanning responses of requests that use some form of authorization:
+			// const response = await rest_api.get(AllComponentsURL);
+			// await webhintHTML(response);
+		});
+	}).timeout(VERY_LONG_TEST_TIMEOUT);
+});
+
+describe("AllComponents", () => {
+	let page: Page;
+	let browser: Browser;
+	let context: BrowserContext;
+
+	beforeEach(async () => {
+		browser = await getBrowser();
+		context = await browser.newContext();
+		page = await context.newPage();
+	});
+
+	afterEach(async () => {
+		await context.close();
+	});
+
+	it("works as expected", async function () {
+		return withProdApp(async ({ base_url }) => {
+			await page.goto(base_url + AllComponentsURL);
+		});
+	}).timeout(VERY_LONG_TEST_TIMEOUT);
+});

src/back/util.ts

@@ -20,3 +20,22 @@ export function UrlWithNewParams(
 ): string {
 	return `${ctx.path}?${qs.stringify(query_params)}`;
 }
+
+export function shuffle<T>(array: T[]): T[] {
+	const array_copy = [...array];
+	let currentIndex = array_copy.length;
+
+	// While there remain elements to shuffle...
+	while (currentIndex != 0) {
+		// Pick a remaining element...
+		const randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex--;
+
+		// And swap it with the current element.
+		[array_copy[currentIndex], array_copy[randomIndex]] = [
+			array_copy[randomIndex],
+			array_copy[currentIndex],
+		];
+	}
+	return array_copy;
+}