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
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,79 @@
+import React, { useCallback, useState } from 'react'
+import ReactDOM from 'react-dom'
+import { Chip, Dialog } from '@material-ui/core'
+import { getApplicationKeyMap, GlobalHotKeys } from 'react-hotkeys'
+import TableContainer from '@material-ui/core/TableContainer'
+import Paper from '@material-ui/core/Paper'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
+import { useTranslate } from 'react-admin'
+import inflection from 'inflection'
+import { keyMap } from '../hotkeys'
+import { DialogTitle } from './DialogTitle'
+import { DialogContent } from './DialogContent'
+
+const HelpTable = (props) => {
+  const keyMap = getApplicationKeyMap()
+  const translate = useTranslate()
+  return ReactDOM.createPortal(
+    <Dialog {...props}>
+      <DialogTitle onClose={props.onClose}>
+        {translate('help.title')}
+      </DialogTitle>
+      <DialogContent dividers>
+        <TableContainer component={Paper}>
+          <Table size="small">
+            <TableBody>
+              {Object.keys(keyMap).map((key) => {
+                const { sequences, name } = keyMap[key]
+                const description = translate(`help.hotkeys.${name}`, {
+                  _: inflection.humanize(name),
+                })
+                return (
+                  <TableRow key={key}>
+                    <TableCell align="right" component="th" scope="row">
+                      {description}
+                    </TableCell>
+                    <TableCell align="left">
+                      {sequences.map(({ sequence }) => (
+                        <Chip
+                          label={<kbd>{sequence}</kbd>}
+                          size="small"
+                          variant={'outlined'}
+                          key={sequence}
+                        />
+                      ))}
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>,
+    document.body,
+  )
+}
+
+export const HelpDialog = (props) => {
+  const [open, setOpen] = useState(false)
+
+  const handleClickClose = (e) => {
+    setOpen(false)
+    e.stopPropagation()
+  }
+
+  const handlers = {
+    SHOW_HELP: useCallback(() => setOpen(true), [setOpen]),
+  }
+
+  return (
+    <>
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
+      <HelpTable open={open} onClose={handleClickClose} />
+    </>
+  )
+}