feat: bump deps

.github/actions/setup-node/action.yml

@@ -0,0 +1,18 @@
+name: "Setup Node.js + pnpm"
+description: "..."
+
+runs:
+  using: composite
+  steps:
+    - name: Setup pnpm
+      uses: pnpm/[email protected]
+
+    - name: Setup Node.js
+      uses: actions/[email protected]
+      with:
+        node-version: "lts/*"
+        cache: "pnpm"
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/dependabot.yml

@@ -8,3 +8,11 @@ updates:
       actions:
         patterns:
           - "*"
+  - package-ecosystem: "github-actions"
+    directory: "/.github/actions/setup-node"
+    schedule:
+      interval: "weekly"
+    groups:
+      actions:
+        patterns:
+          - "*"

.github/workflows/validate.yml

@@ -7,21 +7,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/[email protected].1
+        uses: actions/[email protected].4
 
-      - name: Install dependencies
-        uses: ./.github/actions/pnpm-install
+      - name: Set up Node.js
+        uses: ./.github/actions/setup-node
 
-      - name: Lint
-        run: pnpm lint
+      - name: Check
+        run: pnpm check
 
+      # TODO: cache playwright
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
 
+      - name: Build app for e2e tests
+        run: pnpm build
+
       - name: Run e2e tests
-        run: pnpm exec playwright test
+        run: pnpm e2e
 
-      - uses: actions/[email protected].0
+      - uses: actions/[email protected].3
         if: always()
         with:
           name: playwright-report

app/components/combobox/suggestion.tsx

@@ -1,5 +1,5 @@
 import DOMPurify from "dompurify";
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface Props extends HTMLAttributes<HTMLLIElement> {

app/components/icons.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type SVGAttributes } from "react";
+import { type SVGAttributes, forwardRef } from "react";
 
 export type IconProps = SVGAttributes<SVGSVGElement>;
 

app/components/inline-link.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+import { type AnchorHTMLAttributes, type ReactNode, forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 
 type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {

app/features/app/layout.tsx → app/components/layout.tsx

@@ -6,7 +6,7 @@ import { GitHub } from "~/components/icons";
 import { InlineLink } from "~/components/inline-link";
 import { Tooltip } from "~/components/tooltip";
 
-export function Layout({ children }: { children: ReactNode }) {
+export function MainLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex flex-grow flex-col items-center">
       <Header />
@@ -42,7 +42,7 @@ function Footer({ className }: { className: string }) {
           </a>
         </Tooltip>
       </div>
-      <p>
+      <div>
         Powered by{" "}
         <Tooltip label="node package registry">
           <InlineLink href="https://www.npmjs.com/">npm</InlineLink>
@@ -51,7 +51,7 @@ function Footer({ className }: { className: string }) {
         <Tooltip label="cdn">
           <InlineLink href="https://unpkg.com/">unpkg</InlineLink>
         </Tooltip>
-      </p>
+      </div>
     </footer>
   );
 }

app/features/package-search/package-search.tsx

@@ -3,7 +3,7 @@ import { useId, useRef, useState } from "react";
 
 import { Combobox } from "~/components/combobox";
 
-import { useSuggestions, type SuggestionsResponseData } from "./suggestions";
+import { type SuggestionsResponseData, useSuggestions } from "./suggestions";
 
 interface PackageFormElement extends HTMLFormElement {
   elements: HTMLFormControlsCollection & {
@@ -37,7 +37,7 @@ export function PackageSearch({ initialQuery = "" }: Props) {
   };
 
   return (
-    <Form ref={formRef} action="/package" method="get">
+    <Form ref={formRef} action="/package/" method="get">
       <input ref={submitRef} type="submit" className="hidden" />
       <Combobox
         id={comboboxId}

app/features/package-search/results/package-details.tsx

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 import { Code } from "~/components/icons";
 import { InlineLink } from "~/components/inline-link";
 import { Tooltip } from "~/components/tooltip";
-import { type PackageData } from "~/server-services/package-data";
+import { type PackageData } from "~/server-services/package-data/types";
 
 import { useSourceCodeIcon } from "./use-source-code-icon";
 

app/features/package-search/results/results.tsx

@@ -1,8 +1,8 @@
 import { Await } from "@remix-run/react";
 import { Suspense } from "react";
 
-import { isErrorResponse, type PackageDataLoaderData } from "~/server-services/package-data";
-
+import { isErrorResponse } from "~/server-services/package-data/errors";
+import { type PackageDataLoaderData } from "~/server-services/package-data/package-data.server";
 import { DeclarationFiles } from "./declaration-files";
 import { LoadingResults } from "./loading-results";
 import { PackageDetails } from "./package-details";

app/features/package-search/results/types-package-data.tsx

@@ -1,9 +1,6 @@
-import {
-  isErrorResponse,
-  type ErrorResponseData,
-  type PackageData,
-} from "~/server-services/package-data";
+import { type ErrorResponseData, isErrorResponse } from "~/server-services/package-data/errors";
 
+import { PackageData } from "~/server-services/package-data/types";
 import { PackageDetails } from "./package-details";
 import { ErrorIcon, ResultEntry, ResultType, SuccessIcon, WarningIcon } from "./results-entry";
 

app/mocks/npms-suggestions.response.ts

@@ -1,4 +1,4 @@
-import { rest } from "msw";
+import { http, HttpResponse, delay } from "msw";
 
 import { type SuggestionsResponseData } from "~/features/package-search/suggestions";
 
@@ -29,14 +29,16 @@ export function npmsSuggestionsReact() {
       highlight: "<em>react</em>-redux",
     },
   ];
-  return rest.get("https://api.npms.io/v2/search/suggestions", async (req, res, ctx) => {
-    return res(ctx.delay(), ctx.json(data));
+  return http.get("https://api.npms.io/v2/search/suggestions", async () => {
+    await delay();
+    return HttpResponse.json(data);
   });
 }
 
 export function npmsSuggestionsEmpty() {
   const data: SuggestionsResponseData[] = [];
-  return rest.get("https://api.npms.io/v2/search/suggestions", async (req, res, ctx) => {
-    return res(ctx.delay(), ctx.json(data));
+  return http.get("https://api.npms.io/v2/search/suggestions", async () => {
+    await delay();
+    return HttpResponse.json(data);
   });
 }