feat: canvas size

.prettierrc

@@ -9,6 +9,7 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "arrowParens": "always",
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": ["<THIRD_PARTY_MODULES>","^@illa-design/(.*)$", "^@/(.*)$", "^[./]"],
   "importOrderSeparation": false,
   "importOrderSortSpecifiers": true

apps/builder/package.json

@@ -41,8 +41,8 @@
     "events": "^3.3.0",
     "framer-motion": "^7.6.12",
     "hotkeys-js": "^3.10.1",
-    "i18next": "^21.6.16",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next": "^22.4.6",
+    "i18next-browser-languagedetector": "^7.0.1",
     "jshint": "^2.13.6",
     "lodash": "^4.17.21",
     "qs": "^6.11.0",
@@ -55,7 +55,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.30.0",
     "react-hotkeys-hook": "^3.4.6",
-    "react-i18next": "^12.0.0",
+    "react-i18next": "^12.1.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.1",

apps/builder/src/App.tsx

@@ -1,4 +1,4 @@
-import { css, Global } from "@emotion/react"
+import { Global, css } from "@emotion/react"
 import { useEffect } from "react"
 import { DndProvider } from "react-dnd"
 import { HTML5Backend } from "react-dnd-html5-backend"
@@ -13,13 +13,13 @@ import {
 } from "@illa-design/react"
 import "@/api/base"
 import { GlobalDataProvider } from "@/page/App/context/globalDataProvider"
+import { getIllaMode } from "@/redux/config/configSelector"
 import {
   getCurrentConfigLanguage,
   getCurrentTranslateLanguage,
 } from "@/redux/currentUser/currentUserSelector"
 import { ILLARoute } from "@/router"
 import { globalStyle } from "./style"
