@oslokommune/punkt-react 13.6.15 → 13.7.0

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

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