Update @testing-library/user-event to fix :check

There's a bug in 14.3.0 that causes types to not be resolved,
testing-library/user-event#1146 (comment)
provides a work around.

package.json

@@ -11,6 +11,7 @@
     "node": "~21.6"
   },
   "resolutions": {
-    "@sentry/svelte@npm:7.98.0": "patch:@sentry/svelte@npm%3A7.98.0#~/.yarn/patches/@sentry-svelte-npm-7.98.0-3cd6521606.patch"
+    "@sentry/svelte@npm:7.98.0": "patch:@sentry/svelte@npm%3A7.98.0#~/.yarn/patches/@sentry-svelte-npm-7.98.0-3cd6521606.patch",
+    "@testing-library/user-event@npm:14.3.0": "npm:@testing-library/user-event@^14.5.0"
   }
 }

projects/frontend/moon.yml

@@ -79,10 +79,12 @@ tasks:
       - "dev"
       - "-p"
       - "6006"
+    local: true
     platform: node
   storybook-build:
     command:
       - "yarn"
       - "storybook"
       - "build"
+    local: true
     platform: node

projects/frontend/src/stories/Button.stories.ts

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
+import type { Meta, StoryObj } from "@storybook/svelte";
 
-import Button from './Button.svelte';
+import Button from "./Button.svelte";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
     size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
     },
   },
 } satisfies Meta<Button>;
@@ -23,26 +23,26 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     primary: true,
-    label: 'Button',
+    label: "Button",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    label: 'Button',
+    label: "Button",
   },
 };
 
 export const Large: Story = {
   args: {
-    size: 'large',
-    label: 'Button',
+    size: "large",
+    label: "Button",
   },
 };
 
 export const Small: Story = {
   args: {
-    size: 'small',
-    label: 'Button',
+    size: "small",
+    label: "Button",
   },
 };

projects/frontend/src/stories/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import './button.css';
+  import "./button.css";
 
   /**
    * Is this the principal call to action on the page?
@@ -13,20 +13,20 @@
   /**
    * How large should the button be?
    */
-  export let size: 'small' | 'medium' | 'large' = 'medium';
+  export let size: "small" | "medium" | "large" = "medium";
   /**
    * Button contents
    */
-  export let label: string = '';
+  export let label: string = "";
 
-  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : "";
 </script>
 
 <button
   type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  class={["storybook-button", `storybook-button--${size}`, mode].join(" ")}
   {style}
   on:click
 >

projects/frontend/src/stories/Configure.mdx

@@ -15,21 +15,23 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      marginLeft: "4px",
+      display: "inline-block",
+      shapeRendering: "inherit",
+      verticalAlign: "middle",
+      fill: "currentColor",
+      "path fill": "currentColor",
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>

projects/frontend/src/stories/Header.stories.ts

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-import Header from './Header.svelte';
+import type { Meta, StoryObj } from "@storybook/svelte";
+import Header from "./Header.svelte";
 
 const meta = {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } satisfies Meta<Header>;
 
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
+      name: "Jane Doe",
     },
   },
 };

projects/frontend/src/stories/Header.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import './header.css';
-  import Button from './Button.svelte';
+  import "./header.css";
+  import Button from "./Button.svelte";
 
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher } from "svelte";
 
   export let user: { name: string } | null = null;
 
   const dispatch = createEventDispatcher();
 
   function onLogin(event: MouseEvent) {
-    dispatch('login', event);
+    dispatch("login", event);
   }
   function onLogout(event: MouseEvent) {
-    dispatch('logout', event);
+    dispatch("logout", event);
   }
   function onCreateAccount(event: MouseEvent) {
-    dispatch('createAccount', event);
+    dispatch("createAccount", event);
   }
 </script>
 

projects/frontend/src/stories/Page.stories.ts

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-import { within, userEvent, expect } from '@storybook/test';
+import type { Meta, StoryObj } from "@storybook/svelte";
+import { within, userEvent, expect } from "@storybook/test";
 
-import Page from './Page.svelte';
+import Page from "./Page.svelte";
 
 const meta = {
-  title: 'Example/Page',
+  title: "Example/Page",
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } satisfies Meta<Page>;
 
@@ -21,12 +21,12 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    const loginButton = canvas.getByRole("button", { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
     await expect(loginButton).not.toBeInTheDocument();
 
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
   },
 };

projects/frontend/src/stories/Page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import './page.css';
-  import Header from './Header.svelte';
+  import "./page.css";
+  import Header from "./Header.svelte";
 
   let user: { name: string } | null = null;
 </script>
 
 <article>
   <Header
     {user}
-    on:login={() => (user = { name: 'Jane Doe' })}
+    on:login={() => (user = { name: "Jane Doe" })}
     on:logout={() => (user = null)}
-    on:createAccount={() => (user = { name: 'Jane Doe' })}
+    on:createAccount={() => (user = { name: "Jane Doe" })}
   />
 
   <section class="storybook-page">

projects/frontend/src/stories/button.css

@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;

projects/frontend/src/stories/header.css

@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

projects/frontend/src/stories/page.css

@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;

yarn.lock

@@ -3431,12 +3431,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:14.3.0":
-  version: 14.3.0
-  resolution: "@testing-library/user-event@npm:14.3.0"
+"@testing-library/user-event@npm:@testing-library/user-event@^14.5.0":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
     "@testing-library/dom": ">=7.21.4"
-  checksum: 8a0e708709f2510287568dff668bc7d6f5c4e7e17407452b7aa0fcf74732dccf511c63fc76ac514d753cb1f0586c1def59ba7f5245a9523715d37a8f198745d3
+  checksum: 68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
   languageName: node
   linkType: hard