@oslokommune/punkt-react 13.6.15 → 13.7.0

package/src/components/preview/preview-utils.ts

@@ -1,226 +0,0 @@
-import * as prettier from 'prettier/standalone'
-import * as parserHtml from 'prettier/parser-html'
-import { TPreviewTreeNode, TSpecs, TPropObject } from './preview-types'
-
-// Konverterer f.eks. PktButton til pkt-button
-export function toKebabCase(str: string) {
-  if (!str) return ''
-  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
-}
-
-// Fjerner ugyldige tegn fra kode
-// Hjelper f.eks. med å unngå parsing-feil i Prettier
-export function sanitizeCode(code: string) {
-  return code.replace(/[^\x09\x0A\x0D\x20-\uD7FF\uE000-\uFFFD]/g, '')
-}
-
-// Bygger kode for HTML/CSS
-export async function buildHtmlCode(html: string): Promise<string> {
-  return await prettier.format(html, {
-    parser: 'html',
-    plugins: [parserHtml as any],
-  })
-}
-
-// Finner spesifikasjons-nøkkelen for en node
-export function getSpecKeyForNode(node: any, previewSpec: any): string | undefined {
-  if (!node || !previewSpec) return undefined
-  if (node.type === previewSpec.type) return previewSpec.spec
-  if (Array.isArray(previewSpec.children)) {
-    const childDef = previewSpec.children.find((c: any) => c.type === node.type)
-    if (childDef?.spec) return childDef.spec
-  }
-  // Fallback: bruk node.type som spec key hvis den finnes i specs
-  return node.type
-}
-
-// Legger til specs-strenger per node i preview-JSON
-export function attachSpecStrings(node: TPreviewTreeNode, previewSpec: TSpecs): TPreviewTreeNode {
-  if (!node || typeof node !== 'object') return node
-
-  // Finn riktig previewSpec for denne node-typen
-  let nodeSpec = previewSpec
-  if (node.type !== previewSpec.type && Array.isArray(previewSpec.children)) {
-    nodeSpec = previewSpec.children.find((c) => c.type === node.type) || previewSpec
-  }
-
-  // Legg til spesifikasjons-strengen hvis den finnes og er en streng
-  const specString = nodeSpec && typeof nodeSpec.spec === 'string' ? nodeSpec.spec : undefined
-
-  // Prosesser barn rekursivt
-  let children = node.children
-  if (Array.isArray(children)) {
-    children = children.map((child) => attachSpecStrings(child, nodeSpec))
-  }
-
-  return {
-    ...node,
-    ...(specString ? { spec: specString } : {}),
-    ...(children ? { children } : {}),
-  }
-}
-
-// Normaliserer barn for å sikre konsekvent struktur
-export function normalizeChildren(children: any): any[] {
-  if (Array.isArray(children)) {
-    return children.map((child, i) => {
-      if (child && typeof child === 'object') {
-        if (child.type === 'text') {
-          return {
-            ...child,
-            id: child.id ?? `child-${i}`,
-            children: typeof child.children === 'string' ? child.children : '',
-          }
-        }
-        return child.id ? child : { ...child, id: child?.id || `child-${i}` }
-      }
-      return child
-    })
-  }
-  if (typeof children === 'string' && children.trim() !== '') {
-    return [{ type: 'text', children, id: `text-0` }]
-  }
-  return []
-}
-
-// Finner tillatte barn av en node fra spesifikasjonen
-export function getAllowedChildren(previewSpec: any): any[] {
-  if (!previewSpec) return []
-  if (Array.isArray(previewSpec.children)) return previewSpec.children
-  if (previewSpec.children && typeof previewSpec.children === 'object') return [previewSpec.children]
-  return []
-}
-
-// Oppdaterer et trestruktur-objekt immutabelt basert på en gitt sti og ny verdi.
-export function updateTree(tree: any, path: (string | number)[], value: any): any {
-  if (path.length === 0) return value
-  const [head, ...rest] = path
-  if (Array.isArray(tree)) {
-    const newArr = [...tree]
-    newArr[head as number] = updateTree(tree[head as number], rest, value)
-    return newArr
-  } else {
-    if (head === 'children' && rest.length === 0) {
-      if (typeof value === 'string') {
-        // Pakk inn som tekst-node hvis forelderen ikke allerede er en tekst-node
-        if (tree.type !== 'text') {
-          return { ...tree, children: [{ type: 'text', children: value, id: `text-${Date.now()}` }] }
-        }
-        // Hvis forelder er en tekst-node, oppdater bare children-feltet med ren tekst
-        return { ...tree, children: value }
-      }
-      if (Array.isArray(value)) {
-        return { ...tree, children: value }
-      }
-    }
-    return {
-      ...tree,
-      [head]: updateTree(tree[head], rest, value),
-    }
-  }
-}
-
-// Formatter et JSON-streng med innrykk
-export function formatAsIndentedJson(obj: any, indent: number = 0): string {
-  const pad = ' '.repeat(indent)
-  return JSON.stringify(obj, null, 2)
-    .split('\n')
-    .map((line, i) => (i === 0 ? line : pad + line))
-    .join('\n')
-}
-
-// Kodevisning: Bygger attributter for både Elements og React
-function buildAttributes(node: TPreviewTreeNode, specs: TSpecs, indent: number, mode: 'react' | 'elements'): string {
-  const props = node.props || {}
-  const attrEntries = Object.entries(props).filter(([k, v]) => v !== undefined && v !== null && k !== 'children')
-  const startString = ' '.repeat(indent + 2)
-  return attrEntries
-    .map(([k, v]) => {
-      const specKey = node.spec || node.type
-      const propSpec = specs[specKey]?.props?.[k] || {}
-      if (typeof v === 'object' && v !== null && v.displayAsFalse) {
-        if (v.value) return startString + k
-        return startString + (mode === 'react' ? `${k}={false}` : `${k}="false"`)
-      }
-      if (typeof v === 'boolean') {
-        if (v) return startString + k
-        if ((propSpec as TPropObject).displayAsFalse)
-          return startString + (mode === 'react' ? `${k}={false}` : `${k}="false"`)
-        return ''
-      }
-      if (mode === 'react') {
-        return startString + (typeof v === 'object' ? `${k}={${formatAsIndentedJson(v, indent + 2)}}` : `${k}="${v}"`)
-      }
-      // elements
-      return typeof v === 'object' ? `${startString}${k}='${formatAsIndentedJson(v, indent + 2)}'` : `${k}="${v}"`
-    })
-    .filter(Boolean)
-    .join('\n')
-}
-
-// Kodevisning: Bygger children for både Elements og React
-function buildChildren(
-  node: TPreviewTreeNode,
-  specs: TSpecs,
-  indent: number,
-  builder: (n: TPreviewTreeNode, s: TSpecs, i: number, r: boolean) => string,
-): { childrenArr: string[]; children: string; hasChildren: boolean } {
-  const childrenArr = Array.isArray(node.children)
-    ? node.children.map((c) => builder(c, specs, indent + 2, node.type !== 'option'))
-    : node.children
-      ? [builder(node.children, specs, indent + 2, node.type !== 'option')]
-      : []
-  const filtered = childrenArr.filter((c) => (typeof c === 'string' ? c.trim() !== '' : true))
-  const children = filtered.join('')
-  const hasChildren = filtered.some((c) => (typeof c === 'string' ? c.trim() !== '' : !!c))
-  return { childrenArr: filtered, children, hasChildren }
-}
-
-// Bygger kode for Punkt Elements
-export function buildElementsCode(
-  node: TPreviewTreeNode,
-  specs: TSpecs,
-  indent = 0,
-  renderStringWithSpan: boolean = true,
-): string {
-  if (typeof node === 'string') return node
-  if (!node || !node.type) return ''
-  if (node.type === 'text' && !renderStringWithSpan) {
-    return typeof node.children === 'string' ? node.children : ''
-  }
-  const spec = specs[node.type] || {}
-  const tag = node.type === 'text' ? 'span' : spec.name || toKebabCase(node.type)
-  if (!tag) return ''
-  const attrs = buildAttributes(node, specs, indent, 'elements')
-  const { children } = buildChildren(node, specs, indent, buildElementsCode)
-  const space = ' '.repeat(indent)
-  if (children) {
-    return `${space}<${tag}${attrs ? '\n' + space + attrs : ''}>\n${children}\n${space}</${tag}>`
-  }
-  return `${space}<${tag}${attrs ? '\n' + space + attrs + '\n' + space : ''}></${tag}>`
-}
-
-// Bygger kode for Punkt React
-export function buildReactCode(
-  node: TPreviewTreeNode,
-  specs: TSpecs,
-  indent = 0,
-  renderStringWithSpan: boolean = true,
-): string {
-  if (typeof node === 'string' && (node as string).trim() !== '') {
-    return '\n' + ' '.repeat(indent) + node
-  }
-  if (!node || !node.type) return ''
-  if (node.type === 'text' && !renderStringWithSpan) {
-    return typeof node.children === 'string' ? '\n' + ' '.repeat(indent) + node.children : ''
-  }
-  const tag = node.type === 'text' ? 'span' : node.type
-  if (!tag) return ''
-  const attrs = buildAttributes(node, specs, indent, 'react')
-  const { children, hasChildren } = buildChildren(node, specs, indent, buildReactCode)
-  const space = ' '.repeat(indent)
-  if (hasChildren) {
-    return `\n${space}<${tag}${attrs ? '\n' + attrs : ''}>${children}\n${space}</${tag}>`
-  }
-  return `\n${space}<${tag}${attrs ? '\n' + attrs + '\n' + space : ''} />`
-}

