Merge branch 'main' into olejorgenbakken/issue4566

Author: lmfaole

.storybook/main.ts

@@ -5,11 +5,13 @@ const config: StorybookConfig = {
     stories: ["../packages/jokul/**/*.stories.@(ts|tsx)"],
     staticDirs: ["../storybook-public"],
     addons: [
-        "@storybook/addon-onboarding",
         "@storybook/addon-essentials",
         "@chromatic-com/storybook",
         "@storybook/addon-interactions",
     ],
+    features: {
+        backgroundsStoryGlobals: true,
+    },
     framework: {
         name: "@storybook/react-vite",
         options: {},

.storybook/preview-body.html

@@ -4,9 +4,42 @@ import React from "react";
 import "../packages/jokul/src/components/card/styles/_index.scss";
 import { PropDocs } from "./docs/props/PropDocs.js";
 import "./global.scss";
+import { themeDecorator, themeGlobal, themes } from "./theme.js";
 
 const preview: Preview = {
+    globalTypes: {
+        theme: themeGlobal,
+    },
+    initialGlobals: {
+        theme: themes[0],
+        backgrounds: { value: "page" },
+    },
+    decorators: [themeDecorator],
     parameters: {
+        backgrounds: {
+            options: {
+                page: {
+                    name: "Page",
+                    value: "var(--jkl-color-background-page)",
+                },
+                pageVariant: {
+                    name: "Page variant",
+                    value: "var(--jkl-color-background-page-variant)",
+                },
+                container: {
+                    name: "Container",
+                    value: "var(--jkl-color-background-container)",
+                },
+                containerLow: {
+                    name: "Container low",
+                    value: "var(--jkl-color-background-container-low)",
+                },
+                containerHigh: {
+                    name: "Container high",
+                    value: "var(--jkl-color-background-container-high)",
+                },
+            },
+        },
         options: {
             storySort: (a, b) => {
                 let compareBy = "name";

.storybook/preview.tsx

@@ -0,0 +1,43 @@
+import { ReactRenderer } from "@storybook/react";
+import React, { useEffect } from "react";
+import { DecoratorFunction } from "storybook/internal/types";
+
+export const themes = [undefined, "light", "dark"] as const;
+
+const applyTheme = (element: HTMLElement, theme: (typeof themes)[number]) => {
+    element.classList.add("jkl");
+    element.dataset["theme"] = theme;
+};
+
+const clearTheme = (element: HTMLElement) => {
+    delete element.dataset["theme"];
+};
+
+export const themeGlobal = {
+    description: "Fargetema for eksemplet",
+    toolbar: {
+        title: "Fargetema",
+        icon: "paintbrush",
+        items: [
+            { title: "Automatisk", value: themes[0], icon: "contrast" },
+            { title: "Lyst", value: themes[1], icon: "sun" },
+            { title: "Mørkt", value: themes[2], icon: "moon" },
+        ],
+        dynamicTitle: true,
+    },
+};
+
+export const themeDecorator: DecoratorFunction<ReactRenderer, {}> = (
+    Story,
+    context,
+) => {
+    useEffect(() => {
+        const body = window.document.body;
+        clearTheme(body);
+        applyTheme(body, context.globals.theme);
+
+        return () => clearTheme(body);
+    }, [context.globals.theme]);
+
+    return <Story />;
+};

.storybook/theme.tsx

@@ -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/package.json

@@ -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/(frontend)/komponenter/[slug]/page.tsx

@@ -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/app/api/component-folders/route.ts

@@ -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/components/ComponentFolderInput.tsx

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

ny-portal/src/sanity/extract.json

@@ -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/schemas/componentPage.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