refactor: Move to Next.js (#1505)

* chores: Create Nextjs Mantine v7 template

* feat: Enable routing under the /new subfolder

* refactor: Move back to Mantine v6 and Next.js page router

* refactor: Move AppShell into New/

* feat: Create Next.js AppShell

* chores: Update Licence

* feat: Favicon and theme aware header image

* chores: Add all links to Navbar

* chores: Add Models, Datacontracts and Helpers

* feat: Call global values in getServerSideProps

* chores: Remove unneded imports

VocaDbWeb/New/.eslintignore

@@ -0,0 +1 @@
+*.js

VocaDbWeb/New/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'mantine',
+    'plugin:@next/next/recommended',
+    'plugin:jest/recommended',
+    'plugin:storybook/recommended',
+  ],
+  plugins: ['testing-library', 'jest'],
+  overrides: [
+    {
+      files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
+    },
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

VocaDbWeb/New/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+*.tsbuildinfo
+
+# storybook
+storybook-static

VocaDbWeb/New/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('eslint-config-mantine/.prettierrc.js');

VocaDbWeb/New/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../**/*.story.mdx', '../**/*.story.@(js|jsx|ts|tsx)'],
+  addons: [
+    'storybook-dark-mode',
+    {
+      name: 'storybook-addon-turbo-build',
+      options: { optimizationLevel: 2 },
+    },
+  ],
+  framework: '@storybook/react',
+};

VocaDbWeb/New/.storybook/preview.tsx

@@ -0,0 +1,42 @@
+import { useDarkMode } from 'storybook-dark-mode';
+import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import React from 'react';
+
+export const parameters = { layout: 'fullscreen' };
+
+function ThemeWrapper(props: { children: React.ReactNode }) {
+	return (
+		<ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
+			<MantineProvider
+				theme={{ colorScheme: useDarkMode() ? 'dark' : 'light' }}
+				withGlobalStyles
+				withNormalizeCSS
+			>
+				{props.children}
+				<Notifications />
+			</MantineProvider>
+		</ColorSchemeProvider>
+	);
+}
+
+export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];
+
+// https://github.com/vercel/next.js/issues/18393#issuecomment-955577890
+import * as NextImage from 'next/image';
+
+const OriginalNextImage = NextImage.default;
+
+// eslint-disable-next-line no-import-assign
+Object.defineProperty(NextImage, 'default', {
+	configurable: true,
+	value: (/** @type {import('next/image').ImageProps} */ props) => {
+		if (typeof props.src === 'string') {
+			return <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />;
+		} else {
+			// don't need blurDataURL here since it is already defined on the StaticImport type
+			return <OriginalNextImage {...props} unoptimized />;
+		}
+	},
+});
+

VocaDbWeb/New/Helpers/AjaxHelper.ts

@@ -0,0 +1,74 @@
+import { forOwn } from 'lodash-es';
+
+export class AjaxHelper {
+	static createUrl = (params: {
+		[key: string]: string[] | number[];
+	}): string | null => {
+		if (!params) return null;
+
+		var par: string[] = [];
+
+		forOwn(params, (val, key) => {
+			par.push(
+				key +
+					'=' +
+					(val as string[])
+						.map((v) => encodeURIComponent(v || ''))
+						.join('&' + key + '='),
+			);
+		});
+
+		var query = par.join('&');
+		return query;
+	};
+
+	static stringify = (params: any): string => {
+		// Removes undefined.
+		const filtered = Object.fromEntries(
+			Object.entries(params).filter(([_, v]) => v != null),
+		);
+		// Code from: https://stackoverflow.com/questions/286141/remove-blank-attributes-from-an-object-in-javascript/30386744#30386744
+		return getUrlString(filtered);
+	};
+}
+
+const getUrlString = (
+	params: any,
+	keys: string[] = [],
+	isArray = false,
+): string => {
+	const p = Object.keys(params)
+		.map((key) => {
+			let val = params[key];
+
+			if (
+				'[object Object]' === Object.prototype.toString.call(val) ||
+				Array.isArray(val)
+			) {
+				if (Array.isArray(params)) {
+					keys.push('');
+				} else {
+					keys.push(key);
+				}
+				return getUrlString(val, keys, Array.isArray(val));
+			} else {
+				let tKey = key;
+
+				if (keys.length > 0) {
+					const tKeys = isArray ? keys : [...keys, key];
+					tKey = tKeys.reduce((str, k) => {
+						return '' === str ? k : `${str}[${k}]`;
+					}, '');
+				}
+				if (isArray) {
+					return `${tKey}[]=${val}`;
+				} else {
+					return `${tKey}=${val}`;
+				}
+			}
+		})
+		.join('&');
+
+	keys.pop();
+	return p;
+};

VocaDbWeb/New/Helpers/AlbumHelper.ts

@@ -0,0 +1,17 @@
+import { AlbumType } from '@/types/Models/Albums/AlbumType';
+import { ContentFocus } from '@/types/Models/ContentFocus';
+
+export class AlbumHelper {
+	static getContentFocus = (albumType: AlbumType): ContentFocus => {
+		switch (albumType) {
+			case AlbumType.Artbook:
+				return ContentFocus.Illustration;
+
+			case AlbumType.Video:
+				return ContentFocus.Video;
+
+			default:
+				return ContentFocus.Music;
+		}
+	};
+}