package/src/components/preview/previewJson/accordion.json

@@ -1,84 +0,0 @@
-{
-  "name": "AccordionPreview",
-  "type": "PktAccordion",
-  "spec": "accordion",
-  "previewProps": ["skin", "compact"],
-  "children": [
-    {
-      "name": "AccordionItem",
-      "type": "PktAccordionItem",
-      "spec": "accordionItem",
-      "defaults": {
-        "title": "Accordion $n",
-        "id": "accordion-item-$n"
-      },
-      "children": [
-        {
-          "name": "Innhold",
-          "type": "text"
-        }
-      ]
-    }
-  ],
-  "preview": {
-    "type": "PktAccordion",
-    "props": {
-      "skin": "outlined"
-    },
-    "children": [
-      {
-        "type": "PktAccordionItem",
-        "props": {
-          "title": "Hva er åpningstidene?",
-          "id": "apningstid",
-          "isOpen": true
-        },
-        "children": [
-          {
-            "type": "text",
-            "children": "Vi åpner om morgenen når vi føler oss klar for det, og stenger når middagen er klar!"
-          }
-        ]
-      },
-      {
-        "type": "PktAccordionItem",
-        "props": {
-          "title": "Hva er dresscode?",
-          "id": "dresscode"
-        },
-        "children": [
-          {
-            "type": "text",
-            "children": "Vi sier som i Texas: No shirt? No shoes? No service!"
-          }
-        ]
-      },
-      {
-        "type": "PktAccordionItem",
-        "props": {
-          "title": "Kan jeg ta med mat og drikke?",
-          "id": "mat-og-drikke"
-        },
-        "children": [
-          {
-            "type": "text",
-            "children": "Bare hvis vi får smake!"
-          }
-        ]
-      },
-      {
-        "type": "PktAccordionItem",
-        "props": {
-          "title": "Kan jeg ta med kjæledyr?",
-          "id": "kjaeledyr"
-        },
-        "children": [
-          {
-            "type": "text",
-            "children": "Vi tillater kun pelsdyr som mjauer!"
-          }
-        ]
-      }
-    ]
-  }
-}

