Skip to content

Commit e53bc37

Browse files
CoderCococlaude
CoderCoco
and
claude
authored
chore(web): apply file naming convention to all React source files (#119)
Closes #114 ## Summary - Rename all 44 source files under `app/packages/web/src/` to kebab-case with a type suffix: `.page.tsx` for route pages, `.component.tsx` for UI components (including shadcn `ui/`), `.hook.ts` for custom hooks, `.service.ts` for the API client, `.utils.ts` for utilities - Update every import path throughout the package — both `.js`-extension ESM imports and `@/`-alias paths — to match the new filenames - Update `components.json` so shadcn's utils alias points to `lib/utils.utils.ts` - No logic or behaviour changes; pure rename + import update; 316 tests pass, lint clean ## Implementation notes - `lib/utils.ts` → `lib/utils.utils.ts`: the redundant-looking name is the mechanical result of applying the `.utils.ts` rule to a file already called `utils`. It keeps the convention uniform across every file in the package without special-casing shadcn-generated files. - shadcn `ui/` components were included in the rename because the issue scope said "all component files" and they are reusable UI components. If shadcn components are regenerated in future, the new files will need the `.component.tsx` suffix added manually. ## Test plan - [ ] `npm run app:test` — all 316 tests pass - [ ] `npm run app:lint` — exits clean - [ ] `npm run app:dev` — dev server starts, all routes load without console errors Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 2950ae5 commit e53bc37

46 files changed

Lines changed: 114 additions & 114 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/packages/web/components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"aliases": {
1414
"components": "@/components",
15-
"utils": "@/lib/utils",
15+
"utils": "@/lib/utils.utils",
1616
"ui": "@/components/ui",
1717
"lib": "@/lib",
1818
"hooks": "@/hooks"

app/packages/web/src/api.ts renamed to app/packages/web/src/api.service.ts

File renamed without changes.

app/packages/web/src/App.tsx renamed to app/packages/web/src/app.component.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useEffect, useState } from 'react';
22
import { BrowserRouter, Routes, Route } from 'react-router-dom';
3-
import { setUnauthorizedHandler } from './api.js';
4-
import { ApiTokenModal } from './components/ApiTokenModal.js';
5-
import { AppLayout } from './components/AppLayout.js';
6-
import { DashboardPage } from './pages/DashboardPage.js';
7-
import { CostsPage } from './pages/CostsPage.js';
8-
import { DiscordPage } from './pages/DiscordPage.js';
9-
import { LogsPage } from './pages/LogsPage.js';
10-
import { SettingsPage } from './pages/SettingsPage.js';
11-
import { PollingProvider } from './polling/PollingProvider.js';
12-
import { GameStatusProvider } from './polling/GameStatusProvider.js';
3+
import { setUnauthorizedHandler } from './api.service.js';
4+
import { ApiTokenModal } from './components/api-token-modal.component.js';
5+
import { AppLayout } from './components/app-layout.component.js';
6+
import { DashboardPage } from './pages/dashboard.page.js';
7+
import { CostsPage } from './pages/costs.page.js';
8+
import { DiscordPage } from './pages/discord.page.js';
9+
import { LogsPage } from './pages/logs.page.js';
10+
import { SettingsPage } from './pages/settings.page.js';
11+
import { PollingProvider } from './polling/polling-provider.component.js';
12+
import { GameStatusProvider } from './polling/game-status-provider.component.js';
1313

1414
/**
1515
* Root component. Wires up the 401 handler on `api.ts` and renders the routed

app/packages/web/src/components/ApiTokenModal.test.tsx renamed to app/packages/web/src/components/api-token-modal.component.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ const { retryMock, setTokenMock } = vi.hoisted(() => ({
88
setTokenMock: vi.fn<(token: string) => void>(),
99
}));
1010

11-
vi.mock('../api.js', () => ({
11+
vi.mock('../api.service.js', () => ({
1212
retryPendingAfterAuth: retryMock,
1313
setStoredApiToken: setTokenMock,
1414
}));
1515

16-
import { ApiTokenModal } from './ApiTokenModal.js';
16+
import { ApiTokenModal } from './api-token-modal.component.js';
1717

1818
/** Helper: renders the modal with default open=true and a fresh onSuccess spy. */
1919
function renderModal(open = true, onSuccess = vi.fn()) {

app/packages/web/src/components/ApiTokenModal.tsx renamed to app/packages/web/src/components/api-token-modal.component.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { useState } from 'react';
22
import { Eye, EyeOff, ExternalLink } from 'lucide-react';
3-
import { retryPendingAfterAuth, setStoredApiToken } from '../api.js';
3+
import { retryPendingAfterAuth, setStoredApiToken } from '../api.service.js';
44
import {
55
Dialog,
66
DialogContent,
77
DialogDescription,
88
DialogFooter,
99
DialogHeader,
1010
DialogTitle,
11-
} from './ui/dialog';
12-
import { Input } from './ui/input';
13-
import { Label } from './ui/label';
14-
import { Button } from './ui/button';
11+
} from './ui/dialog.component';
12+
import { Input } from './ui/input.component';
13+
import { Label } from './ui/label.component';
14+
import { Button } from './ui/button.component';
1515

1616
const MIN_TOKEN_LENGTH = 16;
1717
const DOCS_URL =

app/packages/web/src/components/AppLayout.test.tsx renamed to app/packages/web/src/components/app-layout.component.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
22
import { describe, it, expect, vi } from 'vitest';
33
import { act, render, screen } from '@testing-library/react';
44
import userEvent from '@testing-library/user-event';
5-
import { LiveIndicator, RefreshAllButton } from './AppLayout.js';
6-
import { PollingProvider, usePollingActions } from '../polling/PollingProvider.js';
5+
import { LiveIndicator, RefreshAllButton } from './app-layout.component.js';
6+
import { PollingProvider, usePollingActions } from '../polling/polling-provider.component.js';
77

88
/**
99
* Mounts a child component that registers a poller in `useEffect` so the

app/packages/web/src/components/AppLayout.tsx renamed to app/packages/web/src/components/app-layout.component.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ReactNode, useEffect, useState } from 'react';
22
import { Link, useLocation } from 'react-router-dom';
3-
import { api, type EnvInfo } from '../api.js';
4-
import { cn } from '../lib/utils.js';
5-
import { Button } from '@/components/ui/button';
6-
import { isStale, usePollingActions, usePollingState } from '../polling/PollingProvider.js';
3+
import { api, type EnvInfo } from '../api.service.js';
4+
import { cn } from '../lib/utils.utils.js';
5+
import { Button } from '@/components/ui/button.component';
6+
import { isStale, usePollingActions, usePollingState } from '../polling/polling-provider.component.js';
77
import {
88
LayoutDashboard,
99
Server,

app/packages/web/src/components/FileManagerModal.tsx renamed to app/packages/web/src/components/file-manager-modal.component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect } from 'react';
2-
import { type FileMgrStatus } from '../api.js';
2+
import { type FileMgrStatus } from '../api.service.js';
33

44
interface Props {
55
game: string | null;

app/packages/web/src/components/GameCard.tsx renamed to app/packages/web/src/components/game-card.component.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import {
1010
AlertTriangle,
1111
PowerOff,
1212
} from 'lucide-react';
13-
import { api, type GameStatus, type GameEstimate } from '../api.js';
14-
import { Card } from '@/components/ui/card';
15-
import { Button } from '@/components/ui/button';
16-
import { Badge } from '@/components/ui/badge';
17-
import { cn } from '@/lib/utils';
13+
import { api, type GameStatus, type GameEstimate } from '../api.service.js';
14+
import { Card } from '@/components/ui/card.component';
15+
import { Button } from '@/components/ui/button.component';
16+
import { Badge } from '@/components/ui/badge.component';
17+
import { cn } from '@/lib/utils.utils';
1818

1919
interface Props {
2020
status: GameStatus;

app/packages/web/src/components/GameCombobox.test.tsx renamed to app/packages/web/src/components/game-combobox.component.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { describe, it, expect, vi } from 'vitest';
22
import { render, screen } from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
4-
import { GameCombobox } from './GameCombobox.js';
4+
import { GameCombobox } from './game-combobox.component.js';
55

66
const GAMES = ['minecraft', 'valheim', 'palworld'];
77

0 commit comments

Comments
 (0)