-import { getIllaMode } from "@/redux/config/configSelector"
 
 function App() {
   const configLanguage = useSelector(getCurrentConfigLanguage)

apps/builder/src/i18n/config.ts

@@ -3,9 +3,9 @@ import i18n from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import { initReactI18next } from "react-i18next"
 import enUS from "./locale/en-US.json"
-import zhCN from "./locale/zh-CN.json"
 import jaJP from "./locale/ja-JP.json"
 import koKR from "./locale/ko-KR.json"
+import zhCN from "./locale/zh-CN.json"
 
 export const resources = {
   "en-US": {

apps/builder/src/page/App/components/Actions/ActionGenerator/ActionResourceCreator/index.tsx

@@ -1,16 +1,16 @@
 import { FC, ReactNode, useCallback, useMemo } from "react"
 import { useSelector } from "react-redux"
+import { ClickhouseConfigElement } from "@/page/App/components/Actions/ClickhouseConfigElement"
 import { ElasticSearchConfigElement } from "@/page/App/components/Actions/ElasticSearchConfigElement"
+import { FirebaseConfigElement } from "@/page/App/components/Actions/FirebaseConfigElement"
 import { MongoDbConfigElement } from "@/page/App/components/Actions/MongoDbConfigElement"
 import { MysqlLikeConfigElement } from "@/page/App/components/Actions/MysqlLikeConfigElement"
 import { RedisConfigElement } from "@/page/App/components/Actions/RedisConfigElement"
 import { RestApiConfigElement } from "@/page/App/components/Actions/RestApiConfigElement"
 import { S3ConfigElement } from "@/page/App/components/Actions/S3ConfigElement"
 import { SMTPConfigElement } from "@/page/App/components/Actions/SMTPConfigElement"
-import { FirebaseConfigElement } from "@/page/App/components/Actions/FirebaseConfigElement"
 import { getAllResources } from "@/redux/resource/resourceSelector"
 import { ResourceEditorProps } from "./interface"
-import { ClickhouseConfigElement } from "@/page/App/components/Actions/ClickhouseConfigElement"
 
 export const ActionResourceCreator: FC<ResourceEditorProps> = (props) => {
   const { onBack, onFinished, resourceType } = props

apps/builder/src/page/App/components/Actions/ActionList/index.tsx

@@ -23,17 +23,17 @@ import {
 } from "@/redux/config/configSelector"
 import { configActions } from "@/redux/config/configSlice"
 import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import {
+  ActionContent,
+  ActionItem,
+} from "@/redux/currentApp/action/actionState"
 import {
   actionListEmptyStyle,
   addNewActionButtonStyle,
   listContainerStyle,
   listStyle,
   searchHeaderContainerStyle,
 } from "./style"
-import {
-  ActionContent,
-  ActionItem,
-} from "@/redux/currentApp/action/actionState"
 
 export interface ActionListProps extends HTMLAttributes<HTMLDivElement> {
   onChangeSelectedAction: () => void

apps/builder/src/page/App/components/Actions/ActionPanel/ActionResult/index.tsx

@@ -1,6 +1,6 @@
 import {
-  forwardRef,
   RefObject,
+  forwardRef,
   useEffect,
   useImperativeHandle,
   useRef,

apps/builder/src/page/App/components/Actions/ActionPanel/ActionTitleBar/index.tsx

@@ -11,9 +11,9 @@ import {
   illaPrefix,
   useMessage,
 } from "@illa-design/react"
-import i18n from "@/i18n/config"
 import { Api } from "@/api/base"
 import { EditableText } from "@/components/EditableText"
+import i18n from "@/i18n/config"
 import { isFileOversize } from "@/page/App/components/Actions/ActionPanel/utils/calculateFileSize"
 import { runAction } from "@/page/App/components/Actions/ActionPanel/utils/runAction"
 import {

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/AppendDataToList/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { SetData } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { SetData } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const AppendDataToListPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/CreateOneUser/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { CreateUser } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { CreateUser } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const CreateOneUserPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/DeleteOneDocument/index.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
   CollectionType,
   DeleteDocument,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const DeleteOneDocumentPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/DeleteOneUser/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { DeleteOneUser } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { DeleteOneUser } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const DeleteOneUserPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/GetCollections/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { GetCollections } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { GetCollections } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const GetCollectionsPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/GetDocumentByID/index.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
   CollectionType,
   GetDocumentByID,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const GetDocumentByIDPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/GetUserByEmail/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { GetUserByEmail } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { GetUserByEmail } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const GetUserByEmailPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/GetUserByID/index.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
   DeleteOneUser,
   GetUserByID,
 } from "@/redux/currentApp/action/firebaseAction"
-import { InputEditor } from "@/page/App/components/InputEditor"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const GetUserByIDPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/GetUserByPhone/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { GetUserByPhone } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { GetUserByPhone } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const GetUserByPhonePart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/InsertDocument/index.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
   CollectionType,
   InsertDocument,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const InsertDocumentPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/ListUsers/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { ListUsers } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { ListUsers } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const ListUsersPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/QueryCollectionGroup/index.tsx

@@ -1,15 +1,15 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
+import { CollectionRecordEditor } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionRecordEditor"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { CheckboxInput } from "@/page/App/components/CheckboxInput"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
-  QueryCollectionGroup,
   CollectionType,
+  QueryCollectionGroup,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionRecordEditor } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionRecordEditor"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
-import { CheckboxInput } from "@/page/App/components/CheckboxInput"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const QueryCollectionGroupPart: FC<FirebaseActionPartProps> = (
   props,

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/QueryDatabase/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { QueryDatabase } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { QueryDatabase } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const QueryDatabasePart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/QueryFirebase/index.tsx

@@ -1,15 +1,15 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
+import { CollectionRecordEditor } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionRecordEditor"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { CheckboxInput } from "@/page/App/components/CheckboxInput"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
-  QueryFirebase,
   CollectionType,
+  QueryFirebase,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionRecordEditor } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionRecordEditor"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
-import { CheckboxInput } from "@/page/App/components/CheckboxInput"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const QueryFirebasePart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/SetData/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { SetData } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { SetData } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const SetDataPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/UpdateData/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { UpdateData } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { UpdateData } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const UpdateDataPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/UpdateDocument/index.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
+import { InputEditor } from "@/page/App/components/InputEditor"
 import {
   CollectionType,
   UpdateDocument,
 } from "@/redux/currentApp/action/firebaseAction"
-import { CollectionInput } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/components/CollectionInput"
-import { InputEditor } from "@/page/App/components/InputEditor"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const UpdateDocumentPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()

apps/builder/src/page/App/components/Actions/ActionPanel/FirebasePanel/UpdateOneUser/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react"
 import { useTranslation } from "react-i18next"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
 import { FirebaseActionPartProps } from "@/page/App/components/Actions/ActionPanel/FirebasePanel/intreface"
-import { UpdateOneUser } from "@/redux/currentApp/action/firebaseAction"
 import { InputEditor } from "@/page/App/components/InputEditor"
+import { UpdateOneUser } from "@/redux/currentApp/action/firebaseAction"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
 
 export const UpdateOneUserPart: FC<FirebaseActionPartProps> = (props) => {
   const { t } = useTranslation()