@oslokommune/punkt-react 13.2.4 → 13.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.2.4",
+  "version": "13.3.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,18 +38,16 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.2.4",
-    "angular-html-parser": "^6.0.2",
-    "html-format": "^1.1.7",
+    "@oslokommune/punkt-elements": "^13.3.0",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.53.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@oslokommune/punkt-assets": "^13.0.0",
-    "@oslokommune/punkt-css": "^13.2.3",
+    "@oslokommune/punkt-css": "^13.3.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -112,5 +110,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f777f10f0637de10ff45fe6a5b6d9c7e4abd70ff"
+  "gitHead": "82281bdd30fc0a0a1e47b3a52199e59aed83b65d"
 }

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
+export { PktHeading } from './heading/Heading'
 export { PktHelptext } from './helptext/Helptext'
 export { PktIcon } from './icon/Icon'
 export { PktInput } from './input/Input'
@@ -22,18 +23,19 @@ export { PktLoader } from './loader/Loader'
 export { PktMessagebox } from './messagebox/Messagebox'
 export { PktModal } from './modal/Modal'
 export { PktPreview } from './preview/Preview'
+export { PktPreviewWithJson } from './preview/PreviewWithJson'
 export { PktProgressbar } from './progressbar/Progressbar'
 export { PktRadioButton } from './radio/RadioButton'
 export { PktSearchInput } from './searchinput/SearchInput'
 export { PktSelect } from './select/Select'
-export { PktStepper } from './stepper/Stepper'
 export { PktStep } from './stepper/Step'
+export { PktStepper } from './stepper/Stepper'
 export { PktTable } from './table/Table'
+export { PktTableBody } from './table/TableBody'
 export { PktTableDataCell } from './table/TableDataCell'
-export { PktTableHeaderCell } from './table/TableHeaderCell'
 export { PktTableHeader } from './table/TableHeader'
+export { PktTableHeaderCell } from './table/TableHeaderCell'
 export { PktTableRow } from './table/TableRow'
-export { PktTableBody } from './table/TableBody'
 export { PktTabs } from './tabs/Tabs'
 export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'

package/src/components/linkcard/LinkCard.tsx

