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,77 @@
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import inflection from 'inflection'
+import TableCell from '@material-ui/core/TableCell'
+import TableContainer from '@material-ui/core/TableContainer'
+import TableRow from '@material-ui/core/TableRow'
+import {
+  ArrayField,
+  BooleanField,
+  ChipField,
+  DateField,
+  SingleFieldList,
+  TextField,
+  useRecordContext,
+  useTranslate,
+} from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
+import { MultiLineTextField } from '../common'
+
+const useStyles = makeStyles({
+  tableCell: {
+    width: '17.5%',
+  },
+})
+
+const AlbumInfo = (props) => {
+  const classes = useStyles()
+  const translate = useTranslate()
+  const record = useRecordContext(props)
+  const data = {
+    album: <TextField source={'name'} />,
+    albumArtist: <TextField source={'albumArtist'} />,
+    genre: (
+      <ArrayField source={'genres'}>
+        <SingleFieldList linkType={false}>
+          <ChipField source={'name'} />
+        </SingleFieldList>
+      </ArrayField>
+    ),
+    compilation: <BooleanField source={'compilation'} />,
+    updatedAt: <DateField source={'updatedAt'} showTime />,
+    comment: <MultiLineTextField source={'comment'} />,
+  }
+
+  const optionalFields = ['comment', 'genre']
+  optionalFields.forEach((field) => {
+    !record[field] && delete data[field]
+  })
+
+  return (
+    <TableContainer>
+      <Table aria-label="album details" size="small">
+        <TableBody>
+          {Object.keys(data).map((key) => {
+            return (
+              <TableRow key={`${record.id}-${key}`}>
+                <TableCell
+                  component="th"
+                  scope="row"
+                  className={classes.tableCell}
+                >
+                  {translate(`resources.album.fields.${key}`, {
+                    _: inflection.humanize(inflection.underscore(key)),
+                  })}
+                  :
+                </TableCell>
+                <TableCell align="left">{data[key]}</TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default AlbumInfo