build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project

* feat: it's alive!

* feat: `make dev` working!

* feat: replace custom serviceWorker with vite plugin

* test: replace Jest with Vitest

* fix: run prettier

* fix: skip eslint for now.

* chore: remove ui.old folder

* refactor: replace lodash.pick with simple destructuring

* fix: eslint errors (wip)

* fix: eslint errors (wip)

* fix: display-name eslint errors (wip)

* fix: no-console eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: build

* fix: pwa manifest

* refactor: pwa manifest

* refactor: simplify PORT configuration

* refactor: rename simple JS files

* test: cover playlistUtils

* fix: react-image-lightbox

* feat(ui): add sourcemaps to help debug issues

ui/src/themes/README.md

@@ -1,2 +1,2 @@
-To create and contribute with new themes, please refer to 
+To create and contribute with new themes, please refer to
 https://www.navidrome.org/docs/developers/creating-themes/

ui/src/themes/catppuccinMacchiato.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #00a4dc
@@ -149,5 +149,6 @@ module.exports = `
 .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
 }
-
 `
+
+export default stylesheet

ui/src/themes/catppuccinMacchiato.js

@@ -1,3 +1,5 @@
+import stylesheet from './catppuccinMacchiato.css.js'
+
 export default {
   themeName: 'Catppuccin Macchiato',
   palette: {
@@ -99,6 +101,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./catppuccinMacchiato.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/dark.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #7171d5
@@ -30,5 +30,6 @@ module.exports = `
 .audio-lists-panel-content .audio-item:active .group:not([class=".player-delete"]) svg, .audio-lists-panel-content .audio-item:hover .group:not([class=".player-delete"]) svg {
     color: #5f5fc4
 }
-
 `
+
+export default stylesheet

ui/src/themes/dark.js

@@ -1,4 +1,5 @@
 import blue from '@material-ui/core/colors/blue'
+import stylesheet from './dark.css.js'
 
 export default {
   themeName: 'Dark',
@@ -41,6 +42,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./dark.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/electricPurple.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #bd4aff;
@@ -34,6 +34,6 @@ module.exports = `
 .react-jinke-music-player-mobile-progress .rc-slider-handle, .react-jinke-music-player-mobile-progress .rc-slider-track {
     background-color: #8800cb;
 }
-
-
 `
+
+export default stylesheet

ui/src/themes/electricPurple.js

@@ -1,3 +1,5 @@
+import stylesheet from './electricPurple.css.js'
+
 export default {
   themeName: 'Electric Purple',
   palette: {
@@ -50,6 +52,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./electricPurple.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/extradark.js

@@ -1,4 +1,5 @@
 import blue from '@material-ui/core/colors/blue'
+import stylesheet from './dark.css.js'
 
 export default {
   themeName: 'Extra Dark',
@@ -38,6 +39,6 @@ export default {
 
   player: {
     theme: 'dark',
-    stylesheet: require('./dark.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/gruvboxDark.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #458588
@@ -50,5 +50,6 @@ module.exports = `
 .MuiCheckbox-colorSecondary.Mui-checked {
     color: #458588 !important
 }
-
 `
+
+export default stylesheet

ui/src/themes/gruvboxDark.js

@@ -1,3 +1,5 @@
+import stylesheet from './gruvboxDark.css.js'
+
 export default {
   themeName: 'Gruvbox Dark',
   palette: {
@@ -99,6 +101,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./gruvboxDark.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/light.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 .react-jinke-music-player-main.light-theme .loading svg {
     color: #5f5fc4;
     font-size: 24px
@@ -118,3 +118,5 @@ module.exports = `
     color: #5f5fc4 !important
 }
 `
+
+export default stylesheet

ui/src/themes/light.js

@@ -1,3 +1,5 @@
+import stylesheet from './light.css.js'
+
 export default {
   themeName: 'Light',
   palette: {
@@ -55,6 +57,6 @@ export default {
   },
   player: {
     theme: 'light',
-    stylesheet: require('./light.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/monokai.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #fd971f
@@ -46,5 +46,6 @@ module.exports = `
 .progress-bar-content .audio-title a {
     color: #f8f8f2
 }
-
 `
+
+export default stylesheet

ui/src/themes/monokai.js

@@ -1,3 +1,5 @@
+import stylesheet from './monokai.css.js'
+
 export default {
   themeName: 'Monokai',
   palette: {
@@ -99,6 +101,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./monokai.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/nord.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #81A1C1
@@ -163,5 +163,6 @@ module.exports = `
 .react-jinke-music-player-mobile-progress .rc-slider-handle {
     border: none;
 }
-
 `
+
+export default stylesheet

ui/src/themes/nord.js

@@ -1,3 +1,5 @@
+import stylesheet from './nord.css.js'
+
 // For Album, Playlist
 const musicListActions = {
   alignItems: 'center',
@@ -420,6 +422,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./nord.css.js'),
+    stylesheet,
   },
 }

ui/src/themes/nuclear.css.js

@@ -1,4 +1,4 @@
-module.exports = `
+const stylesheet = `
 
 .react-jinke-music-player-main svg:active, .react-jinke-music-player-main svg:hover {
     color: #b8bb26
@@ -59,5 +59,5 @@ module.exports = `
 .MuiCheckbox-colorSecondary.Mui-checked {
     color: #b8bb26 !important
 }
-
 `
+export default stylesheet

ui/src/themes/nuclear.js

@@ -1,3 +1,5 @@
+import stylesheet from './nuclear.css.js'
+
 const nukeCol = {
   primary: '#1d2021',
   secondary: '#282828',
@@ -198,6 +200,6 @@ export default {
   },
   player: {
     theme: 'dark',
-    stylesheet: require('./nuclear.css.js'),
+    stylesheet,
   },
 }