@oslokommune/punkt-react 12.1.0 → 12.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.1.0",
+  "version": "12.3.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -32,15 +32,19 @@
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
+    "@lit-labs/ssr-dom-shim": "^1.2.1",
+    "@lit/react": "^1.0.5",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
+    "react-hook-form": "^7.53.0",
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.1.0",
-    "@oslokommune/punkt-css": "^12.1.0",
+    "@oslokommune/punkt-css": "^12.3.0",
+    "@oslokommune/punkt-elements": "^12.3.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -98,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "540906f27796c832d177f5f2bedd1bbe4bced7c4"
+  "gitHead": "464d3d6b9981108d7a53912cb58e14fc73c9be10"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ReactNode, Ref, forwardRef } from 'react'
 
 export interface IPktAccordion {

package/src/components/accordion/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { LegacyRef, forwardRef, useState } from 'react'
 import PktIcon from '../icon/Icon'
 import classNames from 'classnames'

package/src/components/alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef, useState } from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/backlink/BackLink.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 

package/src/components/button/Button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/card/Card.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import React, { FC, ReactElement, forwardRef, ReactNode, ForwardedRef } from 'react'
+import { createComponent } from '@lit/react'
+import { PktCard as PktElCard } from '@oslokommune/punkt-elements'
+import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import { IPktTag } from '../tag/Tag'
+
+interface IPktCard extends PktElType {
+  direction?: 'portrait' | 'landscape'
+  skin?: 'outlined' | 'gray' | 'beige' | 'green' | 'blue'
+  heading?: string
+  subheading?: string
+  tags?: (Omit<IPktTag, 'closeTag'> & { text: string })[]
+  image?: { src: string; alt: string }
+  children?: ReactNode | ReactNode[]
+}
+
+const LitComponent: FC<IPktCard> = createComponent({
+  tagName: 'pkt-card',
+  elementClass: PktElCard as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktCard',
+  events: {},
+})
+
+export const PktCard: FC<IPktCard> = forwardRef(
+  ({ children, ...props }: IPktCard, ref: ForwardedRef<HTMLElement>): ReactElement => {
+    return (
+      <LitComponent {...props} ref={ref}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
+    )
+  },
+)
+
+PktCard.displayName = 'PktCard'

package/src/components/checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 
 export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/childrenWrapper/childrenWrapper.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface childrenWrapperProps {
+  wrapperType?: 'div' | 'span'; 
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export function childrenWrapper<P>(
+  Component: React.ComponentType<P>, 
+  defaultWrapper: 'div' | 'span' = 'div'
+): React.FC<P & childrenWrapperProps> { return ({ wrapperType = defaultWrapper, children, ...props }) => {
+    const Tag = wrapperType;
+
+    return (
+      <Component {...(props as P)}>
+        <Tag className="pkt-contents">{children}</Tag>
+      </Component>
+    );
+  };
+}

package/src/components/datepicker/Datepicker.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { FC } from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktDatepicker as PktEl } from '@oslokommune/punkt-elements'
+import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+
+interface IPktDatepicker extends PktElType {
+  value?: string | string[]
+  label?: string
+  id?: string
+  dateformat?: string
+  multiple?: boolean
+  maxlength?: number
+  disabled?: boolean
+  range?: boolean
+  weeknumbers?: boolean
+  withcontrols?: boolean
+  fullWidth?: boolean
+  min?: string | number | undefined
+  max?: string | number | undefined
+  excludedates?: string[]
+  excludeweekdays?: string[]
+  currentmonth?: string
+  calendarOpen?: boolean
+  required?: boolean
+  requiredTag?: boolean
+  requiredText?: string
+  optionalTag?: boolean
+  optionalText?: string
+  helptext?: string
+  helptextDropdown?: string
+  helptextDropdownButton?: string
+  hasError?: boolean
+  errorMessage?: string
+  strings?: any
+  onChange?: (e: Event) => void
+  onValueChange?: (e: CustomEvent) => void
+  onToggleHelpText?: (e: CustomEvent) => void
+}
+
+export const PktDatepicker: FC<IPktDatepicker> = createComponent({
+  tagName: 'pkt-datepicker',
+  elementClass: PktEl as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktDatepicker',
+  events: {
+    onChange: 'change' as EventName<Event>,
+    onValueChange: 'value-change' as EventName<CustomEvent>,
+    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
+  },
+})

