@oslokommune/punkt-react 13.6.16 → 13.7.0

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>
-  )
-}

package/src/components/preview/PreviewPropEditor.tsx

@@ -1,266 +0,0 @@
-'use client'
-
-import { FC } from 'react'
-import { PktCheckbox } from '../checkbox/Checkbox'
-import { PktDatepicker } from '../datepicker/Datepicker'
-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'
-
-export const PktPreviewPropEditor: FC<IPropEditorProps> = ({ propKey, spec, props, hideKey, handleChange }) => {
-  const editorTypes = {
-    BOOLEAN: 'boolean',
-    ICON: 'icon',
-    ARRAY: 'array',
-    OBJECT: 'object',
-    DATE: 'ISOdatestring',
-    NUMBER: 'number',
-    LONGSTRING: 'longstring',
-    STRING: 'string',
-  }
-
-  // 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 (
-      <PktCheckbox
-        id={propKey}
-        label={spec.name || propKey}
-        tagText={hideKey ? undefined : propKey}
-        requiredTag={spec.required}
-        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}
-        id={propKey}
-        tagText={hideKey ? undefined : propKey}
-        value={value}
-        onChange={(e) => {
-          handleChange(propKey, e.target.value)
-        }}
-        requiredTag={spec.required}
-      >
-        <option value=""></option>
-        {(icons as { id: string }[]).map((icon) => (
-          <option key={icon.id} value={icon.id}>
-            {icon.id}
-          </option>
-        ))}
-      </PktSelect>
-    )
-  }
-
-  // Date
-  if (spec.type === editorTypes.DATE) {
-    const value = props[propKey] || ''
-    return (
-      <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.values] : [...spec.type]
-    const value = props[propKey] || ''
-    return (
-      <PktSelect
-        label={spec.name || propKey}
-        id={propKey}
-        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) => (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        ))}
-      </PktSelect>
-    )
-  }
-
-  // Number
-  if (spec.type === editorTypes.NUMBER) {
-    const value = props[propKey] ?? ''
-    return (
-      <PktTextinput
-        label={spec.name || propKey}
-        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) {
-    const value = props[propKey] ? { ...props[propKey] } : {}
-    return (
-      <div>
-        <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={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) {
-    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>
-        <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>
-      </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
-      label={spec.name || propKey}
-      tagText={hideKey ? undefined : propKey}
-      id={propKey}
-      required={spec.required}
-      requiredTag={spec.required}
-      value={value}
-      onChange={(e) => {
-        handleChange(propKey, e.currentTarget.value)
-      }}
-    />
-  )
-}