@@ -6,7 +6,7 @@ import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'
 import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
 
 export interface IPktLinkCard extends PktElType {
-  skin?: 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
+  skin?: 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
   title?: string
   href?: string
   iconName?: string

package/src/components/preview/Preview.tsx

@@ -12,7 +12,8 @@ import { PktCheckbox } from '../checkbox/Checkbox'
 import { PktTabs } from '../tabs/Tabs'
 import { PktTag } from '../tag/Tag'
 import { PktTextinput } from '../textinput/Textinput'
-import { PktPreviewSpecs, ISpecObject } from './PreviewSpecs'
+import { PktPreviewSpecs } from './PreviewSpecs'
+import type { ISpecObject } from './preview-types'
 import { PktPreviewPropEditor } from './PreviewPropEditor'
 
 SyntaxHighlighter.registerLanguage('jsx', jsx)
@@ -63,7 +64,8 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
   const [htmlContent, setHtmlContent] = useState('')
   const [jsxContent, setJsxContent] = useState('')
   const [copied, setCopied] = useState('')
-  const [slotContent, setSlotContent] = useState('Rediger innhold')
+  const [slotContent, setSlotContent] = useState('Innhold')
+
   const [tabs, setTabs] = useState([
     {
       text: 'Rediger',

package/src/components/preview/PreviewCode.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import * as prettier from 'prettier/standalone'
+import * as parserHtml from 'prettier/parser-html'
+import type { TPreviewTreeNode, TSpecs } from './preview-types'
+import { PktButton } from '../button/Button'
+import { PktTabs } from '../tabs/Tabs'
+
+import { sanitizeCode, buildElementsCode, buildReactCode } from './preview-utils'
+
+export const PktPreviewCode: React.FC<{
+  tree: TPreviewTreeNode
+  specs: TSpecs
+  html: string
+}> = ({ tree, specs, html }) => {
+  const [tabs, setTabs] = useState([
+    { text: 'Punkt React', icon: 'react', active: true },
+    { text: specs[tree.spec || ''].isElement ? 'Punkt Elements' : 'HTML', icon: 'code', active: false },
+  ])
+  const [copied, setCopied] = useState<'jsx' | 'html' | ''>('')
+  const [activeTab, setActiveTab] = useState(0)
+
+  const htmlCodeRaw = specs[tree.spec || ''].isElement
+    ? (buildElementsCode(tree, specs) ?? '').replace(/^\s*\n|\n\s*$/g, '').trim()
+    : html.replace(/<\!--.*?-->/g, '')
+  const [htmlCode, setHtmlCode] = useState('') // Start as empty string
+  useEffect(() => {
+    if (htmlCodeRaw) {
+      prettier
+        .format(htmlCodeRaw, {
+          parser: 'html',
+          plugins: [parserHtml as any],
+          singleAttributePerLine: true,
+          bracketSameLine: true,
+        })
+        .then((formatted) => setHtmlCode(formatted.trim()))
+        .catch(() => setHtmlCode(htmlCodeRaw)) // fallback if prettier fails
+    } else {
+      setHtmlCode('')
+    }
+  }, [htmlCodeRaw])
+
+  const jsxCodeRaw = (buildReactCode(tree, specs) ?? '').replace(/^\s*\n|\n\s*$/g, '').trim()
+  const [jsxCode, setJsxCode] = useState('') // Start as empty string
+  useEffect(() => {
+    if (jsxCodeRaw) {
+      prettier
+        .format(jsxCodeRaw, {
+          parser: 'html',
+          plugins: [parserHtml as any],
+          singleAttributePerLine: true,
+          bracketSameLine: true,
+        })
+        .then((formatted) => setJsxCode(formatted.trim()))
+        .catch(() => setJsxCode(jsxCodeRaw)) // fallback if prettier fails
+    } else {
+      setJsxCode('')
+    }
+  }, [jsxCodeRaw])
+
+  const changeTab = (id: number) => {
+    setActiveTab(id)
+    setCopied('')
+    setTabs((prevTabs) =>
+      prevTabs.map((tab, index) => ({
+        ...tab,
+        active: index === id,
+      })),
+    )
+  }
+
+  const copyToClipboard = (type: 'jsx' | 'html', content: string) => {
+    navigator.clipboard.writeText(content).then(() => setCopied(type))
+  }
+
+  return (
+    <div className="pkt-preview__code-container" data-mode="dark">
+      <PktTabs tabs={tabs} onTabSelected={changeTab} />
+      <div className={`pkt-preview__code${activeTab === 0 ? '' : ' pkt-hide'}`}>
+        <SyntaxHighlighter language="jsx" style={a11yDark}>
+          {typeof jsxCode === 'string' && jsxCode.length > 0 ? sanitizeCode(jsxCode) : ''}
+        </SyntaxHighlighter>
+
+        <div className="pkt-preview__copy">
+          {copied === 'jsx' && <span className="pkt-preview__copied">Kode kopiert til utklippstavle</span>}
+          <PktButton
+            skin="tertiary"
+            variant="icon-only"
+            size="small"
+            iconName="copy"
+            onClick={() => copyToClipboard('jsx', jsxCode)}
+          >
+            Kopier kode
+          </PktButton>
+        </div>
+      </div>
+      <div className={`pkt-preview__code${activeTab === 1 ? '' : ' pkt-hide'}`}>
+        <SyntaxHighlighter language="markup" style={a11yDark}>
+          {typeof htmlCode === 'string' && htmlCode.length > 0 ? sanitizeCode(htmlCode) : ''}
+        </SyntaxHighlighter>
+
+        <div className="pkt-preview__copy">
+          {copied === 'html' && <span className="pkt-preview__copied">Kode kopiert til utklippstavle</span>}
+          <PktButton
+            skin="tertiary"
+            variant="icon-only"
+            size="small"
+            iconName="copy"
+            onClick={() => copyToClipboard('html', htmlCode.trim())}
+          >
+            Kopier kode
+          </PktButton>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/preview/PreviewPropEditor.tsx

@@ -3,20 +3,17 @@
 import { FC } from 'react'
 import { PktCheckbox } from '../checkbox/Checkbox'
 import { PktDatepicker } from '../datepicker/Datepicker'
-import { PktInputWrapper } from '../inputwrapper/InputWrapper'
-import { PktSelect } from '../select/Select'
-import { PktTextinput } from '../textinput/Textinput'
 import icons from '@oslokommune/punkt-assets/dist/icons/icons.json'
 import { PktButton } from '../button/Button'
+import { PktAccordion } from '../accordion/Accordion'
+import { PktAccordionItem } from '../accordion/AccordionItem'
+import { PktTextinput } from '../textinput/Textinput'
+import { IPropEditorProps } from './preview-types'
+import { PktTag } from '../tag/Tag'
+import { PktSelect } from '../select/Select'
+import { PktTextarea } from '../textarea/Textarea'
 
-interface PropEditorProps {
-  propKey: string
-  spec: any
-  props: any
-  handleChange: (key: string, value: any, displayAsFalse?: boolean) => void
-}
-
-export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props, handleChange }) => {
+export const PktPreviewPropEditor: FC<IPropEditorProps> = ({ propKey, spec, props, hideKey, handleChange }) => {
   const editorTypes = {
     BOOLEAN: 'boolean',
     ICON: 'icon',
@@ -24,59 +21,47 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
     OBJECT: 'object',
     DATE: 'ISOdatestring',
     NUMBER: 'number',
+    LONGSTRING: 'longstring',
     STRING: 'string',
   }
 
-  const handleObjectChange = (key: string, value: any) => {
-    handleChange(propKey, { ...props[propKey], [key]: value })
-  }
-
-  const handleArrayChange = (index: number, key: string, value: any) => {
-    const newArray = [...props[propKey]]
-    newArray[index] = { ...newArray[index], [key]: value }
-    handleChange(propKey, newArray)
-  }
-
-  const addObjectToArray = () => {
-    const newArray = [...props[propKey], {}]
-    handleChange(propKey, newArray)
-  }
-
-  const removeObjectFromArray = (index: number) => {
-    const newArray = props[propKey].filter((_: any, i: number) => i !== index)
-    handleChange(propKey, newArray)
-  }
-
+  // Boolean
   if (spec.type === editorTypes.BOOLEAN) {
+    // Support both boolean and { value, displayAsFalse }
+    const raw = props[propKey]
+    const checked = typeof raw === 'object' && raw !== null && 'value' in raw ? raw.value : !!raw
     return (
-      <PktInputWrapper
+      <PktCheckbox
+        id={propKey}
         label={spec.name || propKey}
-        forId={propKey}
-        helptext={spec.description || null}
-        hasFieldset
+        tagText={hideKey ? undefined : propKey}
         requiredTag={spec.required}
-      >
-        <PktCheckbox
-          id={propKey}
-          label={propKey}
-          type="checkbox"
-          checked={props[propKey] || false}
-          onChange={(e) => handleChange(propKey, e.target.checked, spec.displayAsFalse)}
-          labelPosition="right"
-          isSwitch
-        />
-      </PktInputWrapper>
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => {
+          handleChange(
+            propKey,
+            spec.displayAsFalse ? { value: e.target.checked, displayAsFalse: true } : e.target.checked,
+          )
+        }}
+        labelPosition="right"
+        isSwitch
+      />
     )
   }
 
+  // Icon (dropdown)
   if (spec.type === editorTypes.ICON) {
+    const value = props[propKey] || ''
     return (
       <PktSelect
         label={spec.name || propKey}
-        helptext={spec.description || null}
         id={propKey}
-        value={props[propKey] || ''}
-        onChange={(e) => handleChange(propKey, e.target.value)}
+        tagText={hideKey ? undefined : propKey}
+        value={value}
+        onChange={(e) => {
+          handleChange(propKey, e.target.value)
+        }}
         requiredTag={spec.required}
       >
         <option value=""></option>
@@ -89,31 +74,40 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
     )
   }
 
+  // Date
   if (spec.type === editorTypes.DATE) {
+    const value = props[propKey] || ''
     return (
-      <PktDatepicker
-        id={propKey}
-        label={spec.name || propKey}
-        helptext={spec.description || null}
-        value={props[propKey] || ''}
-        multiple={!!(spec.variant === 'multiple')}
-        maxlength={999}
-        onChange={(e) => handleChange(propKey, (e.target as HTMLInputElement).value)}
-        requiredTag={spec.required}
-      />
+      <div>
+        <PktDatepicker
+          id={propKey}
+          label={spec.name || propKey}
+          value={value}
+          multiple={!!(spec.variant === 'multiple')}
+          maxlength={999}
+          tagText={propKey}
+          onChange={(e) => {
+            handleChange(propKey, (e.target as HTMLInputElement).value)
+          }}
+          requiredTag={spec.required}
+        />
+      </div>
     )
   }
 
+  // Enum (array of values)
   if (Array.isArray(spec) || Array.isArray(spec.type) || Array.isArray(spec.values)) {
-    const arr = Array.isArray(spec) ? spec : spec.values || spec.type
+    const arr = Array.isArray(spec) ? [...spec] : spec.values ? [...spec.values] : [...spec.type]
+    const value = props[propKey] || ''
     return (
       <PktSelect
         label={spec.name || propKey}
-        helptext={spec.description || null}
         id={propKey}
-        value={props[propKey]}
-        onChange={(e) => handleChange(propKey, e.target.value)}
+        value={value}
+        onChange={(e) => handleChange(propKey, e.currentTarget.value)}
+        required={spec.required}
         requiredTag={spec.required}
+        tagText={hideKey ? undefined : propKey}
       >
         <option value=""></option>
         {arr.map((option: string) => (
@@ -125,90 +119,148 @@ export const PktPreviewPropEditor: FC<PropEditorProps> = ({ propKey, spec, props
     )
   }
 
+  // Number
   if (spec.type === editorTypes.NUMBER) {
+    const value = props[propKey] ?? ''
     return (
       <PktTextinput
-        id={propKey}
         label={spec.name || propKey}
-        helptext={spec.description || null}
-        type="number"
-        value={props[propKey] || ''}
-        onChange={(e) => handleChange(propKey, parseFloat(e.currentTarget.value))}
+        id={propKey}
         requiredTag={spec.required}
+        required={spec.required}
+        tagText={hideKey ? undefined : propKey}
+        type="number"
+        value={value}
+        onChange={(e) => {
+          handleChange(propKey, parseFloat(e.currentTarget.value))
+        }}
       />
     )
   }
 
+  // Object
   if (spec.type === editorTypes.OBJECT) {
-    if (!props[propKey]) {
-      props[propKey] = {}
-    }
+    const value = props[propKey] ? { ...props[propKey] } : {}
     return (
       <div>
-        <div className="pkt-inputwrapper__label">
-          <h2>{spec.name || propKey}</h2>
-        </div>
-        {spec.description && <p>{spec.description}</p>}
-
-        <fieldset>
-          <legend>{spec.name || propKey}</legend>
-          {Object.entries(spec.properties).map(([key, prop]) => (
+        <h2 className="pkt-inputwrapper__label">
+          {spec.name || propKey} <PktTag skin="gray">{propKey}</PktTag>
+        </h2>
+        <fieldset className="pkt-preview__object-editor">
+          {Object.entries(spec.properties).map(([key, childSpec]) => (
             <PktPreviewPropEditor
               key={key}
               propKey={key}
-              props={props[propKey]}
-              spec={prop}
-              handleChange={(key, value) => handleObjectChange(key, value)}
-            ></PktPreviewPropEditor>
+              props={value}
+              spec={childSpec}
+              hideKey={hideKey}
+              handleChange={(childKey, childValue) => {
+                handleChange(propKey, { ...value, [childKey]: childValue })
+              }}
+            />
           ))}
         </fieldset>
       </div>
     )
   }
 
+  // Array of objects
   if (spec.type === editorTypes.ARRAY && spec.items.type === editorTypes.OBJECT) {
-    if (!props[propKey]) {
-      props[propKey] = []
+    const value = Array.isArray(props[propKey]) ? [...props[propKey]] : []
+    const addObjectToArray = () => {
+      handleChange(propKey, [...value, {}])
+    }
+    const removeObjectFromArray = (index: number) => {
+      handleChange(
+        propKey,
+        value.filter((_, i) => i !== index),
+      )
+    }
+    const handleArrayChange = (index: number, childKey: string, childValue: any) => {
+      const newArr = value.map((item, i) => (i === index ? { ...item, [childKey]: childValue } : item))
+      handleChange(propKey, newArr)
     }
     return (
       <div>
-        <div className="pkt-inputwrapper__label">
-          <h2>{spec.name || propKey}</h2>
+        <h2 className="pkt-inputwrapper__label">
+          {spec.name || propKey} {hideKey ? '' : <PktTag skin="gray">{propKey}</PktTag>}
+        </h2>
+        <PktAccordion skin="outlined" compact>
+          {value.map((item: any, index: number) => (
+            <div key={index}>
+              <PktAccordionItem
+                id={`array-item-${index}`}
+                title={`${spec.items.name || propKey || `Item`} ${index + 1}`}
+              >
+                <div className="pkt-preview__array-item">
+                  {Object.entries(spec.items.properties).map(([key, childSpec]) => (
+                    <PktPreviewPropEditor
+                      key={key}
+                      propKey={key}
+                      props={item}
+                      spec={childSpec}
+                      hideKey={hideKey}
+                      handleChange={(childKey, childValue) => handleArrayChange(index, childKey, childValue)}
+                    />
+                  ))}
+                  <div className="pkt-preview__remove-object">
+                    <PktButton
+                      onClick={() => {
+                        confirm('Er du sikker på at du vil fjerne dette elementet?') && removeObjectFromArray(index)
+                      }}
+                      size="small"
+                      skin="tertiary"
+                      variant="icon-only"
+                      iconName="trash-can"
+                    >
+                      Fjern denne
+                    </PktButton>
+                  </div>
+                </div>
+              </PktAccordionItem>
+            </div>
+          ))}
+        </PktAccordion>
+        <div className="pkt-preview__add-object">
+          <PktButton onClick={addObjectToArray} size="small" skin="tertiary" variant="icon-left" iconName="plus-circle">
+            Legg til {spec.items.name || propKey || 'element'}
+          </PktButton>
         </div>
-        {spec.description && <p>{spec.description}</p>}
-        {props[propKey].map((item: any, index: number) => (
-          <div key={index}>
-            <fieldset>
-              <legend>Item {index + 1}</legend>
-              {Object.entries(spec.items.properties).map(([key, prop]) => (
-                <PktPreviewPropEditor
-                  key={key}
-                  propKey={key}
-                  props={item}
-                  spec={prop}
-                  handleChange={(key, value) => handleArrayChange(index, key, value)}
-                ></PktPreviewPropEditor>
-              ))}
-              <PktButton onClick={() => removeObjectFromArray(index)}>Fjern denne</PktButton>
-            </fieldset>
-          </div>
-        ))}
-        <PktButton onClick={addObjectToArray}>Legg til ny</PktButton>
       </div>
     )
   }
 
+  if (spec.type === editorTypes.LONGSTRING) {
+    // Long string input
+    const value = props[propKey] || ''
+    return (
+      <PktTextarea
+        tagText={hideKey ? undefined : propKey}
+        id={propKey}
+        label={spec.name || propKey}
+        value={value}
+        onChange={(e) => {
+          handleChange(propKey, e.currentTarget.value)
+        }}
+        required={spec.required}
+        requiredTag={spec.required}
+      />
+    )
+  }
+
+  // Default: string
+  const value = props[propKey] ?? ''
   return (
     <PktTextinput
-      id={propKey}
       label={spec.name || propKey}
-      helptext={spec.description || null}
-      type="text"
-      value={props[propKey] || ''}
-      onChange={(e) =>
-        handleChange(propKey, spec.type === 'number' ? parseFloat(e.currentTarget.value) : e.currentTarget.value)
-      }
+      tagText={hideKey ? undefined : propKey}
+      id={propKey}
+      required={spec.required}
       requiredTag={spec.required}
+      value={value}
+      onChange={(e) => {
+        handleChange(propKey, e.currentTarget.value)
+      }}
     />
   )
 }

package/src/components/preview/PreviewSpecs.tsx

@@ -7,32 +7,10 @@ import { PktTableBody } from '../table/TableBody'
 import { PktTableRow } from '../table/TableRow'
 import { PktTableHeaderCell } from '../table/TableHeaderCell'
 import { PktTableDataCell } from '../table/TableDataCell'
-
-export interface ISpecObject {
-  name?: string
-  'css-class'?: string
-  'dark-mode'?: boolean
-  isElement?: boolean
-  props?: Record<string, PropObject | string[]>
-  events?: Record<string, PropObject>
-  slots?: Record<string, any>
-  default?: any
-}
-
-type PropObject = {
-  name?: string
-  description?: string
-  type?: string | string[]
-  variant?: string
-  converter?: string
-  reflect?: boolean
-  default?: any
-  previewDefault?: any
-  items?: PropObject
-}
+import { ISpecObject } from './preview-types'
 
 export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) => {
-  const formatType = (type: string | string[]) => {
+  const formatType = (type: string | string[] | number | number[]) => {
     if (Array.isArray(type)) {
       return type.join(' \n')
     }