chore(ui): move custom components - WF-63

Now we have a folder to contains all components
(`src/ui/src/components/{shared,common,core}`), we can move
`custom_components` into it.

src/ui/src/custom_components/index.ts → src/ui/src/components/custom/index.ts

@@ -1,11 +1,14 @@
 // Import the templates
 
+import type { TemplateMap } from "@/writerTypes";
 import BubbleMessage from "./BubbleMessage.vue";
 import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
 
 // Export an object with the ids and the templates as default
 
-export default {
+const CUSTOM_COMPONENTS: TemplateMap = {
 	bubblemessage: BubbleMessage,
 	bubblemessageadvanced: BubbleMessageAdvanced,
 };
+
+export default CUSTOM_COMPONENTS;

src/ui/src/core/templateMap.ts

@@ -69,10 +69,14 @@ import WorkflowsWorkflow from "../components/workflows/WorkflowsWorkflow.vue";
 import WorkflowsNode from "../components/workflows/abstract/WorkflowsNode.vue";
 import WorkflowsRoot from "@/components/workflows/WorkflowsRoot.vue";
 
-import { AbstractTemplate, WriterComponentDefinition } from "@/writerTypes";
+import type {
+	AbstractTemplate,
+	TemplateMap,
+	WriterComponentDefinition,
+} from "@/writerTypes";
 import { h } from "vue";
 
-const templateMap = {
+const templateMap: TemplateMap = {
 	root: CoreRoot,
 	page: CorePage,
 	sidebar: CoreSidebar,
@@ -135,14 +139,14 @@ const templateMap = {
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
 
+// eslint-disable-next-line no-undef
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,
 	allowing for live updates when developing custom component templates.
 	*/
 
-	const liveCCT: Record<string, any> = (await import("../custom_components"))
-		.default;
+	const liveCCT = (await import("../components/custom/index")).default;
 	Object.entries(liveCCT).forEach(([componentType, template]) => {
 		templateMap[`custom_${componentType}`] = template;
 	});
@@ -157,7 +161,7 @@ function fallbackTemplate(type: string) {
 			description: message,
 			category: "Fallback",
 		},
-		setup(props, { slots }) {
+		setup(_props: never, { slots }) {
 			return () => {
 				return h(
 					"div",

src/ui/src/writerTypes.ts

@@ -1,3 +1,4 @@
+import type { Component as VueComponent } from "vue";
 import { generateCore } from "./core";
 import { generateBuilderManager } from "./builder/builderManager";
 
@@ -101,8 +102,15 @@ export type WriterComponentDefinition = {
 	>;
 	previewField?: string; // Which field to use for previewing in the Component Tree
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
-	outs?:
-		Record<string, { name: string; description: string; style: string; field?: keyof WriterComponentDefinition["fields"] }>;
+	outs?: Record<
+		string,
+		{
+			name: string;
+			description: string;
+			style: string;
+			field?: keyof WriterComponentDefinition["fields"];
+		}
+	>;
 };
 
 export type BuilderManager = ReturnType<typeof generateBuilderManager>;
@@ -154,3 +162,5 @@ export type AbstractTemplate = {
 	baseType: string;
 	writer: WriterComponentDefinition;
 };
+
+export type TemplateMap = Record<string, VueComponent>;