Restructure the code to have modals self contained with it's own bundle identity

Author: Rockerby

src/Our.Umbraco.UiExamples.v14/public/umbraco-package.json

@@ -1,10 +1,10 @@
 {
-    "name": "My Package Name",
+    "name": "Umbraco UI Examples",
     "version": "0.1.0",
     "extensions": [
         {
             "type": "bundle",
-            "alias": "My.Package.Bundle",
+            "alias": "example.ui.bundle",
             "name": "Example.UI",
             "js": "/App_Plugins/Example.UI/manifest.js"
         }

src/Our.Umbraco.UiExamples.v14/src/manifest.ts

@@ -1,21 +1,21 @@
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<ManifestTypes> = [
-	{
-		"type": "section",
-		"name": "Example UI Dashboard",
-		"alias": "example.ui.section",
-		"weight": 900,
-		"meta": {
-			"label": "Example UI",
-			"pathname": "example-ui"
-		}
-	},
+  {
+    "type": "section",
+    "name": "Example UI Dashboard",
+    "alias": "example.ui.section",
+    "weight": 900,
+    "meta": {
+      "label": "Example UI",
+      "pathname": "example-ui"
+    }
+  },
   {
     "type": "dashboard",
     "alias": "example.ui.dashboard",
     "name": "Example UI Dashboard",
-		"element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
+    "element": () => import("./scripts/dashboards/welcome-dashboard.ts"),
     "weight": -1,
     "meta": {
       "label": "Welcome Dashboard",
@@ -29,26 +29,15 @@ export const manifests: Array<ManifestTypes> = [
     ]
   },
   {
-    "type": "dashboard",
-    "alias": "example.ui.dashboard.modals",
-    "name": "Modals",
-		"element": () => import("./scripts/dashboards/custom-modals-dashboard.ts"),
-    "weight": -1,
-    "meta": {
-      "label": "Modals",
-      "pathname": "modals"
-    },
-    "conditions": [
-      {
-        "alias": "Umb.Condition.SectionAlias",
-        "match": "example.ui.section"
-      }
-    ]
+    "type": "bundle",
+    "alias": "example.ui.modals",
+    "name": "Example.UI - Modals",
+    "js": () => import("./scripts/modals/manifest.ts")
   },
   {
     "type": "sectionView",
     "alias": "example.ui.dashboard.section.boxlayout",
-		"element": () => import("./scripts/sections/box-layout-section.ts"),
+    "element": () => import("./scripts/sections/box-layout-section.ts"),
     "name": "Box Layout",
     "meta": {
       "label": "Box Layout",
@@ -61,17 +50,5 @@ export const manifests: Array<ManifestTypes> = [
         "match": "example.ui.section"
       }
     ]
-  },
-  {
-    "type": "modal",
-    "alias": "My.Dialog",
-    "name": "My Dialog",
-    "element":  () => import("./scripts/modals/custom-dialog.ts"),
-  },
-  {
-    "type": "modal",
-    "alias": "My.Sidebar",
-    "name": "My Sidebar Modal",
-    "element":  () => import("./scripts/modals/custom-sidebar.ts"),
   }
 ]

src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-dialog.token.ts

@@ -8,7 +8,7 @@ export type MyModalValue = {
     myData: string;
 }
 
-export const MY_DIALOG_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('My.Dialog', {
+export const MY_DIALOG_TOKEN = new UmbModalToken<MyModalData, MyModalValue>('example.ui.modals.dialog', {
     modal: {
         type: 'dialog',
         size: 'small'

src/Our.Umbraco.UiExamples.v14/src/scripts/dashboards/custom-modals-dashboard.ts renamed to src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-modals-dashboard.ts

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { MY_DIALOG_TOKEN } from '../modals/custom-dialog.token';
-import { MY_SIDEBAR_TOKEN } from '../modals/custom-sidebar.token';
+import { MY_DIALOG_TOKEN } from './custom-dialog.token';
+import { MY_SIDEBAR_TOKEN } from './custom-sidebar.token';
 import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONTEXT_DEBUGGER_MODAL, UMB_CONFIRM_MODAL, UMB_CODE_EDITOR_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 

src/Our.Umbraco.UiExamples.v14/src/scripts/modals/custom-sidebar.token.ts

@@ -9,7 +9,7 @@ export type MySidebarValue = {
     myText: string;
 }
 
-export const MY_SIDEBAR_TOKEN = new UmbModalToken<MySidebarData, MySidebarValue>('My.Sidebar', {
+export const MY_SIDEBAR_TOKEN = new UmbModalToken<MySidebarData, MySidebarValue>('example.ui.modals.sidebar', {
     modal: {
         type: 'sidebar',
         size: 'large'

src/Our.Umbraco.UiExamples.v14/src/scripts/modals/manifest.ts

@@ -0,0 +1,33 @@
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [
+  {
+    "type": "dashboard",
+    "alias": "example.ui.modals.dashboard",
+    "name": "Modals",
+    "element": () => import("./custom-modals-dashboard.ts"),
+    "weight": -1,
+    "meta": {
+      "label": "Modals",
+      "pathname": "modals"
+    },
+    "conditions": [
+      {
+        "alias": "Umb.Condition.SectionAlias",
+        "match": "example.ui.section"
+      }
+    ]
+  },
+  {
+    "type": "modal",
+    "alias": "example.ui.modals.dialog",
+    "name": "My Dialog",
+    "element": () => import("./custom-dialog.ts"),
+  },
+  {
+    "type": "modal",
+    "alias": "example.ui.modals.sidebar",
+    "name": "My Sidebar Modal",
+    "element": () => import("./custom-sidebar.ts"),
+  }
+]