Refactor/Update TypeScript configuration across all packages

.github/workflows/typecheck.yml

@@ -0,0 +1,32 @@
+name: Type Check
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+    branches:
+      - develop
+      - main
+
+jobs:
+  typecheck:
+    runs-on: ubuntu-latest
+    env:
+      THUMBNAIL_URL: ${{ vars.THUMBNAIL_URL }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Type check (project references)
+        run: bun run typecheck

.vscode/settings.json

@@ -16,5 +16,7 @@
   "files.associations": {
     ".css": "tailwindcss",
     "*.scss": "tailwindcss"
-  }
+  },
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }

apps/backend/tsconfig.json

@@ -8,20 +8,13 @@
     "removeComments": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "outDir": "./dist",
-    "baseUrl": "./",
     "emitDecoratorMetadata": true,
-    // Relaxed strict settings for backend
-    "strictNullChecks": false,
-    "noImplicitAny": false,
-    "strictBindCallApply": false,
-    "forceConsistentCasingInFileNames": false,
-    "noFallthroughCasesInSwitch": false,
+
     // Path mapping
+    "baseUrl": ".",
     "paths": {
       "@server/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts"],
-  "exclude": ["node_modules", "dist", "e2e/**/*", "test/**/*"]
+  "include": ["src", "scripts"]
 }

apps/frontend/src/modules/song-edit/components/client/context/EditSong.context.tsx

