fix(cms): refactor typescript and components

apps/tailwind-components/app/components/editor/HtmlPreview.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useTemplateRef, watch } from "vue";
 import type { IDeveloperPages } from "../../../types/cms";
-import { generateHtmlPreview } from "../../utils/Pages";
+import { generateHtmlPreview } from "../../utils/cms";
 
 const props = defineProps<{
   content: IDeveloperPages;

apps/tailwind-components/app/components/pages/ConfigurablePage.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import type { IConfigurablePages } from "../../../types/cms";
 
+import PageComponent from "./PageComponent.vue";
 import PageBanner from "../pages/Banner.vue";
 import PageSection from "../pages/Section.vue";
-import TextHeading from "../text/Heading.vue";
-import TextParagraph from "../text/Paragraph.vue";
-import Image from "../pages/Image.vue";
-import NavigationGroups from "./Navigation/NavigationGroups.vue";
-
-import { parsePageText } from "../../utils/Pages";
+import TextParagraph from "./Paragraph.vue";
 
 const props = defineProps<{ content: IConfigurablePages }>();
 </script>
@@ -33,49 +29,10 @@ const props = defineProps<{ content: IConfigurablePages }>();
         v-for="orderedComponent in orderedBlock.block.componentOrder"
         :key="orderedComponent.id"
       >
-        <TextHeading
-          v-if="orderedComponent.component.mg_tableclass === 'cms.Headings'"
-          :id="orderedComponent.component.id"
-          :heading-is-centered="orderedComponent.component.headingIsCentered"
-          :level="orderedComponent.component.level"
-          class="mb-5"
-        >
-          {{ parsePageText(orderedComponent.component.text) }}
-        </TextHeading>
-        <TextParagraph
-          v-else-if="
-            orderedComponent.component.mg_tableclass === 'cms.Paragraphs'
-          "
-          :id="orderedComponent.component.id"
-          :paragraph-is-centered="
-            orderedComponent.component.paragraphIsCentered
-          "
-          class="mb-2.5 last:mb-0"
-        >
-          {{ parsePageText(orderedComponent.component.text) }}
-        </TextParagraph>
-        <Image
-          v-else-if="orderedComponent.component.mg_tableclass === 'cms.Images'"
-          :id="orderedComponent.component.id"
-          :image="orderedComponent.component.image"
-          :width="orderedComponent.component.width"
-          :height="orderedComponent.component.height"
-          :alt="orderedComponent.component.alt"
-          :image-is-centered="orderedComponent.component.imageIsCentered"
-        />
-        <NavigationGroups
-          v-else-if="
-            orderedComponent.component.mg_tableclass === 'cms.Navigation groups'
-          "
-          :id="orderedComponent.component.id"
-          :links="orderedComponent.component.links"
+        <PageComponent
+          :mg_tableclass="orderedComponent.component.mg_tableclass"
+          :component="orderedComponent.component"
         />
-        <div v-else>
-          <TextParagraph id="component-does-not-exist-message">
-            Component {{ orderedComponent.component.mg_tableclass }} is not yet
-            supported.
-          </TextParagraph>
-        </div>
       </template>
     </PageSection>
     <div v-else>

apps/tailwind-components/app/components/pages/PageComponent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import Heading from "./Heading.vue";
+import Paragraph from "./Paragraph.vue";
+import Image from "../pages/Image.vue";
+import NavigationGroups from "./Navigation/NavigationGroups.vue";
+
+import { parsePageText } from "../../utils/cms";
+import type { IPageComponent } from "../../../types/CmsComponents";
+
+const props = withDefaults(
+  defineProps<{
+    component: IPageComponent;
+    mg_tableclass: string;
+    isEditable?: boolean;
+  }>(),
+  {
+    isEditable: false,
+  }
+);
+</script>
+
+<template>
+  <Heading
+    v-if="mg_tableclass === 'cms.Headings'"
+    :id="component.id"
+    :heading-is-centered="component.headingIsCentered"
+    :level="component.level"
+    class="mb-5"
+  >
+    {{ parsePageText(component.text) }}
+  </Heading>
+  <Paragraph
+    v-else-if="mg_tableclass === 'cms.Paragraphs'"
+    :id="component.id"
+    :paragraph-is-centered="component.paragraphIsCentered"
+    class="mb-2.5 last:mb-0"
+  >
+    {{ parsePageText(component.text) }}
+  </Paragraph>
+  <Image
+    v-else-if="mg_tableclass === 'cms.Images'"
+    :id="component.id"
+    :image="component.image"
+    :width="component.width"
+    :height="component.height"
+    :alt="component.alt"
+    :image-is-centered="component.imageIsCentered"
+  />
+  <NavigationGroups
+    v-else-if="mg_tableclass === 'cms.Navigation groups'"
+    :id="component.id"
+    :links="component.links"
+  />
+  <div v-else>
+    <Paragraph id="component-does-not-exist-message">
+      Component {{ mg_tableclass }} is not yet supported
+    </Paragraph>
+  </div>
+</template>

apps/tailwind-components/app/pages/pages/Banner.story.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import PageBanner from "../../components/pages/Banner.vue";
 import DemoImage from "../../assets/img/molgenis-banner.jpg";
-import TextHeading from "../../components/text/Heading.vue";
+import TextHeading from "../../components/pages/Heading.vue";
 </script>
 
 <template>

apps/tailwind-components/app/pages/text/Heading.story.vue → apps/tailwind-components/app/pages/pages/Heading.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TextHeading from "../../components/text/Heading.vue";
+import TextHeading from "../../components/pages/Heading.vue";
 </script>
 
 <template>

apps/tailwind-components/app/pages/text/Paragraph.story.vue → apps/tailwind-components/app/pages/pages/Paragraph.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TextParagraph from "../../components/text/Paragraph.vue";
+import TextParagraph from "../../components/pages/Paragraph.vue";
 </script>
 
 <template>

apps/tailwind-components/app/utils/Pages.ts → apps/tailwind-components/app/utils/cms.ts

@@ -8,6 +8,7 @@ import type {
 
 export function newDeveloperPage(): IDeveloperPages {
   return {
+    mg_tableclass: "",
     name: "",
     description: "",
     html: "",

apps/tailwind-components/tests/vitest/components/text/Heading.spec.ts → apps/tailwind-components/tests/vitest/components/pages/Heading.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
 
-import TextHeading from "../../../../app/components/text/Heading.vue";
+import TextHeading from "../../../../app/components/pages/Heading.vue";
 
 const wrapper = mount(TextHeading, {
   props: {

apps/tailwind-components/tests/vitest/components/text/Paragraph.spec.ts → apps/tailwind-components/tests/vitest/components/pages/Paragraph.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
 
-import Paragraph from "../../../../app/components/text/Paragraph.vue";
+import Paragraph from "../../../../app/components/pages/Paragraph.vue";
 
 const wrapper = mount(Paragraph, {
   props: {

apps/tailwind-components/tests/vitest/utils/parsePageText.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, describe } from "vitest";
-import { parsePageText } from "../../../app/utils/Pages";
+import { parsePageText } from "../../../app/utils/cms";
 
 describe("parsePageText:", () => {
   test("extra leading and trailing quotes are removed", () => {

apps/tailwind-components/types/CmsComponents.ts

@@ -0,0 +1,12 @@
+import type {
+  IHeadings,
+  IParagraphs,
+  IImages,
+  INavigationGroups,
+} from "./cms.ts";
+
+export interface IPageComponent
+  extends IHeadings,
+    IParagraphs,
+    IImages,
+    INavigationGroups {}