Relocate components to routes

Author: kydecker

astro.config.mjs

@@ -4,6 +4,7 @@ import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import sanity from "@sanity/astro";
 import { defineConfig, passthroughImageService } from "astro/config";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   output: "server",
@@ -34,6 +35,53 @@ export default defineConfig({
     format: "file",
   },
   vite: {
+    build: {
+      rollupOptions: {
+        output: {
+          // Use a supported file pattern for Vite 5/Rollup 4
+          // @doc https://relative-ci.com/documentation/guides/vite-config
+          assetFileNames: "assets/[name].[hash][extname]",
+          chunkFileNames: "assets/[name].[hash].js",
+          entryFileNames: "assets/[name].[hash].js",
+          manualChunks(id) {
+            // Astro
+            if (id.includes("astro") || id.includes("@astrojs")) {
+              return "astro";
+            }
+
+            // Core component primitives
+            if (
+              id.includes("@radix-ui") ||
+              id.includes("react-aria") ||
+              id.includes("react-aria-components")
+            ) {
+              return "react-aria";
+            }
+
+            // Icons and visual components
+            if (id.includes("@maskito") || id.includes("@remixicon")) {
+              return "ui-components";
+            }
+
+            // USA states and counties dictionary
+            if (id.includes("typed-usa-states")) {
+              return "usa-states";
+            }
+
+            // PDF lib
+            if (id.includes("@cantoo/pdf-lib")) {
+              return "pdf";
+            }
+
+            // Analytics
+            if (id.includes("posthog-js")) {
+              return "analytics";
+            }
+          },
+        },
+      },
+    },
+    plugins: [tsconfigPaths()],
     ssr: {
       external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map(
         (i) => `node:${i}`,

biome.jsonc

@@ -13,6 +13,11 @@
       "!worker-configuration.d.ts"
     ]
   },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
   "formatter": {
     "enabled": true,
     "indentStyle": "space"

package.json

@@ -113,6 +113,7 @@
     "postcss-utopia": "^1.1.0",
     "sharp": "^0.34.5",
     "storybook": "^10.0.8",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "4.0.13",
     "wrangler": "^4.50.0"
   },

pnpm-lock.yaml

@@ -34,15 +34,25 @@ export function ComboBox<T extends object>({
   autoComplete,
   children,
   className,
+  name,
   ...props
 }: ComboBoxProps<T>) {
   return (
-    <AriaComboBox className={clsx("namesake-combobox", className)} {...props}>
-      {({ isInvalid }) => (
+    <AriaComboBox
+      className={clsx("namesake-combobox", className)}
+      name={name}
+      {...props}
+    >
+      {({ isInvalid, isRequired }) => (
         <>
           <Label>{label}</Label>
           <div className="namesake-combobox-container">
-            <Input placeholder={placeholder} autoComplete={autoComplete} />
+            <Input
+              placeholder={placeholder}
+              autoComplete={autoComplete}
+              required={isRequired}
+              name={name}
+            />
             <FieldButton>
               <RiArrowDownSLine size={20} />
             </FieldButton>

src/components/react/common/ComboBox/ComboBox.tsx

@@ -40,19 +40,6 @@ describe("CheckboxGroupField", () => {
     }
   });
 
-  it("displays guidance for checkbox groups", () => {
-    renderWithFormProvider(
-      <CheckboxGroupField
-        name="reasonForChangingName"
-        label="Test Label"
-        options={mockOptions}
-      />,
-    );
-
-    const guidance = screen.getByText("Select all that apply:");
-    expect(guidance).toBeInTheDocument();
-  });
-
   it("allows selecting a checkbox option", async () => {
     renderWithFormProvider(
       <CheckboxGroupField

src/components/react/forms/CheckboxGroupField/CheckboxGroupField.test.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FormProvider, type UseFormReturn } from "react-hook-form";
+import {
+  FormNavigation,
+  FormReviewStep,
+  FormTitleStep,
+} from "~/components/react/forms";
 import { Form } from "../../common/Form";
-import { FormNavigation } from "../FormNavigation";
-import { FormReviewStep } from "../FormReviewStep";
-import { FormTitleStep } from "../FormTitleStep";
 import { FormStepContext } from "./FormStepContext";
 import "./FormContainer.css";
 

src/components/react/forms/FormContainer/FormContainer.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { FormStepContext } from "../FormContainer/FormStepContext";
-import { FormNavigation } from "./FormNavigation";
+import { FormNavigation, FormStepContext } from "~/components/react/forms";
 
 const meta: Meta<typeof FormNavigation> = {
   component: FormNavigation,

src/components/react/forms/FormContainer/index.ts

@@ -1,7 +1,7 @@
 import { RiArrowLeftLine, RiArrowRightLine } from "@remixicon/react";
+import { useFormStep } from "~/components/react/forms";
 import { Button } from "../../common/Button";
 import { ProgressBar } from "../../common/ProgressBar";
-import { useFormStep } from "../FormContainer";
 import "./FormNavigation.css";
 import { Fragment } from "react/jsx-runtime";