Refactor code structure for improved readability and maintainability

.github/workflows/deploy.yml

@@ -27,16 +27,16 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Build
-        run: yarn build
+        run: npm run build
         env:
           # Specify repository name (subpath) for GitHub Pages
           # Setting '/IssueHub' as requested by user

.github/workflows/lint.yml

@@ -17,13 +17,13 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Run ESLint
-        run: yarn lint
+        run: npm run lint
 
       - name: Check formatting
-        run: yarn format:check || true
+        run: npm run format:check || true

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm test

e2e/issues.spec.ts

@@ -40,3 +40,46 @@ test('issue search and library save flow', async ({ page }) => {
   // Verify list is empty
   await expect(page.getByText(/You haven't saved any issues yet/i)).toBeVisible();
 });
+
+test('date filter visibility and interaction', async ({ page }) => {
+  await page.goto('/issues');
+
+  // Check if date filter exists
+  const dateSelect = page.getByTestId('date-select');
+  await expect(dateSelect).toBeVisible();
+
+  // Open the select and check options
+  await dateSelect.click();
+  await expect(page.getByRole('option', { name: 'Any time' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '1 day ago or older' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '3 days ago or older' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '1 week ago or older' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '2 weeks ago or older' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '1 month ago or older' })).toBeVisible();
+
+  // Select an option
+  await page.getByRole('option', { name: '1 week ago or older' }).click();
+
+  // The value should be updated
+  await expect(page.getByRole('option', { name: '1 week ago or older' })).not.toBeVisible();
+});
+
+test('stars filter visibility and interaction', async ({ page }) => {
+  await page.goto('/issues');
+
+  // Check if stars filter exists
+  const starsSelect = page.getByTestId('stars-select');
+  await expect(starsSelect).toBeVisible();
+
+  // Open the select and check options
+  await starsSelect.click();
+  await expect(page.getByRole('option', { name: '100+ stars' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '1k+ stars' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '10k+ stars' })).toBeVisible();
+
+  // Select an option
+  await page.getByRole('option', { name: '1k+ stars' }).click();
+
+  // The value should be updated
+  await expect(page.getByRole('option', { name: '1k+ stars' })).not.toBeVisible();
+});

eslint.config.mjs

@@ -1,42 +1,61 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
   {
-    ignores: [
-      "**/node_modules/**",
-      "**/.next/**",
-      "**/src/generated/**",
-      "**/dist/**",
-      "**/build/**"
-    ]
+    files: ["**/*.ts", "**/*.tsx"],
+    plugins: {
+      "@next/next": nextPlugin,
+      "react": reactPlugin,
+      "react-hooks": hooksPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...hooksPlugin.configs.recommended.rules,
+      "react-hooks/set-state-in-effect": "warn",
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+      ],
+      "react/no-unescaped-entities": "off",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-empty-object-type": "warn",
+      "@typescript-eslint/no-unused-expressions": "warn",
+      "@typescript-eslint/no-this-alias": "warn",
+      "@typescript-eslint/no-require-imports": "warn",
+      "@typescript-eslint/no-wrapper-object-types": "warn",
+      "@typescript-eslint/no-unsafe-function-type": "warn",
+      "@typescript-eslint/no-unnecessary-type-constraint": "warn"
+    }
   },
   {
     files: ["**/e2e/**/*.ts", "**/e2e/**/*.tsx"],
     rules: {
-      "@typescript-eslint/no-unused-vars": ["error", { 
-        "argsIgnorePattern": "^_", 
-        "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_" 
-      }],
-      "react-hooks/rules-of-hooks": "off" // Playwrightのテストファイルではこのルールを無効化
+      "react-hooks/rules-of-hooks": "off"
     }
   },
   {
-    files: ["**/src/app/error.tsx"],
-    rules: {
-      "@typescript-eslint/no-unused-vars": "off"
-    }
+    ignores: [
+      "**/node_modules/**",
+      "**/.next/**",
+      "**/src/generated/**",
+      "**/dist/**",
+      "**/build/**",
+      "**/test-results/**",
+      "**/playwright-report/**"
+    ]
   }
-];
-
-export default eslintConfig;
+);