package/src/components/footer/Footer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 
 import { PktIcon } from '../icon/Icon'

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,8 +1,9 @@
+'use client'
+
 import React from 'react';
 
 import { PktIcon } from '../icon/Icon';
 
-
 export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   links?: Array<{
     href: string;

package/src/components/header/Header.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import React, { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 
@@ -90,11 +92,15 @@ export const PktHeader = forwardRef(
     const userMenuRef = React.useRef<HTMLLIElement>(null)
 
     React.useEffect(() => {
-      document.addEventListener('mouseup', clickOutside)
-      window.addEventListener('scroll', onScroll)
+      if (document) {
+        document.addEventListener('mouseup', clickOutside)
+        window.addEventListener('scroll', onScroll)
+      }
       return () => {
-        document.removeEventListener('mouseup', clickOutside)
-        window.removeEventListener('scroll', onScroll)
+        if (document) {
+          document.removeEventListener('mouseup', clickOutside)
+          window.removeEventListener('scroll', onScroll)
+        }
       }
     })
 

package/src/components/icon/IconContext.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { createContext } from "react";
 
 import defaultIconFetcher from "./DefaultIconFetcher";

package/src/components/index.ts

@@ -4,7 +4,9 @@ export { PktAlert } from './alert/Alert'
 export { PktBackLink } from './backlink/BackLink'
 export { PktBreadcrumbs } from './breadcrumbs/Breadcrumbs'
 export { PktButton } from './button/Button'
+export { PktCard } from './card/Card'
 export { PktCheckbox } from './checkbox/Checkbox'
+export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
@@ -12,6 +14,7 @@ export { PktIcon } from './icon/Icon'
 export { PktIconContext } from './icon/IconContext'
 export { PktInput } from './input/Input'
 export { PktInputWrapper } from './inputwrapper/InputWrapper'
+export { PktLink } from './link/Link'
 export { PktLinkCard } from './linkcard/LinkCard'
 export { PktLoader } from './loader/Loader'
 export { PktMessagebox } from './messagebox/Messagebox'

package/src/components/input/Input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef } from 'react'
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef, ReactNode, RefAttributes, useState } from 'react'
 
 import { PktAlert } from '../alert/Alert'

package/src/components/link/Link.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktLink as PktElLink } from '@oslokommune/punkt-elements'
+import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+
+interface IPktLink extends PktElType {
+  href?: string
+  iconName?: string | undefined
+  iconPosition?: string | undefined
+  external?: boolean
+  onClick?: (e: CustomEvent) => void
+  children?: React.ReactNode | React.ReactNode[]
+}
+
+const LitComponent: FC<IPktLink> = createComponent({
+  tagName: 'pkt-link',
+  elementClass: PktElLink as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktLink',
+  events: {
+    onClick: 'click' as EventName<CustomEvent>,
+  },
+})
+
+export const PktLink: FC<IPktLink> = forwardRef(
+  ({ children, ...props }: IPktLink, ref: ForwardedRef<HTMLElement>): ReactElement => {
+    return (
+      <LitComponent {...props} ref={ref}>
+        <span className="pkt-contents">{children}</span>
+      </LitComponent>
+    )
+  },
+)
+
+PktLink.displayName = 'PktLink'

package/src/components/linkcard/LinkCard.test.tsx

@@ -40,6 +40,7 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Beige" skin="beige" />
           <PktLinkCard title="Beige outline" skin="beige-outline" />
           <PktLinkCard title="Grey outline" skin="grey-outline" />
+          <PktLinkCard title="Gray outline" skin="gray-outline" />
         </div>,
       )
 
