feat: integrate @nbw/song and @nbw/thumbnail packages and enhance ThumbnailRenderer component

- Added @nbw/song and @nbw/thumbnail as workspace dependencies in bun.lock and package.json.
- Updated next.config.mjs to prevent @nbw/thumbnail from being bundled on the server to avoid SSR issues.
- Refactored ThumbnailRenderer component to dynamically import thumbnail functions, ensuring compatibility with client-side rendering.
- Modified FormElements component to use a div instead of a paragraph for description rendering, improving semantic structure.

Author: tomast1337

apps/frontend/next.config.mjs

@@ -5,11 +5,17 @@ import createMDX from '@next/mdx';
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
   // See: https://github.com/Automattic/node-canvas/issues/867#issuecomment-1925284985
-  webpack: (config) => {
+  webpack: (config, { isServer }) => {
     config.externals.push({
       '@napi-rs/canvas': 'commonjs @napi-rs/canvas',
     });
 
+    // Prevent @nbw/thumbnail from being bundled on the server
+    // It uses HTMLCanvasElement which is not available in Node.js
+    if (isServer) {
+      config.externals.push('@nbw/thumbnail');
+    }
+
     return config;
   },
   images: {

apps/frontend/package.json

@@ -19,6 +19,8 @@
     "@mdx-js/react": "^3.1.1",
     "@nbw/config": "workspace:*",
     "@nbw/database": "workspace:*",
+    "@nbw/song": "workspace:*",
+    "@nbw/thumbnail": "workspace:*",
     "@next/mdx": "^16.0.8",
     "@next/third-parties": "^16.0.8",
     "@radix-ui/react-dialog": "^1.1.15",

apps/frontend/src/modules/shared/components/client/FormElements.tsx

@@ -186,9 +186,9 @@ export const Select = forwardRef<
         />
       )}
       {description && (
-        <p className='block text-sm text-zinc-500 leading-tight pt-1 [&_a]:text-blue-400 [&_a:hover]:text-blue-300'>
+        <div className='block text-sm text-zinc-500 leading-tight pt-1 [&_a]:text-blue-400 [&_a:hover]:text-blue-300'>
           <Markdown>{description}</Markdown>
-        </p>
+        </div>
       )}
       <ErrorBalloon message={errorMessage} />
     </>

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

@@ -13,15 +13,13 @@ import toaster from 'react-hot-toast';
 import { undefined as zodUndefined } from 'zod';
 
 import type { UploadSongDto } from '@nbw/database';
-import { parseSongFromBuffer } from '@nbw/song';
-import type { SongFileType } from '@nbw/song';
+import { parseSongFromBuffer, type SongFileType } from '@nbw/song';
 import axiosInstance from '@web/lib/axios';
 import { getTokenLocal } from '@web/lib/axios/token.utils';
