feat: theme designer

packages/rath-client/config-overrides.js

@@ -1,5 +1,5 @@
 const webpack = require('webpack');
-
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 // const path = require('path');
 // const { override, babelInclude } = require('customize-cra')
 
@@ -15,11 +15,15 @@ module.exports = function override(config, env) {
         new webpack.ProvidePlugin({
             Buffer: ['buffer', 'Buffer'],
         }),
+        new MonacoWebpackPlugin({
+            // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
+            languages: ['json', 'sql']
+        })
     );
     // do stuff with the webpack config...
     config.module.rules.push(
         {
-            test: /\.worker\.js$/,
+            test: /.*\/src\/.*\.worker\.js$/,
             use: {
                 loader: 'worker-loader',
                 options: {
@@ -29,7 +33,7 @@ module.exports = function override(config, env) {
             },
         },
         {
-            test: /\.worker\.ts$/,
+            test: /.*\/src\/.*\.worker\.ts$/,
             use: [
                 {
                     loader: 'worker-loader',

packages/rath-client/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@antv/g6": "^4.7.10",
     "@babel/parser": "^7.19.6",
-    "@codemirror/lang-sql": "^6.3.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fluentui/font-icons-mdl2": "^8.5.4",
@@ -26,21 +25,21 @@
     "airtable": "^0.11.4",
     "ali-react-table": "^2.6.1",
     "buffer": "^6.0.3",
-    "codemirror": "^6.0.1",
     "dayjs": "^1.11.6",
     "immer": "^9.0.6",
     "jsesc": "^3.0.2",
     "localforage": "^1.10.0",
     "mobx": "^6.6.2",
     "mobx-react-lite": "^3.4.0",
+    "monaco-editor": "^0.34.1",
     "nanoid": "^4.0.0",
     "office-ui-fabric-core": "^11.0.1",
     "re-resizable": "^6.9.9",
     "react": "^17.0.1",
     "react-app-rewired": "^2.1.5",
     "react-dom": "^17.0.1",
     "react-intl-universal": "^2.6.6",
-    "react-json-view": "^1.19.1",
+    "react-monaco-editor": "^0.51.0",
     "react-scripts": "^5.0.1",
     "regexgen": "^1.3.0",
     "rxjs": "^7.5.7",
@@ -68,6 +67,7 @@
     "crypto-js": "^4.1.1",
     "customize-cra": "^1.0.0",
     "jest": "^29.3.1",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "2.7.1",
     "source-map-explorer": "^2.5.2",
     "ts-jest": "^29.0.3",

packages/rath-client/public/locales/en-US.json

@@ -10,6 +10,7 @@
         "expand": "Expand",
         "filter": "Filter",
         "preview": "Preview",
+        "submit": "Submit",
         "semanticType": {
             "nominal": "nominal",
             "ordinal": "ordinal",
@@ -20,6 +21,7 @@
             "dimension": "dimension",
             "measure": "measure"
         },
+        "vistheme": "Visualization Theme",
         "addVar": "Add Variable",
         "addFilter": "Add Filter",
         "addEncode": "Add Computation",
@@ -521,6 +523,16 @@
         "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
     },
     "login": {
+        "configKeys": {
+            "basic": "Basic",
+            "design": "Design",
+            "analysis": "Data Analysis"
+        },
+        "design": {
+            "createCustomTheme": "Create Custom Theme",
+            "syncFromSelectedTheme": "Sync From Selected Theme",
+            "useCustomTheme": "Use Custom Theme"
+        },
         "clickLogin": "Login",
         "haveSent": "Already Sent",
         "signIn": "Sign In",
@@ -551,5 +563,25 @@
             "userName": "Username",
             "password": "Password"
         }
+    },
+    "messages": {
+        "email": {
+            "success": {
+                "title": "Email sent successfully",
+                "content": "Email has been sent to {email}  Please check your email to get the verification code."
+            },
+            "error": {
+                "title": "Email sent failed"
+            }
+        },
+        "phone": {
+            "success": {
+                "title": "SMS sent successfully",
+                "content": "SMS has been sent to {phone}  Please check your phone to get the verification code."
+            },
+            "error": {
+                "title": "SMS sent failed"
+            }
+        }
     }
 }

packages/rath-client/public/locales/zh-CN.json

@@ -10,6 +10,7 @@
         "expand": "展开",
         "filter": "筛选",
         "preview": "预览",
+        "submit": "提交",
         "semanticType": {
             "nominal": "类别类型",
             "ordinal": "有序类型",
@@ -20,6 +21,7 @@
             "dimension": "维度",
             "measure": "度量"
         },
+        "vistheme": "可视化主题",
         "addVar": "添加变量",
         "addFilter": "添加筛选项",
         "addEncode": "添加计算",
@@ -531,6 +533,16 @@
         "shortMonths": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
     },
     "login": {
+        "configKeys": {
+            "basic": "基础信息",
+            "design": "样式/主题设计",
+            "analysis": "数据分析"
+        },
+        "design": {
+            "createCustomTheme": "创建自定义主题",
+            "syncFromSelectedTheme": "从已选主题同步配置",
+            "useCustomTheme": "使用自定义主题"
+        },
         "clickLogin": "点击登录",
         "haveSent": "已发送",
         "signIn": "登录",
@@ -561,5 +573,25 @@
             "userName": "用户名",
             "password": "密码"
         }
+    },
+    "messages": {
+        "email": {
+            "success": {
+                "title": "邮件发送成功",
+                "content": "邮箱已发送至{email}，请检查。"
+            },
+            "error": {
+                "title": "邮件发送发生错误"
+            }
+        },
+        "phone": {
+            "success": {
+                "title": "短信发送成功",
+                "content": "短信已发送至{phone}，请检查。"
+            },
+            "error": {
+                "title": "短信发送发生错误"
+            }
+        }
     }
 }

packages/rath-client/src/components/dbGraph/components.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { BOX_HEIGHT, BOX_WIDTH } from './config';
+
+export const DBBox = styled.span`
+    user-select: none;
+    width: ${BOX_WIDTH}px;
+    height: ${BOX_HEIGHT}px;
+    padding: 0 0.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-color: #fff;
+    border: 1px solid #cfcfcf;
+    border-radius: 2px;
+    text-align: center;
+    line-height: ${BOX_HEIGHT - 2}px;
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+    &:hover {
+        background-color: #f3f3f3;
+    }
+`;
+
+export const ListContainer = styled.div({
+    flexGrow: 1,
+    flexShrink: 1,
+    overflow: 'hidden scroll',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '10em',
+    borderRight: '1px solid #cfcfcf',
+    '> *': {
+        flexGrow: 0,
+        flexShrink: 0,
+        margin: '0.4em 0',
+    },
+});
+export const DiagramContainer = styled.div({
+    flexGrow: 1,
+    flexShrink: 1,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative',
+    boxSizing: 'border-box',
+    '> *': {
+        flexGrow: 0,
+        flexShrink: 0,
+    },
+});

packages/rath-client/src/components/dbGraph/config.ts

@@ -0,0 +1,5 @@
+export const STROKE_RADIUS = 12;
+export const BOX_WIDTH = 120;
+export const BOX_HEIGHT = 40;
+export const GRAPH_HEIGHT = 400;
+export const BOX_PADDING = 20;