package/src/components/preview/previewJson/alert.json

@@ -1,27 +0,0 @@
-{
-  "name": "AlertPreview",
-  "type": "PktAlert",
-  "spec": "alert",
-  "previewProps": ["title", "skin", "compact", "closeAlert"],
-  "children": [
-    {
-      "name": "Innhold",
-      "type": "text"
-    }
-  ],
-  "preview": {
-    "type": "PktAlert",
-    "props": {
-      "title": "Dette er en alert",
-      "skin": "info",
-      "compact": false,
-      "closeAlert": false
-    },
-    "children": [
-      {
-        "type": "text",
-        "children": "Dette er innholdet i meldingen."
-      }
-    ]
-  }
-}

package/src/components/preview/previewJson/backlink.json

@@ -1,14 +0,0 @@
-{
-  "name": "BackLinkPreview",
-  "type": "PktBackLink",
-  "spec": "backlink",
-  "previewProps": ["href", "text", "ariaLabel"],
-  "preview": {
-    "type": "PktBackLink",
-    "props": {
-      "href": "/",
-      "text": "Tilbake til søknaden",
-      "ariaLabel": "Gå tilbake til forrige steg"
-    }
-  }
-}

package/src/components/preview/previewJson/breadcrumbs.json

@@ -1,17 +0,0 @@
-{
-  "name": "BreadcrumbsPreview",
-  "type": "PktBreadcrumbs",
-  "spec": "breadcrumbs",
-  "previewProps": ["breadcrumbs"],
-  "preview": {
-    "type": "PktBreadcrumbs",
-    "props": {
-      "breadcrumbs": [
-        { "text": "Hjem", "href": "/" },
-        { "text": "Produkter", "href": "/produkter" },
-        { "text": "Detaljer", "href": "/produkter/123" }
-      ],
-      "navigationType": "anchor"
-    }
-  }
-}

