From da08ffd78814aaf2c296b773a0149e1ea18f1391 Mon Sep 17 00:00:00 2001 From: ujiro99 Date: Mon, 19 Oct 2026 08:49:59 +0900 Subject: [PATCH 01/18] refactor(hub): stop using Tailwind CSS and shadcn/ui The hub only serves the e2e test page and static data files, so a CSS framework brings no benefit. Replace Tailwind classes with plain CSS (globals.css + CSS Modules) and shadcn/ui components with native elements, keeping the test page DOM that e2e relies on unchanged. Also add E2E_HUB_BASE_URL to route the deployed hub to a local build so hub changes can be verified with e2e before deploying. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KWGX774FR5iixzXqS7CMpU --- packages/extension/e2e/fixtures.ts | 4 + packages/extension/e2e/utils/hubRoute.ts | 34 ++++ packages/hub/AGENTS.md | 16 +- packages/hub/components.json | 21 --- packages/hub/package.json | 10 +- packages/hub/postcss.config.mjs | 8 - packages/hub/src/app/[lang]/test/page.tsx | 131 ++++++++------- .../hub/src/app/[lang]/test/test.module.css | 120 +++++++++++++ packages/hub/src/app/globals.css | 154 +++++++---------- packages/hub/src/app/layout.tsx | 4 +- packages/hub/src/app/not-found.tsx | 35 +--- packages/hub/src/app/page.module.css | 77 +++------ packages/hub/src/app/page.tsx | 35 +--- packages/hub/src/components/Image.tsx | 3 +- .../src/components/LocaleSelector.module.css | 36 ++++ .../hub/src/components/LocaleSelector.tsx | 43 ++--- .../hub/src/components/MovedNotice.module.css | 87 ++++++++++ packages/hub/src/components/MovedNotice.tsx | 32 ++++ .../src/components/layout/Footer.module.css | 23 +++ packages/hub/src/components/layout/Footer.tsx | 10 +- .../src/components/layout/Header.module.css | 65 ++++++- packages/hub/src/components/layout/Header.tsx | 11 +- packages/hub/src/components/ui/button.tsx | 54 ------ packages/hub/src/components/ui/select.tsx | 159 ------------------ packages/hub/src/components/ui/separator.tsx | 31 ---- packages/hub/src/lib/__tests__/utils.test.ts | 40 ----- packages/hub/src/lib/utils.ts | 1 - packages/hub/tailwind.config.ts | 49 ------ packages/hub/vitest.config.ts | 1 - yarn.lock | 20 +-- 30 files changed, 609 insertions(+), 705 deletions(-) create mode 100644 packages/extension/e2e/utils/hubRoute.ts delete mode 100644 packages/hub/components.json delete mode 100644 packages/hub/postcss.config.mjs create mode 100644 packages/hub/src/app/[lang]/test/test.module.css create mode 100644 packages/hub/src/components/LocaleSelector.module.css create mode 100644 packages/hub/src/components/MovedNotice.module.css create mode 100644 packages/hub/src/components/MovedNotice.tsx create mode 100644 packages/hub/src/components/layout/Footer.module.css delete mode 100644 packages/hub/src/components/ui/button.tsx delete mode 100644 packages/hub/src/components/ui/select.tsx delete mode 100644 packages/hub/src/components/ui/separator.tsx delete mode 100644 packages/hub/tailwind.config.ts diff --git a/packages/extension/e2e/fixtures.ts b/packages/extension/e2e/fixtures.ts index 85ed61a3e..ae8aa8e6e 100644 --- a/packages/extension/e2e/fixtures.ts +++ b/packages/extension/e2e/fixtures.ts @@ -8,6 +8,7 @@ import path from "path" import { fileURLToPath } from "url" import { attachSWConsole } from "./utils/logConsole" import { fetchCfAuthToken } from "./utils/cfAuth" +import { routeHubToLocal } from "./utils/hubRoute" import { STORAGE_KEY, LOCAL_STORAGE_KEY, @@ -64,6 +65,9 @@ export const test = base.extend({ // and its early logs are lost before attachSWConsole is called. context.on("serviceworker", (worker) => attachSWConsole(worker)) + // Optionally serve the hub test page from a local build (E2E_HUB_BASE_URL). + await routeHubToLocal(context) + // Wait for the service worker to be ready before proceeding, so tests can interact with it immediately. let [sw] = context.serviceWorkers() if (!sw) { diff --git a/packages/extension/e2e/utils/hubRoute.ts b/packages/extension/e2e/utils/hubRoute.ts new file mode 100644 index 000000000..8a6168981 --- /dev/null +++ b/packages/extension/e2e/utils/hubRoute.ts @@ -0,0 +1,34 @@ +import type { BrowserContext } from "@playwright/test" + +const DEPLOYED_HUB_ORIGIN = "https://ujiro99.github.io" +const DEPLOYED_HUB_BASE_PATH = "/selection-command" + +/** + * Redirects requests for the deployed hub (GitHub Pages) to a locally served + * hub build, so that hub changes can be verified with e2e before deploying. + * + * Enabled only when E2E_HUB_BASE_URL is set (e.g. "http://localhost:3100"), + * pointing at a static server for `packages/hub/out`. + * The local build has no basePath, so both "/selection-command/*" pages and + * the root-relative "/_next/*" assets they reference are mapped to the + * server root. Extensionless paths are mapped to their exported ".html" file. + */ +export async function routeHubToLocal(context: BrowserContext): Promise { + const localBaseUrl = process.env.E2E_HUB_BASE_URL + if (!localBaseUrl) return + + await context.route(`${DEPLOYED_HUB_ORIGIN}/**`, async (route) => { + const url = new URL(route.request().url()) + let pathname = url.pathname + if (pathname.startsWith(DEPLOYED_HUB_BASE_PATH)) { + pathname = pathname.slice(DEPLOYED_HUB_BASE_PATH.length) || "/" + } + if (!/\.[a-z0-9]+$/i.test(pathname)) { + pathname = `${pathname.replace(/\/$/, "/index")}.html` + } + const response = await route.fetch({ + url: `${localBaseUrl}${pathname}${url.search}`, + }) + await route.fulfill({ response }) + }) +} diff --git a/packages/hub/AGENTS.md b/packages/hub/AGENTS.md index d0bc12a61..28e31622c 100644 --- a/packages/hub/AGENTS.md +++ b/packages/hub/AGENTS.md @@ -75,8 +75,9 @@ This file provides guidance to AI Agent when working with code in this repositor - `src/app/[lang]/layout.tsx`, `src/app/layout.tsx` - App Router の必須レイアウト（Header/Footer/LanguageProvider を保持） - `src/features/locale/` - 14言語分の辞書ファイル（layout.tsx が 無条件にバレルインポートするため削除できない） -- `src/components/ui/` - shadcn/ui のうち button, separator, select のみ残存 -- `src/lib/utils.ts` - 共通ユーティリティ（`cn` 等、`@shared` からの re-export） +- `src/components/MovedNotice.tsx` - ルートページと 404 ページで共有する移転案内 +- `src/lib/utils.ts` - 共通ユーティリティ（`@shared` からの re-export 等） +- `src/app/globals.css` + 各 `*.module.css` - スタイル（素の CSS のみ。下記参照） ## 削除済みの機能 @@ -97,3 +98,14 @@ Google Analytics 連携・お問い合わせフォーム等は、全て新リポ 壊れないことを確認すること - `src/app/[lang]/test/page.tsx` を変更する場合は、`packages/extension/e2e/` の 対応する spec が壊れないことを確認すること（本番反映後の e2e 実行で最終確認） + - デプロイ前の確認は、`yarn build` した `out/` をローカルで配信し、 + `E2E_HUB_BASE_URL` を指定して extension の e2e を実行する + （例: `python3 -m http.server 3100 -d packages/hub/out` → + `E2E_HUB_BASE_URL=http://localhost:3100 yarn test:e2e`）。 + `ujiro99.github.io` へのリクエストがローカルへ転送される + （`packages/extension/e2e/utils/hubRoute.ts`） +- スタイリングは素の CSS（`globals.css` と CSS Modules）のみで行う。 + Tailwind CSS や shadcn/ui などの CSS フレームワーク・UI ライブラリは導入しない + （テストページと設定値のホスティングのみが目的で、導入するメリットがないため） +- テストページの DOM 構造（見出し、`data-testid`、`placeholder`、文言など）は + e2e が参照しているため、スタイル変更時も維持すること diff --git a/packages/hub/components.json b/packages/hub/components.json deleted file mode 100644 index a5577c5db..000000000 --- a/packages/hub/components.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": true, - "tsx": true, - "tailwind": { - "config": "tailwind.config.ts", - "css": "src/app/globals.css", - "baseColor": "stone", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "ui": "@/components/ui", - "lib": "@/lib", - "hooks": "@/hooks" - }, - "iconLibrary": "lucide" -} diff --git a/packages/hub/package.json b/packages/hub/package.json index f86808553..7bc28beef 100644 --- a/packages/hub/package.json +++ b/packages/hub/package.json @@ -14,17 +14,11 @@ "pretty-quick": "pretty-quick" }, "dependencies": { - "@radix-ui/react-select": "^2.1.4", - "@radix-ui/react-separator": "^1.1.1", - "class-variance-authority": "^0.7.1", - "clsx": "^2.1.1", "lucide-react": "^1.24.0", "next": "^15.1.0", "quill": "^2.0.3", "react": "^19.0.0", - "react-dom": "^19.0.0", - "tailwind-merge": "^2.5.5", - "tailwindcss-animate": "^1.0.7" + "react-dom": "^19.0.0" }, "devDependencies": { "@next/eslint-plugin-next": "^15.1.0", @@ -40,9 +34,7 @@ "@vitest/ui": "^3.2.4", "eslint-config-next": "^15.1.0", "jsdom": "^26.1.0", - "postcss": "^8", "pretty-quick": "^4.2.2", - "tailwindcss": "^3.4.1", "typescript": "^5", "typescript-eslint": "^8.18.2", "vite": "^6.0.0" diff --git a/packages/hub/postcss.config.mjs b/packages/hub/postcss.config.mjs deleted file mode 100644 index 0dc456ad9..000000000 --- a/packages/hub/postcss.config.mjs +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('postcss-load-config').Config} */ -const config = { - plugins: { - tailwindcss: {}, - }, -} - -export default config diff --git a/packages/hub/src/app/[lang]/test/page.tsx b/packages/hub/src/app/[lang]/test/page.tsx index 827163ece..29f7ca5fd 100644 --- a/packages/hub/src/app/[lang]/test/page.tsx +++ b/packages/hub/src/app/[lang]/test/page.tsx @@ -1,8 +1,8 @@ "use client" import { Send } from "lucide-react" -import css from "@/app/page.module.css" -import { Button } from "@/components/ui/button" +import layoutCss from "@/app/page.module.css" +import css from "./test.module.css" import dynamic from "next/dynamic" import "quill/dist/quill.snow.css" import { useSearchParams } from "next/navigation" @@ -18,7 +18,7 @@ function SearchQuery() { const searchParams = useSearchParams() const search = searchParams.get("k") ?? "" return ( - 
+    
       {search}
     

   )
@@ -71,62 +71,62 @@ export default function Page() {
   }
 
   return (
-    

-      

-        
Browser Feature Test

+    

+      

+        
Browser Feature Test

 
-        

-          
Search Query Parameter

+        

+          
Search Query Parameter

           Loading...
}>
             
           
         
 
-        

+        
           

-            
Text

+            
Text

             
           

 
           

-            
Password

+            
Password

             
           

 
           

-            
Number

+            
Number

             
           

 
           

-            
Textarea

-