Add harness workflow and Material showcase design system

This commit is contained in:
2026-03-23 17:30:30 +08:00
parent c570431dba
commit 5d02bf9df4
46 changed files with 3343 additions and 1068 deletions
+14 -10
View File
@@ -1,4 +1,9 @@
import { expect, test } from "@playwright/test";
import { expect, test, type Page } from "@playwright/test";
async function gotoStory(page: Page, storyId: string) {
await page.goto(`/iframe.html?id=${storyId}&viewMode=story`);
await expect(page).toHaveTitle(new RegExp(storyId, "i"), { timeout: 15_000 });
}
test("storybook button, select, and static-motion form stories stay interactive", async ({
page
@@ -6,21 +11,20 @@ test("storybook button, select, and static-motion form stories stay interactive"
await page.goto("/");
await expect(page).toHaveTitle(/storybook/i);
await page.goto("/iframe.html?id=components-button--playground&viewMode=story");
await gotoStory(page, "components-button--playground");
const button = page.getByRole("button", { name: "Save changes" });
await expect(button).toBeVisible();
await button.focus();
await expect(button).toBeFocused();
await page.goto("/iframe.html?id=components-select--playground&viewMode=story");
await gotoStory(page, "components-select--playground");
const selectTrigger = page.locator('[data-slot="trigger"]').first();
await expect(selectTrigger).toBeVisible();
await selectTrigger.click();
await expect(page.getByRole("option", { name: "Legal review" })).toBeVisible();
await page.goto(
"/iframe.html?id=components-form--launch-settings&viewMode=story&globals=motion:reduced"
);
await page.goto("/iframe.html?id=components-form--launch-settings&viewMode=story&globals=motion:reduced");
await expect(page).toHaveTitle(/components-form--launch-settings/i, { timeout: 15_000 });
await page.getByRole("textbox", { name: "Email address" }).fill("team@cadence.dev");
await page.getByRole("combobox", { name: "Review lane" }).click();
await page.getByRole("option", { name: "Legal" }).click();
@@ -32,7 +36,7 @@ test("storybook button, select, and static-motion form stories stay interactive"
});
test("storybook data table story stays interactive", async ({ page }) => {
await page.goto("/iframe.html?id=components-data-table--playground&viewMode=story");
await gotoStory(page, "components-data-table--playground");
const table = page.getByRole("table", { name: "Routing lanes" });
await expect(table).toBeVisible();
@@ -52,19 +56,19 @@ test("storybook data table story stays interactive", async ({ page }) => {
});
test("storybook overlay stories stay interactive", async ({ page }) => {
await page.goto("/iframe.html?id=components-dialog--playground&viewMode=story");
await gotoStory(page, "components-dialog--playground");
await page.getByRole("button", { name: "Open approval dialog" }).click();
await expect(page.getByRole("dialog", { name: "Launch this release?" })).toBeVisible();
await page.getByRole("button", { name: "Close dialog" }).click();
await expect(page.getByRole("dialog")).toHaveCount(0);
await page.goto("/iframe.html?id=components-popover--playground&viewMode=story");
await gotoStory(page, "components-popover--playground");
await page.getByRole("button", { name: "Inspect summary" }).click();
await expect(page.getByText("Release health")).toBeVisible();
await page.getByRole("button", { name: "Dismiss" }).click();
await expect(page.getByText("Release health")).toHaveCount(0);
await page.goto("/iframe.html?id=components-sheet--playground&viewMode=story");
await gotoStory(page, "components-sheet--playground");
await page.getByRole("button", { name: "Open right sheet" }).click();
await expect(page.getByRole("dialog", { name: "Launch settings" })).toBeVisible();
await page.getByRole("button", { name: "Close sheet" }).click();
+5 -4
View File
@@ -172,11 +172,12 @@ import {
DialogTrigger,
Input
} from "@ai-ui/ui";
import { setTheme } from "@ai-ui/tokens";
import { setDynamicColor, setTheme } from "@ai-ui/tokens";
import "./styles.css";
setTheme("morandi");
setTheme("violet");
setDynamicColor("#6750A4");
function App() {
return (
@@ -285,12 +286,12 @@ async function main() {
});
console.log("Verifying CommonJS package entrypoints");
await run(process.execPath, ["-e", 'const ui=require("@ai-ui/ui"); const tokens=require("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme){throw new Error("Missing CommonJS export.");}'], {
await run(process.execPath, ["-e", 'const ui=require("@ai-ui/ui"); const tokens=require("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme||!tokens.setDynamicColor){throw new Error("Missing CommonJS export.");}'], {
cwd: projectDir
});
console.log("Verifying ESM package entrypoints");
await run(process.execPath, ["--input-type=module", "-e", 'const ui=await import("@ai-ui/ui"); const tokens=await import("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme){throw new Error("Missing ESM export.");}'], {
await run(process.execPath, ["--input-type=module", "-e", 'const ui=await import("@ai-ui/ui"); const tokens=await import("@ai-ui/tokens"); if(!ui.Button||!tokens.setTheme||!tokens.setDynamicColor){throw new Error("Missing ESM export.");}'], {
cwd: projectDir
});