feat(ui): enable storybook snapshot tests

- adds a process-compose namespace for running `storybook` and `luakit` together to replicate the `webkit`-based rendering that happens inside of `webview`
- adds some helper scripts for running storybook tests and updating snapshots, with documentation in the README.
- adds a `clan-app-ui-storybook` package which builds and tests the storybook, checking for rendering changes

Currently, we’re only doing markup-based snapshot tests. We’re also using headless chromium for the tests by default as I couldn't get webkit to work in the nix build.

As we’re only markup-based for the time being, this should be ok. But eventually I'd like to get it working with webkit.

pkgs/clan-app/ui/.storybook/main.ts

@@ -12,7 +12,6 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
@@ -27,6 +26,9 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  core: {
+    disableTelemetry: true,
+  },
 };
 
 export default config;

pkgs/clan-app/ui/.storybook/test-runner.ts

@@ -0,0 +1,12 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
+const config: TestRunnerConfig = {
+  async postVisit(page, context) {
+    // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
+    const elementHandler = await page.$("#storybook-root");
+    const innerHTML = await elementHandler.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;