Add monorepo support to project (#682)

* feat: add monorepo support

* fix: correct relatedProjects structure in vercel.json

* update github actions with monorepo support

* removed legacy dep

* moved jsr config into web package

packages/web/src/__mocks__/README.md

@@ -0,0 +1,43 @@
+# Mocks Directory
+
+This directory contains mock implementations used by Vitest for testing.
+
+## Structure
+
+The directory structure mirrors the actual project structure to make mocking
+more intuitive:
+
+```
+__mocks__/
+├── components/
+│   └── UI/
+│       ├── Dialog.tsx
+│       ├── Button.tsx
+│       ├── Checkbox.tsx
+│       └── ...
+├── core/
+│   └── ...
+└── ...
+```
+
+## Auto-mocking
+
+Vitest will automatically use the mock files in this directory when the
+corresponding module is imported in tests. For example, when a test imports
+`@components/UI/Dialog.tsx`, Vitest will use
+`__mocks__/components/UI/Dialog.tsx` instead.
+
+## Creating New Mocks
+
+To create a new mock:
+
+1. Create a file in the same relative path as the original module
+2. Export the mocked functionality with the same names as the original
+3. Add a `vi.mock()` statement to `vitest.setup.ts` if needed
+
+## Mock Guidelines
+
+- Keep mocks as simple as possible
+- Use `data-testid` attributes for easy querying in tests
+- Implement just enough functionality to test the component
+- Use TypeScript types to ensure compatibility with the original module

packages/web/src/__mocks__/components/UI/Button.tsx

@@ -0,0 +1,21 @@
+import { vi } from "vitest";
+
+vi.mock("@components/UI/Button.tsx", () => ({
+  Button: ({ children, name, disabled, onClick }: {
+    children: React.ReactNode;
+    variant: string;
+    name: string;
+    disabled?: boolean;
+    onClick: () => void;
+  }) => (
+    <button
+      type="button"
+      name={name}
+      data-testid={`button-${name}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  ),
+}));

packages/web/src/__mocks__/components/UI/Checkbox.tsx

@@ -0,0 +1,19 @@
+import { vi } from "vitest";
+
+vi.mock("@components/UI/Checkbox.tsx", () => ({
+  Checkbox: (
+    { id, checked, onChange }: {
+      id: string;
+      checked: boolean;
+      onChange: () => void;
+    },
+  ) => (
+    <input
+      data-testid="checkbox"
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={onChange}
+    />
+  ),
+}));

packages/web/src/__mocks__/components/UI/Dialog/Dialog.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export const Dialog = ({ children, open }: {
+  children: React.ReactNode;
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) => open ? <div data-testid="dialog">{children}</div> : null;
+
+export const DialogContent = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => <div data-testid="dialog-content" className={className}>{children}</div>;
+
+export const DialogHeader = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <div data-testid="dialog-header">{children}</div>;
+
+export const DialogTitle = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <div data-testid="dialog-title">{children}</div>;
+
+export const DialogDescription = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div data-testid="dialog-description" className={className}>{children}</div>
+);
+
+export const DialogFooter = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => <div data-testid="dialog-footer" className={className}>{children}</div>;

packages/web/src/__mocks__/components/UI/Label.tsx

@@ -0,0 +1,15 @@
+import { vi } from "vitest";
+
+vi.mock("@components/UI/Label.tsx", () => ({
+  Label: (
+    { children, htmlFor, className }: {
+      children: React.ReactNode;
+      htmlFor: string;
+      className?: string;
+    },
+  ) => (
+    <label data-testid="label" htmlFor={htmlFor} className={className}>
+      {children}
+    </label>
+  ),
+}));

packages/web/src/__mocks__/components/UI/Link.tsx

@@ -0,0 +1,11 @@
+import { vi } from "vitest";
+
+vi.mock("@components/UI/Typography/Link.tsx", () => ({
+  Link: (
+    { children, href, className }: {
+      children: React.ReactNode;
+      href: string;
+      className?: string;
+    },
+  ) => <a data-testid="link" href={href} className={className}>{children}</a>,
+}));