package/src/components/preview/previewJson/button.json

@@ -1,28 +0,0 @@
-{
-  "name": "ButtonPreview",
-  "type": "PktButton",
-  "spec": "button",
-  "previewProps": ["skin", "size", "iconName"],
-  "children": [
-    {
-      "name": "Innhold",
-      "type": "text"
-    }
-  ],
-  "preview": {
-    "type": "PktButton",
-    "props": {
-      "skin": "primary",
-      "size": "large",
-      "variant": "icon-left",
-      "iconName": "heart",
-      "disabled": false
-    },
-    "children": [
-      {
-        "type": "text",
-        "children": "Dette er en knapp"
-      }
-    ]
-  }
-}

package/src/components/preview/previewJson/card.json

@@ -1,41 +0,0 @@
-{
-  "name": "CardPreview",
-  "type": "PktCard",
-  "spec": "card",
-  "previewProps": ["heading", "subheading", "skin", "layout"],
-  "children": [
-    {
-      "name": "Innhold",
-      "type": "text"
-    }
-  ],
-  "preview": {
-    "type": "PktCard",
-    "props": {
-      "heading": "Card heading",
-      "subheading": "Card subheading",
-      "skin": "outlined",
-      "layout": "vertical",
-      "tags": [
-        {
-          "text": "Tag 1",
-          "skin": "blue"
-        },
-        {
-          "text": "Tag 2",
-          "skin": "green"
-        }
-      ],
-      "image": {
-        "src": "https://placecats.com/neo_banana/300/200",
-        "alt": "Bilde av politiet"
-      }
-    },
-    "children": [
-      {
-        "type": "text",
-        "children": "<p>Dette er innholdet i kortet</p>"
-      }
-    ]
-  }
-}

package/src/components/preview/previewJson/checkbox.json

@@ -1,21 +0,0 @@
-{
-  "name": "CheckboxPreview",
-  "type": "PktCheckbox",
-  "spec": "checkbox",
-  "previewProps": ["label", "checkHelptext", "checked", "hasTile", "isSwitch"],
-  "preview": {
-    "type": "PktCheckbox",
-    "props": {
-      "id": "checkbox-1",
-      "name": "gruppe1",
-      "label": "Godta vilkår",
-      "checkHelptext": "Dette er hjelpetekst for checkboxen.",
-      "value": "vilkar",
-      "defaultChecked": false,
-      "checked": false,
-      "disabled": false,
-      "hasError": false,
-      "isSwitch": false
-    }
-  }
-}

package/src/components/preview/previewJson/combobox.json

@@ -1,24 +0,0 @@
-{
-  "name": "ComboboxPreview",
-  "type": "PktCombobox",
-  "spec": "combobox",
-  "previewProps": ["label", "helptext", "multiple", "typeahead", "allowUserInput"],
-  "preview": {
-    "type": "PktCombobox",
-    "props": {
-      "label": "Velg bydel",
-      "placeholder": "Søk eller velg…",
-      "multiple": false,
-      "typeahead": true,
-      "allowUserInput": true,
-      "value": "bgr",
-      "options": [
-        { "value": "bfr", "label": "Frogner" },
-        { "value": "bgo", "label": "Gamle Oslo" },
-        { "value": "bgr", "label": "Grorud" },
-        { "value": "bxx", "label": "Andre bydeler" }
-      ],
-      "useWrapper": true
-    }
-  }
-}

package/src/components/preview/previewJson/consent.json

@@ -1,14 +0,0 @@
-{
-  "name": "ConsentPreview",
-  "type": "PktConsent",
-  "spec": "consent",
-  "previewProps": ["triggerType", "triggerText"],
-  "preview": {
-    "type": "PktConsent",
-    "props": {
-      "triggerType": "button",
-      "triggerText": "Endre samtykke",
-      "devMode": true
-    }
-  }
-}

package/src/components/preview/previewJson/datepicker.json

@@ -1,14 +0,0 @@
-{
-  "name": "DatepickerPreview",
-  "type": "PktDatepicker",
-  "spec": "datepicker",
-  "previewProps": ["label", "helptext", "currentmonth", "multiple", "range"],
-  "preview": {
-    "type": "PktDatepicker",
-    "props": {
-      "label": "Velg dato",
-      "multiple": true,
-      "useWrapper": true
-    }
-  }
-}

package/src/components/preview/previewJson/footer-simple.json

