Forenkle Storybook-eksempler i Sanity

[kristianulv23]

Lager en felles modell for det vi trenger for å vise en Storybook-story. Den kan brukes flere steder og settes sammen med annet innhold. Frontend bestemmer hvordan storyen og innholdet rundt skal vises. I denne PR-en bruker vi den blant annet sammen med en valgfri kodeblokk.

Den gamle løsningen blir med videre fram til innholdet er migrert. Det følger vi opp i #6497.

Migrering

Det følger med tre migreringer som flytter eksisterende Storybook-eksempler på komponentsider og i Portable Text til den nye modellen. De oppdaterer også gamle Story-ID-er som har endret seg.

Testet

Har kjørt hele migreringen på en kopi av production.

[Copilot]

🟡 Changes recommended

Det er verifiserte feil i overgangskode (bl.a. StorySelector2-typing/patching og en debug-blokk i PortableText) som kan gi typefeil/ugyldig data eller uønsket rendering.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Denne PR-en forenkler håndteringen av Storybook-eksempler i Sanity ved å innføre en ny, gjenbrukbar embed-/example-modell som lagrer story-ID, navn, versjon, høyde og interaktivitet, og bygger Storybook-URL-er dynamisk (med migreringer for eksisterende innhold). Samtidig beholdes legacy-løsningen under to-be-deleted inntil migrering er fullført.

Changes:

• Introduserer jokul_storybookEmbed og jokul_storybookExample i Sanity-skjema, oppdaterer queries/types og legger til migreringer for å flytte/oppdatere eksisterende innhold.
• Oppdaterer frontend-rendering av Storybook-eksempler (iframe + lenker) til å bygge URL-er fra versjon + story-ID, med støtte for konfigurert base-URL.
• Legger til tester (Vitest) for versjonsparsing og StorybookFrame URL-bygging/oppførsel.

File summaries

