progress

ui/src/index.tsx

@@ -9,6 +9,16 @@ import { configure } from "mobx";
 import { ThemeStore } from "./core/store/theme_store";
 import { FormBuilderValidationModel } from "./core/model/form_builder_validation_model";
 import { FormBuilder } from "./core/ui/form_builder/form_builder";
+import { observer } from "mobx-react-lite";
+import { useStore } from "./core/helper/use_store";
+import { LifeCycleStore, ModalStore } from "./core/store/base_store";
+import { CoreInput } from "./core/ui/input/input";
+import { InputV2 } from "./core/ui/input/input_v2";
+import { useState } from "react";
+import { Button, Modal } from "antd";
+import makeAutoObservable from "mobx-store-inheritance";
+import { CoreButton } from "./core/ui/button/button";
+import { SelectDetail } from "./core/ui/form_builder/forms/select_detail/presentation/select_detail_screen";
 
 configure({
   enforceActions: "never",
@@ -19,16 +29,55 @@ extensions();
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 export const themeStore = new ThemeStore();
 
+class FormBuilderTextStore extends ModalStore {
+  viewModel = FormBuilderValidationModel.empty();
+  constructor() {
+    super();
+    makeAutoObservable(this);
+  }
+  init = undefined;
+}
+export const FormBuildTest = observer(() => {
+  const [store] = useState(new FormBuilderTextStore());
+
+  return (
+    <div>
+      <InputV2 label={"result"} onChange={(text) => (store.viewModel.result = text)} />
+      <InputV2 label={"context"} onChange={(text) => (store.viewModel.context = text)} />
+      <CoreButton text="click" onClick={() => (store.isModalOpen = true)} />
+      <Modal
+        destroyOnClose={true}
+        open={store.isModalOpen}
+        footer={null}
+        closable={false}
+        closeIcon={null}
+        onCancel={() => {
+          store.isModalOpen = false;
+        }}
+      >
+        <FormBuilder
+          formBuilder={store.viewModel}
+          onChange={(e) => {
+            console.log(e.output);
+            // console.log(JSON.stringify(e.output))
+          }}
+        />
+      </Modal>
+    </div>
+  );
+});
 root.render(
   <>
-    <SocketListener>
+    {/* <FormBuildTest /> */}
+    {/* <SocketListener>
       <RouterProvider router={router} />
-    </SocketListener>
-    {/* <FormBuilder
-      formBuilder={FormBuilderValidationModel.test()}
-      onChange={function (change: FormBuilderValidationModel): void {
-        console.log(JSON.stringify(change.output));
+    </SocketListener> */}
+    <SelectDetail
+    // @ts-expect-error
+      dependency={{}}
+      onChange={function (obj: any): void {
+        throw new Error("Function not implemented.");
       }}
-    /> */}
+    />
   </>
 );