Move app to src and use import aliases (#66)

crudh · web-flow · commit 3ca9c53bbb39 · 2025-03-03T23:14:27.000+01:00
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: "./app",
+  testDir: "./src/app",
   testMatch: "*.spec.ts",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -1,8 +1,8 @@
 "use server";
 
-import type { GifsResult } from "../types/Gif";
-import { searchGifs, shareEvent } from "../api/tenor";
-import { deployEnv } from "../constants";
+import { deployEnv } from "@/constants";
+import { searchGifs, shareEvent } from "@/api/tenor";
+import type { GifsResult } from "@/types/Gif";
 
 export const handleSearchGifs = async (
   searchTerm: string,
diff --git a/src/api/tenor.ts b/src/api/tenor.ts
@@ -1,12 +1,12 @@
 import { cache } from "react";
-import type { Gif, GifsResult, SearchOptions } from "../types/Gif";
 import {
   gifLimit,
   tenorApiKey,
   tenorBaseUrl,
   tenorClientKey,
-} from "../constants";
-import type { TenorGif, TenorRequestType, TenorResponse } from "../types/Tenor";
+} from "@/constants";
+import type { Gif, GifsResult, SearchOptions } from "@/types/Gif";
+import type { TenorGif, TenorRequestType, TenorResponse } from "@/types/Tenor";
 
 const baseParams = {
   key: tenorApiKey,
diff --git a/src/app/error.spec.ts b/src/app/error.spec.ts
@@ -1,10 +1,7 @@
-import { expect, type Page } from "@playwright/test";
-import { test } from "../src/test/browser/fixtures";
-import {
-  tenorFeaturedHandler,
-  tenorSearchHandler,
-} from "../src/test/api/tenor";
-import { testLayout } from "../src/test/browser/shared";
+import { type Page, expect } from "@playwright/test";
+import { tenorFeaturedHandler, tenorSearchHandler } from "@/test/api/tenor";
+import { test } from "@/test/browser/fixtures";
+import { testLayout } from "@/test/browser/shared";
 
 const testPage = async (page: Page) => {
   await testLayout(page);
diff --git a/src/app/error.tsx b/src/app/error.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
-import { Search } from "../src/components/Search";
-import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
+import { Analytics } from "@vercel/analytics/react";
+import { Search } from "@/components/Search";
 
 export const metadata: Metadata = {
   title: "gifs.run - the fastest way to share gifs",
diff --git a/src/app/not-found.spec.ts b/src/app/not-found.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
-import { test } from "../src/test/browser/fixtures";
-import { testLayout } from "../src/test/browser/shared";
+import { test } from "@/test/browser/fixtures";
+import { testLayout } from "@/test/browser/shared";
 
 test("page", async ({ page, baseUrl }) => {
   await page.goto(`${baseUrl}/dskfjsdkjfk`);
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
diff --git a/src/app/page.spec.ts b/src/app/page.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "@playwright/test";
-import { test } from "../src/test/browser/fixtures";
-import { getTabKey } from "../src/test/browser/utils";
-import { mockedFeaturedResponse } from "../src/test/api/tenor/mocks/featuredResponse";
-import { testLayout } from "../src/test/browser/shared";
-import { gifLimit } from "../src/constants";
+import { gifLimit } from "@/constants";
+import { mockedFeaturedResponse } from "@/test/api/tenor/mocks/featuredResponse";
+import { test } from "@/test/browser/fixtures";
+import { testLayout } from "@/test/browser/shared";
+import { getTabKey } from "@/test/browser/utils";
 
 test("initial render", async ({ page, baseUrl }) => {
   await page.goto(baseUrl);
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
-import { trendingGifs } from "../src/api/tenor";
-import { GifPreview } from "../src/components/GifPreview";
-import { GifsGrid } from "../src/components/GifsGrid";
+import { trendingGifs } from "@/api/tenor";
+import { GifsGrid } from "@/components/GifsGrid";
+import { GifPreview } from "@/components/GifPreview";
 
 // 24 hours
 export const revalidate = 86400;
diff --git a/src/app/search/[searchTerm]/page.spec.ts b/src/app/search/[searchTerm]/page.spec.ts
@@ -1,9 +1,9 @@
 import { expect } from "@playwright/test";
-import { test } from "../../../src/test/browser/fixtures";
-import { getTabKey } from "../../../src/test/browser/utils";
-import { mockedSearchResponse } from "../../../src/test/api/tenor/mocks/searchResponse";
-import { testLayout } from "../../../src/test/browser/shared";
-import { gifLimit } from "../../../src/constants";
+import { gifLimit } from "@/constants";
+import { mockedSearchResponse } from "@/test/api/tenor/mocks/searchResponse";
+import { test } from "@/test/browser/fixtures";
+import { testLayout } from "@/test/browser/shared";
+import { getTabKey } from "@/test/browser/utils";
 
 test("initial render", async ({ page, baseUrl }) => {
   await page.goto(`${baseUrl}/search/dog`);
diff --git a/src/app/search/[searchTerm]/page.tsx b/src/app/search/[searchTerm]/page.tsx
@@ -1,7 +1,7 @@
-import { searchGifs } from "../../../src/api/tenor";
-import { GifPreview } from "../../../src/components/GifPreview";
-import { GifsGrid } from "../../../src/components/GifsGrid";
-import { MoreGifs } from "../../../src/components/MoreGifs";
+import { searchGifs } from "@/api/tenor";
+import { GifPreview } from "@/components/GifPreview";
+import { GifsGrid } from "@/components/GifsGrid";
+import { MoreGifs } from "@/components/MoreGifs";
 
 // 24 hours
 export const revalidate = 86400;
diff --git a/src/app/search/page.spec.ts b/src/app/search/page.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from "@playwright/test";
-import { test } from "../../src/test/browser/fixtures";
+import { test } from "@/test/browser/fixtures";
 
 test("redirection to landing page", async ({ page, baseUrl }) => {
   await page.goto(`${baseUrl}/search`);
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
diff --git a/src/components/Clipboard.tsx b/src/components/Clipboard.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useState, type KeyboardEvent } from "react";
-import { IconClipboard } from "../icons/IconClipboard";
-import type { Gif } from "../types/Gif";
-import { handleShared } from "../actions";
+import { type KeyboardEvent, useState } from "react";
+import { handleShared } from "@/actions";
+import { IconClipboard } from "@/icons/IconClipboard";
+import type { Gif } from "@/types/Gif";
 
 const onKeyboardSelect = (
   event: KeyboardEvent<HTMLDivElement>,
diff --git a/src/components/GifPreview.tsx b/src/components/GifPreview.tsx
@@ -2,8 +2,8 @@
 "use client";
 
 import { useState } from "react";
-import type { Gif } from "../types/Gif";
-import { Clipboard } from "./Clipboard";
+import { Clipboard } from "@/components/Clipboard";
+import type { Gif } from "@/types/Gif";
 
 export const GifPreview = ({
   gif,
diff --git a/src/components/MoreGifs.tsx b/src/components/MoreGifs.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import { startTransition, useActionState, useEffect, useState } from "react";
-import type { Gif, GifsResult } from "../types/Gif";
-import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
-import { handleSearchGifs } from "../actions";
-import { IconSpinner } from "../icons/IconSpinner";
-import { GifPreview } from "./GifPreview";
+import { handleSearchGifs } from "@/actions";
+import type { Gif, GifsResult } from "@/types/Gif";
+import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
+import { IconSpinner } from "@/icons/IconSpinner";
+import { GifPreview } from "@/components/GifPreview";
 
 export const MoreGifs = ({
   searchTerm,
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useRouter, useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useActionState, useRef } from "react";
-import { IconSpinner } from "../icons/IconSpinner";
+import { IconSpinner } from "@/icons/IconSpinner";
 
 export const Search = () => {
   const router = useRouter();
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,5 @@
-import type { Environment } from "./types/Environment";
-import { isEnvironment } from "./types/Environment";
+import type { Environment } from "@/types/Environment";
+import { isEnvironment } from "@/types/Environment";
 
 export const gifLimit = 50;
 export const tenorApiKey = process.env.TENOR_API_KEY ?? "";
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
@@ -1,5 +1,4 @@
-import type { RefObject } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type RefObject } from "react";
 
 export const useIntersectionObserver = <T extends HTMLElement>(): [
   ref: RefObject<T | null>,
diff --git a/src/test/api/defaultHandlers.ts b/src/test/api/defaultHandlers.ts
@@ -2,7 +2,7 @@ import {
   tenorFeaturedHandler,
   tenorRegisterShareHandler,
   tenorSearchHandler,
-} from "./tenor";
+} from "@/test/api/tenor";
 
 export const defaultHandlers = [
   tenorFeaturedHandler(),
diff --git a/src/test/api/tenor/index.ts b/src/test/api/tenor/index.ts
@@ -1,9 +1,9 @@
 import { HttpResponse, http } from "msw";
-import type { TenorResponse } from "../../../types/Tenor";
-import { tenorBaseUrl } from "../../../constants";
-import { mockedFeaturedResponse } from "./mocks/featuredResponse";
-import { mockedSearchResponse } from "./mocks/searchResponse";
-import { isOkStatus } from "../../../utils/net";
+import { tenorBaseUrl } from "@/constants";
+import { mockedFeaturedResponse } from "@/test/api/tenor/mocks/featuredResponse";
+import { mockedSearchResponse } from "@/test/api/tenor/mocks/searchResponse";
+import type { TenorResponse } from "@/types/Tenor";
+import { isOkStatus } from "@/utils/net";
 
 export const tenorFeaturedHandler = (
   status: number = 200,
diff --git a/src/test/api/tenor/mocks/featuredResponse.ts b/src/test/api/tenor/mocks/featuredResponse.ts
@@ -1,4 +1,4 @@
-import type { TenorResponse } from "../../../../types/Tenor";
+import type { TenorResponse } from "@/types/Tenor";
 
 export const mockedFeaturedResponse = {
   locale: "en",
diff --git a/src/test/api/tenor/mocks/searchResponse.ts b/src/test/api/tenor/mocks/searchResponse.ts
@@ -1,4 +1,4 @@
-import type { TenorResponse } from "../../../../types/Tenor";
+import type { TenorResponse } from "@/types/Tenor";
 
 export const mockedSearchResponse = {
   results: [
diff --git a/src/test/browser/fixtures.ts b/src/test/browser/fixtures.ts
@@ -1,12 +1,11 @@
 import { test as base } from "@playwright/test";
 import { type Server, createServer } from "http";
-import type { SetupServerApi } from "msw/node";
-import { setupServer } from "msw/node";
+import { setupServer, type SetupServerApi } from "msw/node";
 import type { AddressInfo } from "net";
 import next from "next";
 import path from "path";
 import { parse } from "url";
-import { defaultHandlers } from "../api/defaultHandlers";
+import { defaultHandlers } from "@/test/api/defaultHandlers";
 
 export const test = base.extend<
   { requestInterceptor: SetupServerApi },
diff --git a/src/test/browser/shared.ts b/src/test/browser/shared.ts
@@ -1,4 +1,4 @@
-import { expect, type Page } from "@playwright/test";
+import { type Page, expect } from "@playwright/test";
 
 export const testLayout = async (page: Page) => {
   await expect(page).toHaveTitle("gifs.run - the fastest way to share gifs");
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,6 +14,9 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "plugins": [
       {
         "name": "next"
