@oslokommune/punkt-react 13.6.15 → 13.7.0

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import React from 'react'
+import { FC } from 'react'
+import type { HTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
 
-export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
+export interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement> {
   links?: Array<{
     href: string
     text: string
@@ -25,7 +26,7 @@ export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   onToggleConsent?: (e: CustomEvent) => void
 }
 
-export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
+export const PktFooterSimple: FC<IPktFooterSimple> = ({
   links = [],
   openLinksInNewTab = false,
   personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',

package/src/components/icon/Icon.test.tsx

@@ -1,7 +1,6 @@
 import '@testing-library/jest-dom'
 
 import { render, screen, waitFor } from '../../utils/test-utils'
-import React from 'react'
 
 import { PktIcon } from './Icon'
 
@@ -11,26 +10,14 @@ declare global {
     pktIconPath: string
   }
 }
-window.pktFetch = (file = 'filnavn.svg') =>
-  Promise.resolve({
-    ok: true,
-    text: () => Promise.resolve(`<svg role="img" data-testid="icon" data-filename=${file}>Her er SVGen</svg>`),
-  })
-window.pktIconPath = 'sti'
 
 describe('PktIcon', () => {
-  const localStorageMock = (() => {
-    const store: { [key: string]: string } = {}
-    return {
-      getItem: function (key: string) {
-        return store[key] || null
-      },
-      setItem: function (key: string, value: string) {
-        store[key] = value.toString()
-      },
-    }
-  })()
-  Object.defineProperty(global, 'localStorage', { value: localStorageMock })
+  window.pktFetch = (file = 'filnavn.svg') =>
+    Promise.resolve({
+      ok: true,
+      text: () => Promise.resolve(`<svg role="img" data-testid="icon" data-filename=${file}>Her er SVGen</svg>`),
+    })
+  window.pktIconPath = 'sti'
 
   describe('with default fetcher', () => {
     test('fetches SVG with default fetcher', async () => {

package/src/components/index.ts

@@ -22,8 +22,6 @@ export { PktLinkCard } from './linkcard/LinkCard'
 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'

package/src/components/input/Input.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import React, { ForwardedRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** The input's label */
   label?: string
   /** The input's id */
@@ -21,7 +22,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  * <Input label="First name" id="firstName" validationMessage="First name is required" />
  *
  */
-export const PktInput = React.forwardRef(
+export const PktInput = forwardRef(
   ({ label, id, children, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): React.ReactElement => {
     return (
       <div className="pkt-form-group">

package/src/components/radio/RadioButton.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   id: string
   name: string
   label: string

package/src/components/searchinput/SearchInput.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
+import { ChangeEvent, forwardRef, HTMLProps, ReactNode, createElement } from 'react'
 
 import { PktButton } from '../button/Button'
 
@@ -33,7 +33,7 @@ interface ISearchForm extends ISearch {
 }
 
 interface ISearchInput extends ISearch {
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
   disabled?: boolean
 }
 
@@ -145,7 +145,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
           <ul id={`${id}-suggestions`} className="pkt-searchinput__suggestions" aria-live="assertive">
             {suggestions.map((suggestion, index) => (
               <li key={`search-suggestion-${index}`}>
-                {React.createElement(
+                {createElement(
                   suggestion.href ? 'a' : suggestion.onClick ? 'button' : 'div',
                   {
                     href: suggestion.href,

package/src/components/stepper/Stepper.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { ReactElement, Ref, forwardRef } from 'react'
+import { ReactElement, Ref, forwardRef, Children, isValidElement, cloneElement } from 'react'
+import type { HTMLAttributes } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'
-import React from 'react'
 
-export interface IPktStepper extends React.HTMLAttributes<HTMLOListElement> {
+export interface IPktStepper extends HTMLAttributes<HTMLOListElement> {
   /**
    * The index of the current active step
    */
@@ -55,9 +55,9 @@ export const PktStepper = forwardRef(
       orientation === 'horizontal' ? 'pkt-stepper--horizontal' : 'pkt-stepper--vertical',
     )
 
-    const childrenWithProps = React.Children.map(children, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
+    const childrenWithProps = Children.map(children, (child, index) => {
+      if (isValidElement(child)) {
+        return cloneElement(child, {
           className: classNames(child.props.className, {
             'pkt-step--hideStep': hideNonActiveSteps && index !== activeStep,
             'pkt-step--hideContent': hideNonActiveStepsContent && index !== activeStep,

package/src/components/table/Table.tsx

@@ -2,10 +2,11 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
 export type TTableSkin = 'basic' | 'zebra-blue'
 
-interface ITableProps extends React.HTMLAttributes<HTMLTableElement> {
+interface ITableProps extends HTMLAttributes<HTMLTableElement> {
   compact?: boolean
   skin?: 'basic' | 'zebra-blue'
   responsiveView?: boolean

package/src/components/table/TableBody.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+interface ITableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableData.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface TableDataProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface TableDataProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children: React.ReactNode | React.ReactNode[]
 }

package/src/components/table/TableDataCell.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableDataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface ITableDataCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children?: React.ReactNode
   dataLabel?: string

package/src/components/table/TableHeader.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+interface ITableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableHeaderCell.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface ITableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableRow.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/tag/Tag.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import * as React from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktTag as PktElTag } from '@oslokommune/punkt-elements'
 import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'

package/src/components/preview/Preview.tsx

@@ -1,274 +0,0 @@
-'use client'
-
-import React, { cloneElement, isValidElement, ReactNode, useRef, useState } from 'react'
-import reactElementToJSXString from 'react-element-to-jsx-string'
-import * as prettier from 'prettier/standalone'
-import * as parserHtml from 'prettier/parser-html'
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
-import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
-import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { PktButton } from '../button/Button'
-import { PktCheckbox } from '../checkbox/Checkbox'
-import { PktTabs } from '../tabs/Tabs'
-import { PktTag } from '../tag/Tag'
-import { PktTextinput } from '../textinput/Textinput'
-import { PktPreviewSpecs } from './PreviewSpecs'
-import type { ISpecObject } from './preview-types'
-import { PktPreviewPropEditor } from './PreviewPropEditor'
-
-SyntaxHighlighter.registerLanguage('jsx', jsx)
-
-interface PreviewProps {
-  children?: ReactNode
-  specs: ISpecObject
-  fullWidth?: boolean
-}
-
-export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth }) => {
-  const initialProps =
-    specs.props && typeof specs.props === 'object' && !Array.isArray(specs.props)
-      ? Object.entries(specs.props).reduce<Record<string, any>>((acc, [key, value]) => {
-          if (
-            typeof value === 'object' &&
-            !Array.isArray(value) &&
-            value.previewDefault !== undefined &&
-            value.previewDefault !== null
-          ) {
-            if (value.previewDefault === 'false') {
-              value.previewDefault = false
-            }
-            if (value.previewDefault === 'true') {
-              value.previewDefault = true
-            }
-            acc[key] = value.previewDefault
-          } else if (
-            typeof value === 'object' &&
-            !Array.isArray(value) &&
-            value.default !== undefined &&
-            value.default !== null
-          ) {
-            if (value.default === 'false') {
-              value.default = false
-            }
-            if (value.default === 'true') {
-              value.default = true
-            }
-            acc[key] = value.default
-          }
-          return acc
-        }, {})
-      : {}
-  const [iteratedKey, setIteratedKey] = useState(0)
-  const [props, setProps] = useState(initialProps)
-  const [mode, setMode] = useState<'light' | 'dark'>('light')
-  const [htmlContent, setHtmlContent] = useState('')
-  const [jsxContent, setJsxContent] = useState('')
-  const [copied, setCopied] = useState('')
-  const [slotContent, setSlotContent] = useState('Innhold')
-
-  const [tabs, setTabs] = useState([
-    {
-      text: 'Rediger',
-      icon: 'adjust',
-      active: true,
-    },
-    {
-      text: 'Kode (React)',
-      icon: 'react',
-      active: false,
-    },
-    {
-      text: `Kode (${specs.isElement ? 'Element' : 'HTML'})`,
-      icon: 'code',
-      active: false,
-    },
-    {
-      text: 'Egenskaper',
-      icon: 'list',
-      active: false,
-    },
-  ])
-
-  const changeContent = (id: number) => {
-    if (id === 1) {
-      fetchJsx()
-    }
-    if (id === 2) {
-      fetchHtml()
-    }
-    setCopied('')
-    setTabs((prevTabs) =>
-      prevTabs.map((tab, index) => ({
-        ...tab,
-        active: index === id,
-      })),
-    )
-  }
-
-  const previewComponent = useRef<any>(null)
-
-  const fetchHtml = async () => {
-    if (specs.isElement && isValidElement(component)) {
-      const componentType = isValidElement(component)
-        ? (component.type as any).displayName || (component.type as any).name
-        : specs.name
-
-      const attributes = Object.entries(props)
-        .map(([key, value]) => {
-          if (value && !isEmptyArray(value) && !isEmptyObject(value)) {
-            return typeof value === 'object' ? `${key}='${JSON.stringify(value)}'` : `${key}="${value}"`
-          }
-        })
-        .join(' ')
-
-      const customElement = await prettier.format(
-        `<${specs.name || componentType} ${attributes}>${slotContent}</${specs.name || componentType}>`,
-        {
-          parser: 'html',
-          plugins: [parserHtml as any],
-        },
-      )
-
-      setHtmlContent(
-        '<!-- Denne koden bør testes grundig før bruk. Spør en Punkt-utvikler om du er usikker. -->\n' + customElement,
-      )
-    } else {
-      const html = await prettier.format(previewComponent.current.innerHTML, {
-        parser: 'html',
-        plugins: [parserHtml as any],
-      })
-      setHtmlContent(html.replace(/<\!--.*?-->/g, ''))
-    }
-  }
-
-  const fetchJsx = async () => {
-    const jsx = await reactElementToJSXString(component)
-    setJsxContent(jsx)
-    return Promise.resolve()
-  }
-
-  const copyToClipboard = (type: string, content: string) => {
-    navigator.clipboard.writeText(content).then(() => {
-      setCopied(type)
-      console.log('Copied to clipboard', type)
-    })
-  }
-
-  const isEmptyArray = (arr: any) => Array.isArray(arr) && arr.length === 0
-  const isEmptyObject = (obj: any) => obj && typeof obj === 'object' && !Object.keys(obj).length
-
-  const CopyButton = (type: string, content: string) => (
-    <div className="pkt-preview__copy">
-      {copied === type && <span className="pkt-preview__copied">Kode kopiert til utklippstavle</span>}
-      <PktButton
-        skin="tertiary"
-        variant="icon-only"
-        size="small"
-        iconName="copy"
-        onClick={() => copyToClipboard(type, content)}
-      >
-        Kopier kode
-      </PktButton>
-    </div>
-  )
-
-  const component =
-    isValidElement(children) &&
-    cloneElement(
-      children,
-      { ...props },
-      children.props.children ? children.props.children : specs.slots?.default ? slotContent : null,
-    )
-
-  const handleChange = (key: string, value: any, displayAsFalse: boolean = false) => {
-    setIteratedKey(iteratedKey + 1)
-    if (!displayAsFalse && (!value || value == 'false')) {
-      const { [key]: _, ...rest } = props
-      setProps(rest)
-    } else {
-      setProps((prevProps) => ({
-        ...prevProps,
-        [key]: value,
-      }))
-    }
-  }
-
-  return (
-    <div className="pkt-preview">
-      <div className="pkt-preview__component-container" data-mode={mode}>
-        {specs['dark-mode'] && (
-          <div className="pkt-preview__mode">
-            <PktCheckbox
-              id="mode"
-              label="Dark mode"
-              type="checkbox"
-              checked={mode === 'dark'}
-              onChange={(e) => setMode(e.target.checked ? 'dark' : 'light')}
-              labelPosition="right"
-              isSwitch
-            />
-          </div>
-        )}
-        <div
-          className={`pkt-preview__component ${fullWidth && 'pkt-preview__component--fullwidth'}`}
-          ref={previewComponent}
-          key={iteratedKey}
-        >
-          <div>{component}</div>
-        </div>
-      </div>
-      <PktTabs tabs={tabs} onTabSelected={changeContent}></PktTabs>
-      <div className={`pkt-grid pkt-preview__opts ${tabs[0].active ? '' : 'pkt-hide'}`}>
-        {specs.slots?.default && !(children as React.ReactElement).props.children && (
-          <div className="pkt-cell pkt-cell--span12 pkt-cell--span6-phablet-up">
-            <PktTag size="small" skin="blue-light" textStyle="thin-text">
-              children
-            </PktTag>
-            <PktTextinput
-              id="slot"
-              label="Slot"
-              helptext={specs.slots.default.description || 'Innholdet i slot'}
-              type="text"
-              value={slotContent}
-              onChange={(e) => setSlotContent(e.currentTarget.value)}
-            />
-          </div>
-        )}
-        {specs.props && typeof specs.props === 'object' && !Array.isArray(specs.props) ? (
-          Object.entries(specs.props).map(([key, prop]) => (
-            <div className="pkt-cell pkt-cell--span12 pkt-cell--span6-phablet-up" key={key}>
-              <PktTag size="small" skin="blue-light" textStyle="thin-text">
-                {key}
-              </PktTag>
-              <PktPreviewPropEditor
-                propKey={key}
-                props={props}
-                spec={prop}
-                handleChange={handleChange}
-              ></PktPreviewPropEditor>
-            </div>
-          ))
-        ) : (
-          <p>OBS! Specs mangler props!</p>
-        )}
-      </div>
-      <div className={`pkt-preview__code ${tabs[1].active ? '' : 'pkt-hide'}`}>
-        <SyntaxHighlighter language="jsx" style={prism}>
-          {jsxContent}
-        </SyntaxHighlighter>
-        {CopyButton('jsx', jsxContent)}
-      </div>
-      <div className={`pkt-preview__code ${tabs[2].active ? '' : 'pkt-hide'}`}>
-        <SyntaxHighlighter language="html" style={prism}>
-          {htmlContent}
-        </SyntaxHighlighter>
-        {CopyButton('html', htmlContent)}
-      </div>
-      <div className={`pkt-preview__specs ${tabs[3].active ? '' : 'pkt-hide'}`}>
-        <PktPreviewSpecs specs={specs}></PktPreviewSpecs>
-      </div>
-    </div>
-  )
-}
-
-PktPreview.displayName = 'PktPreview'

package/src/components/preview/PreviewCode.tsx

@@ -1,118 +0,0 @@
-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>
-  )
-}