From 0fa1572a673ef634609f9949ab0b651c7389c275 Mon Sep 17 00:00:00 2001 From: kunish <17328586+kunish@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:56:09 +0800 Subject: [PATCH] feat: modal reworks (#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 | 5 +- package.json | 11 ++-- pnpm-lock.yaml | 44 +++++++++++++++ src/App.tsx | 97 ++++++++++++++++++---------------- src/components/QRCodeModal.tsx | 29 ++++++++-- src/constants/editor.ts | 4 +- src/main.tsx | 66 +++++++++++------------ 7 files changed, 162 insertions(+), 94 deletions(-) diff --git a/.lintstagedrc.yml b/.lintstagedrc.yml index e6623a68..461ca361 100644 --- a/.lintstagedrc.yml +++ b/.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' diff --git a/package.json b/package.json index 2c3994c7..92168aa6 100644 --- a/package.json +++ b/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": "dae@v2raya.org" }, "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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bcb00325..2a6e85a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -236,6 +236,9 @@ dependencies: simple-git: specifier: ^3.19.1 version: 3.19.1 + sort-package-json: + specifier: ^2.5.1 + version: 2.5.1 typescript: specifier: ^5.1.6 version: 5.1.6 @@ -5142,12 +5145,22 @@ packages: engines: {node: '>=8'} dev: false + /detect-indent@7.0.1: + resolution: {integrity: sha512-Mc7QhQ8s+cLrnUfU/Ji94vG/r8M26m8f++vyres4ZoojaRDpZ1eSIh/EpzLNwlWuvzSZ3UbDFspjFvTDXe6e/g==} + engines: {node: '>=12.20'} + dev: false + /detect-libc@1.0.3: resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} engines: {node: '>=0.10'} hasBin: true dev: false + /detect-newline@4.0.0: + resolution: {integrity: sha512-1aXUEPdfGdzVPFpzGJJNgq9o81bGg1s09uxTWsqBlo9PI332uyJRQq13+LK/UN4JfxJbFdCXonUFQ9R/p7yCtw==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dev: false + /detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} dev: false @@ -5938,6 +5951,11 @@ packages: engines: {node: '>=6'} dev: false + /get-stdin@9.0.0: + resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==} + engines: {node: '>=12'} + dev: false + /get-stream@6.0.1: resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} engines: {node: '>=10'} @@ -5957,6 +5975,10 @@ packages: resolve-pkg-maps: 1.0.0 dev: false + /git-hooks-list@3.1.0: + resolution: {integrity: sha512-LF8VeHeR7v+wAbXqfgRlTSX/1BJR9Q1vEMR8JAz1cEg6GX07+zyj3sAdDvYjj/xnlIfVuGgj4qBei1K3hKH+PA==} + dev: false + /git-raw-commits@2.0.11: resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==} engines: {node: '>=10'} @@ -6529,6 +6551,11 @@ packages: engines: {node: '>=0.10.0'} dev: false + /is-plain-obj@4.1.0: + resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} + engines: {node: '>=12'} + dev: false + /is-plain-object@2.0.4: resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==} engines: {node: '>=0.10.0'} @@ -8294,6 +8321,23 @@ packages: tslib: 2.5.3 dev: false + /sort-object-keys@1.1.3: + resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==} + dev: false + + /sort-package-json@2.5.1: + resolution: {integrity: sha512-vx/KoZxm8YNMUqdlw7SGTfqR5pqZ/sUfgOuRtDILiOy/3AvzhAibyUe2cY3OpLs3oRSow9up4yLVtQaM24rbDQ==} + hasBin: true + dependencies: + detect-indent: 7.0.1 + detect-newline: 4.0.0 + get-stdin: 9.0.0 + git-hooks-list: 3.1.0 + globby: 13.2.2 + is-plain-obj: 4.1.0 + sort-object-keys: 1.1.3 + dev: false + /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} diff --git a/src/App.tsx b/src/App.tsx index adc58653..d27fd09c 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/components/QRCodeModal.tsx b/src/components/QRCodeModal.tsx index b0ce56f9..0e863b73 100644 --- a/src/components/QRCodeModal.tsx +++ b/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 ( - -
- -
+ + + + + + + {props.link} + + + + {({ copied, copy }) => {copied ? : }} + + + ) }) diff --git a/src/constants/editor.ts b/src/constants/editor.ts index 94eab6d2..c80ee3dd 100644 --- a/src/constants/editor.ts +++ b/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', diff --git a/src/main.tsx b/src/main.tsx index 434287a6..38254941 100644 --- a/src/main.tsx +++ b/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((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()