TS Migration

[jennnniferkuang]

Description

Added TypeScript dependencies to package.json and tested by porting banner photo (which is going to be replaced with redesign anyways). Should be setup to start brand new redesign completely in TypeScript!

This PR is part of #47

Developer Testing

Testing done:

• Should be identical to current site

---

This change is 

Summary by CodeRabbit

• Chores
  • Added TypeScript tooling and dev dependencies for the project.
  • Introduced a strict TypeScript configuration and CSS module type declarations.
  • Enhanced ESLint to support TypeScript and JSX linting and module resolution.
  • Minor .gitignore update (removed editor entry).
  • Updated CI to use a newer Node.js runtime.
  • Small component typing refinements with no runtime behavior changes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds TypeScript support and ESLint TypeScript integration: new tsconfig.json, ESLint parser/plugins/settings for TypeScript, devDependency additions, CSS module type declarations, and explicit typing for BannerPhoto; removes .vscode/ from .gitignore and updates CI Node version to 24.

Changes

Cohort / File(s)	Summary
TypeScript configuration tsconfig.json	New TypeScript config: target ES5, strict enabled, JSX runtime react-jsx, Node module resolution, allowJs: true, noEmit: true, includes src.
Linting & dependencies .eslintrc.json, package.json	ESLint: adds @typescript-eslint/parser, plugin:@typescript-eslint/recommended``, parserOptions.project: "./tsconfig.json", import resolver includes `.ts/.tsx`; `package.json` adds devDependencies (`typescript`, `eslint`, `@typescript-eslint/`, `@types/`, etc.).
Type declarations src/react-app-env.d.ts	Adds ambient module declarations for \*.module.css, \*.module.scss, \*.module.sass exporting { [key:string]: string } and /// <reference types="react-scripts" />.
Component typing src/components/BannerPhoto/BannerPhoto.tsx	Adds BannerPhotoProps interface and types component as React.FC<BannerPhotoProps> (props: image, optional style, optional children); no runtime changes.
Repo & CI minor edits .gitignore, .github/workflows/main.yml	Removes .vscode/ from .gitignore; CI Node version bumped from 16 to 24 in .github/workflows/main.yml.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Files needing extra attention:
  • tsconfig.json — confirm target, allowJs, strict, isolatedModules, and libs choices.
  • .eslintrc.json — project-aware parser may require workspace lint configuration.
  • package.json — verify devDependency versions and peer dependency implications.
  • src/react-app-env.d.ts — ensure CSS module typings match project usage.

Poem

🐰 I hopped in with types and tidy lines,
Declared my modules and steadied my signs.
Banner wrapped in props, no runtime surprise,
Lint learned some grammar and CI grew wise. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'TS Migration' is vague and generic, using an abbreviation without clearly conveying the specific scope or purpose of the changes to someone unfamiliar with the context.	Consider a more descriptive title like 'Add TypeScript configuration and dependencies' or 'Set up TypeScript support and port BannerPhoto component' to better clarify the changeset scope.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers the main purpose and includes testing notes and an issue reference, but lacks detailed steps for reviewer testing as specified in the template.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch ts-migration

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2796e48 and 50ae70f.

📒 Files selected for processing (3)

• .eslintrc.json (2 hunks)
• .gitignore (0 hunks)
• tsconfig.json (1 hunks)

💤 Files with no reviewable changes (1)

• .gitignore

🔇 Additional comments (4)

tsconfig.json (1)

1-24: TypeScript config is well-structured and strict.

The configuration properly enables "strict": true (line 11), addressing the previous reviewer's concern about strictness. Key settings like "noEmit", "isolatedModules", and "jsx": "react-jsx" are well-chosen for a React+TypeScript setup. The "allowJs": true with a removal TODO (line 7) is appropriate during the migration phase.

.eslintrc.json (3)

9-22: TypeScript parser and plugin setup is correct.

Adding @typescript-eslint/parser (line 11), @typescript-eslint plugin (line 22), and the recommended config preset (line 9) are all necessary and standard for TypeScript linting.

---

34-46: JSX/TypeScript rules are well-justified.

The additions are appropriate for TypeScript+React:

• react/jsx-filename-extension (line 34): Allows .tsx files, necessary for TS support.
• react/require-default-props (line 35): Reasonable to disable since TypeScript handles defaults through the type system.
• no-undef (line 36): Reasonable to disable since TypeScript already catches undefined references.
• import/extensions (lines 37–46): Necessary to allow omitting extensions for .ts/.tsx files, aligning with modern bundler conventions.

---

18-18: Verify performance impact of parserOptions.project.

The addition of "project": "./tsconfig.json" (line 18) enables project-aware type checking, which is powerful but can slow linting because ESLint must initialize a TypeScript program for each invocation. The import/resolver settings (lines 48–54) are standard and necessary for TypeScript file resolution.

Monitor linting performance during development. If slowdowns become problematic, consider using selective type-aware rules via parserOptions.projectService (TypeScript 5.3+) or using separate type-checking in CI.

Also applies to: 48-54

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

.gitignore (1)

124-135: Remove duplicate .vscode/ entry.

The .vscode/ entry appears twice in the file (lines 124 and 135). Remove one to avoid redundancy.

Apply this diff to remove the duplicate:

 # Misc
 .DS_Store
-.vscode/

🧹 Nitpick comments (1)

.eslintrc.json (1)

6-9: Consider adding TypeScript ESLint recommended configurations.

The extends array doesn't include the recommended TypeScript ESLint configurations. Adding these will provide better default rules for TypeScript code.

Apply this diff to include recommended TypeScript ESLint configs:

     "extends": [
         "plugin:react/recommended",
-        "airbnb"
+        "airbnb",
+        "plugin:@typescript-eslint/recommended"
     ],

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cbee383 and 55d65f9.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (6)

• .eslintrc.json (2 hunks)
• .gitignore (1 hunks)
• package.json (1 hunks)
• src/components/BannerPhoto/BannerPhoto.tsx (1 hunks)
• src/react-app-env.d.ts (1 hunks)
• tsconfig.json (1 hunks)

🔇 Additional comments (5)

tsconfig.json (1)

1-26: LGTM! TypeScript configuration is appropriate for React 17.

The configuration correctly uses "jsx": "react-jsx" for React 17's new JSX transform and enables strict type checking, which is good for a TypeScript migration.

.eslintrc.json (1)

35-35: Disabling no-undef is appropriate for TypeScript.

Setting no-undef: 0 is correct when using TypeScript, as TypeScript's compiler handles undefined variable detection more accurately than ESLint.

src/components/BannerPhoto/BannerPhoto.tsx (2)

5-9: Type definition is correct and comprehensive.

The BannerPhotoProps interface properly defines all props with appropriate types including optional props using ?.

---

12-12: React.FC usage is acceptable for this migration.

Using React.FC<BannerPhotoProps> is a valid approach for typing functional components. Note that in React 18+, React.FC no longer implicitly includes children, so explicitly defining it in props (as done here) is actually forward-compatible.

src/react-app-env.d.ts (1)

1-16: LGTM! Standard CSS Modules type declarations.

The ambient module declarations correctly enable TypeScript support for CSS Modules. The { [key: string]: string } type accurately represents CSS module exports where class names are mapped to scoped strings.

[ChrisYx511]

merge when you see fit

[ChrisYx511]

Review these eslint options to make sure you actually need them

[ChrisYx511]

Make sure your versions are compatible here.

[ChrisYx511]

Make sure your TS options are as strict as possible for the current given configuration.

[jennnniferkuang]

This change is part of the following stack:

• TS Migration #115 ◀
  • Test #116

_{Change managed by git-spice.}