feat: add prop documentation field

Adding prop documentation field in componentPage schema

ISSUES CLOSED: #4598

Author: kristianulv23

ny-portal/package.json

@@ -29,6 +29,7 @@
         "@portabletext/react": "^3.2.1",
         "@sanity/client": "^6.28.1",
         "@sanity/image-url": "^1.1.0",
+        "@sanity/ui": "^2.14.3",
         "@sanity/vision": "^3.76.3",
         "@types/mdx": "^2.0.13",
         "clsx": "^2.1.1",

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

@@ -1,4 +1,5 @@
 import PortableTextRenderer from "@/components/portable-text";
+import { PropDocumentation } from "@/components/prop-documentation/PropDocumentation";
 import { client } from "@/sanity/client";
 import { componentPageBySlugQuery } from "@/sanity/queries/componentPage";
 
@@ -18,6 +19,10 @@ export default async function Page({
             {data?.lede && <PortableTextRenderer value={data.lede} />}
 
             {data?.content && <PortableTextRenderer value={data.content} />}
+
+            {data?.component_folder && (
+                <PropDocumentation component={data.component_folder} />
+            )}
         </>
     );
 }

ny-portal/src/app/api/component-folders/route.ts

@@ -0,0 +1,35 @@
+import fs from "fs";
+import path from "path";
+import { NextResponse } from "next/server";
+import glob from "tiny-glob";
+
+const packageRoot = path.resolve(
+    process.cwd(),
+    "..",
+    "packages",
+    "jokul",
+    "src",
+    "components",
+);
+
+export async function GET() {
+    try {
+        const paths = (await glob("*", { cwd: packageRoot })).filter(
+            (component) =>
+                fs.statSync(path.resolve(packageRoot, component)).isDirectory(),
+        );
+
+        const formattedOptions = paths.sort().map((component) => ({
+            title: component,
+            value: component,
+        }));
+
+        return NextResponse.json(formattedOptions);
+    } catch (error) {
+        console.error("Error reading component folders:", error);
+        return NextResponse.json(
+            { error: "Failed to read component folders" },
+            { status: 500 },
+        );
+    }
+}

ny-portal/src/sanity/components/ComponentFolderInput.tsx

@@ -0,0 +1,69 @@
+import { Select } from "@sanity/ui";
+import React, { useEffect, useState } from "react";
+import { set, unset } from "sanity";
+import type { StringInputProps } from "sanity";
+
+type ComponentFolderOption = {
+    title: string;
+    value: string;
+};
+
+export function ComponentFolderInput(props: StringInputProps) {
+    const { value, onChange } = props;
+    const [options, setOptions] = useState<ComponentFolderOption[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const handleChange = React.useCallback(
+        (event: React.FormEvent<HTMLSelectElement> | undefined) => {
+            const value = event?.currentTarget.value;
+
+            // If the selected option has a value,
+            // it will be written to the document
+            // otherwise the field will be cleared
+            onChange(value ? set(value) : unset());
+        },
+        [onChange],
+    );
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const componentsResult = await fetch("/api/component-folders", {
+                    cache: "no-store",
+                });
+
+                const components: ComponentFolderOption[] =
+                    await componentsResult.json();
+
+                const formattedOptions: ComponentFolderOption[] =
+                    components.map(({ title, value }) => ({
+                        title,
+                        value,
+                    }));
+
+                setOptions(formattedOptions);
+            } catch (error) {
+                console.error("Failed to fetch component folders:", error);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        fetchData();
+    }, []);
+
+    return (
+        <Select
+            onChange={handleChange}
+            disabled={loading || options.length === 0}
+            value={value}
+        >
+            <option value="">-- Velg komponent --</option>
+            {options.map((option) => (
+                <option key={option.value} value={option.value}>
+                    {option.title}
+                </option>
+            ))}
+        </Select>
+    );
+}

ny-portal/src/sanity/extract.json

@@ -1069,6 +1069,13 @@
                     }
                 },
                 "optional": true
+            },
+            "component_folder": {
+                "type": "objectAttribute",
+                "value": {
+                    "type": "string"
+                },
+                "optional": true
             }
         }
     },

ny-portal/src/sanity/schemas/componentPage.ts

@@ -1,4 +1,5 @@
 import { defineField, defineType } from "sanity";
+import { ComponentFolderInput } from "../components/ComponentFolderInput";
 
 const MAX_LENGTH = 70;
 
@@ -36,5 +37,14 @@ export const componentPage = defineType({
             type: "array",
             of: [{ type: "block" }],
         }),
+        defineField({
+            name: "component_folder",
+            title: "Komponentmappe",
+            type: "string",
+            components: {
+                input: ComponentFolderInput,
+            },
+            validation: (Rule) => Rule.required(),
+        }),
     ],
 });

ny-portal/src/sanity/types.ts

@@ -185,6 +185,7 @@ export type Jokul_componentPage = {
         _type: "block";
         _key: string;
     }>;
+    component_folder?: string;
 };
 
 export type Slug = {
@@ -276,6 +277,7 @@ export type ComponentPageBySlugQueryResult = {
         _type: "block";
         _key: string;
     }>;
+    component_folder?: string;
 } | null;
 
 // Query TypeMap