refactor hardcoded layout strings

apps/studio/prisma/seed.ts

@@ -4,6 +4,7 @@
  * @link https://www.prisma.io/docs/guides/database/seed-database
  */
 import type { IsomerSchema } from "@opengovsg/isomer-components"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import cuid2 from "@paralleldrive/cuid2"
 
 import type { Navbar } from "~/server/modules/resource/resource.types"
@@ -40,7 +41,7 @@ const PUBLISHER_USER = "publisher"
 
 const PAGE_BLOB: IsomerSchema = {
   version: "0.1.0",
-  layout: "homepage",
+  layout: ISOMER_PAGE_LAYOUTS.Homepage,
   page: {},
   content: [
     {

apps/studio/src/components/PageEditor/ComponentSelector.tsx

@@ -13,6 +13,7 @@ import {
   VStack,
 } from "@chakra-ui/react"
 import { Button } from "@opengovsg/design-system-react"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { type IconType } from "react-icons"
 
@@ -168,9 +169,9 @@ function ComponentSelector() {
       case ResourceType.RootPage:
         return HOMEPAGE_ALLOWED_BLOCKS
       case ResourceType.Page:
-        if (savedPageState.layout === "content") {
+        if (savedPageState.layout === ISOMER_PAGE_LAYOUTS.Content) {
           return CONTENT_ALLOWED_BLOCKS
-        } else if (savedPageState.layout === "article") {
+        } else if (savedPageState.layout === ISOMER_PAGE_LAYOUTS.Article) {
           return ARTICLE_ALLOWED_BLOCKS
         }
         throw new Error(`Unsupported page layout: ${savedPageState.layout}`)

apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx

@@ -3,6 +3,7 @@ import type { IsomerSchema } from "@opengovsg/isomer-components"
 import type { PropsWithChildren } from "react"
 import { createContext, useContext, useMemo, useState } from "react"
 import { useRouter } from "next/router"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { merge } from "lodash"
 
 import articleLayoutPreview from "~/features/editing-experience/data/articleLayoutPreview.json"
@@ -60,15 +61,17 @@ const useCreatePageWizardContext = ({
     defaultValues: {
       title: "",
       permalink: "",
-      layout: "content",
+      layout: ISOMER_PAGE_LAYOUTS.Content,
     },
   })
 
   const [layout, title] = formMethods.watch(["layout", "title"])
 
   const layoutPreviewJson: IsomerSchema = useMemo(() => {
     const jsonPreview =
-      layout === "content" ? contentLayoutPreview : articleLayoutPreview
+      layout === ISOMER_PAGE_LAYOUTS.Content
+        ? contentLayoutPreview
+        : articleLayoutPreview
     return merge(jsonPreview, {
       page: {
         title: title || "Page title here",

apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react"
 import { Box, Flex, Skeleton, Stack, Text } from "@chakra-ui/react"
 import { useIsMobile } from "@opengovsg/design-system-react"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { format } from "date-fns"
 
 import Suspense from "~/components/Suspense"
@@ -67,14 +68,14 @@ const SuspendableLayoutPreview = () => {
 
   const previewOverrides = useMemo(() => {
     switch (currentLayout) {
-      case "article": {
+      case ISOMER_PAGE_LAYOUTS.Article: {
         return {
           page: {
             date: format(new Date(), "dd MMM yyyy"),
           },
         }
       }
-      case "content": {
+      case ISOMER_PAGE_LAYOUTS.Content: {
         return {}
       }
     }
@@ -91,7 +92,7 @@ const SuspendableLayoutPreview = () => {
         permalink={currentPermalink}
         siteMap={{
           id: "0",
-          layout: "content",
+          layout: ISOMER_PAGE_LAYOUTS.Content,
           title: "Root",
           summary: "",
           lastModified: new Date().toISOString(),

apps/studio/src/features/editing-experience/components/CreatePageModal/constants.ts

@@ -1,4 +1,9 @@
-export const LAYOUT_TYPES = ["content", "article"] as const
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
+
+export const LAYOUT_TYPES = [
+  ISOMER_PAGE_LAYOUTS.Content,
+  ISOMER_PAGE_LAYOUTS.Article,
+] as const
 export type Layout = (typeof LAYOUT_TYPES)[number]
 
 export const LAYOUT_RENDER_DATA: Record<
@@ -10,13 +15,13 @@ export const LAYOUT_RENDER_DATA: Record<
     altText: string
   }
 > = {
-  content: {
+  [ISOMER_PAGE_LAYOUTS.Content]: {
     title: "Default layout",
     description: "This is the most basic layout for your content.",
     imageSrc: "/assets/layout-card/default_layout_card.webp",
     altText: "Image preview of Default layout",
   },
-  article: {
+  [ISOMER_PAGE_LAYOUTS.Article]: {
     title: "Article layout",
     description:
       "Designed for the perfect reading experience. Use this layout for text-heavy content, such as news, press releases, and speeches.",

apps/studio/src/features/editing-experience/components/EditLinkPreview.tsx

@@ -1,4 +1,5 @@
 import type { IsomerSitemap } from "@opengovsg/isomer-components"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { useAtomValue } from "jotai"
 
@@ -32,15 +33,15 @@ export const EditCollectionLinkPreview = (): JSX.Element => {
     id: "root",
     permalink: "/",
     lastModified: "2024-10-14T07:05:08.803Z",
-    layout: "homepage",
+    layout: ISOMER_PAGE_LAYOUTS.Homepage,
     title: "An Isomer Site",
     summary: "",
     children: [
       {
         id: "collection",
         permalink: parentPermalink,
         lastModified: "02 May 2023",
-        layout: "collection",
+        layout: ISOMER_PAGE_LAYOUTS.Collection,
         title: parentTitle,
         summary: "",
         children: [
@@ -50,7 +51,7 @@ export const EditCollectionLinkPreview = (): JSX.Element => {
             date,
             ref: "Test",
             summary: summary ?? "",
-            layout: "link",
+            layout: ISOMER_PAGE_LAYOUTS.Link,
             permalink,
             lastModified: new Date().toString(),
             category,
@@ -65,7 +66,7 @@ export const EditCollectionLinkPreview = (): JSX.Element => {
       <PreviewWithoutSitemap
         content={[]}
         page={{ title: parentTitle }}
-        layout={"collection"}
+        layout={ISOMER_PAGE_LAYOUTS.Collection}
         siteId={siteId}
         siteMap={siteMap}
         permalink={parentPermalink}

apps/studio/src/features/editing-experience/components/MetadataEditorStateDrawer.tsx

@@ -3,7 +3,10 @@ import type { Static } from "@sinclair/typebox"
 import { useCallback } from "react"
 import { Box, Flex, useDisclosure } from "@chakra-ui/react"
 import { Button } from "@opengovsg/design-system-react"
-import { getLayoutPageSchema } from "@opengovsg/isomer-components"
+import {
+  getLayoutPageSchema,
+  ISOMER_PAGE_LAYOUTS,
+} from "@opengovsg/isomer-components"
 import Ajv from "ajv"
 import isEmpty from "lodash/isEmpty"
 import isEqual from "lodash/isEqual"
@@ -18,8 +21,8 @@ import { ErrorProvider, useBuilderErrors } from "./form-builder/ErrorProvider"
 import FormBuilder from "./form-builder/FormBuilder"
 
 const HEADER_LABELS: Record<string, string> = {
-  article: "Edit article page header",
-  content: "Edit content page header",
+  [ISOMER_PAGE_LAYOUTS.Article]: "Edit article page header",
+  [ISOMER_PAGE_LAYOUTS.Content]: "Edit content page header",
 }
 
 const ajv = new Ajv({ strict: false, logger: false })

apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx

@@ -1,8 +1,10 @@
 import type { DropResult } from "@hello-pangea/dnd"
+import type { ISOMER_USABLE_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { useCallback } from "react"
 import { Box, Button, Flex, Icon, Text, VStack } from "@chakra-ui/react"
 import { DragDropContext, Droppable } from "@hello-pangea/dnd"
 import { useToast } from "@opengovsg/design-system-react"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { BiPin, BiPlus, BiPlusCircle } from "react-icons/bi"
 
 import { BlockEditingPlaceholder } from "~/components/Svg"
@@ -110,10 +112,11 @@ export default function RootStateDrawer() {
     ],
   )
 
-  const pageLayout: string = savedPageState.layout
+  const pageLayout: (typeof ISOMER_USABLE_PAGE_LAYOUTS)[keyof typeof ISOMER_USABLE_PAGE_LAYOUTS] =
+    savedPageState.layout
 
   const isHeroFixedBlock =
-    pageLayout === "homepage" &&
+    pageLayout === ISOMER_PAGE_LAYOUTS.Homepage &&
     savedPageState.content.length > 0 &&
     savedPageState.content[0]?.type === "hero"
 

apps/studio/src/schemas/page.ts

@@ -1,5 +1,5 @@
 import type { IsomerSchema } from "@opengovsg/isomer-components"
-import { schema } from "@opengovsg/isomer-components"
+import { ISOMER_PAGE_LAYOUTS, schema } from "@opengovsg/isomer-components"
 import { ResourceState, ResourceType } from "~prisma/generated/generatedEnums"
 import { z } from "zod"
 
@@ -10,8 +10,8 @@ import { generateBasePermalinkSchema } from "./common"
 const schemaValidator = ajv.compile<IsomerSchema>(schema)
 
 const NEW_PAGE_LAYOUT_VALUES = [
-  "article",
-  "content",
+  ISOMER_PAGE_LAYOUTS.Article,
+  ISOMER_PAGE_LAYOUTS.Content,
 ] as const satisfies readonly PrismaJson.BlobJsonContent["layout"][]
 
 export const MAX_TITLE_LENGTH = 150
@@ -70,7 +70,7 @@ export const updatePageBlobSchema = basePageSchema.extend({
 export const createPageSchema = z.object({
   title: pageTitleSchema,
   permalink: permalinkSchema,
-  layout: z.enum(NEW_PAGE_LAYOUT_VALUES).default("content"),
+  layout: z.enum(NEW_PAGE_LAYOUT_VALUES).default(ISOMER_PAGE_LAYOUTS.Content),
   siteId: z.number().min(1),
   // NOTE: implies that top level pages are allowed
   folderId: z.number().min(1).optional(),

apps/studio/src/server/modules/collection/collection.service.ts

@@ -1,4 +1,5 @@
 import type { UnwrapTagged } from "type-fest"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { format } from "date-fns"
 
 import type { ResourceType } from "../database"
@@ -7,7 +8,7 @@ export const createCollectionPageJson = ({}: {
   type: typeof ResourceType.CollectionPage // Act as soft typeguard
 }) => {
   return {
-    layout: "article",
+    layout: ISOMER_PAGE_LAYOUTS.Article,
     page: {
       date: format(new Date(), "dd/MM/yyyy"),
       // TODO: this is actually supposed to be passed from the frontend
@@ -26,7 +27,7 @@ export const createCollectionLinkJson = ({}: {
   type: typeof ResourceType.CollectionLink // Act as soft typeguard
 }) => {
   return {
-    layout: "link",
+    layout: ISOMER_PAGE_LAYOUTS.Link,
     page: {
       ref: "",
       summary: "",

apps/studio/src/server/modules/page/__tests__/page.router.test.ts

@@ -1,5 +1,6 @@
 import type { IsomerSchema } from "@opengovsg/isomer-components"
 import type { z } from "zod"
+import { ISOMER_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
 import { TRPCError } from "@trpc/server"
 import { ResourceState } from "~prisma/generated/generatedEnums"
 import { omit, pick } from "lodash"
@@ -574,7 +575,7 @@ describe("page.router", async () => {
         siteId: page.siteId,
         content: JSON.stringify({
           content: NEW_PAGE_BLOCKS,
-          layout: "content",
+          layout: ISOMER_PAGE_LAYOUTS.Content,
           page: pick(page, ["title", "permalink"]),
           version: "0.1.0",
         } as UpdatePageOutput["content"]),
@@ -704,7 +705,7 @@ describe("page.router", async () => {
         siteId: 1,
         title: "Test Page",
         permalink: "test-page",
-        layout: "content",
+        layout: ISOMER_PAGE_LAYOUTS.Content,
       })
 
       await expect(result).rejects.toThrowError(
@@ -718,7 +719,7 @@ describe("page.router", async () => {
         siteId: 999999, // should not exist
         title: "Test Page",
         permalink: "test-page",
-        layout: "content",
+        layout: ISOMER_PAGE_LAYOUTS.Content,
       })
 
       // Assert
@@ -744,7 +745,7 @@ describe("page.router", async () => {
         siteId: site.id,
         title: "Test Page",
         permalink: page.permalink,
-        layout: "content",
+        layout: ISOMER_PAGE_LAYOUTS.Content,
       })
 
       // Assert
@@ -772,7 +773,7 @@ describe("page.router", async () => {
       // Act
       const result = await caller.createPage({
         ...expectedPageArgs,
-        layout: "content",
+        layout: ISOMER_PAGE_LAYOUTS.Content,
       })
 
       // Assert
@@ -787,7 +788,7 @@ describe("page.router", async () => {
       })
       expect(actual).toMatchObject({
         ...expectedPageArgs,
-        content: createDefaultPage({ layout: "content" }),
+        content: createDefaultPage({ layout: ISOMER_PAGE_LAYOUTS.Content }),
       })
     })
 
@@ -807,7 +808,7 @@ describe("page.router", async () => {
       // Act
       const result = await caller.createPage({
         ...expectedPageArgs,
-        layout: "article",
+        layout: ISOMER_PAGE_LAYOUTS.Article,
       })
 
       // Assert
@@ -822,7 +823,7 @@ describe("page.router", async () => {
       })
       expect(actual).toMatchObject({
         ...expectedPageArgs,
-        content: createDefaultPage({ layout: "article" }),
+        content: createDefaultPage({ layout: ISOMER_PAGE_LAYOUTS.Article }),
       })
     })
 
@@ -856,7 +857,7 @@ describe("page.router", async () => {
       })
       expect(actual).toMatchObject({
         ...expectedPageArgs,
-        content: createDefaultPage({ layout: "content" }),
+        content: createDefaultPage({ layout: ISOMER_PAGE_LAYOUTS.Content }),
       })
     })
 
@@ -876,7 +877,7 @@ describe("page.router", async () => {
       // Act
       const result = await caller.createPage({
         ...expectedPageArgs,
-        layout: "content",
+        layout: ISOMER_PAGE_LAYOUTS.Content,
         folderId: Number(folder.id),
       })
 
@@ -900,7 +901,7 @@ describe("page.router", async () => {
       expect(actual).toMatchObject({
         ...expectedPageArgs,
         parentId: folder.id,
-        content: createDefaultPage({ layout: "content" }),
+        content: createDefaultPage({ layout: ISOMER_PAGE_LAYOUTS.Content }),
       })
     })