File	Description
portal/vite.test.config.mjs	Legger til alias @ for at Vitest skal kunne resolve absolute imports brukt i nye/endrede filer.
portal/src/storybook/versions.ts	Ny felles base-URL-bygger for Storybook og hjelpefunksjoner for versjoner.
portal/src/storybook/versions.test.ts	Tester for versjonsvalidering og parsing av Storybook-versjon fra URL.
portal/src/sanity/types.ts	Genererte Sanity-typer oppdatert for nye Storybook-objekter og query-projeksjoner.
portal/src/sanity/schemas/to-be-deleted/storyDocument.tsx	Flytter import til to-be-deleted og skjuler legacy document-type.
portal/src/sanity/schemas/to-be-deleted/storybook.ts	Flytter legacy input-komponent til to-be-deleted-sti.
portal/src/sanity/schemas/to-be-deleted/story.ts	Ny (skjult) legacy objekt-type for story-id under migrering/overgang.
portal/src/sanity/schemas/to-be-deleted/index.ts	Registrerer flere legacy-typer i toBeDeleted-samlingen.
portal/src/sanity/schemas/to-be-deleted/examples.ts	Skjuler legacy “Storybook-eksempler”-blokk.
portal/src/sanity/schemas/objects/storybook.ts	Nye Sanity-objekter for embed/example, med validering, initialValue og preview.
portal/src/sanity/schemas/index.ts	Registrerer nye schema types og fjerner gammel story document fra hovedlisten.
portal/src/sanity/schemas/documents/component.ts	Legger til nytt storybook-felt på komponent (og i legacy example_card) for overgang.
portal/src/sanity/schemas/blocks/index.ts	Fjerner legacy examples-blokk fra standard blokkliste.
portal/src/sanity/schemas/blocks/commonBlock.ts	Tillater nye Portable Text-typer (jokul_storybookExample, jokul_storyId).
portal/src/sanity/queries/component.ts	Oppdaterer komponent-query for å hente med nytt storybook-felt i example_card.
portal/src/sanity/extract.json	Oppdatert schema-extract for nye typer og felter.
portal/src/sanity/components/to-be-deleted/StorySelector2.tsx	Ny legacy story-selector (versjonsstøtte) brukt i overgangs-/skjulte felter.
portal/src/sanity/components/to-be-deleted/StorySelector.tsx	Flyttet legacy selector-komponent under to-be-deleted.
portal/src/sanity/components/to-be-deleted/StorybookStoryInput.tsx	Pekes til felles versjonslogikk i @/storybook/versions.
portal/src/sanity/components/StorybookEmbedInput.tsx	Ny Sanity input for å velge story, versjon, høyde og interaktivitet.
portal/src/components/storybook/StorybookFrame.tsx	Bygger iframe/link URL-er fra versjon + story-id, og renser Sanity stega-data.
portal/src/components/storybook/StorybookFrame.test.tsx	Tester URL-bygging og iframe-load-oppførsel.
portal/src/components/portable-text/to-be-deleted/storybook-story/Storybook.tsx	Flyttet legacy Portable Text-renderer for gammel storybook-modell.
portal/src/components/portable-text/to-be-deleted/examples/examples.scss	Legacy styling for eksempelliste flyttet under to-be-deleted.
portal/src/components/portable-text/to-be-deleted/examples/ExampleList.tsx	Legacy renderer for jokul_examples peker til flyttet ExampleItem.
portal/src/components/portable-text/to-be-deleted/examples/ExampleItem.tsx	Bruker felles base-URL-bygger for Storybook-lenker i legacy renderer.
portal/src/components/portable-text/storybook-example/StorybookExample.tsx	Ny Portable Text-renderer for jokul_storybookExample.
portal/src/components/portable-text/PortableText.tsx	Registrerer ny blokktype for StorybookExample og peker legacy renderere til to-be-deleted.
portal/src/app/api/stories/[version]/route.ts	Bruker felles base-URL-bygger for å hente Storybook index.json per versjon.
portal/src/app/(frontend)/komponenter/[slug]/page.tsx	Komponent-side kan nå bruke nytt component.storybook (fallback til legacy).
portal/src/app/(frontend)/komponenter/[slug]/components/ComponentExampleCard.tsx	Renderer nytt storybook-embed når tilgjengelig, fallback til legacy story.
portal/sanity.config.ts	Fjerner “Stories”-liste fra Studio-navigasjon (legacy avvikles).
portal/migrations/storybook-story-ids/index.ts	Migrering for å oppdatere utdaterte Storybook story-ID-er.
portal/migrations/storybook-documentation/index.ts	Migrering som konverterer legacy storybook/examples-blokker til ny modell.
portal/migrations/storybook-component-example/index.ts	Migrering som flytter komponentens eksempel over til nytt storybook-felt.
.changeset/puny-places-swim.md	Changeset for portal (minor) som beskriver oppryddingen.

Review details

Suppressed comments (3)

portal/src/sanity/components/to-be-deleted/StorySelector2.tsx:52

