Merge branch 'jakehwll/implement-storybook' into jakehwll/implement-chromatic

Author: jakehwll

.storybook/preview.ts

@@ -35,6 +35,20 @@ if (
 	document.head.appendChild(link);
 }
 
+// This allows the system viewing the storybook to use the same font
+// stack as vscode, which is important for accurate rendering of text.
+const getDefaultFontStack = () => {
+	if (navigator.userAgent.includes("Linux")) {
+		return 'system-ui, "Ubuntu", "Droid Sans", sans-serif';
+	} else if (navigator.userAgent.includes("Mac")) {
+		return "-apple-system, BlinkMacSystemFont, sans-serif";
+	} else if (navigator.userAgent.includes("Windows")) {
+		return '"Segoe WPC", "Segoe UI", sans-serif';
+	} else {
+		return "sans-serif";
+	}
+};
+
 const preview: Preview = {
 	parameters: {
 		layout: "centered",
@@ -77,6 +91,9 @@ const preview: Preview = {
 				"div",
 				{
 					id: "root",
+					style: {
+						fontFamily: getDefaultFontStack(),
+					},
 				},
 				createElement(Story),
 			);

packages/tasks/src/components/TasksPanel.stories.tsx

@@ -1,6 +1,6 @@
 import { task } from "@repo/mocks";
 import { withQueryClient } from "@repo/storybook-utils";
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
 
 import { withTasksStyles } from "../utils/storybook";
 
@@ -36,36 +36,45 @@ export const Default: Story = {
 	},
 };
 
-// export const CollapsibleToggle: Story = {
-// 	args: {
-// 		tasks: [
-// 			task({ id: "task-1" }),
-// 			task({ id: "task-2" }),
-// 			task({ id: "task-3" }),
-// 		],
-// 		templates: [],
-// 		persisted: {
-// 			initialCreateExpanded: false,
-// 			initialHistoryExpanded: false,
-// 			save: fn(),
-// 		},
-// 	},
-// 	play: async ({ canvasElement }) => {
-// 		// Find all vscode-collapsible elements
-// 		const collapsibles = canvasElement.querySelectorAll("vscode-collapsible");
+export const CollapsibleToggle: Story = {
+	args: {
+		tasks: [
+			task({ id: "task-1" }),
+			task({ id: "task-2" }),
+			task({ id: "task-3" }),
+		],
+		templates: [],
+		persisted: {
+			initialCreateExpanded: false,
+			initialHistoryExpanded: false,
+			save: fn(),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		// Find all vscode-collapsible elements
+		const collapsibles =
+			canvasElement.querySelectorAll<HTMLElement>("vscode-collapsible");
+
+		// Should have two collapsible sections
+		await expect(collapsibles.length).toBe(2);
 
-// 		// Should have two collapsible sections
-// 		await expect(collapsibles.length).toBe(2);
+		// Both should be initially closed
+		await expect(collapsibles[0].hasAttribute("open")).toBe(false);
+		await expect(collapsibles[1].hasAttribute("open")).toBe(false);
 
-// 		// Both should be initially closed
-// 		await expect(collapsibles[0].hasAttribute("open")).toBe(false);
-// 		await expect(collapsibles[1].hasAttribute("open")).toBe(false);
+		// Simulate the collapsible toggle event that would be fired when clicking
+		const toggleEvent = new CustomEvent("vsc-collapsible-toggle", {
+			detail: { open: true },
+			bubbles: true,
+		});
+		collapsibles[0].dispatchEvent(toggleEvent);
 
-// 		// Click the first collapsible to toggle it
-// 		await userEvent.click(collapsibles[0]);
-// 		await expect(collapsibles[0].hasAttribute("open")).toBe(true);
-// 	},
-// };
+		// Wait for the state to update and the open attribute to be set
+		await waitFor(() => {
+			expect(collapsibles[0].hasAttribute("open")).toBe(true);
+		});
+	},
+};
 
 export const TaskSelection: Story = {
 	args: {