@@ -48,6 +49,7 @@ describe('PktLinkCard', () => {
       expect(container.querySelectorAll('.pkt-linkcard--beige')).toHaveLength(1)
       expect(container.querySelectorAll('.pkt-linkcard--beige-outline')).toHaveLength(1)
       expect(container.querySelectorAll('.pkt-linkcard--grey-outline')).toHaveLength(1)
+      expect(container.querySelectorAll('.pkt-linkcard--gray-outline')).toHaveLength(1)
     })
   })
 

package/src/components/linkcard/LinkCard.tsx

@@ -1,9 +1,11 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 
 export interface IPktLinkCard extends React.HTMLAttributes<HTMLAnchorElement> {
-  skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'grey-outline'
+  skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'gray' | 'grey-outline'| 'gray-outline'
   title?: string
   href?: string
   iconName?: string

package/src/components/preview/Preview.tsx

@@ -1,4 +1,6 @@
-import React, { cloneElement, isValidElement, ReactNode, useRef, useState } from 'react'
+'use client'
+
+import React, { cloneElement, isValidElement, ReactElement, 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'
@@ -12,6 +14,7 @@ import { PktSelect } from '../select/Select'
 import { PktTabs } from '../tabs/Tabs'
 import { PktTag } from '../tag/Tag'
 import { PktTextinput } from '../textinput/Textinput'
+import { PktDatepicker } from '../datepicker/Datepicker'
 import icons from '../../../../../apps/docs-astro/src/pages/json/icons.json'
 import { PktPreviewSpecs, ISpecObject } from './PreviewSpecs'
 
@@ -27,7 +30,12 @@ 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.default !== undefined) {
+          if (
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            value.default !== undefined &&
+            value.default !== null
+          ) {
             if (value.default === 'false') {
               value.default = false
             }
@@ -58,7 +66,7 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
       active: false,
     },
     {
-      text: 'Kode (HTML)',
+      text: `Kode (${specs.isElement ? 'Element' : 'HTML'})`,
       icon: 'code',
       active: false,
     },
@@ -70,8 +78,12 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
   ])
 
   const changeContent = (id: number) => {
-    if (id > 0) {
-      id === 1 ? fetchJsx() : fetchHtml()
+    if (id === 1) {
+      fetchJsx()
+    }
+    if (id === 2) {
+      fetchJsx()
+      fetchHtml()
     }
     setCopied('')
     setTabs((prevTabs) =>
@@ -85,16 +97,31 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
   const previewComponent = useRef<any>(null)
 
   const fetchHtml = async () => {
-    const html = await prettier.format(previewComponent.current.innerHTML, {
-      parser: 'html',
-      plugins: [parserHtml as any],
-    })
-    setHtmlContent(html)
+    if (specs.isElement && isValidElement(component)) {
+      fetchJsx().then(() => {
+        const componentType = isValidElement(component)
+          ? (component.type as any).displayName || (component.type as any).name
+          : specs.name
+        setHtmlContent(
+          jsxContent
+            .replaceAll(componentType, specs.name || '')
+            .replaceAll('{', '"')
+            .replaceAll('}', '"'),
+        )
+      })
+    } else {
+      const html = await prettier.format(previewComponent.current.innerHTML, {
+        parser: 'html',
+        plugins: [parserHtml as any],
+      })
+      setHtmlContent(html.replace(/<\!--.*?-->/g, ''))
+    }
   }
 
   const fetchJsx = async () => {
     const jsx = reactElementToJSXString(component)
     setJsxContent(jsx)
+    return Promise.resolve()
   }
 
   const copyToClipboard = (type: string, content: string) => {
@@ -197,6 +224,19 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
           ))}
         </PktSelect>
       )
