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,75 @@
+import { Card, CardContent, Typography } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { useTranslate } from 'react-admin'
+import { CollapsibleComment, DurationField, SizeField } from '../common'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    container: {
+      [theme.breakpoints.down('xs')]: {
+        padding: '0.7em',
+        minWidth: '24em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        padding: '1em',
+        minWidth: '32em',
+      },
+    },
+    details: {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      [theme.breakpoints.down('xs')]: {
+        width: '14em',
+      },
+      [theme.breakpoints.up('sm')]: {
+        width: '26em',
+      },
+      [theme.breakpoints.up('lg')]: {
+        width: '38em',
+      },
+    },
+    title: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  }),
+  {
+    name: 'NDPlaylistDetails',
+  },
+)
+
+const PlaylistDetails = (props) => {
+  const { record = {} } = props
+  const translate = useTranslate()
+  const classes = useStyles()
+
+  return (
+    <Card className={classes.container}>
+      <CardContent className={classes.details}>
+        <Typography variant="h5" className={classes.title}>
+          {record.name || translate('ra.page.loading')}
+        </Typography>
+        <Typography component="p">
+          {record.songCount ? (
+            <span>
+              {record.songCount}{' '}
+              {translate('resources.song.name', {
+                smart_count: record.songCount,
+              })}
+              {' · '}
+              <DurationField record={record} source={'duration'} />
+              {' · '}
+              <SizeField record={record} source={'size'} />
+            </span>
+          ) : (
+            <span>&nbsp;</span>
+          )}
+        </Typography>
+        <CollapsibleComment record={record} />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default PlaylistDetails