chore: dep pkg upgrade

- Updated Node version in Dockerfile and .npmrc.
- Upgraded various dependencies in package.json, including react-dropzone, react-router, and eslint.
- Added pnpm-workspace.yaml for workspace management.
- Adjusted TypeScript configurations and test utilities for compatibility.
- Enhanced documentation for installation instructions and TypeScript toolchain.

src/components/__tests__/FileInput.test.tsx

@@ -0,0 +1,33 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FileInput } from '../FileInput';
+
+test('receives multiple files from the file picker', async () => {
+  const onReceiveFiles = vi.fn();
+  const files = [new File(['first'], 'first.qmc3'), new File(['second'], 'second.mflac')];
+  const { container } = render(<FileInput onReceiveFiles={onReceiveFiles}>Choose files</FileInput>);
+  const input = container.querySelector('input');
+  if (!input) throw new Error('File input is missing');
+
+  await userEvent.upload(input, files);
+
+  await waitFor(() => expect(onReceiveFiles).toHaveBeenCalledOnce());
+  expect(onReceiveFiles.mock.calls[0][0]).toEqual(files);
+});
+
+test('receives multiple dropped files', async () => {
+  const onReceiveFiles = vi.fn();
+  const files = [new File(['first'], 'first.kgm'), new File(['second'], 'second.ncm')];
+  render(<FileInput onReceiveFiles={onReceiveFiles}>Drop files</FileInput>);
+
+  fireEvent.drop(screen.getByText('Drop files'), {
+    dataTransfer: {
+      files,
+      items: files.map((file) => ({ kind: 'file', type: file.type, getAsFile: () => file })),
+      types: ['Files'],
+    },
+  });
+
+  await waitFor(() => expect(onReceiveFiles).toHaveBeenCalledOnce());
+  expect(onReceiveFiles.mock.calls[0][0]).toEqual(files);
+});

src/test-utils/setup-jest.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';
 
 // FIXME: Use something like jsdom-worker?
 //   see: https://github.com/developit/jsdom-worker

src/test-utils/test-helper.tsx

@@ -17,7 +17,7 @@ export function renderWithProviders(
   ui: React.ReactElement,
   { preloadedState = {}, store = setupStore(preloadedState), ...renderOptions }: ExtendedRenderOptions = {},
 ) {
-  function Wrapper({ children }: PropsWithChildren<unknown>): JSX.Element {
+  function Wrapper({ children }: PropsWithChildren<unknown>): React.JSX.Element {
     return <Provider store={store}>{children}</Provider>;
   }
 

src/util/__tests__/MMKVParser.test.ts

@@ -1,6 +1,6 @@
 import { MMKVParser } from '../MMKVParser';
 
-const makeViewFromBuffer = (buff: Buffer) =>
+const makeViewFromBuffer = (buff: Buffer<ArrayBuffer>) =>
   new DataView(buff.buffer.slice(buff.byteOffset, buff.byteOffset + buff.byteLength));
 
 test('throw error on broken file', () => {

src/util/mmkv/__tests__/kuwo.test.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { parseAndroidKuwoEKey, parseIosKuwoEKey } from '../kuwo';
 
-const makeViewFromBuffer = (buff: Buffer) =>
+const makeViewFromBuffer = (buff: Buffer<ArrayBuffer>) =>
   new DataView(buff.buffer.slice(buff.byteOffset, buff.byteOffset + buff.byteLength));
 
 test('parse kuwo android ekey mmkv file "cn.kuwo.player.mmkv.defaultconfig"', () => {

src/util/mmkv/__tests__/qm.test.ts

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { parseAndroidQmEKey } from '../qm';
 
-const makeViewFromBuffer = (buff: Buffer) =>
+const makeViewFromBuffer = (buff: Buffer<ArrayBuffer>) =>
   new DataView(buff.buffer.slice(buff.byteOffset, buff.byteOffset + buff.byteLength));
 
 test('parse qm mmkv file', () => {