feat: add portable-text renderer logic

Added portable-text related logic

ISSUES CLOSED: #4631

Author: kristianulv23

ny-portal/package.json

@@ -27,6 +27,7 @@
         "@payloadcms/richtext-lexical": "latest",
         "@payloadcms/ui": "latest",
         "@portabletext/react": "^3.2.1",
+        "@portabletext/types": "^2.0.13",
         "@sanity/client": "^6.28.1",
         "@sanity/image-url": "^1.1.0",
         "@sanity/ui": "^2.14.3",

ny-portal/src/app/(frontend)/komponenter/[slug]/page.tsx

@@ -1,5 +1,4 @@
-import PortableTextRenderer from "@/components/portable-text";
-import { PropDocumentation } from "@/components/prop-documentation/PropDocumentation";
+import { PortableText } from "@/components/portable-text/PortableText";
 import { client } from "@/sanity/client";
 import { componentPageBySlugQuery } from "@/sanity/queries/componentPage";
 
@@ -16,13 +15,9 @@ export default async function Page({
         <>
             <div>Hei jeg er {data?.title || "ikke i databasen"}</div>
 
-            {data?.lede && <PortableTextRenderer value={data.lede} />}
+            {data?.lede && <PortableText blocks={data.lede} />}
 
-            {data?.content && <PortableTextRenderer value={data.content} />}
-
-            {data?.component_folder && (
-                <PropDocumentation component={data.component_folder} />
-            )}
+            {data?.content && <PortableText blocks={data.content} />}
         </>
     );
 }

ny-portal/src/components/portable-text/PortableText.tsx

@@ -0,0 +1,38 @@
+import type {
+    PortableTextComponentProps,
+    PortableTextReactComponents,
+} from "@portabletext/react";
+import { PortableText as PortableTextReact } from "@portabletext/react";
+import type { TypedObject } from "@portabletext/types";
+import type { FC } from "react";
+import { PropsDocumentation } from "./props-documentation/PropsDocumentation";
+
+interface Props {
+    blocks: TypedObject[] | null;
+}
+
+const portableTextComponents: Record<
+    string,
+    FC<PortableTextComponentProps<any>>
+> = {
+    "jokul_component-props": PropsDocumentation,
+};
+
+export const baseComponentDefinition: Partial<PortableTextReactComponents> = {
+    types: portableTextComponents,
+};
+
+export const PortableText: FC<Props> = (props) => {
+    const components = {
+        ...baseComponentDefinition,
+        types: {
+            ...baseComponentDefinition.types,
+        },
+    };
+
+    if (props.blocks === null) {
+        return null;
+    }
+
+    return <PortableTextReact value={props.blocks} components={components} />;
+};

ny-portal/src/components/portable-text/index.tsx

@@ -1,37 +1,30 @@
 import { readFile } from "node:fs/promises";
-import { EOL } from "node:os";
 import { resolve } from "node:path";
+import { PortableTextTypeComponentProps } from "next-sanity";
+import { FC } from "react";
 import MissingTypesMessage from "./missing-types.mdx";
 import { Props } from "./Props";
+import type { PropsDocumentation as PropsDocumentationSchema } from "@/models/portable-text/propsDocumentationModel";
 
-type Props = { component: string };
-
-export async function PropDocumentation({ component }: Props) {
+export const PropsDocumentation: FC<
+    PortableTextTypeComponentProps<PropsDocumentationSchema>
+> = async ({ value }) => {
     const exampleFilePath = resolve(
         process.cwd(),
         "..",
         "packages",
         "jokul",
         "src",
         "components",
-        component,
+        value.component_folder,
         "types.ts",
     );
 
     try {
         const file = await readFile(exampleFilePath);
 
-        return (
-            <Props
-                props={
-                    file.toString()
-                    // .split(EOL)
-                    // .filter((line) => !line.startsWith("import"))
-                    // .join(EOL)
-                }
-            />
-        );
+        return <Props props={file.toString()} />;
     } catch (e) {
         return <MissingTypesMessage />;
     }
-}
+};