@@ -18,15 +18,16 @@ import { parseSongFromBuffer, type SongFileType } from '@nbw/song';
 import axiosInstance from '@web/lib/axios';
 import { getTokenLocal } from '@web/lib/axios/token.utils';
 import {
-  EditSongForm,
+  EditSongFormInput,
+  EditSongFormOutput,
   editSongFormSchema,
 } from '@web/modules/song/components/client/SongForm.zod';
 
 export type useEditSongProviderType = {
-  formMethods: UseFormReturn<EditSongForm>;
+  formMethods: UseFormReturn<EditSongFormInput>;
   submitSong: () => void;
-  register: UseFormRegister<EditSongForm>;
-  errors: FieldErrors<EditSongForm>;
+  register: UseFormRegister<EditSongFormInput>;
+  errors: FieldErrors<EditSongFormInput>;
   song: SongFileType | null;
   instrumentSounds: string[];
   setInstrumentSound: (index: number, value: string) => void;
@@ -45,7 +46,7 @@ export const EditSongProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const formMethods = useForm<EditSongForm>({
+  const formMethods = useForm<EditSongFormInput>({
     resolver: zodResolver(editSongFormSchema),
     mode: 'onBlur',
   });
@@ -67,23 +68,26 @@ export const EditSongProvider = ({
         return false;
       }
 
+      const rawValues = formMethods.getValues();
+      const parsedValues: EditSongFormOutput =
+        editSongFormSchema.parse(rawValues);
+
       const formValues = {
-        allowDownload: formMethods.getValues().allowDownload,
-        visibility: formMethods.getValues().visibility,
-        title: formMethods.getValues().title,
-        originalAuthor: formMethods.getValues().originalAuthor,
-        description: formMethods.getValues().description,
+        allowDownload: parsedValues.allowDownload,
+        visibility: parsedValues.visibility,
+        title: parsedValues.title,
+        originalAuthor: parsedValues.originalAuthor,
+        description: parsedValues.description,
         thumbnailData: {
-          zoomLevel: formMethods.getValues().thumbnailData.zoomLevel,
-          startTick: formMethods.getValues().thumbnailData.startTick,
-          startLayer: formMethods.getValues().thumbnailData.startLayer,
-          backgroundColor:
-            formMethods.getValues().thumbnailData.backgroundColor,
+          zoomLevel: parsedValues.thumbnailData.zoomLevel,
+          startTick: parsedValues.thumbnailData.startTick,
+          startLayer: parsedValues.thumbnailData.startLayer,
+          backgroundColor: parsedValues.thumbnailData.backgroundColor,
         },
-        artist: formMethods.getValues().author,
-        customInstruments: formMethods.getValues().customInstruments,
-        license: formMethods.getValues().license,
-        category: formMethods.getValues().category,
+        artist: parsedValues.author,
+        customInstruments: parsedValues.customInstruments,
+        license: parsedValues.license,
+        category: parsedValues.category,
       };
 
       const comparisons = [
@@ -123,23 +127,26 @@ export const EditSongProvider = ({
   );
 
   const submitSong = async (): Promise<void> => {
+    const rawValues = formMethods.getValues();
+    const parsedValues: EditSongFormOutput =
+      editSongFormSchema.parse(rawValues);
+
     // Build form data
     const formValues: UploadSongDto = {
-      allowDownload: formMethods.getValues().allowDownload,
-      visibility: formMethods.getValues()
-        .visibility as UploadSongDto['visibility'],
-      title: formMethods.getValues().title,
-      originalAuthor: formMethods.getValues().originalAuthor,
-      description: formMethods.getValues().description,
+      allowDownload: parsedValues.allowDownload,
+      visibility: parsedValues.visibility as UploadSongDto['visibility'],
+      title: parsedValues.title,
+      originalAuthor: parsedValues.originalAuthor,
+      description: parsedValues.description,
       thumbnailData: {
-        zoomLevel: formMethods.getValues().thumbnailData.zoomLevel,
-        startTick: formMethods.getValues().thumbnailData.startTick,
-        startLayer: formMethods.getValues().thumbnailData.startLayer,
-        backgroundColor: formMethods.getValues().thumbnailData.backgroundColor,
+        zoomLevel: parsedValues.thumbnailData.zoomLevel,
+        startTick: parsedValues.thumbnailData.startTick,
+        startLayer: parsedValues.thumbnailData.startLayer,
+        backgroundColor: parsedValues.thumbnailData.backgroundColor,
       },
-      customInstruments: formMethods.getValues().customInstruments,
-      license: formMethods.getValues().license as UploadSongDto['license'],
-      category: formMethods.getValues().category as UploadSongDto['category'],
+      customInstruments: parsedValues.customInstruments,
+      license: parsedValues.license as UploadSongDto['license'],
+      category: parsedValues.category as UploadSongDto['category'],
       file: zodUndefined,
     };
 

apps/frontend/src/modules/song-upload/components/client/context/UploadSong.context.tsx

@@ -16,7 +16,8 @@ import { parseSongFromBuffer, type SongFileType } from '@nbw/song';
 import axiosInstance from '@web/lib/axios';
 import { InvalidTokenError, getTokenLocal } from '@web/lib/axios/token.utils';
 import {
-  UploadSongForm,
+  UploadSongFormInput,
+  UploadSongFormOutput,
   uploadSongFormSchema,
 } from '@web/modules/song/components/client/SongForm.zod';
 
@@ -76,9 +77,9 @@ export const useUploadSongStore = create<UploadSongStore>((set, get) => ({
 
 // Context for form methods (React Hook Form needs to be initialized in a component)
 interface UploadSongFormContextType {
-  formMethods: UseFormReturn<UploadSongForm>;
-  register: UseFormRegister<UploadSongForm>;
-  errors: FieldErrors<UploadSongForm>;
+  formMethods: UseFormReturn<UploadSongFormInput>;
+  register: UseFormRegister<UploadSongFormInput>;
+  errors: FieldErrors<UploadSongFormInput>;
   setFile: (file: File | null) => Promise<void>;
   setInstrumentSound: (index: number, value: string) => void;
   submitSong: () => Promise<void>;
@@ -94,10 +95,10 @@ export type useUploadSongProviderType = {
   setFile: (file: File | null) => void;
   instrumentSounds: string[];
   setInstrumentSound: (index: number, value: string) => void;
-  formMethods: UseFormReturn<UploadSongForm>;
+  formMethods: UseFormReturn<UploadSongFormInput>;
   submitSong: () => void;
-  register: UseFormRegister<UploadSongForm>;
-  errors: FieldErrors<UploadSongForm>;
+  register: UseFormRegister<UploadSongFormInput>;
+  errors: FieldErrors<UploadSongFormInput>;
   sendError: string | null;
   isSubmitting: boolean;
   isUploadComplete: boolean;
@@ -128,7 +129,7 @@ export const UploadSongProvider = ({
     setUploadedSongId,
   } = store;
 
-  const formMethods = useForm<UploadSongForm>({
+  const formMethods = useForm<UploadSongFormInput>({
     resolver: zodResolver(uploadSongFormSchema),
     mode: 'onBlur',
     // Prevents values from appearing empty on first render
@@ -164,7 +165,12 @@ export const UploadSongProvider = ({
     // Build form data
     const formData = new FormData();
     formData.append('file', blob, filename || 'song.nbs');
-    const formValues = formMethods.getValues();
+
+    // Parse and normalize values
+    const rawValues = formMethods.getValues();
+
+    const formValues: UploadSongFormOutput =
+      uploadSongFormSchema.parse(rawValues);
 
     Object.entries(formValues)
       .filter(

apps/frontend/src/modules/song/components/client/SongForm.zod.ts

@@ -75,8 +75,12 @@ export const editSongFormSchema = SongFormSchema.extend({
   id: zod.string(),
 });
 
-export type ThumbnailDataForm = zod.infer<typeof thumbnailDataSchema>;
+// forms
+export type ThumbnailDataFormInput = zod.input<typeof thumbnailDataSchema>;
+export type UploadSongFormInput = zod.input<typeof uploadSongFormSchema>;
+export type EditSongFormInput = zod.input<typeof editSongFormSchema>;
 
-export type UploadSongForm = zod.infer<typeof uploadSongFormSchema>;
-
-export type EditSongForm = zod.infer<typeof editSongFormSchema>;
+// parsed data
+export type ThumbnailDataFormOutput = zod.infer<typeof thumbnailDataSchema>;
+export type UploadSongFormOutput = zod.output<typeof uploadSongFormSchema>;
+export type EditSongFormOutput = zod.output<typeof editSongFormSchema>;

apps/frontend/tsconfig.json

@@ -13,22 +13,23 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
+
     // Override base strict settings for Next.js compatibility
     "strict": true,
-    "strictNullChecks": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": true,
     "strictPropertyInitialization": false,
+
     // Next.js plugins and types
     "plugins": [
       {
         "name": "next"
       }
     ],
     "types": ["mdx"],
+
     // Path mapping
+    "baseUrl": ".",
     "paths": {
-      "@web/*": ["./src/*"]
+      "@web/*": ["src/*"]
     }
   },
   "include": [
@@ -37,10 +38,5 @@
     "**/*.tsx",
     "**/*.mdx",
     ".next/types/**/*.ts"
-  ],
-  "types": ["mdx"],
-  // Path mapping
-  "paths": {
-    "@web/*": ["./src/*"]
-  }
+  ]
 }