Merge pull request #701 from ajnart/change-css-highlight

Change css highlight, remove unused packages

next.config.js

@@ -1,19 +1,14 @@
 const { i18n } = require('./next-i18next.config');
 
-const removeImports = require('next-remove-imports')();
-
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
-module.exports = withBundleAnalyzer(
-  removeImports({
-    experimental: { esmExternals: true },
-    images: {
-      domains: ['cdn.jsdelivr.net'],
-    },
-    reactStrictMode: true,
-    output: 'standalone',
-    i18n,
-  })
-);
+module.exports = withBundleAnalyzer({
+  images: {
+    domains: ['cdn.jsdelivr.net'],
+  },
+  reactStrictMode: true,
+  output: 'standalone',
+  i18n,
+});

package.json

@@ -27,9 +27,6 @@
     "@ctrl/qbittorrent": "^4.1.0",
     "@ctrl/shared-torrent": "^4.1.1",
     "@ctrl/transmission": "^4.1.1",
-    "@dnd-kit/core": "^6.0.5",
-    "@dnd-kit/sortable": "^7.0.1",
-    "@dnd-kit/utilities": "^3.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@mantine/core": "^5.9.3",
@@ -40,35 +37,28 @@
     "@mantine/modals": "^5.9.3",
     "@mantine/next": "^5.9.3",
     "@mantine/notifications": "^5.9.3",
-    "@nivo/core": "^0.79.0",
-    "@nivo/line": "^0.79.1",
+    "@nivo/core": "^0.80.0",
+    "@nivo/line": "^0.80.0",
     "@tabler/icons": "^1.106.0",
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.24.4",
-    "@uiw/react-textarea-code-editor": "v1.4.4",
     "axios": "^0.27.2",
     "consola": "^2.15.3",
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.7",
     "dockerode": "^3.3.2",
-    "embla-carousel-react": "^7.0.0",
     "fily-publish-gridstack": "^0.0.13",
     "framer-motion": "^6.5.1",
     "i18next": "^21.9.1",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "i18next-http-backend": "^1.4.1",
     "js-file-download": "^0.4.12",
     "next": "^13.1.6",
     "next-i18next": "^11.3.0",
-    "next-remove-imports": "^1.0.8",
     "nzbget-api": "^0.0.3",
-    "ping": "^0.4.2",
-    "prism-react-renderer": "^1.3.5",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-simple-code-editor": "^0.13.1",
     "sabnzbd-api": "^1.5.0",
-    "sharp": "^0.30.7",
-    "systeminformation": "^5.12.1",
     "uuid": "^8.3.2",
     "yarn": "^1.22.19",
     "zustand": "^4.1.4"
@@ -78,14 +68,12 @@
     "@next/eslint-plugin-next": "^12.1.4",
     "@types/dockerode": "^3.3.9",
     "@types/node": "17.0.1",
-    "@types/ping": "^0.4.1",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.1",
     "@types/uuid": "^8.3.4",
     "@types/video.js": "^7.3.51",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-transform-remove-imports": "^1.7.0",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",

src/components/Settings/Customization/Theme/CustomCssChanger.tsx

@@ -1,24 +1,13 @@
-import {
-  Box,
-  createStyles,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-  Text,
-  useMantineTheme,
-} from '@mantine/core';
+import { Box, createStyles, Group, Loader, Stack, Text, useMantineTheme } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-import dynamic from 'next/dynamic';
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
-
-const CodeEditor = dynamic(
-  () => import('@uiw/react-textarea-code-editor').then((mod) => mod.default),
-  { ssr: false }
-);
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism.css';
 
 export const CustomCssChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
@@ -53,22 +42,20 @@ export const CustomCssChanger = () => {
     <Stack spacing={4} mt="xl">
       <Text>{t('customCSS.label')}</Text>
       <Text color="dimmed" size="xs">
-      {t('customCSS.description')}
+        {t('customCSS.description')}
       </Text>
       <div className={classes.codeEditorRoot}>
-        <ScrollArea style={{ height: codeEditorHeight }}>
-          <CodeEditor
-            className={classes.codeEditor}
-            placeholder={t('customCSS.placeholder')}
-            value={nonDebouncedCustomCSS}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-              setNonDebouncedCustomCSS(event.target.value.trim())
-            }
-            language="css"
-            data-color-mode={colorScheme}
-            minHeight={codeEditorHeight}
-          />
-        </ScrollArea>
+        <Editor
+          value={nonDebouncedCustomCSS}
+          onValueChange={(code) => setNonDebouncedCustomCSS(code)}
+          highlight={(code) => highlight(code, languages.extend('css', {}), 'css')}
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: codeEditorHeight,
+          }}
+        />
         {codeIsDirty && (
           <Box className={classes.codeEditorFooter}>
             <Group p="xs" spacing="xs">

src/pages/_app.tsx

@@ -29,7 +29,6 @@ import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAt
 import 'video.js/dist/video-js.css';
 
 import '../styles/global.scss';
-import '@uiw/react-textarea-code-editor/dist.css';
 
 function App(
   this: any,

src/widgets/video/VideoFeed.tsx

@@ -1,5 +1,4 @@
-import { LoadingOverlay } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { createStyles, LoadingOverlay } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';

src/widgets/video/VideoStreamTile.tsx

@@ -1,6 +1,6 @@
 import { Center, Group, Stack, Title } from '@mantine/core';
 import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import VideoFeed from './VideoFeed';