made the creation of an entity more accessible and obvious

app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx

@@ -1,15 +1,9 @@
-import { type Static, StringEnum, StringIdentifier, Type, transformObject } from "core/utils";
-import { FieldClassMap } from "data";
+import type { ModalProps } from "@mantine/core";
+import type { ContextModalProps } from "@mantine/modals";
+import { type Static, StringEnum, StringIdentifier, Type } from "core/utils";
 import { entitiesSchema, fieldsSchema, relationsSchema } from "data/data-schema";
-import { omit } from "lodash-es";
-import { forwardRef, useState } from "react";
-import {
-   Modal2,
-   type Modal2Ref,
-   ModalBody,
-   ModalFooter,
-   ModalTitle
-} from "ui/components/modal/Modal2";
+import { useState } from "react";
+import { type Modal2Ref, ModalBody, ModalFooter, ModalTitle } from "ui/components/modal/Modal2";
 import { Step, Steps, useStepContext } from "ui/components/steps/Steps";
 import { StepCreate } from "ui/modules/data/components/schema/create-modal/step.create";
 import { StepEntity } from "./step.entity";
@@ -67,48 +61,59 @@ const createModalSchema = Type.Object(
 );
 export type TCreateModalSchema = Static<typeof createModalSchema>;
 
-export const CreateModal = forwardRef<CreateModalRef>(function CreateModal(props, ref) {
-   const [path, setPath] = useState<string[]>([]);
+export function CreateModal({
+   context,
+   id,
+   innerProps: { initialPath = [], initialState }
+}: ContextModalProps<{ initialPath?: string[]; initialState?: TCreateModalSchema }>) {
+   const [path, setPath] = useState<string[]>(initialPath);
+   console.log("...", initialPath, initialState);
 
    function close() {
-      // @ts-ignore
-      ref?.current?.close();
+      context.closeModal(id);
    }
 
    return (
-      <Modal2 ref={ref}>
-         <Steps path={path} lastBack={close}>
-            <Step id="select">
-               <ModalTitle path={["Create New"]} onClose={close} />
-               <StepSelect />
-            </Step>
-            <Step id="entity" path={["action"]}>
-               <ModalTitle path={["Create New", "Entity"]} onClose={close} />
-               <StepEntity />
-            </Step>
-            <Step id="entity-fields" path={["action", "entity"]}>
-               <ModalTitle path={["Create New", "Entity", "Fields"]} onClose={close} />
-               <StepEntityFields />
-            </Step>
-            <Step id="relation" path={["action"]}>
-               <ModalTitle path={["Create New", "Relation"]} onClose={close} />
-               <StepRelation />
-            </Step>
-            <Step id="create" path={["action"]}>
-               <ModalTitle path={["Create New", "Creation"]} onClose={close} />
-               <StepCreate />
-            </Step>
+      <Steps path={path} lastBack={close} initialPath={initialPath} initialState={initialState}>
+         <Step id="select">
+            <ModalTitle path={["Create New"]} onClose={close} />
+            <StepSelect />
+         </Step>
+         <Step id="entity" path={["action"]}>
+            <ModalTitle path={["Create New", "Entity"]} onClose={close} />
+            <StepEntity />
+         </Step>
+         <Step id="entity-fields" path={["action", "entity"]}>
+            <ModalTitle path={["Create New", "Entity", "Fields"]} onClose={close} />
+            <StepEntityFields />
+         </Step>
+         <Step id="relation" path={["action"]}>
+            <ModalTitle path={["Create New", "Relation"]} onClose={close} />
+            <StepRelation />
+         </Step>
+         <Step id="create" path={["action"]}>
+            <ModalTitle path={["Create New", "Creation"]} onClose={close} />
+            <StepCreate />
+         </Step>
 
-            {/* Templates */}
-            {Templates.map(([Component, meta]) => (
-               <Step key={meta.id} id={meta.id} path={["action"]}>
-                  <ModalTitle path={["Create New", "Template", meta.title]} onClose={close} />
-                  <Component />
-               </Step>
-            ))}
-         </Steps>
-      </Modal2>
+         {/* Templates */}
+         {Templates.map(([Component, meta]) => (
+            <Step key={meta.id} id={meta.id} path={["action"]}>
+               <ModalTitle path={["Create New", "Template", meta.title]} onClose={close} />
+               <Component />
+            </Step>
+         ))}
+      </Steps>
    );
-});
+}
+CreateModal.defaultTitle = undefined;
+CreateModal.modalProps = {
+   withCloseButton: false,
+   size: "xl",
+   padding: 0,
+   classNames: {
+      root: "bknd-admin"
+   }
+} satisfies Partial<ModalProps>;
 
 export { ModalBody, ModalFooter, ModalTitle, useStepContext, relationsSchema };

app/src/ui/modules/data/components/schema/create-modal/step.select.tsx

@@ -12,7 +12,7 @@ import {
 import Templates from "./templates/register";
 
 export function StepSelect() {
-   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
+   const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
    const selected = state.action ?? null;
 
    function handleSelect(action: TSchemaAction) {
@@ -74,6 +74,7 @@ export function StepSelect() {
             }}
             prev={{ onClick: stepBack }}
             prevLabel="Cancel"
+            debug={{ state, path }}
          />
       </>
    );