@oslokommune/punkt-react 13.6.16 → 13.8.0

package/src/components/preview/PreviewSpecs.tsx

@@ -1,125 +0,0 @@
-'use client'
-
-import React from 'react'
-import { PktTable } from '../table/Table'
-import { PktTableHeader } from '../table/TableHeader'
-import { PktTableBody } from '../table/TableBody'
-import { PktTableRow } from '../table/TableRow'
-import { PktTableHeaderCell } from '../table/TableHeaderCell'
-import { PktTableDataCell } from '../table/TableDataCell'
-import { ISpecObject } from './preview-types'
-
-export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) => {
-  const formatType = (type: string | string[] | number | number[]) => {
-    if (Array.isArray(type)) {
-      return type.join(' \n')
-    }
-    return type
-  }
-
-  const formatValue = (value: any) => {
-    if (typeof value === 'boolean') {
-      return value ? 'true' : 'false'
-    }
-    return value
-  }
-
-  return (
-    <>
-      <h2>Egenskaper</h2>
-      <PktTable compact>
-        <PktTableHeader>
-          <PktTableRow>
-            <PktTableHeaderCell>Prop</PktTableHeaderCell>
-            <PktTableHeaderCell>Navn</PktTableHeaderCell>
-            <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
-            <PktTableHeaderCell>Type</PktTableHeaderCell>
-            <PktTableHeaderCell>Standardverdi</PktTableHeaderCell>
-          </PktTableRow>
-        </PktTableHeader>
-        <PktTableBody>
-          {Object.entries(specs.props || {}).map(([key, value]) => (
-            <PktTableRow key={key}>
-              <PktTableDataCell dataLabel="Prop">
-                <pre>{key}</pre>
-              </PktTableDataCell>
-              <PktTableDataCell dataLabel="Navn">{(!Array.isArray(value) && value.name) || key}</PktTableDataCell>
-              {Array.isArray(value) ? (
-                <>
-                  <PktTableDataCell dataLabel="Beskrivelse"></PktTableDataCell>
-                  <PktTableDataCell dataLabel="Type">
-                    <pre>{value.join('\n')}</pre>
-                  </PktTableDataCell>
-                </>
-              ) : (
-                <>
-                  <PktTableDataCell dataLabel="Beskrivelse">
-                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
-                  </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Type">
-                    <pre>{value.type && formatType(value.type)}</pre>
-                  </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Standardverdi">
-                    <pre>{formatValue(value.default)}</pre>
-                  </PktTableDataCell>
-                </>
-              )}
-            </PktTableRow>
-          ))}
-        </PktTableBody>
-      </PktTable>
-      {specs.events && (
-        <>
-          <h2>Hendelser / handlinger</h2>
-          <PktTable compact>
-            <PktTableHeader>
-              <PktTableRow>
-                <PktTableHeaderCell>Event</PktTableHeaderCell>
-                <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
-                <PktTableHeaderCell>Type</PktTableHeaderCell>
-              </PktTableRow>
-            </PktTableHeader>
-            <PktTableBody>
-              {Object.entries(specs.events || {}).map(([key, value]) => (
-                <PktTableRow key={key}>
-                  <PktTableDataCell dataLabel="Event">
-                    <pre>{key}</pre>
-                  </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Beskrivelse">
-                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
-                  </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Type">{value.type}</PktTableDataCell>
-                </PktTableRow>
-              ))}
-            </PktTableBody>
-          </PktTable>
-        </>
-      )}
-      {specs.slots && (
-        <>
-          <h2>Innhold</h2>
-          <PktTable compact>
-            <PktTableHeader>
-              <PktTableRow>
-                <PktTableHeaderCell>Slot</PktTableHeaderCell>
-                <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
-              </PktTableRow>
-            </PktTableHeader>
-            <PktTableBody>
-              {Object.entries(specs.slots || {}).map(([key, value]) => (
-                <PktTableRow key={key}>
-                  <PktTableDataCell dataLabel="Slot">
-                    <pre>{key}</pre>
-                  </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Beskrivelse">
-                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
-                  </PktTableDataCell>
-                </PktTableRow>
-              ))}
-            </PktTableBody>
-          </PktTable>
-        </>
-      )}
-    </>
-  )
-}

