feat: modal reworks (daeuniverse#149)

* feat: qrcode modal rework

* feat: use github light as monaco editor light theme

---------

Co-authored-by: dae-bot[bot] <136105375+dae-bot[bot]@users.noreply.github.com>

.lintstagedrc.yml

@@ -1,2 +1,3 @@
-"*.{js,jsx,ts,tsx}": "eslint --fix"
-"*.{js,jsx,ts,tsx,md,html,css,less,scss,json,yml,yaml,graphql}": "prettier --write"
+'package.json': 'sort-package-json'
+'*.{js,jsx,ts,tsx}': 'eslint --fix'
+'*.{js,jsx,ts,tsx,md,html,css,less,scss,json,yml,yaml,graphql}': 'prettier --write'

package.json

@@ -1,20 +1,20 @@
 {
   "name": "daed",
-  "private": true,
   "version": "v0.1.0",
-  "license": "MIT",
+  "private": true,
+  "description": "A Web Dashboard For dae",
   "homepage": "https://daeuniverse.github.io/daed",
   "repository": "https://github.com/daeuniverse/daed",
-  "description": "A Web Dashboard For dae",
+  "license": "MIT",
   "author": {
     "name": "daeuniverse",
     "email": "[email protected]"
   },
   "scripts": {
-    "dev": "vite dev",
     "build": "vite build",
-    "lint": "vite lint",
     "codegen": "graphql-codegen",
+    "dev": "vite dev",
+    "lint": "vite lint",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -95,6 +95,7 @@
     "react-router": "^6.14.1",
     "react-router-dom": "^6.14.1",
     "simple-git": "^3.19.1",
+    "sort-package-json": "^2.5.1",
     "typescript": "^5.1.6",
     "urijs": "^1.19.11",
     "vite": "^4.4.1",

src/App.tsx

@@ -11,7 +11,7 @@ import { useColorScheme } from '@mantine/hooks'
 import { ModalsProvider } from '@mantine/modals'
 import { Notifications } from '@mantine/notifications'
 import { useStore } from '@nanostores/react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { QueryProvider } from '~/contexts'
 import { Router } from '~/Router'
@@ -40,56 +40,63 @@ export const App = () => {
     colorSchemeAtom.set(colorScheme)
   }, [colorScheme])
 
-  const themeObject: MantineThemeOverride = useMemo(
-    () => ({
-      colorScheme,
-      fontFamily: 'Fira Sans, Monaco, Consolas, sans-serif',
-      fontFamilyMonospace: 'Source Code Pro, Monaco, Consolas, monospace',
-      primaryColor: 'violet',
-      cursorType: 'pointer',
-      components: {
-        Stack: { defaultProps: { spacing: 'sm' } },
-        Group: { defaultProps: { spacing: 'sm' } },
-        Button: { defaultProps: { uppercase: true } },
-        ActionIcon: { defaultProps: { size: 'sm' } },
-        Modal: {
-          defaultProps: {
-            size: 'lg',
-            radius: 'md',
-            centered: true,
-            scrollAreaComponent: ScrollArea.Autosize,
-          },
+  const themeObject: MantineThemeOverride = {
+    colorScheme,
+    fontFamily: 'Fira Sans, Monaco, Consolas, sans-serif',
+    fontFamilyMonospace: 'Source Code Pro, Monaco, Consolas, monospace',
+    primaryColor: 'violet',
+    cursorType: 'pointer',
+    components: {
+      Stack: { defaultProps: { spacing: 'sm' } },
+      Group: { defaultProps: { spacing: 'sm' } },
+      Button: { defaultProps: { uppercase: true } },
+      ActionIcon: { defaultProps: { size: 'sm' } },
+      Modal: {
+        defaultProps: {
+          size: 'lg',
+          radius: 'md',
+          centered: true,
+          scrollAreaComponent: ScrollArea.Autosize,
         },
-        Drawer: {
-          defaultProps: {
-            size: 'lg',
-            scrollAreaComponent: ScrollArea.Autosize,
-          },
+      },
+      ModalHeader: {
+        defaultProps: (theme) => ({
+          bg: colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
+        }),
+      },
+      ModalTitle: {
+        defaultProps: {
+          color: 'white',
         },
-        Menu: {
-          styles: {
-            label: {
-              textTransform: 'uppercase',
-            },
-          },
+      },
+      Drawer: {
+        defaultProps: {
+          size: 'lg',
+          scrollAreaComponent: ScrollArea.Autosize,
         },
-        Select: {
-          defaultProps: {
-            withinPortal: true,
-            size: 'xs',
+      },
+      Menu: {
+        styles: {
+          label: {
+            textTransform: 'uppercase',
           },
         },
-        MultiSelect: { defaultProps: { size: 'xs' } },
-        Switch: { defaultProps: { size: 'xs' } },
-        Checkbox: { defaultProps: { size: 'xs' } },
-        Radio: { defaultProps: { size: 'xs' } },
-        RadioGroup: { defaultProps: { size: 'xs' } },
-        TextInput: { defaultProps: { size: 'xs' } },
-        NumberInput: { defaultProps: { size: 'xs' } },
       },
-    }),
-    [colorScheme],
-  )
+      Select: {
+        defaultProps: {
+          withinPortal: true,
+          size: 'xs',
+        },
+      },
+      MultiSelect: { defaultProps: { size: 'xs' } },
+      Switch: { defaultProps: { size: 'xs' } },
+      Checkbox: { defaultProps: { size: 'xs' } },
+      Radio: { defaultProps: { size: 'xs' } },
+      RadioGroup: { defaultProps: { size: 'xs' } },
+      TextInput: { defaultProps: { size: 'xs' } },
+      NumberInput: { defaultProps: { size: 'xs' } },
+    },
+  }
 
   return (
     <QueryProvider>

src/components/QRCodeModal.tsx

@@ -1,4 +1,5 @@
-import { Center, Modal } from '@mantine/core'
+import { ActionIcon, Badge, CopyButton, Flex, Group, Modal } from '@mantine/core'
+import { IconCheck, IconCopy } from '@tabler/icons-react'
 import { QRCodeCanvas } from 'qrcode.react'
 import { forwardRef, useImperativeHandle, useState } from 'react'
 
@@ -24,10 +25,28 @@ export const QRCodeModal = forwardRef(({ opened, onClose }: { opened: boolean; o
   }))
 
   return (
-    <Modal opened={opened} onClose={onClose} title={props.name}>
-      <Center>
-        <QRCodeCanvas size={320} value={props.link} />
-      </Center>
+    <Modal opened={opened} onClose={onClose} title={props.name} keepMounted={false}>
+      <Flex mx="auto" py="md" direction="column" align="center" justify="center" gap="md">
+        <QRCodeCanvas size={240} value={props.link} />
+
+        <Group position="apart" spacing="xs">
+          <Badge
+            sx={{
+              width: 240,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+            size="lg"
+          >
+            {props.link}
+          </Badge>
+
+          <CopyButton value={props.link}>
+            {({ copied, copy }) => <ActionIcon onClick={copy}>{copied ? <IconCheck /> : <IconCopy />}</ActionIcon>}
+          </CopyButton>
+        </Group>
+      </Flex>
     </Modal>
   )
 })

src/constants/editor.ts

@@ -2,7 +2,7 @@ import { EditorProps } from '@monaco-editor/react'
 import { languages } from 'monaco-editor'
 
 export const EDITOR_THEME_DARK = 'vs-dark'
-export const EDITOR_THEME_LIGHT = 'github'
+export const EDITOR_THEME_LIGHT = 'githubLight'
 
 export const EDITOR_OPTIONS: EditorProps['options'] = {
   fontSize: 14,
@@ -36,9 +36,7 @@ export const EDITOR_LANGUAGE_ROUTINGA: languages.IMonarchLanguage = {
     'domain',
     'dport',
     'fallback',
-    'geoip',
     'must_rules',
-    'geosite',
     'ipversion',
     'l4proto',
     'mac',

src/main.tsx

@@ -15,52 +15,50 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import ReactDOM from 'react-dom/client'
 
 import { App } from '~/App'
+import { EDITOR_LANGUAGE_ROUTINGA } from '~/constants/editor'
 import { i18nInit } from '~/i18n'
 
-import { EDITOR_LANGUAGE_ROUTINGA, EDITOR_THEME_LIGHT } from './constants/editor'
-
 dayjs.extend(duration)
 
-const loadMonaco = () =>
-  new Promise<void>((res) => {
-    loader.config({ monaco })
+const loadMonaco = async () => {
+  loader.config({ monaco })
+
+  self.MonacoEnvironment = {
+    createTrustedTypesPolicy() {
+      return undefined
+    },
 
-    self.MonacoEnvironment = {
-      createTrustedTypesPolicy() {
-        return undefined
-      },
-      getWorker(_, label) {
-        if (label === 'json') {
-          return new jsonWorker()
-        }
+    getWorker(_, label) {
+      if (label === 'json') {
+        return new jsonWorker()
+      }
 
-        if (label === 'css' || label === 'scss' || label === 'less') {
-          return new cssWorker()
-        }
+      if (label === 'css' || label === 'scss' || label === 'less') {
+        return new cssWorker()
+      }
 
-        if (label === 'html' || label === 'handlebars' || label === 'razor') {
-          return new htmlWorker()
-        }
+      if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        return new htmlWorker()
+      }
 
-        if (label === 'typescript' || label === 'javascript') {
-          return new tsWorker()
-        }
+      if (label === 'typescript' || label === 'javascript') {
+        return new tsWorker()
+      }
 
-        return new editorWorker()
-      },
-    }
+      return new editorWorker()
+    },
+  }
 
-    loader.init().then((monaco) => {
-      monaco.languages.register({ id: 'routingA', extensions: ['dae'] })
-      monaco.languages.setMonarchTokensProvider('routingA', EDITOR_LANGUAGE_ROUTINGA)
+  const monacoInstance = await loader.init()
 
-      import('monaco-themes/themes/GitHub.json').then((data) => {
-        monaco.editor.defineTheme(EDITOR_THEME_LIGHT, data as editor.IStandaloneThemeData)
+  monacoInstance.languages.register({ id: 'routingA', extensions: ['dae'] })
+  monacoInstance.languages.setMonarchTokensProvider('routingA', EDITOR_LANGUAGE_ROUTINGA)
 
-        res()
-      })
-    })
-  })
+  const themeGithub = await import('monaco-themes/themes/GitHub.json')
+  const themeGithubLight = await import('monaco-themes/themes/GitHub Light.json')
+  monacoInstance.editor.defineTheme('github', themeGithub as editor.IStandaloneThemeData)
+  monacoInstance.editor.defineTheme('githubLight', themeGithubLight as editor.IStandaloneThemeData)
+}
 
 Promise.all([i18nInit(), loadMonaco()]).then(() => {
   ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)