nextjs (#42)

* chore: Update package versions in pnpm-lock.yaml

* refactor: Update import paths to use "@acme/db"

This commit updates the import paths in the API to use "@acme/db" for 
consistency and clarity. The changes were made to improve the structure 
and organization of the codebase.

* refactor(nextjs): Remove unused code in Tanstack Route

Removed unused code related to route definition and type declarations in
order to clean up the codebase and improve maintainability.

* refactor: Use InputSearch component in ProjectDetailPage

 feat: Create WordDetailPage component
 chore: Update import path for auth module
 chore: Update import path for Session in UserNav
 chore: Update import path for signIn in signin page
 refactor: Remove unnecessary catch parameter
 chore: Update version of @tanstack/react-router and @tanstack/router-devtools
 chore: Add NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX to env configuration
 refactor: Remove unused PromptForm component

* refactor: Update GitHub setup path in CI workflow and remove unused comments and reference types

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup
-        uses: ./@acme/tooling/github/setup
+        uses: ./@acme/github/setup
 
       - name: Copy env
         shell: bash
@@ -40,7 +40,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup
-        uses: ./@acme/tooling/github/setup
+        uses: ./@acme/github/setup
 
       - name: Format
         run: pnpm format
@@ -51,7 +51,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup
-        uses: ./@acme/tooling/github/setup
+        uses: ./@acme/github/setup
 
       - name: Typecheck
         run: pnpm typecheck

.nvmrc

@@ -1 +1 @@
-20.16
+20.17

@acme/tailwind/eslint.config.js

@@ -1,6 +1,4 @@
-// FIXME: This kinda stinks...
-/// <reference types="../../tooling/eslint/types.d.ts" />
-
 import baseConfig from "@acme/eslint-config/base";
 
+/** @type {import('typescript-eslint').Config} */
 export default [...baseConfig];

apps/nextjs/package.json

@@ -17,11 +17,13 @@
   "prettier": "@acme/prettier-config",
   "dependencies": {
     "@acme/api": "workspace:*",
+    "@acme/auth": "workspace:*",
     "@acme/hooks": "workspace:*",
     "@acme/tts": "workspace:*",
     "@acme/ui": "workspace:*",
     "@acme/utils": "workspace:*",
     "@acme/validators": "workspace:*",
+    "@ant-design/colors": "^7.1.0",
     "@excalidraw/excalidraw": "^0.17.5",
     "@headlessui/react": "^2.1.2",
     "@next/bundle-analyzer": "^14.2.5",
@@ -32,8 +34,8 @@
     "@stitches/react": "^1.2.8",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "catalog:",
-    "@tanstack/react-router": "^1.48.1",
-    "@tanstack/router-devtools": "^1.48.1",
+    "@tanstack/react-router": "^1.49.1",
+    "@tanstack/router-devtools": "^1.49.1",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,7 +1,7 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 import { appRouter, createTRPCContext } from "@acme/api";
-import { auth } from "@acme/api/auth";
+import { auth } from "@acme/auth";
 
 export const runtime = "nodejs";
 // export const runtime = "edge";

apps/nextjs/src/app/app/[lang]/(auth)/signin/page.tsx

@@ -1,7 +1,7 @@
 import type { SVGProps } from "react";
 import React from "react";
 
-import { signIn } from "@acme/api/authauth";
+import { signIn } from "@acme/auth";
 import { Button } from "@acme/ui/button";
 
 export default async function LoginPage({

apps/nextjs/src/app/app/[lang]/(dashboard)/_components/header/SignoutForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { signOut } from "@acme/api/auth";
+import { signOut } from "@acme/auth";
 
 export const SignoutForm = () => {
   return (

apps/nextjs/src/app/app/[lang]/(dashboard)/_components/header/UserNav.tsx

@@ -1,7 +1,7 @@
 // "use client";
 
-import type { Session } from "@acme/api/auth";
-import { signOut } from "@acme/api/auth";
+import type { Session } from "@acme/auth";
+import { signOut } from "@acme/auth";
 import { Avatar } from "@acme/ui/avatar";
 import { Button } from "@acme/ui/button";
 import { Dropdown } from "@acme/ui/dropdown";

apps/nextjs/src/app/app/[lang]/(dashboard)/_components/header/index.tsx

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
 import Link from "next/link";
 
-import { auth } from "@acme/api/auth";
+import { auth } from "@acme/auth";
 import { Button } from "@acme/ui/button";
 
 import { SignoutForm } from "./SignoutForm";

apps/nextjs/src/app/app/[lang]/(dashboard)/english/_components/Search.tsx → apps/nextjs/src/app/app/[lang]/(dashboard)/english/_components/Search.tsx_

@@ -1,15 +1,12 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { message, Popover, Spin } from "antd";
 import axios from "axios";
 
-import { useDebounce } from "@acme/hooks";
-import { InputSearch } from "@acme/ui/antd/input";
-import { Select } from "@acme/ui/antd/select";
-import { RadioOption } from "@acme/ui/radio";
+import type { RadioOption } from "@acme/ui/radio";
+import { InputSearch } from "@acme/ui/input";
+import { Select } from "@acme/ui/select";
 
-import { Link } from "~/routes/Link";
 import { api } from "~/trpc/react";
 
 export const Search = () => {
@@ -45,7 +42,9 @@ export const Search = () => {
         arrow={false}
         content={
           <div className="flex min-w-[500px] flex-col gap-2">
-            {!loading ? (
+            {loading ? (
+              <Spin size="small" />
+            ) : (
               options.map((o) => (
                 <Link
                   to="/english/dictionary/$word"
@@ -55,8 +54,6 @@ export const Search = () => {
                   {o.label}
                 </Link>
               ))
-            ) : (
-              <Spin size="small" />
             )}
           </div>
         }

apps/nextjs/src/app/app/[lang]/(dashboard)/english/page.tsx

@@ -1,11 +1,11 @@
 import { PageContainer } from "@acme/ui/pro/page-container";
 
-import { Search } from "./_components/Search";
+// import { Search } from "./_components/Search";
 
 export default function EnglishPage() {
   return (
     <PageContainer>
-      <Search />
+      {/* <Search /> */}
       <div className="container mt-12 flex flex-col items-center justify-center gap-4 px-4 py-8">
         <audio controls>
           <track kind="captions" />

apps/nextjs/src/app/app/[lang]/(dashboard)/projects/[slug]/page.tsx

@@ -8,7 +8,7 @@ import type { TableColumnDef } from "@acme/ui/table";
 import { AlertModal } from "@acme/ui/alert-modal";
 import { Button } from "@acme/ui/button";
 import { DeleteIcon, EditIcon } from "@acme/ui/icons";
-import { Search } from "@acme/ui/input";
+import { InputSearch } from "@acme/ui/input";
 import { PageContainer } from "@acme/ui/pro/page-container";
 import { Table } from "@acme/ui/table";
 import { message } from "@acme/ui/toast";
@@ -90,7 +90,7 @@ export default function ProjectDetailPage({
         // ),
       }}
     >
-      <Search placeholder="Search tasks..." />
+      <InputSearch placeholder="Search tasks..." />
       {/* <CreateInvoice /> */}
       {/* <Table columns={columns} dataSource={project.tasks} /> */}
       <TasksTable

apps/nextjs/src/app/app/[lang]/(dashboard)/projects/page.tsx

@@ -9,10 +9,12 @@ import { PageContainer } from "@acme/ui/pro/page-container";
 import { api } from "~/trpc/react";
 import ProjectModalForm from "./components/ProjectsForm";
 import { ProjectsTable } from "./components/ProjectsTable";
-import { ProjectsRoute } from "./routeDef";
 
-export default function ProjectsPage() {
-  const searchParams = ProjectsRoute.useSearch();
+export default function ProjectsPage({
+  searchParams,
+}: {
+  searchParams: { query: string; page: number; pageSize: number };
+}) {
   const listQuery = api.projects.all.useQuery(searchParams);
   const [currentRow, setCurrentRow] =
     useState<RouterOutputs["projects"]["all"]["data"][number]>();

apps/nextjs/src/app/app/[lang]/(dashboard)/theme/page.tsx

@@ -6,7 +6,7 @@ import { generate } from "@ant-design/colors";
 import { CodeBlock } from "@acme/ui/code-block";
 import { Input } from "@acme/ui/input";
 import { ExternalLink } from "@acme/ui/link";
-import { hexToHsl } from "@acme/utils";
+import { hexToHsl } from "@acme/utils/color";
 
 export default function ThemePage() {
   const [input, setInput] = useState<{
@@ -67,8 +67,8 @@ export default function ThemePage() {
           })
           .join("\n")}
       </CodeBlock>
-      {palette.map((c, i) => (
-        <div key={i} style={{ color: c }}>
+      {palette.map((c, index) => (
+        <div key={index} style={{ color: c }}>
           {c}
         </div>
       ))}
@@ -82,8 +82,8 @@ export default function ThemePage() {
           })
           .join("\n")}
       </CodeBlock>
-      {darkPalete.map((c, i) => (
-        <div key={i} style={{ color: c }}>
+      {darkPalete.map((c, index) => (
+        <div key={index} style={{ color: c }}>
           {c}
         </div>
       ))}

apps/nextjs/src/app/app/[lang]/(dashboard)/todo/_components/TodoTable.tsx → apps/nextjs/src/app/app/[lang]/(dashboard)/todo/_components/todo-table.tsx

@@ -2,36 +2,32 @@ import type {
   DatabaseObjectResponse,
   PageObjectResponse,
 } from "@notionhq/client/build/src/api-endpoints";
-import type { TableColumnsType } from "antd";
-import { Table } from "antd";
-
-import { TanstackTable, TanstackTableProps } from "@acme/ui/tanstack-table";
 
 export const TodoTable = ({
-  data,
-  properties,
+  data: __,
+  properties: _,
 }: {
   data: PageObjectResponse[];
   properties: DatabaseObjectResponse["properties"];
 }) => {
-  const columns: TanstackTableProps<PageObjectResponse>["columns"] =
-    Object.entries(properties).map(([key, value]) => {
-      const column: TanstackTableProps<PageObjectResponse>["columns"][number] =
-        {
-          id: key,
-          header: key,
-        };
-      // const record = props.row.original;
-      if (value.type === "title") {
-        column.cell = (props) => {
-          const prop = props.row.original.properties[key];
-          if (prop?.type === "title") {
-            return prop.title[0]?.plain_text;
-          }
-        };
-      }
-      return column;
-    });
+  // const columns: TableProps<PageObjectResponse>["columns"] =
+  //   Object.entries(properties).map(([key, value]) => {
+  //     const column: TableProps<PageObjectResponse>["columns"][number] =
+  //       {
+  //         id: key,
+  //         header: key,
+  //       };
+  //     // const record = props.row.original;
+  //     if (value.type === "title") {
+  //       column.cell = (props) => {
+  //         const prop = props.row.original.properties[key];
+  //         if (prop?.type === "title") {
+  //           return prop.title[0]?.plain_text;
+  //         }
+  //       };
+  //     }
+  //     return column;
+  //   });
   //   [
   //   {
   //     // title: "Task name",
@@ -66,11 +62,13 @@ export const TodoTable = ({
   //   },
   // ];
   return (
-    <TanstackTable
-      // rowKey="id"
-      columns={columns}
-      data={data}
-      // pagination={false}
-    />
+    <>
+      {/* <Table */}
+      {/*   // rowKey="id" */}
+      {/*   columns={columns} */}
+      {/*   data={data} */}
+      {/*   // pagination={false} */}
+      {/* /> */}
+    </>
   );
 };