@@ -1,17 +0,0 @@
-{
-  "name": "FooterSimplePreview",
-  "type": "PktFooterSimple",
-  "spec": "footer-simple",
-  "previewProps": ["personvernOgInfoLink", "tilgjengelighetLink", "includeConsent"],
-  "preview": {
-    "type": "PktFooterSimple",
-    "props": {
-      "personvernOgInfoLink": "/personvern-og-informasjon",
-      "tilgjengelighetLink": "/tilgjengelighet",
-      "links": [
-        { "href": "/om", "text": "Om oss", "external": false },
-        { "href": "https://oslo.kommune.no", "text": "Oslo kommune", "external": true }
-      ]
-    }
-  }
-}

package/src/components/preview/previewJson/footer.json

@@ -1,29 +0,0 @@
-{
-  "name": "FooterPreview",
-  "type": "PktFooter",
-  "spec": "footer",
-  "previewProps": ["personvernOgInfoLink", "tilgjengelighetLink", "includeConsent"],
-  "preview": {
-    "type": "PktFooter",
-    "props": {
-      "includeConsent": false,
-      "googleAnalyticsId": "",
-      "hotjarId": "",
-      "columnOne": {
-        "title": "Om oss",
-        "links": [
-          { "href": "/om", "text": "Om oss", "external": false },
-          { "href": "/kontakt", "text": "Kontakt", "external": false },
-          { "href": "https://oslo.kommune.no", "text": "Oslo kommune", "external": true }
-        ]
-      },
-      "columnTwo": {
-        "title": "Tjenester",
-        "links": [
-          { "href": "/tjenester", "text": "Tjenester", "external": false },
-          { "href": "/hjelp", "text": "Hjelp", "external": false }
-        ]
-      }
-    }
-  }
-}

package/src/components/preview/previewJson/header.json

@@ -1,34 +0,0 @@
-{
-  "name": "HeaderPreview",
-  "type": "PktHeader",
-  "spec": "header",
-  "previewProps": ["logoLink", "serviceName", "showLogOutButton"],
-  "preview": {
-    "type": "PktHeader",
-    "props": {
-      "logoLink": "https://www.oslo.kommune.no/",
-      "serviceName": "Min tjeneste",
-      "fixed": false,
-      "scrollToHide": false,
-      "user": {
-        "name": "Ola Nordmann",
-        "shortname": "ON",
-        "lastLoggedIn": "2025-06-27 14:30"
-      },
-      "userMenu": [
-        { "iconName": "user", "title": "Min profil", "target": "/profil" },
-        { "iconName": "cogwheel", "title": "Innstillinger", "target": "/innstillinger" }
-      ],
-      "userMenuFooter": [{ "title": "Logg ut", "target": "/logout" }],
-      "userOptions": [{ "iconName": "sound-on", "title": "Varsler", "target": "/varsler" }],
-      "representing": {
-        "name": "Oslo kommune",
-        "shortname": "OK",
-        "orgNumber": "123456789"
-      },
-      "canChangeRepresentation": false,
-      "showLogOutButton": true,
-      "showMenuButton": false
-    }
-  }
-}

package/src/components/preview/previewJson/icon.json

@@ -1,13 +0,0 @@
-{
-  "name": "IconPreview",
-  "type": "PktIcon",
-  "spec": "icon",
-  "previewProps": ["name", "className"],
-  "preview": {
-    "type": "PktIcon",
-    "props": {
-      "name": "accessibility",
-      "className": "pkt-icon--large"
-    }
-  }
-}

package/src/components/preview/previewJson/input-wrapper.json

@@ -1,39 +0,0 @@
-{
-  "name": "InputWrapperPreview",
-  "type": "PktInputWrapper",
-  "spec": "input-wrapper",
-  "previewProps": [
-    "label",
-    "helptext",
-    "errorMessage",
-    "hasError",
-    "required",
-    "requiredTag",
-    "requiredText",
-    "optionalTag",
-    "optionalText",
-    "fullwidth"
-  ],
-  "children": [
-    {
-      "name": "Innhold",
-      "type": "text"
-    }
-  ],
-  "preview": {
-    "type": "PktInputWrapper",
-    "props": {
-      "label": "Feltetikett",
-      "helptext": "Dette er hjelpetekst.",
-      "errorMessage": "",
-      "hasError": false,
-      "required": false,
-      "requiredTag": false,
-      "requiredText": "",
-      "optionalTag": false,
-      "optionalText": "",
-      "fullwidth": false
-    },
-    "children": "Her kan du skrive inn tekst"
-  }
-}