fix: added support to add menu entries

Author: pksorensen

packages/designer/src/Components/Drawers/NavDrawer.tsx

@@ -16,6 +16,7 @@ import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext";
 import SlideTreeItem from "./SlideTreeItem";
 import QuestionTreeItem from "./QuestionTreeItem";
 import { CodeIcon } from "../Icons/CodeIcon";
+import { getOrCreateQuickFormViewContainer } from "../Views/DesignerViews";
 
 type NavDrawerProps = {
     isOpen: boolean;
@@ -28,6 +29,8 @@ export const NavDrawer = ({ setIsOpen, isOpen, newSlideNodes }: NavDrawerProps)
     const { setView, view, setActiveSlide, activeSlide, quickformpayload, updateQuickFormPayload, setActiveQuestion, activeQuestion, designerLocale } = useQuickFormDefinition();
     const { actions: { history, deserialize } } = useEditorChanges();
 
+    const views = getOrCreateQuickFormViewContainer();
+
     return (
         <Drawer
             type="inline"
@@ -77,6 +80,7 @@ export const NavDrawer = ({ setIsOpen, isOpen, newSlideNodes }: NavDrawerProps)
                     <ViewTreeItem title="Ending" icon={<EndingViewIcon />} setView={setView} selectedView={view} viewName="ending" />
                     <ViewTreeItem title="Settings" icon={<SettingsViewIcon />} setView={setView} selectedView={view} viewName="settings" />
                     <ViewTreeItem title="Source view" icon={<CodeIcon />} setView={setView} selectedView={view} viewName="sourceView" />
+                    {Object.entries(views).map(([key, _view]) => <ViewTreeItem childName={quickformpayload['__designer'][`active${_view.navKey}`]} key={key} title={_view.title} icon={_view.icon} setView={setView} selectedView={view} viewName={key} children={_view.nav && <_view.nav />} />)}
                 </Tree>
             </DrawerBody>
         </Drawer>

packages/designer/src/Components/Drawers/QuestionTreeItem.tsx

@@ -15,7 +15,7 @@ import { useMemo } from "react";
 import { QuestionJsonModel } from "@eavfw/quickform-core/src/model/json-definitions/JsonDataModels";
 import { CaretUpFilled, CaretDownFilled } from "@fluentui/react-icons"
 
-const useNavDrawerStyles = makeStyles({
+export const useNavDrawerStyles = makeStyles({
     actions: {
         backgroundColor: tokens.colorNeutralBackground1Hover,
         position: "absolute",

packages/designer/src/Components/Views/DesignerViews.tsx

@@ -1,3 +1,4 @@
+import React, { ReactNode } from "react"
 import { useQuickFormDefinition } from "../../Contexts/QuickFormDefContext"
 import { ViewNames } from "../../Types/ViewNames"
 import { QuickFormEndingSettingsView } from "./QuickFormEndingSettingsView"
@@ -7,11 +8,51 @@ import { QuickFormQuestionsView } from "./QuickFormQuestionsView"
 import { QuickFormSettingsView } from "./QuickFormSettingsView"
 import { QuickFormSourceView } from "./QuickFormSourceView"
 import { QuickFormSubmitSettingsView } from "./QuickFormSubmitSettingsView"
+import { TreeItemLayoutProps } from "@fluentui/react-components"
 
 
+export type QuickFormView = {
+
+    view: React.FC;
+    nav?: React.FC;
+    title: string;
+    navKey: string;
+    icon: TreeItemLayoutProps["iconBefore"]
+}
+
+export type QuickFormViews = {
+
+    [key: string]: QuickFormView;
+  
+}
+
+declare global {
+    var __eav_qf_views: QuickFormViews | undefined;
+}
+
+export function getOrCreateQuickFormViewContainer(): QuickFormViews {
+    if (!globalThis.__eav_qf_views) {
+        
+        globalThis.__eav_qf_views = {};
+        ;
+    }
+    return globalThis.__eav_qf_views;
+}
+
+export function registerQuickformView<Key extends keyof QuickFormViews>(name: Key, instance: (QuickFormViews)[Key]) {
+    let services = getOrCreateQuickFormViewContainer();
+    services[name] = instance;
+}
+
 export const DesignerViews = () => {
 
     const { updateQuickFormPayload, quickformpayload, activeQuestion, activeSlide, view } = useQuickFormDefinition();
+    const views = getOrCreateQuickFormViewContainer();
+    if (view in views) {
+
+        const View = views[view]?.view;
+        return <View />
+    }
 
     return <>
         {view === "settings" && <QuickFormSettingsView />}

packages/designer/src/Components/index.ts

@@ -1,2 +1,3 @@
 
-export { registerInputControlDesignerField } from "./Views/QuickFormQuestionsView";
+export { registerInputControlDesignerField } from "./Views/QuickFormQuestionsView";
+export * from "./Views/DesignerViews";

packages/designer/src/index.ts

@@ -2,4 +2,6 @@
 export * from "./Components";
 import "./Designer";
 export * from "./QuickFormDesigner";
-export * from "./Contexts/QuickFormDefContext";
+export * from "./Contexts/QuickFormDefContext";
+export * from "./Utils/makeid";
+export * from "./Types/QuickFormDefinition";