• Her brukes useMemo til å kjøre side-effect (fetch) når version endres. useMemo er ikke ment for effekter og kan gi uforutsigbar oppførsel; bruk useEffect og reset loading når ny versjon lastes.

    useMemo(() => {
        async function fetchData() {
            try {
                const storiesResult = await fetch(`/api/stories/${version}`, {
                    cache: "no-store",

portal/src/sanity/components/to-be-deleted/StorySelector2.tsx:75

• handleChange patcher inn et objekt (storyId/storyName/storyUrl), men etter at inputen er koblet til et string-felt skal den kun sette selve story-ID-en (string) eller unsette feltet.

            if (selectedValue && story) {
                onChange(
                    set({
                        storyId: selectedValue,
                        storyName: story.name,

portal/src/sanity/components/to-be-deleted/StorySelector2.tsx:112

• Etter at value behandles som en streng, vil value?.storyId være en typefeil. Bruk value ?? "" som select-verdi.

                value={value?.storyId ?? ""}

• Files reviewed: 32/36 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

There are confirmed schema/rendering issues (invalid Portable Text mapping and a jokul_storyId input/schema mismatch) that can lead to incorrect stored data or unintended UI output.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Suppressed comments (1)

portal/src/components/portable-text/PortableText.tsx:52

• jokul_story2 is registered as a Portable Text block type but there is no corresponding Sanity schema type, and the current renderer returns a hardcoded <div>hei</div> which looks like leftover debug code. Replace it with a renderer for the actual jokul_storyId type (or remove it entirely) so unknown content doesn’t render unintended text.

    jokul_story2: () => {
        return <div>hei</div>;
    },

• Files reviewed: 32/36 changed files
• Comments generated: 2
• Review effort level: Lite

[Copilot]

🟡 Changes recommended

Det er bekreftede feil i Portable Text-typemapping og i StorySelector2 som vil gi uønsket output og/eller feil datatype/props i Sanity Studio.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Suppressed comments (3)

portal/src/components/portable-text/PortableText.tsx:52

• jokul_story2 ser ut til å være en midlertidig/feil renderer (returnerer bare "hei"). Dette vil enten aldri bli brukt (hvis typen ikke finnes i schema), eller gi uønsket output i produksjon dersom den faktisk forekommer i Portable Text.

    jokul_messageBox: MessageBox,
    jokul_feedbackBlock: FeedbackBlock,
    jokul_story2: () => {
        return <div>hei</div>;
    },

portal/src/sanity/schemas/to-be-deleted/story.ts:24

• Preview-selectoren peker på story.storyName, men feltet story er definert som en streng i dette objektet. Da blir preview alltid tomt/undefined.
  portal/src/sanity/components/to-be-deleted/StorySelector2.tsx:17
• StorySelector2 er brukt som components.input på et felt med type: "string" (jokul_storyId.story), men komponenten er skrevet som ObjectInputProps og kaller onChange(set({ storyId, storyName, storyUrl, ... })). Dette vil gi feil prop-shape i Studio og/eller lagre feil datatype i et string-felt. Løsningen må være å enten (A) gjøre feltet til en objekttype som matcher verdien du setter, eller (B) endre input-komponenten til å være en StringInputProps som setter kun storyId-stringen.

export function StorySelector2(props: ObjectInputProps) {
    const { value, onChange, id } = props;
    const [version, setVersion] = useState<SupportedVersion>(
        parseStorybookVersion(value?.storyUrl || ""),
    );

• Files reviewed: 33/37 changed files
• Comments generated: 1
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

StorySelector i legacy “to-be-deleted” kan trigge uønskede Sanity-patches (inkl. tom streng) pga. loading-init og useEffect-patching, og bør korrigeres før merge.

Review details

• Files reviewed: 32/36 changed files
• Comments generated: 0 new
• Review effort level: Lite

[piofinn]

Ser bra ut ved første kjappe gjennomgang! Eneste jeg kunne tenkt meg var å bruke den nye kodeblokken heller enn den gamle. Ser litt bedre ut og har syntax highlighting :)

[Copilot]

🔵 Needs a closer look

StorySelector (legacy) har en konkret bug der feltet kan bli skrevet tilbake utilsiktet og mangler korrekt håndtering av tom verdi/readOnly, noe som kan føre til feil data lagret ved redigering.

Review details

• Files reviewed: 34/37 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

Det er konkrete feil i den nye legacy StorySelector-inputen som kan trigge uønskede patcher/dirty state og som ikke respekterer readOnly korrekt.

Review details

Suppressed comments (1)

portal/src/storybook/versions.ts:21

• getStorybookBaseUrl allows overriding Storybook to a different origin via NEXT_PUBLIC_STORYBOOK_BASE_URL. The Storybook iframe message handling currently only trusts a hard-coded origin allowlist, so if the override points somewhere else the portal may stop detecting storyMissing/storyRendered events (and error handling can degrade). Consider ensuring the trusted-origin logic includes the configured base URL origin as well.

• Files reviewed: 34/37 changed files
• Comments generated: 0 new
• Review effort level: Lite