fix(template):fix deps, fix styles (#4378)

frontend/providers/template/next.config.js

@@ -22,7 +22,8 @@ const nextConfig = {
   experimental: {
     // this includes files from the monorepo base two directories up
     outputFileTracingRoot: path.join(__dirname, '../../')
-  }
+  },
+  transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk']
 };
 
 module.exports = nextConfig;

frontend/providers/template/package.json

@@ -13,15 +13,20 @@
     "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.1",
     "@chakra-ui/system": "^2.6.1",
+    "@codemirror/commands": "^6.3.2",
     "@codemirror/language": "^6.9.1",
     "@codemirror/legacy-modes": "^6.3.3",
+    "@codemirror/state": "^6.3.2",
+    "@codemirror/view": "^6.22.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@kubernetes/client-node": "^0.18.1",
     "@next/font": "13.1.6",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
+    "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
-    "@uiw/react-codemirror": "4.21.20",
     "axios": "^1.5.1",
+    "codemirror": "^6.0.1",
     "cron-parser": "^4.9.0",
     "cronstrue": "^2.32.0",
     "dayjs": "^1.11.10",

frontend/providers/template/src/constants/theme.ts

@@ -5,6 +5,7 @@ import {
   defineStyleConfig,
   extendTheme
 } from '@chakra-ui/react';
+import { theme as sealosTheme } from '@sealos/ui';
 // @ts-ignore
 import { selectAnatomy, switchAnatomy } from '@chakra-ui/anatomy';
 const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
@@ -159,7 +160,7 @@ const Tooltip = defineStyleConfig({
   }
 });
 
-export const theme = extendTheme({
+export const theme = extendTheme(sealosTheme, {
   styles: {
     global: {
       'html, body': {

frontend/providers/template/src/pages/deploy/components/Yaml.tsx

@@ -1,13 +1,13 @@
 import MyIcon from '@/components/Icon';
-import YamlCode from '@/components/YamlCode/index';
 import type { QueryType, YamlItemType } from '@/types';
 import { useCopyData } from '@/utils/tools';
 import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import styles from './index.module.scss';
+import { YamlCode } from '@sealos/ui';
 
-const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: number }) => {
+const Yaml = ({ yamlList = [] }: { yamlList: YamlItemType[]; pxVal: number }) => {
   const theme = useTheme();
   const router = useRouter();
   const { name } = router.query as QueryType;
@@ -41,7 +41,11 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe
             </Box>
           </Flex>
           <Box flex={1} h={0} overflow={'auto'} bg={'#ffffff'} p={4}>
-            <YamlCode className={styles.code} content={yamlList[selectedIndex].value} />
+            <YamlCode
+              markdown={{
+                children: yamlList[selectedIndex].value
+              }}
+            />
           </Box>
         </Flex>
       )}

frontend/providers/template/src/pages/develop/components/Editor.tsx

@@ -0,0 +1,48 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import { StreamLanguage } from '@codemirror/language';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
+import { basicSetup } from 'codemirror';
+import { useEffect, useRef, useState } from 'react';
+
+export default function Editor({
+  onDocChange,
+  ...styles
+}: { onDocChange: (x: EditorState) => void } & BoxProps) {
+  const [init, setInit] = useState(true);
+  const extensions = [
+    basicSetup,
+    keymap.of(vscodeKeymap),
+    StreamLanguage.define(yaml),
+    EditorView.updateListener.of((update) => {
+      // persist
+      const store = update.state.toJSON();
+      localStorage.setItem('yamlEditor', JSON.stringify(store));
+      if (update.docChanged || init) onDocChange(update.state);
+      init && setInit(false);
+    })
+  ];
+  const getState = () => {
+    try {
+      return EditorState.create({
+        ...EditorState.fromJSON(JSON.parse(localStorage.getItem('yamlEditor')!)),
+        extensions
+      });
+    } catch (err) {
+      return undefined;
+    }
+  };
+  const ref = useRef(null);
+  useEffect(() => {
+    const view = new EditorView({
+      state: getState(),
+      extensions, // indentOnInput(),
+      parent: ref.current!
+    });
+    return () => view && view.destroy();
+  }, []);
+
+  return <Box ref={ref} {...styles} />;
+}

frontend/providers/template/src/pages/develop/components/YamlList.tsx

@@ -1,22 +1,14 @@
-import MyIcon from '@/components/Icon';
-import YamlCode from '@/components/YamlCode/index';
-import type { QueryType, YamlItemType } from '@/types';
-import { useCopyData } from '@/utils/tools';
-import { Box, Flex, useTheme } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import type { YamlItemType } from '@/types';
+import { Box, Flex, Grid } from '@chakra-ui/react';
 import { useState } from 'react';
-import styles from './index.module.scss';
-
+import { YamlCode } from '@sealos/ui';
 const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
-  const theme = useTheme();
-  const router = useRouter();
-  const { name } = router.query as QueryType;
-  const { copyData } = useCopyData();
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   return (
     <Flex
       flexGrow={1}
+      h="0"
       mt={'12px'}
       alignItems={'start'}
       zIndex={1}
@@ -54,17 +46,9 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
         ))}
       </Box>
       {!!yamlList[selectedIndex] && (
-        <Flex
-          w="100%"
-          h="100%"
-          className={styles.codeBox}
-          flexDirection={'column'}
-          position={'relative'}
-        >
-          <Box flex={1} h={0} bg={'#ffffff'} p={4}>
-            <YamlCode className={styles.code} content={yamlList[selectedIndex].value} />
-          </Box>
-        </Flex>
+        <Grid w="0" h="full" flex={'auto'} overflow={'auto'}>
+          <YamlCode markdown={{ children: yamlList[selectedIndex].value }}></YamlCode>
+        </Grid>
       )}
     </Flex>
   );