package/src/components/preview/PreviewWithJson.tsx

@@ -1,519 +0,0 @@
-'use client'
-
-import React, { useState, useCallback, useRef, useEffect } from 'react'
-
-import { PktAccordion } from '../accordion/Accordion'
-import { PktAccordionItem } from '../accordion/AccordionItem'
-import { PktAlert } from '../alert/Alert'
-import { PktBackLink } from '../backlink/BackLink'
-import { PktBreadcrumbs } from '../breadcrumbs/Breadcrumbs'
-import { PktButton } from '../button/Button'
-import { PktCard } from '../card/Card'
-import { PktCheckbox } from '../checkbox/Checkbox'
-import { PktCombobox } from '../combobox/Combobox'
-import { PktConsent } from '../consent/Consent'
-import { PktDatepicker } from '../datepicker/Datepicker'
-import { PktFooter } from '../footer/Footer'
-import { PktFooterSimple } from '../footerSimple/FooterSimple'
-import { PktHeader } from '../header/Header'
-import { PktHeading } from '../heading/Heading'
-import { PktHelptext } from '../helptext/Helptext'
-import { PktIcon } from '../icon/Icon'
-import { PktInputWrapper } from '../inputwrapper/InputWrapper'
-import { PktLink } from '../link/Link'
-import { PktLinkCard } from '../linkcard/LinkCard'
-import { PktLoader } from '../loader/Loader'
-import { PktMessagebox } from '../messagebox/Messagebox'
-import { PktModal } from '../modal/Modal'
-import { PktProgressbar } from '../progressbar/Progressbar'
-import { PktRadioButton } from '../radio/RadioButton'
-import { PktSearchInput } from '../searchinput/SearchInput'
-import { PktSelect } from '../select/Select'
-import { PktStep } from '../stepper/Step'
-import { PktStepper } from '../stepper/Stepper'
-import { PktTable } from '../table/Table'
-import { PktTableBody } from '../table/TableBody'
-import { PktTableDataCell } from '../table/TableDataCell'
-import { PktTableHeader } from '../table/TableHeader'
-import { PktTableHeaderCell } from '../table/TableHeaderCell'
-import { PktTableRow } from '../table/TableRow'
-import { PktTabs } from '../tabs/Tabs'
-import { PktTag } from '../tag/Tag'
-import { PktTextarea } from '../textarea/Textarea'
-import { PktTextinput } from '../textinput/Textinput'
-
-import type { ISpecObject, TPropObject } from './preview-types'
-import {
-  attachSpecStrings,
-  getAllowedChildren,
-  getSpecKeyForNode,
-  normalizeChildren,
-  updateTree,
-} from './preview-utils'
-import { PktPreviewPropEditor } from './PreviewPropEditor'
-import { PktPreviewCode } from './PreviewCode'
-
-const componentMap: Record<string, React.ElementType> = {
-  PktAccordion,
-  PktAccordionItem,
-  PktAlert,
-  PktBackLink,
-  PktBreadcrumbs,
-  PktButton,
-  PktCard,
-  PktCheckbox,
-  PktCombobox,
-  PktConsent,
-  PktDatepicker,
-  PktFooter,
-  PktFooterSimple,
-  PktHeader,
-  PktHeading,
-  PktHelptext,
-  PktIcon,
-  PktInputWrapper,
-  PktLink,
-  PktLinkCard,
-  PktLoader,
-  PktMessagebox,
-  PktModal,
-  PktProgressbar,
-  PktRadioButton,
-  PktSearchInput,
-  PktSelect,
-  PktStep,
-  PktStepper,
-  PktTable,
-  PktTableBody,
-  PktTableDataCell,
-  PktTableHeader,
-  PktTableHeaderCell,
-  PktTableRow,
-  PktTabs,
-  PktTag,
-  PktTextarea,
-  PktTextinput,
-}
-
-interface PreviewProps {
-  specs: Record<string, ISpecObject>
-  previewJson: any
-  fullWidth?: boolean
-}
-
-const CATEGORIES = {
-  contents: 'Innhold',
-  ui: 'Utseende',
-  functionality: 'Funksjonalitet',
-  accessibility: 'Tilgjengelighet',
-  tech: 'Teknisk',
-  other: 'Innstillinger',
-}
-
-function renderFromSpec(node: any, key: string | null = null, renderStringWithSpan: boolean = true): React.ReactNode {
-  if (typeof node === 'string') return node
-  if (node?.type === 'text') {
-    // Render the text node's children as plain text or HTML
-    return renderStringWithSpan ? (
-      <span dangerouslySetInnerHTML={{ __html: node.children ?? '' }} key={key} />
-    ) : (
-      node.children
-    )
-  }
-  const { type, props = {}, children } = node
-  const Comp = componentMap[type] || type
-  if (!Comp) {
-    return null // Component not found
-  }
-
-  let renderedChildren: React.ReactNode = null
-  if (Array.isArray(children)) {
-    renderedChildren = children.map((child, i) => renderFromSpec(child, child.props?.id || i, type !== 'option'))
-  } else if (children) {
-    renderedChildren = renderFromSpec(children, children.props?.id || 0, type !== 'option')
-  }
-  return (
-    <Comp
-      key={key}
-      {...Object.fromEntries(
-        Object.entries(props).map(([k, v]) =>
-          typeof v === 'object' && v !== null && 'displayAsFalse' in v && 'value' in v
-            ? [k, (v as { value: any }).value]
-            : [k, v],
-        ),
-      )}
-    >
-      {typeof renderedChildren === 'string' && renderStringWithSpan ? (
-        <span dangerouslySetInnerHTML={{ __html: renderedChildren }} />
-      ) : (
-        renderedChildren
-      )}
-    </Comp>
-  )
-}
-
-// Recursive prop editor
-const RecursivePropEditor = React.memo(function RecursivePropEditor({
-  node,
-  path = [],
-  previewSpec,
-  specs,
-  onChange,
-  onAddChild,
-  onRemoveChild,
-}: {
-  node: any
-  previewSpec: any
-  path?: (string | number)[]
-  specs: Record<string, ISpecObject>
-  onChange: (path: (string | number)[], newNode: any) => void
-  onAddChild: (path: (string | number)[], newChild: any) => void
-  onRemoveChild: (path: (string | number)[], index: number) => void
-}) {
-  if (!node || typeof node !== 'object' || !node.type) {
-    console.warn('RecursivePropEditor: node is not a valid preview node', { node, path, previewSpec })
-    return null
-  }
-  if (node?.type === 'text') {
-    return (
-      <PktPreviewPropEditor
-        propKey="text"
-        props={{ text: typeof node === 'string' ? node : node.children || '' }}
-        spec={{ type: 'longstring', label: 'Tekst' }}
-        handleChange={(_, v) => {
-          onChange([...path, 'children'], v)
-        }}
-      />
-    )
-  }
-  const allowedChildren = Array.isArray(previewSpec.children) ? previewSpec.children : []
-  const { props = {}, children: rawChildren = [], type } = node
-  const children = normalizeChildren(rawChildren)
-  const specKey = node.spec || getSpecKeyForNode(node, previewSpec)
-  const spec = specs[specKey as string]
-  if (!spec) {
-    console.warn(`No spec found for type "${type}" with key "${specKey}"`, { node, props, specs, previewSpec })
-    return null // No spec found for this type
-  }
-  const propKeys = spec.props ? Object.keys(spec.props) : Object.keys(props)
-  if (propKeys.length === 0 && children.length === 0) {
-    console.warn(`No props or children defined for type "${type}" with spec key "${specKey}"`)
-    return null // No props or children to edit
-  }
-  function applyDefaults(defaults: any, n: number) {
-    const result: any = {}
-    for (const key in defaults) {
-      const val = defaults[key]
-      if (typeof val === 'string') {
-        result[key] = val.replace(/\$n/g, String(n + 1))
-      } else {
-        result[key] = val
-      }
-    }
-    return result
-  }
-
-  // Group prop keys by category
-  const categoryOrder = Object.keys(CATEGORIES)
-  const groupedProps: Record<string, string[]> = {}
-
-  propKeys.forEach((key) => {
-    const cat = (spec.props?.[key] as TPropObject)?.category || 'other'
-    if (!groupedProps[cat]) groupedProps[cat] = []
-    groupedProps[cat].push(key)
-  })
-
-  // Sort categories by CATEGORIES order
-  let sortedCategories = categoryOrder
-    .filter((cat) => groupedProps[cat]?.length)
-    .concat(Object.keys(groupedProps).filter((cat) => !categoryOrder.includes(cat)))
-
-  // Find allowed text child definition (if any)
-  const allowedTextChild = allowedChildren.find((c: any) => c.type === 'text')
-  // Find existing text child (if any)
-  const textChildIndex = children.findIndex((c) => c.type === 'text')
-  const textChild = textChildIndex !== -1 ? children[textChildIndex] : null
-
-  // Ensure 'contents' is present if there's a textChild
-  if (textChild && !sortedCategories.includes('contents')) {
-    sortedCategories = ['contents', ...sortedCategories]
-    if (!groupedProps['contents']) groupedProps['contents'] = []
-  }
-
-  return (
-    <>
-      <PktHeading level={2} size="xsmall">
-        {type}
-      </PktHeading>
-      <PktAccordion compact skin="outlined">
-        {sortedCategories.map((cat, index) => (
-          <PktAccordionItem
-            key={cat}
-            title={CATEGORIES[cat as keyof typeof CATEGORIES] || cat}
-            id={`cat-${cat}`}
-            isOpen={index === 0}
-          >
-            <div className="pkt-preview__options">
-              {groupedProps[cat].map((key) => {
-                const propSpec = (spec.props?.[key] || {}) as TPropObject
-                // Check for showIf condition
-                if (propSpec.showIf) {
-                  // All conditions in showIf must be met
-                  const shouldShow = Object.entries(propSpec.showIf).every(([depKey, depValue]) => {
-                    if (Array.isArray(depValue)) {
-                      return depValue.includes(props[depKey])
-                    }
-                    return props[depKey] === depValue
-                  })
-                  if (!shouldShow) return null
-                }
-                return (
-                  <PktPreviewPropEditor
-                    key={key}
-                    propKey={key}
-                    props={props}
-                    spec={propSpec}
-                    handleChange={(k, v) => {
-                      const valueToStore =
-                        propSpec.displayAsFalse && typeof v === 'boolean' ? { value: v, displayAsFalse: true } : v
-                      onChange([...path, 'props', key], valueToStore)
-                    }}
-                  />
-                )
-              })}
-              {/* If this is the contents category, and text child is allowed, render its editor here */}
-              {cat === 'contents' && allowedTextChild && textChild && (
-                <PktPreviewPropEditor
-                  propKey="text"
-                  props={{ text: typeof textChild === 'string' ? textChild : textChild.children || '' }}
-                  spec={{ type: 'longstring', name: allowedTextChild.name || 'Tekst' }}
-                  handleChange={(_, v) => {
-                    onChange([...path, 'children', textChildIndex, 'children'], v)
-                  }}
-                />
-              )}
-            </div>
-          </PktAccordionItem>
-        ))}
-      </PktAccordion>
-      {Array.isArray(children) && children.length > 0 && (
-        <>
-          {children.some((child) => child.type !== 'text') && <h2 className="pkt-inputwrapper__label">Innhold</h2>}
-          <PktAccordion compact skin="outlined">
-            {children.map((child, i) => {
-              const allowedChildren = getAllowedChildren(previewSpec)
-              const childPreviewSpec = allowedChildren.find((c) => c.type === child.type) || previewSpec
-              // text child as string
-              if (child.type === 'text') {
-                return
-              }
-
-              // non-text children
-              return (
-                <PktAccordionItem
-                  key={child.props?.id || `child-${i}`}
-                  title={`${child.props?.id || `${i}`} (${child.type})`}
-                  id={`child-${i}`}
-                >
-                  <div className="pkt-preview__object-editor">
-                    <RecursivePropEditor
-                      node={child}
-                      path={[...path, 'children', i]}
-                      previewSpec={childPreviewSpec}
-                      specs={specs}
-                      onChange={onChange}
-                      onAddChild={onAddChild}
-                      onRemoveChild={onRemoveChild}
-                    />
-                    <div className="pkt-preview__remove-object">
-                      <PktButton
-                        onClick={() => {
-                          confirm(`Er du sikker på at du vil fjerne ${child.type} ${child.props?.id || `#${i + 1}`}`) &&
-                            onRemoveChild([...path, 'children'], i)
-                        }}
-                        style={{ marginTop: 8 }}
-                        iconName="trash-can"
-                        skin="tertiary"
-                        size="small"
-                        variant="icon-only"
-                      >
-                        Fjern {child.type}
-                      </PktButton>
-                    </div>
-                  </div>
-                </PktAccordionItem>
-              )
-            })}
-          </PktAccordion>
-        </>
-      )}
-      {allowedChildren.length > 0 &&
-        allowedChildren
-          .filter((childDef: any) => childDef.type !== 'text')
-          .map((childDef: any, i: number) => (
-            <PktButton
-              key={childDef.type}
-              skin="primary"
-              size="small"
-              variant="icon-left"
-              iconName="plus-circle-fill"
-              style={{ width: '100%', marginTop: 8 }}
-              onClick={() => {
-                const n = Array.isArray(children) ? children.length : 0
-                const newChild = {
-                  type: childDef.type,
-                  props: applyDefaults(childDef.defaults || {}, n),
-                  children: childDef.slot || '',
-                  id: `child-${Date.now()}`,
-                }
-                onAddChild(path, newChild)
-              }}
-            >
-              Legg til {childDef.name || childDef.type}
-            </PktButton>
-          ))}
-    </>
-  )
-})
-
-export const PktPreviewWithJson: React.FC<PreviewProps> = ({ specs, previewJson, fullWidth }) => {
-  const [tree, setTree] = useState(attachSpecStrings(previewJson.preview, previewJson))
-  const [mode, setMode] = useState<'light' | 'dark'>('light')
-  const [previewHtml, setPreviewHtml] = useState('')
-  const [previewKey, setPreviewKey] = useState(0)
-  const panelRef = useRef<HTMLDialogElement>(null)
-  const previewComponent = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    setPreviewHtml(previewComponent.current?.innerHTML ?? '')
-    if (previewJson.rerender) {
-      setPreviewKey((k) => k + 1)
-    }
-  }, [tree])
-
-  const handleEditorChange = useCallback(
-    (path: (string | number)[], value: any) => {
-      setTree(attachSpecStrings(JSON.parse(JSON.stringify(updateTree(tree, path, value))), previewJson))
-    },
-    [tree],
-  )
-
-  // Add a child to a node at a given path
-  const handleAddChild = useCallback((path: (string | number)[], newChild: any) => {
-    setTree((prevTree: any) => {
-      const parent = path.length === 0 ? prevTree : path.reduce((acc, key) => acc[key], prevTree)
-      const updatedChildren = Array.isArray(parent.children) ? [...parent.children, newChild] : [newChild]
-      return attachSpecStrings(
-        JSON.parse(JSON.stringify(updateTree(prevTree, [...path, 'children'], updatedChildren))),
-        previewJson,
-      )
-    })
-  }, [])
-
-  // Remove a child at a given path (path points to the children array, index is the child to remove)
-  const handleRemoveChild = useCallback((path: (string | number)[], index: number) => {
-    setTree((prevTree: any) => {
-      const parent = path.length === 0 ? prevTree : path.reduce((acc, key) => acc[key], prevTree)
-      if (!Array.isArray(parent)) return prevTree
-      const updatedChildren = parent.filter((_: any, i: number) => i !== index)
-      return attachSpecStrings(
-        JSON.parse(JSON.stringify(updateTree(prevTree, [...path], updatedChildren))),
-        previewJson,
-      )
-    })
-  }, [])
-
-  return (
-    <div className="pkt-preview">
-      <div className="pkt-preview__component-container">
-        <div
-          className={`pkt-preview__component ${fullWidth ? 'pkt-preview__component--fullwidth' : ''}`}
-          data-mode={mode}
-        >
-          <div key={previewJson.rerender ? previewKey : undefined} ref={previewComponent}>
-            {renderFromSpec(tree)}
-          </div>
-        </div>
-        <div className="pkt-preview__panel" style={{ minWidth: 320, maxWidth: 400 }}>
-          <div className="pkt-preview__panel__options">
-            {previewJson.previewProps.map((key: string) => (
-              <PktPreviewPropEditor
-                key={key}
-                propKey={key}
-                hideKey
-                props={tree.props}
-                spec={specs[previewJson.spec]?.props?.[key] || {}}
-                handleChange={(k, v) => {
-                  // If displayAsFalse is set in the spec, always store as object
-                  const spec = specs[previewJson.spec]?.props?.[key] || {}
-                  const valueToStore =
-                    (spec as TPropObject).displayAsFalse && typeof v === 'boolean'
-                      ? { value: v, displayAsFalse: true }
-                      : v
-                  setTree(
-                    attachSpecStrings(
-                      JSON.parse(JSON.stringify(updateTree(tree, ['props', key], valueToStore))),
-                      previewJson,
-                    ),
-                  )
-                }}
-              />
-            ))}
-            {specs[previewJson.spec]['dark-mode'] && (
-              <div className="pkt-preview__mode">
-                <PktCheckbox
-                  id="mode"
-                  label="Mørk modus"
-                  type="checkbox"
-                  checked={mode === 'dark'}
-                  onChange={(e) => setMode(e.target.checked ? 'dark' : 'light')}
-                  labelPosition="right"
-                  isSwitch
-                />
-              </div>
-            )}
-          </div>
-          <div className="pkt-preview__panel__button">
-            <PktButton
-              skin="secondary"
-              variant="icon-right"
-              iconName="crane"
-              className="pkt-preview__open-panel"
-              onClick={() => {
-                panelRef.current && panelRef.current.showModal()
-              }}
-            >
-              Åpne kodebygger
-            </PktButton>
-            <PktModal
-              variant="drawer"
-              drawerPosition="right"
-              size="small"
-              ref={panelRef}
-              transparentBackdrop
-              closeOnBackdropClick
-            >
-              <div className="pkt-preview__options">
-                <PktHeading level={1} size="medium">
-                  Kodebygger
-                </PktHeading>
-
-                <RecursivePropEditor
-                  node={tree}
-                  previewSpec={previewJson}
-                  specs={specs}
-                  onChange={handleEditorChange}
-                  onAddChild={handleAddChild}
-                  onRemoveChild={handleRemoveChild}
-                />
-              </div>
-            </PktModal>
-          </div>
-        </div>
-      </div>
-      <PktPreviewCode tree={tree} specs={specs} html={previewHtml} />
-    </div>
-  )
-}
-
-PktPreviewWithJson.displayName = 'PktPreviewWithJson'

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

@@ -1,42 +0,0 @@
-export interface ISpecObject {
-  name?: string
-  'css-class'?: string
-  'dark-mode'?: boolean
-  isElement?: boolean
-  props?: Record<string, TPropObject | string[] | number[]>
-  events?: Record<string, TPropObject>
-  slots?: Record<string, any>
-  default?: any
-}
-
-export interface IPropEditorProps {
-  propKey: string
-  spec: any
-  props: any
-  hideKey?: boolean
-  handleChange: (key: string, value: any, displayAsFalse?: boolean) => void
-}
-
-export type TPropObject = {
-  name?: string
-  description?: string
-  type?: string | string[] | number | number[]
-  variant?: string
-  converter?: string
-  reflect?: boolean
-  default?: any
-  previewDefault?: any
-  items?: TPropObject
-  displayAsFalse?: boolean
-  category?: string
-  showIf?: Record<string, any>
-}
-
-export type TPreviewTreeNode = {
-  type: string
-  spec?: string
-  props?: Record<string, any>
-  children?: any
-}
-
-export type TSpecs = Record<string, ISpecObject>