+    } else if (spec.type === 'ISOdatestring') {
+      return (
+        <PktDatepicker
+          id={key}
+          label={spec.name || key}
+          helptext={spec.description || null}
+          value={props[key]}
+          multiple={spec.variant === 'multiple'}
+          maxlength={999}
+          onChange={(e) => handleChange(key, (e.target as HTMLInputElement).value)}
+          requiredTag={spec.required}
+        />
+      )
     } else {
       return (
         <PktTextinput

package/src/components/preview/PreviewSpecs.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import { PktTable } from '../table/Table'
 import { PktTableHeader } from '../table/TableHeader'
@@ -10,6 +12,7 @@ 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>
@@ -20,6 +23,7 @@ type PropObject = {
   name?: string
   description?: string
   type?: string | string[]
+  variant?: string
   converter?: string
   reflect?: boolean
   default?: any
@@ -47,6 +51,7 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
       <PktTable compact>
         <PktTableHeader>
           <PktTableRow>
+            <PktTableHeaderCell>Navn</PktTableHeaderCell>
             <PktTableHeaderCell>Prop</PktTableHeaderCell>
             <PktTableHeaderCell>Beskrivelse</PktTableHeaderCell>
             <PktTableHeaderCell>Type</PktTableHeaderCell>
@@ -59,6 +64,7 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
               <PktTableDataCell dataLabel="Prop">
                 <pre>{key}</pre>
               </PktTableDataCell>
+              <PktTableDataCell dataLabel="Navn">{(!Array.isArray(value) && value.name) || key}</PktTableDataCell>
               {Array.isArray(value) ? (
                 <>
                   <PktTableDataCell dataLabel="Beskrivelse"></PktTableDataCell>
@@ -68,7 +74,9 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
                 </>
               ) : (
                 <>
-                  <PktTableDataCell dataLabel="Beskrivelse">{value.description}</PktTableDataCell>
+                  <PktTableDataCell dataLabel="Beskrivelse">
+                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
+                  </PktTableDataCell>
                   <PktTableDataCell dataLabel="Type">
                     <pre>{value.type && formatType(value.type)}</pre>
                   </PktTableDataCell>
@@ -97,7 +105,9 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
                   <PktTableDataCell dataLabel="Event">
                     <pre>{key}</pre>
                   </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Beskrivelse">{value.description}</PktTableDataCell>
+                  <PktTableDataCell dataLabel="Beskrivelse">
+                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
+                  </PktTableDataCell>
                 </PktTableRow>
               ))}
             </PktTableBody>
@@ -120,7 +130,9 @@ export const PktPreviewSpecs: React.FC<{ specs: ISpecObject }> = ({ specs }) =>
                   <PktTableDataCell dataLabel="Slot">
                     <pre>{key}</pre>
                   </PktTableDataCell>
-                  <PktTableDataCell dataLabel="Beskrivelse">{value.description}</PktTableDataCell>
+                  <PktTableDataCell dataLabel="Beskrivelse">
+                    <span dangerouslySetInnerHTML={{ __html: value.description || '' }}></span>
+                  </PktTableDataCell>
                 </PktTableRow>
               ))}
             </PktTableBody>

package/src/components/progressbar/Progressbar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useEffect, useRef, CSSProperties, forwardRef, HTMLAttributes, ForwardedRef } from 'react'
 import classNames from 'classnames'
 import { v4 as uuidv4 } from 'uuid'

package/src/components/radio/RadioButton.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef } from 'react'
 
 export interface IRadio extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/components/searchinput/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, HTMLProps, ReactNode } from 'react'
 
 import { PktButton } from '../button/Button'

package/src/components/select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'

package/src/components/stepper/Step.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import cn from 'classnames'
 
 export type TStepStatus = 'completed' | 'incomplete' | 'current'

package/src/components/stepper/Stepper.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { ReactElement, Ref, forwardRef } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'

package/src/components/table/Table.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableBody.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableData.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 
 interface TableDataProps {

package/src/components/table/TableDataCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableHeaderCell.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import classNames from 'classnames'
 import * as React from 'react'
 

package/src/components/tabs/Tabs.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } fr
 import { PktIcon } from '../icon/Icon'
 import { PktTag } from '../tag/Tag'
 
-export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'blue-light'
+export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
 
 export interface Tab {
   text: string