diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index e0e43215fc..964c2ece85 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -32,10 +32,10 @@
"react/function-component-definition": "warn",
"react/jsx-boolean-value": "error",
"react/self-closing-comp": "error",
- "react/jsx-sort-props": "error",
+ "react/jsx-sort-props": 0,
"react/jsx-fragments": "error",
"react/jsx-no-useless-fragment": "error",
- "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}],
+ "sort-destructure-keys/sort-destructure-keys": 0,
"prettier/prettier": [
"error",
{ "endOfLine": "auto" }
diff --git a/app/client/craco.common.config.js b/app/client/craco.common.config.js
index d0a86179ee..8c6c391608 100644
--- a/app/client/craco.common.config.js
+++ b/app/client/craco.common.config.js
@@ -28,7 +28,7 @@ module.exports = {
options: {
lessLoaderOptions: {
lessOptions: {
- modifyVars: { '@primary-color': '#ff0000' },
+ modifyVars: { '@primary-color': '#2CBBA6' },
javascriptEnabled: true,
},
},
diff --git a/app/client/package.json b/app/client/package.json
index f59965d6bd..ab224f5980 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -15,8 +15,15 @@
"@blueprintjs/select": "^3.10.0",
"@blueprintjs/timezone": "^3.6.0",
"@craco/craco": "^5.7.0",
+ "@designable/core": "0.4.34",
+ "@designable/formily": "0.4.34",
+ "@designable/react": "0.4.34",
+ "@designable/react-settings-form": "0.4.34",
"@draft-js-plugins/editor": "^4.1.0",
"@draft-js-plugins/mention": "^4.5.1",
+ "@formily/antd": "2.0.0-beta.88",
+ "@formily/core": "2.0.0-beta.88",
+ "@formily/react": "2.0.0-beta.88",
"@fusioncharts/powercharts": "^3.16.0",
"@github/g-emoji-element": "^1.1.5",
"@manaflair/redux-batch": "^1.0.0",
@@ -56,6 +63,7 @@
"axios": "^0.21.1",
"caniuse-lite": "^1.0.30001208",
"chance": "^1.1.3",
+ "classnames": "^2.3.1",
"codemirror": "^5.59.2",
"copy-to-clipboard": "^3.3.1",
"core-js": "^3.9.1",
diff --git a/app/client/src/components/designSystems/appsmith/FormilyComponent.tsx b/app/client/src/components/designSystems/appsmith/FormilyComponent.tsx
new file mode 100644
index 0000000000..f3a41d8886
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/FormilyComponent.tsx
@@ -0,0 +1,248 @@
+import React, { useMemo, useEffect } from "react";
+import { createForm } from "@formily/core";
+import { createSchemaField } from "@formily/react";
+import {
+ Form,
+ FormItem,
+ DatePicker,
+ Checkbox,
+ Cascader,
+ Editable,
+ Input,
+ NumberPicker,
+ Switch,
+ Password,
+ PreviewText,
+ Radio,
+ Reset,
+ Select,
+ Space,
+ Submit,
+ TimePicker,
+ Transfer,
+ TreeSelect,
+ Upload,
+ FormGrid,
+ FormLayout,
+ FormTab,
+ FormCollapse,
+ ArrayTable,
+ ArrayCards,
+ FormButtonGroup,
+ FormDrawer,
+ FormDialog,
+} from "@formily/antd";
+import { Card, Slider, Rate, Button } from "antd";
+import { FormType } from "../../../widgets/FormilyWidget";
+import styled from "styled-components";
+import _ from "lodash";
+
+interface FormilyComponentProps {
+ formType: FormType;
+ title?: string;
+ triggerLabel?: string;
+ submitLabel?: string;
+ showReset?: boolean;
+ resetLabel?: string;
+ schema: string;
+ onFormSubmit: (data: any) => void;
+}
+
+const EmptyForm = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ background: #eee;
+ min-height: 300px;
+ margin-bottom: 24px;
+ background-color: #fff;
+ border-radius: 6px;
+ opacity: 0.4;
+ border: 1px dashed #2cbba6;
+ background-image: repeating-radial-gradient(
+ circle at 0 0,
+ transparent 0,
+ #ffffff 10px
+ ),
+ repeating-linear-gradient(#8af3c655, #8af3c6);
+`;
+
+const ScrollContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: calc(100% + 12px);
+`;
+
+const ScrollContent = styled.div`
+ flex: 1;
+ overflow: auto;
+`;
+
+const ScrollFooter = styled.div`
+ border-top: 1px solid #f0f0f0;
+ margin: 0 -24px;
+ padding: 12px 24px 0;
+`;
+
+const SchemaField = createSchemaField({
+ components: {
+ Space,
+ FormGrid,
+ FormLayout,
+ FormTab,
+ FormCollapse,
+ ArrayTable,
+ ArrayCards,
+ FormItem,
+ DatePicker,
+ Checkbox,
+ Cascader,
+ Editable,
+ Input,
+ NumberPicker,
+ Switch,
+ Password,
+ PreviewText,
+ Radio,
+ Reset,
+ Select,
+ Submit,
+ TimePicker,
+ Transfer,
+ TreeSelect,
+ Upload,
+ Card,
+ Slider,
+ Rate,
+ },
+});
+
+const FormilyComponent = (props: FormilyComponentProps) => {
+ const {
+ title,
+ formType,
+ triggerLabel,
+ submitLabel,
+ showReset,
+ resetLabel,
+ onFormSubmit,
+ } = props;
+ const schema: {
+ form?: any;
+ schema?: any;
+ } = useMemo(() => {
+ try {
+ return JSON.parse(props.schema);
+ } catch (e) {
+ console.log("schema json parse failed", e);
+ return {};
+ }
+ }, [props.schema]);
+ const form = useMemo(() => createForm(), [props.schema]);
+ const formProps = schema.form || {};
+ const isVertical = formProps.layout === "vertical";
+ const submitText = submitLabel || "提交";
+ const resetText = resetLabel || "重置";
+ const triggerText = triggerLabel || "打开表单";
+
+ const formContent = _.isUndefined(schema.schema) ? (
+ 开始设计表单吧 😉
+ ) : (
+
+ );
+
+ const showDrawer = () => {
+ FormDrawer({ title }, () => {
+ return (
+
+ {formContent}
+
+
+ {
+ return Promise.resolve();
+ }}
+ >
+ {submitText}
+
+ {showReset ? {resetText} : null}
+
+
+
+ );
+ })
+ .open({
+ initialValues: {},
+ })
+ .then(onFormSubmit);
+ };
+
+ const showModal = () => {
+ FormDialog({ title, okText: submitText }, () => {
+ return (
+
+ {formContent}
+
+ {showReset ? {resetText} : null}
+
+
+ );
+ })
+ .open({
+ initialValues: {},
+ })
+ .then(onFormSubmit);
+ };
+
+ if (formType === "MODAL" || formType === "DRAWER") {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default FormilyComponent;
diff --git a/app/client/src/components/propertyControls/FormilyControl/Designer.tsx b/app/client/src/components/propertyControls/FormilyControl/Designer.tsx
new file mode 100644
index 0000000000..dff83c51a2
--- /dev/null
+++ b/app/client/src/components/propertyControls/FormilyControl/Designer.tsx
@@ -0,0 +1,141 @@
+import React, { useMemo, forwardRef, useImperativeHandle } from "react";
+import { useEffect } from "react";
+import {
+ Designer,
+ Workspace,
+ OutlineTreeWidget,
+ DragSourceWidget,
+ HistoryWidget,
+ MainPanel,
+ CompositePanel,
+ WorkspacePanel,
+ ViewportPanel,
+ ViewPanel,
+ SettingsPanel,
+ ComponentTreeWidget,
+} from "@designable/react";
+import { transformToSchema, transformToTreeNode } from "@designable/formily";
+import { SettingsForm } from "@designable/react-settings-form";
+import {
+ createDesigner,
+ GlobalRegistry,
+ WorkbenchTypes,
+} from "@designable/core";
+import {
+ createDesignableField,
+ createDesignableForm,
+} from "@formily/designable-antd";
+import PreviewWidget from "./PreviewWidget";
+const CompositePanelItem: any = CompositePanel.Item;
+
+GlobalRegistry.registerDesignerLocales({
+ "zh-CN": {
+ sources: {
+ Inputs: "输入控件",
+ Layouts: "布局组件",
+ Arrays: "自增组件",
+ },
+ },
+ "en-US": {
+ sources: {
+ Inputs: "Inputs",
+ Layouts: "Layouts",
+ Arrays: "Arrays",
+ },
+ },
+});
+
+const Root = createDesignableForm({
+ registryName: "Root",
+});
+
+const DesignableField = createDesignableField({
+ registryName: "DesignableField",
+});
+
+const FormilyDesigner = (props: any, ref: any) => {
+ const engine = useMemo(() => createDesigner(), []);
+ console.log("designer render");
+
+ useEffect(() => {
+ console.log("desginer init");
+ return () => {
+ console.log("desginer destory");
+ };
+ }, []);
+
+ useImperativeHandle(
+ ref,
+ () => ({
+ getSchema: () => {
+ return transformToSchema(engine.getCurrentTree(), {
+ designableFieldName: "DesignableField",
+ designableFormName: "Root",
+ });
+ },
+ setSchema: (schema: any) => {
+ engine.setCurrentTree(
+ transformToTreeNode(schema, {
+ designableFieldName: "DesignableField",
+ designableFormName: "Root",
+ }),
+ );
+ },
+ toggleWorkbench: (type: WorkbenchTypes) => {
+ engine.workbench.setWorkbenchType(type);
+ },
+ workbenchType: engine.workbench.type,
+ }),
+ [engine],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {() => {
+ console.log("DESIGNABLE show !");
+ return (
+
+ );
+ }}
+
+
+ {(tree) => {
+ console.log("PREVIEW show !");
+ return ;
+ }}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default forwardRef(FormilyDesigner);
diff --git a/app/client/src/components/propertyControls/FormilyControl/PreviewWidget.tsx b/app/client/src/components/propertyControls/FormilyControl/PreviewWidget.tsx
new file mode 100644
index 0000000000..a2e0de7c47
--- /dev/null
+++ b/app/client/src/components/propertyControls/FormilyControl/PreviewWidget.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo } from "react";
+import { createForm } from "@formily/core";
+import { createSchemaField } from "@formily/react";
+import {
+ Form,
+ FormItem,
+ DatePicker,
+ Checkbox,
+ Cascader,
+ Editable,
+ Input,
+ NumberPicker,
+ Switch,
+ Password,
+ PreviewText,
+ Radio,
+ Reset,
+ Select,
+ Space,
+ Submit,
+ TimePicker,
+ Transfer,
+ TreeSelect,
+ Upload,
+ FormGrid,
+ FormLayout,
+ FormTab,
+ FormCollapse,
+ ArrayTable,
+ ArrayCards,
+} from "@formily/antd";
+import { Card, Slider, Rate } from "antd";
+import { TreeNode } from "@designable/core";
+import { transformToSchema } from "@designable/formily";
+
+const SchemaField = createSchemaField({
+ components: {
+ Space,
+ FormGrid,
+ FormLayout,
+ FormTab,
+ FormCollapse,
+ ArrayTable,
+ ArrayCards,
+ FormItem,
+ DatePicker,
+ Checkbox,
+ Cascader,
+ Editable,
+ Input,
+ NumberPicker,
+ Switch,
+ Password,
+ PreviewText,
+ Radio,
+ Reset,
+ Select,
+ Submit,
+ TimePicker,
+ Transfer,
+ TreeSelect,
+ Upload,
+ Card,
+ Slider,
+ Rate,
+ },
+});
+
+export interface IPreviewWidgetProps {
+ tree: TreeNode;
+}
+
+const PreviewWidget: React.FC = (props) => {
+ const form = useMemo(() => createForm(), []);
+ const { form: formProps, schema }: any = transformToSchema(props.tree, {
+ designableFormName: "Root",
+ designableFieldName: "DesignableField",
+ });
+ return (
+
+ );
+};
+
+export default PreviewWidget;
diff --git a/app/client/src/components/propertyControls/FormilyControl/index.tsx b/app/client/src/components/propertyControls/FormilyControl/index.tsx
new file mode 100644
index 0000000000..5a63637cdd
--- /dev/null
+++ b/app/client/src/components/propertyControls/FormilyControl/index.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import BaseControl, { ControlProps } from "../BaseControl";
+import { Drawer, Button } from "antd";
+import { EyeOutlined, ToolOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+import Designer from "./Designer";
+
+const DrawerHeader = styled.div`
+ position: relative;
+`;
+const Center = styled.div`
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ text-align: center;
+`;
+
+class FormilyControl extends BaseControl {
+ designerRef: any = React.createRef();
+ state = {
+ showEditor: false,
+ workbenchType: "DESIGNABLE",
+ };
+
+ toggle = () => {
+ const { showEditor } = this.state;
+ this.setState({
+ showEditor: !showEditor,
+ workbenchType: "DESIGNABLE",
+ });
+ };
+
+ onVisibleChanged = (visible: boolean) => {
+ if (visible && this.designerRef.current) {
+ try {
+ const schema = JSON.parse(this.props.propertyValue);
+ this.designerRef.current.setSchema(schema);
+ } catch (e) {
+ console.log("schema string parse failed :<", e);
+ }
+ }
+ };
+
+ handleOk = () => {
+ const value =
+ this.designerRef.current && this.designerRef.current.getSchema();
+ this.updateProperty(this.props.propertyName, JSON.stringify(value));
+ this.toggle();
+ };
+
+ toggleDesignerMode = () => {
+ if (this.designerRef.current) {
+ const workbenchType = this.state.workbenchType;
+ const target = workbenchType === "DESIGNABLE" ? "PREVIEW" : "DESIGNABLE";
+ this.designerRef.current.toggleWorkbench(target);
+ this.setState({
+ workbenchType: target,
+ });
+ }
+ };
+
+ render() {
+ const { workbenchType, showEditor } = this.state;
+ return (
+
+
+
+ 表单设计
+
+
+ ) : (
+
+ )
+ }
+ >
+ {workbenchType === "DESIGNABLE" ? "预览" : "编辑"}
+
+
+
+ }
+ visible={showEditor}
+ onClose={this.toggle}
+ afterVisibleChange={this.onVisibleChanged}
+ height="100%"
+ placement="bottom"
+ className="designable-drawer"
+ footer={
+
+
+
+
+ }
+ >
+ {showEditor ? : null}
+
+