-
 import {
   EditSongForm,
   editSongFormSchema,
-} from '../../../../song/components/client/SongForm.zod';
+} from '@web/modules/song/components/client/SongForm.zod';
 
 export type useEditSongProviderType = {
   formMethods: UseFormReturn<EditSongForm>;

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect } from 'react';
+import { create } from 'zustand';
 import {
   FieldErrors,
   UseFormRegister,
@@ -11,7 +12,7 @@ import {
 import { toast } from 'react-hot-toast';
 
 import { BG_COLORS, THUMBNAIL_CONSTANTS } from '@nbw/config';
-import { parseSongFromBuffer, SongFileType } from '@nbw/song';
+import { parseSongFromBuffer, type SongFileType } from '@nbw/song';
 import axiosInstance from '@web/lib/axios';
 import { InvalidTokenError, getTokenLocal } from '@web/lib/axios/token.utils';
 import {
@@ -21,6 +22,72 @@ import {
 
 import UploadCompleteModal from '../UploadCompleteModal';
 
+interface UploadSongState {
+  song: SongFileType | null;
+  filename: string | null;
+  instrumentSounds: string[];
+  isSubmitting: boolean;
+  sendError: string | null;
+  isUploadComplete: boolean;
+  uploadedSongId: string | null;
+}
+
+interface UploadSongActions {
+  setSong: (song: SongFileType | null) => void;
+  setFilename: (filename: string | null) => void;
+  setInstrumentSounds: (sounds: string[]) => void;
+  setInstrumentSound: (index: number, value: string) => void;
+  setIsSubmitting: (isSubmitting: boolean) => void;
+  setSendError: (error: string | null) => void;
+  setIsUploadComplete: (isComplete: boolean) => void;
+  setUploadedSongId: (id: string | null) => void;
+  reset: () => void;
+}
+
+type UploadSongStore = UploadSongState & UploadSongActions;
+
+const initialState: UploadSongState = {
+  song: null,
+  filename: null,
+  instrumentSounds: [],
+  isSubmitting: false,
+  sendError: null,
+  isUploadComplete: false,
+  uploadedSongId: null,
+};
+
+export const useUploadSongStore = create<UploadSongStore>((set, get) => ({
+  ...initialState,
+
+  setSong: (song) => set({ song }),
+  setFilename: (filename) => set({ filename }),
+  setInstrumentSounds: (sounds) => set({ instrumentSounds: sounds }),
+  setInstrumentSound: (index, value) => {
+    const newValues = [...get().instrumentSounds];
+    newValues[index] = value;
+    set({ instrumentSounds: newValues });
+  },
+  setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
+  setSendError: (error) => set({ sendError: error }),
+  setIsUploadComplete: (isComplete) => set({ isUploadComplete: isComplete }),
+  setUploadedSongId: (id) => set({ uploadedSongId: id }),
+  reset: () => set(initialState),
+}));
+
+// 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>;
+  setFile: (file: File | null) => Promise<void>;
+  setInstrumentSound: (index: number, value: string) => void;
+  submitSong: () => Promise<void>;
+}
+
+const UploadSongFormContext = createContext<UploadSongFormContextType | null>(
+  null,
+);
+
 export type useUploadSongProviderType = {
   song: SongFileType | null;
   filename: string | null;
@@ -37,27 +104,29 @@ export type useUploadSongProviderType = {
   uploadedSongId: string | null;
 };
 
-export const UploadSongContext = createContext<useUploadSongProviderType>(
-  null as unknown as useUploadSongProviderType,
-);
-
 export const UploadSongProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const [song, setSong] = useState<SongFileType | null>(null);
-  const [filename, setFilename] = useState<string | null>(null);
-  const [instrumentSounds, setInstrumentSounds] = useState<string[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  {
-    /* TODO: React Hook Form has an isSubmitting attribute. Can we leverage it? https://react-hook-form.com/docs/useformstate */
-  }
-
-  const [sendError, setSendError] = useState<string | null>(null);
-  const [isUploadComplete, setIsUploadComplete] = useState(false);
-  const [uploadedSongId, setUploadedSongId] = useState<string | null>(null);
+  const store = useUploadSongStore();
+  const {
+    song,
+    filename,
+    instrumentSounds,
+    isSubmitting,
+    sendError,
+    isUploadComplete,
+    uploadedSongId,
+    setSong,
+    setFilename,
+    setInstrumentSounds,
+    setInstrumentSound: setInstrumentSoundStore,
+    setIsSubmitting,
+    setSendError,
+    setIsUploadComplete,
+    setUploadedSongId,
+  } = store;
 
   const formMethods = useForm<UploadSongForm>({
     resolver: zodResolver(uploadSongFormSchema),
@@ -164,30 +233,29 @@ export const UploadSongProvider = ({
   const setFileHandler = async (file: File | null) => {
     if (!file) return;
 
-    let song: SongFileType;
+    let parsedSong: SongFileType;
 
     try {
-      song = (await parseSongFromBuffer(
+      parsedSong = (await parseSongFromBuffer(
         await file.arrayBuffer(),
       )) as unknown as SongFileType; // TODO: Investigate this weird type error
     } catch (e) {
       console.error('Error parsing song file', e);
       toast.error('Invalid song file! Please try again with a different song.');
       setSong(null);
-
       return;
     }
 
-    setSong(song);
+    setSong(parsedSong);
     setFilename(file.name);
 
-    const { title, description, originalAuthor } = song;
+    const { title, description, originalAuthor } = parsedSong;
     const formTitle = title || file.name.replace('.nbs', '');
     formMethods.setValue('title', formTitle);
     formMethods.setValue('description', description);
     formMethods.setValue('originalAuthor', originalAuthor);
 
-    const instrumentList = song.instruments.map(
+    const instrumentList = parsedSong.instruments.map(
       (instrument) => instrument.file,
     );
 
@@ -196,9 +264,9 @@ export const UploadSongProvider = ({
   };
 
   const setInstrumentSound = (index: number, value: string) => {
+    setInstrumentSoundStore(index, value);
     const newValues = [...instrumentSounds];
     newValues[index] = value;
-    setInstrumentSounds(newValues);
     formMethods.setValue('customInstruments', newValues);
   };
 
@@ -252,35 +320,42 @@ export const UploadSongProvider = ({
     };
   }, [formMethods.formState.isDirty, isUploadComplete]);
 
+  const formContextValue: UploadSongFormContextType = {
+    formMethods,
+    register,
+    errors,
+    setFile: setFileHandler,
+    setInstrumentSound,
+    submitSong,
+  };
+
   return (
-    <UploadSongContext.Provider
-      value={{
-        sendError,
-        formMethods,
-        register,
-        errors,
-        submitSong,
-        song,
-        filename,
-        instrumentSounds,
-        setInstrumentSound,
-        setFile: setFileHandler,
-        isSubmitting,
-        isUploadComplete,
-        uploadedSongId,
-      }}
-    >
+    <UploadSongFormContext.Provider value={formContextValue}>
       {uploadedSongId && (
         <UploadCompleteModal
           isOpen={isUploadComplete}
           songId={uploadedSongId}
         />
       )}
       {children}
-    </UploadSongContext.Provider>
+    </UploadSongFormContext.Provider>
   );
 };
 
+// Hook that combines Zustand store with React Hook Form from context
+// This maintains backward compatibility with the old Context API
 export const useUploadSongProvider = (): useUploadSongProviderType => {
-  return useContext(UploadSongContext);
+  const store = useUploadSongStore();
+  const formContext = useContext(UploadSongFormContext);
+
+  if (!formContext) {
+    throw new Error(
+      'useUploadSongProvider must be used within UploadSongProvider',
+    );
+  }
+
+  return {
+    ...store,
+    ...formContext,
+  };
 };