Merged in feature/SW-3245-move-jsontohtml (pull request #2661)

Feature/SW-3245 move jsontohtml

* wip

* Move JsonToHtml -> design-system

* Fix semantic issues within Stories

* replace imports of 'storybook/react-vite' with 'storybook/nextjs-vite'

* merge


Approved-by: Anton Gunnarsson

packages/design-system/.storybook/main.ts

@@ -1,5 +1,5 @@
 import { dirname, join } from 'path'
-import type { StorybookConfig } from '@storybook/react-vite'
+import type { StorybookConfig } from '@storybook/nextjs-vite'
 
 const config: StorybookConfig = {
   stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-a11y'),
   ],
   framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
+    name: getAbsolutePath('@storybook/nextjs-vite'),
     options: {},
   },
 }

packages/design-system/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { withThemeByClassName } from '@storybook/addon-themes'
 
-import type { Preview, ReactRenderer } from '@storybook/react-vite'
+import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'
 
 import '../lib/fonts.css'
 import '../lib/style.css'

packages/design-system/.storybook/vitest.setup.ts

@@ -1,4 +1,4 @@
-import { setProjectAnnotations } from '@storybook/react-vite'
+import { setProjectAnnotations } from '@storybook/nextjs-vite'
 import * as previewAnnotations from './preview'
 
 setProjectAnnotations([previewAnnotations])

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { expect, fn } from 'storybook/test'
 

packages/design-system/lib/components/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Card } from './Card.tsx'
 

packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { fn } from 'storybook/test'
 
 import { themes } from '../../../../.storybook/preview'
@@ -26,9 +26,9 @@ const meta: Meta<CompositionProps> = {
         return (
           <>
             <h1>{context.name}</h1>
-            {Object.entries(themes.themes).map(([key, value]) => {
+            {Object.entries(themes.themes).map(([key, value], ix) => {
               return (
-                <div className={value} style={{ padding: '1em 0' }}>
+                <div key={ix} className={value} style={{ padding: '1em 0' }}>
                   <h2 style={{ paddingBottom: '0.5em' }}>{key}</h2>
                   <Story />
                 </div>

packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { fn } from 'storybook/test'
 

packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { ChipLink } from './ChipLink.tsx'

packages/design-system/lib/components/Chips/Chips.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { fn } from 'storybook/test'
 
 import { Chips } from './Chips.tsx'

packages/design-system/lib/components/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Divider } from './Divider'
 

packages/design-system/lib/components/IconButton/IconButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { expect, fn } from 'storybook/test'
 

packages/design-system/lib/components/Input/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { expect } from 'storybook/test'
 

packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { JsonToHtml } from './JsonToHtml'
+import { RTEImageVaultNode, RTENode } from './types/rte/node'
+import { RTETypeEnum } from './types/rte/enums'
+import { expect } from 'storybook/test'
+
+const meta: Meta<typeof JsonToHtml> = {
+  title: 'Components/JsonToHtml',
+  component: JsonToHtml,
+}
+
+export default meta
+
+type Story = StoryObj<typeof JsonToHtml>
+
+const headings: RTENode[] = [
+  {
+    uid: 'heading-1',
+    type: RTETypeEnum.h1,
+    attrs: { type: 'entry' },
+    children: [{ text: 'Heading 1' }],
+  },
+  {
+    uid: 'heading-2',
+    type: RTETypeEnum.h2,
+    attrs: { type: 'entry' },
+    children: [{ text: 'Heading 2' }],
+  },
+  {
+    uid: 'heading-3',
+    type: RTETypeEnum.h3,
+    attrs: { type: 'entry' },
+    children: [{ text: 'Heading 3' }],
+  },
+  {
+    uid: 'heading-4',
+    type: RTETypeEnum.h4,
+    attrs: { type: 'entry' },
+    children: [{ text: 'Heading 4' }],
+  },
+]
+
+const paragraph: RTENode = {
+  uid: 'paragraph',
+  attrs: { type: 'asset' },
+  type: RTETypeEnum.p,
+  children: [
+    { text: 'This paragraph has ' },
+    { text: 'bold', bold: true },
+    { text: ' and ' },
+    { text: 'italic', italic: true },
+    { text: ' text, plus an inline ' },
+    {
+      type: RTETypeEnum.a,
+      attrs: { type: 'asset', url: 'https://example.com' },
+      uid: 'link-1',
+      children: [{ text: 'link' }],
+    },
+    { text: '.' },
+  ],
+}
+const list: RTENode = {
+  type: RTETypeEnum.ul,
+  attrs: { type: 'asset' },
+  uid: 'list-1',
+  children: [
+    {
+      type: RTETypeEnum.li,
+      uid: 'list-item-1',
+      attrs: { type: 'asset' },
+      children: [{ text: 'First item' }],
+    },
+    {
+      type: RTETypeEnum.li,
+      uid: 'list-item-2',
+      attrs: { type: 'asset' },
+      children: [{ text: 'Second item' }],
+    },
+    {
+      type: RTETypeEnum.li,
+      uid: 'list-item-3',
+      attrs: { type: 'asset' },
+      children: [{ text: 'Third item' }],
+    },
+  ],
+}
+
+const code: RTENode = {
+  type: RTETypeEnum.code,
+  uid: 'code',
+  attrs: { type: 'asset' },
+  children: [
+    {
+      text: `function greet(name: string) {
+            return \`Hello, \${name}!\`;
+        }`,
+    },
+  ],
+}
+
+const blockquote: RTENode = {
+  type: RTETypeEnum.blockquote,
+  uid: 'blockqoute',
+  attrs: { type: 'asset' },
+  children: [{ text: 'Simplicity is the soul of efficiency.' }],
+}
+
+const horizontalRule: RTENode = {
+  type: RTETypeEnum.hr,
+  uid: 'horizontal-rule',
+  attrs: { type: 'entry' },
+  children: [],
+}
+
+const table: RTENode = {
+  type: RTETypeEnum.table,
+  uid: 'table',
+  attrs: { type: 'asset' },
+  children: [
+    {
+      type: RTETypeEnum.thead,
+      uid: 'table-header',
+      attrs: { type: 'asset' },
+      children: [
+        {
+          type: RTETypeEnum.tr,
+          uid: 'table-header-row-1',
+          attrs: { type: 'asset' },
+          children: [
+            {
+              type: RTETypeEnum.th,
+              uid: 'table-head-1',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Head 1' }],
+            },
+            {
+              type: RTETypeEnum.th,
+              uid: 'table-head-2',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Head 2' }],
+            },
+            {
+              type: RTETypeEnum.th,
+              uid: 'table-head-3',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Head 3' }],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: RTETypeEnum.tbody,
+      uid: 'table-body',
+      attrs: { type: 'asset' },
+      children: [
+        {
+          type: RTETypeEnum.tr,
+          uid: 'table-row-1',
+          attrs: { type: 'asset' },
+          children: [
+            {
+              type: RTETypeEnum.td,
+              uid: 'table-cell-1',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Cell 1' }],
+            },
+            {
+              type: RTETypeEnum.td,
+              uid: 'table-cell-2',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Cell 2' }],
+            },
+            {
+              type: RTETypeEnum.td,
+              uid: 'table-cell-3',
+              attrs: { type: 'asset' },
+              children: [{ text: 'Cell 3' }],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+const image: RTEImageVaultNode = {
+  type: RTETypeEnum.ImageVault,
+  uid: 'image',
+  attrs: {
+    type: 'entry',
+    url: 'https://imagevault.scandichotels.com/publishedmedia/77obkq3g4harjm8wyua9/Scandic_Family_Breakfast_2.jpg',
+    height: '200px',
+    width: '200px',
+    id: 1,
+    title: 'Image Title',
+    dimensions: { width: 200, height: 200, aspectRatio: 1.5 },
+    meta: { alt: 'Image Alt', caption: 'Image Caption' },
+    focalPoint: { x: 50, y: 50 },
+  },
+  children: [],
+}
+
+export const Example: Story = {
+  args: {
+    nodes: [
+      {
+        uid: 'paragraph',
+        attrs: { type: 'asset' },
+        type: RTETypeEnum.p,
+        children: [
+          { text: 'This is a kitchen sink of all Rich Text Editor to HTML' },
+        ],
+      },
+      ...headings,
+      paragraph,
+      list,
+      code,
+      blockquote,
+      horizontalRule,
+      image,
+    ] satisfies RTENode[],
+    embeds: [],
+  },
+}
+
+export const Headings: Story = {
+  args: {
+    nodes: headings,
+    embeds: [],
+  },
+  play: async ({ canvas }) => {
+    expect(
+      await canvas.findByRole('heading', { name: 'Heading 1' })
+    ).toBeInTheDocument()
+
+    expect(
+      await canvas.findByRole('heading', { name: 'Heading 2' })
+    ).toBeInTheDocument()
+
+    expect(
+      await canvas.findByRole('heading', { name: 'Heading 3' })
+    ).toBeInTheDocument()
+
+    expect(
+      await canvas.findByRole('heading', { name: 'Heading 4' })
+    ).toBeInTheDocument()
+  },
+}
+export const Paragraph: Story = {
+  args: {
+    nodes: [paragraph],
+    embeds: [],
+  },
+}
+
+export const Code: Story = {
+  args: {
+    nodes: [code],
+    embeds: [],
+  },
+}
+
+export const List: Story = {
+  args: {
+    nodes: [list],
+    embeds: [],
+  },
+}
+
+export const BlockQuote: Story = {
+  args: {
+    nodes: [blockquote],
+    embeds: [],
+  },
+}
+
+export const HorizontalRule: Story = {
+  args: {
+    nodes: [horizontalRule],
+    embeds: [],
+  },
+}
+
+export const Table: Story = {
+  args: {
+    nodes: [table],
+    embeds: [],
+  },
+}
+
+export const Image: Story = {
+  args: {
+    nodes: [image],
+    embeds: [],
+  },
+}

packages/design-system/lib/components/JsonToHtml/JsonToHtml.tsx

@@ -0,0 +1,68 @@
+import { cx } from 'class-variance-authority'
+
+import { nodesToHtml } from './utils'
+
+import styles from './jsontohtml.module.css'
+
+import type { RTENode } from './types/rte/node'
+import type { RenderOptions } from './types/rte/option'
+import { ContentBlockType } from './types/rte/enums'
+
+export type Node<T> = {
+  node: T
+}
+
+type Image = {
+  id: number
+  title: string
+  url: string
+  focalPoint: {
+    x: number
+    y: number
+  }
+  meta: {
+    alt?: string | null
+    caption?: string | null
+  }
+}
+export type Embeds =
+  | {
+      __typename: Exclude<ContentBlockType, 'ImageContainer'>
+      system?: { uid: string } | undefined | null
+      url?: string | undefined | null
+      title?: string | undefined | null
+    }
+  | {
+      __typename: 'ImageContainer'
+      system?: { uid: string } | undefined | null
+      url?: string | undefined | null
+      title?: string | undefined | null
+      image_left?: Image | undefined
+      image_right?: Image | undefined
+    }
+
+export type EmbedByUid = Record<string, Node<Embeds>>
+
+export type JsonToHtmlProps = {
+  embeds: Node<Embeds>[]
+  nodes: RTENode[]
+  renderOptions?: RenderOptions
+  className?: string
+}
+
+export function JsonToHtml({
+  embeds,
+  nodes,
+  renderOptions = {},
+  className,
+}: JsonToHtmlProps) {
+  if (!Array.isArray(nodes) || !nodes.length) {
+    return null
+  }
+
+  return (
+    <section className={cx(styles.container, className)}>
+      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
+    </section>
+  )
+}

packages/design-system/lib/components/JsonToHtml/insertResponseToImageVaultAsset.ts

@@ -0,0 +1,60 @@
+export type ImageVaultAsset = {
+  id: number
+  title: string
+  url: string
+  dimensions: {
+    width: number
+    height: number
+    aspectRatio: number
+  }
+  meta: { alt: string | undefined | null; caption: string | undefined | null }
+  focalPoint: { x: number; y: number }
+}
+
+type ImageVaultAssetResponse = {
+  Id: number
+  Name: string
+  FocalPoint: { x: number; y: number }
+  Metadata: Array<{ Name: string; Value: string }>
+  MediaConversions: Array<{
+    Url: string
+    Width: number
+    Height: number
+    AspectRatio: number
+    FormatAspectRatio: number
+  }>
+}
+
+export function insertResponseToImageVaultAsset(
+  response: ImageVaultAssetResponse
+): ImageVaultAsset {
+  const alt = response.Metadata?.find((meta) =>
+    meta.Name.includes('AltText_')
+  )?.Value
+
+  const caption = response.Metadata?.find((meta) =>
+    meta.Name.includes('Title_')
+  )?.Value
+
+  const mediaConversion = response.MediaConversions[0]
+  const aspectRatio =
+    mediaConversion.FormatAspectRatio ||
+    mediaConversion.AspectRatio ||
+    mediaConversion.Width / mediaConversion.Height
+
+  return {
+    url: mediaConversion.Url,
+    id: response.Id,
+    meta: {
+      alt,
+      caption,
+    },
+    title: response.Name,
+    dimensions: {
+      width: mediaConversion.Width,
+      height: mediaConversion.Height,
+      aspectRatio,
+    },
+    focalPoint: response.FocalPoint || { x: 50, y: 50 },
+  }
+}

packages/design-system/lib/components/JsonToHtml/jsontohtml.module.css

@@ -0,0 +1,143 @@
+.container {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  width: 100%;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.heading {
+  color: var(--Text-Heading);
+  margin-top: var(--Space-x3);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+.h1,
+.h2 {
+  margin-bottom: var(--Space-x2);
+}
+
+.h3,
+.h4,
+.h5,
+.p,
+.blockquote,
+.code,
+.divider,
+.div {
+  margin-bottom: var(--Space-x15);
+}
+
+.imageWithCaption {
+  display: grid;
+  gap: var(--Space-x1);
+  margin: var(--Space-x3) 0;
+
+  .imageWrapper {
+    margin: 0;
+  }
+}
+
+.imageWrapper {
+  position: relative;
+  width: 100%;
+  height: 365px;
+  border-radius: var(--Corner-radius-md);
+  margin: var(--Space-x3) 0;
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  object-fit: cover;
+}
+
+.ul,
+.ol {
+  display: grid;
+  gap: var(--Space-x1);
+  padding: 0;
+  margin-top: var(--Space-x2);
+  margin-bottom: var(--Space-x2);
+}
+
+.ol > li::marker {
+  color: var(--Icon-Accent);
+}
+
+.li {
+  margin-left: var(--Space-x3);
+}
+
+.heart > .li::before,
+.li:has(.heart)::before {
+  content: url("/_static/icons/heart.svg");
+  position: relative;
+  height: 8px;
+  top: 3px;
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
+}
+
+.heart > .li,
+.check > .li,
+.li:has(.check),
+.li:has(.heart) {
+  list-style: none;
+}
+
+.check > .li::before,
+.li:has(.check)::before {
+  content: url("/_static/icons/check-ring.svg");
+  position: relative;
+  height: 8px;
+  top: 3px;
+  margin-right: var(--Space-x1);
+  margin-left: calc(var(--Space-x3) * -1);
+}
+
+.li > p {
+  display: inline;
+  margin: 0;
+}
+
+.tableContainer {
+  max-width: 100%;
+  overflow-x: auto;
+  margin: var(--Space-x3) 0;
+}
+
+.table .p {
+  display: inline;
+  margin: 0;
+}
+
+.theadContent {
+  color: var(--Text-Heading);
+}
+
+.iframe {
+  margin: var(--Space-x3) 0;
+}
+
+@media screen and (min-width: 768px) {
+  .ol:has(li:nth-last-child(n + 5)),
+  .ul:has(li:nth-last-child(n + 5)) {
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
+  }
+}
+
+@container sidebar (max-width: 360px) {
+  .ol,
+  .ul {
+    display: flex;
+    flex-direction: column;
+  }
+}

packages/design-system/lib/components/JsonToHtml/renderOptions.tsx

@@ -0,0 +1,834 @@
+import { cx } from 'class-variance-authority'
+
+import { Divider } from '@scandic-hotels/design-system/Divider'
+import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
+import Image from '@scandic-hotels/design-system/Image'
+import ImageContainer from '@scandic-hotels/design-system/ImageContainer'
+import Link from '@scandic-hotels/design-system/Link'
+import Table from '@scandic-hotels/design-system/Table'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import {
+  hasAvailableParagraphFormat,
+  hasAvailableULFormat,
+  makeCssModuleCompatibleClassName,
+} from './utils'
+
+import styles from './jsontohtml.module.css'
+
+import type { EmbedByUid } from './JsonToHtml'
+import type { Attributes, RTEImageVaultAttrs } from './types/rte/attrs'
+import {
+  AvailableParagraphFormatEnum,
+  RTEItemTypeEnum,
+  RTETypeEnum,
+} from './types/rte/enums'
+import {
+  type RTEDefaultNode,
+  type RTEImageNode,
+  RTEMarkType,
+  type RTENext,
+  type RTENode,
+  type RTERegularNode,
+  type RTETextNode,
+} from './types/rte/node'
+import type { RenderOptions } from './types/rte/option'
+import { insertResponseToImageVaultAsset } from './insertResponseToImageVaultAsset'
+
+function noNestedLinksOrReferences(node: RTENode) {
+  if ('type' in node) {
+    if (node.type === RTETypeEnum.reference) {
+      return node.children
+    } else if (node.type === RTETypeEnum.a) {
+      return node.children
+    }
+  }
+  return node
+}
+
+function extractPossibleAttributes(attrs: Attributes | undefined) {
+  if (!attrs) return {}
+  const props: Record<string, unknown> & {
+    className?: string
+    style?: React.CSSProperties | undefined
+  } = {}
+  if (attrs.id) {
+    props.id = attrs.id
+  }
+
+  if (attrs.class && typeof attrs.class === 'string') {
+    props.className = attrs.class
+  } else if (attrs['class-name']) {
+    props.className = attrs['class-name']
+  } else if (attrs.classname && typeof attrs.classname === 'string') {
+    props.className = attrs.classname
+  }
+
+  if (attrs.style?.['text-align']) {
+    props.style = {
+      textAlign: attrs.style['text-align'] as React.CSSProperties['textAlign'],
+    }
+  }
+
+  return props
+}
+
+export const renderOptions: RenderOptions = {
+  [RTETypeEnum.a]: (
+    node: RTERegularNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if (!node.attrs.url) {
+      return
+    }
+
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Link
+        key={node.uid}
+        className={className}
+        {...props}
+        href={typeof node.attrs.url === 'string' ? node.attrs.url : ''}
+        target={
+          typeof node.attrs.target === 'string' ? node.attrs.target : '_blank'
+        }
+        textDecoration="underline"
+      >
+        {next(
+          // Sometimes editors happen to nest a reference inside a link and vice versa.
+          // In that case use the outermost link, i.e. ignore nested links.
+          node.children.flatMap(noNestedLinksOrReferences),
+          embeds,
+          fullRenderOptions
+        )}
+      </Link>
+    )
+  },
+
+  [RTETypeEnum.blockquote]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/Decorative/lg">
+        <blockquote className={cx(styles.blockquote, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </blockquote>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.code]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <code key={node.uid} className={cx(styles.code, className)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </code>
+    )
+  },
+
+  [RTETypeEnum.embed]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    if (node.attrs.src) {
+      props.src = node.attrs.src
+    }
+    if (node.attrs.url) {
+      props.src = node.attrs.url
+    }
+    if (!props.src) {
+      return null
+    }
+    return (
+      <iframe
+        key={node.uid}
+        className={cx(styles.iframe, className)}
+        {...props}
+      >
+        {next(node.children, embeds, fullRenderOptions)}
+      </iframe>
+    )
+  },
+
+  [RTETypeEnum.h1]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/lg">
+        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h1>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.h2]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/md">
+        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h2>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.h3]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/sm">
+        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h3>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.h4]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/xs">
+        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h4>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.h5]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <Typography key={node.uid} variant="Title/xs">
+        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </h5>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.hr]: () => {
+    return <Divider className={styles.divider} color="burgundy" />
+  },
+
+  [RTETypeEnum.li]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    const compatibleClassName = makeCssModuleCompatibleClassName(
+      className,
+      'ul'
+    )
+    return (
+      <li
+        key={node.uid}
+        {...props}
+        className={cx(styles.li, compatibleClassName)}
+      >
+        {next(node.children, embeds, fullRenderOptions)}
+      </li>
+    )
+  },
+
+  [RTETypeEnum.ol]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+
+    // Set the number of rows dynamically to create even rows for each column. We want the li:s
+    // to flow with the column, so therefore this is needed.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
+    return (
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <ol
+          className={cx(styles.ol, className)}
+          {...props}
+          style={
+            numberOfRows
+              ? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
+              : {}
+          }
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </ol>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.p]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+
+    const hasFormat = node.children.some((item) =>
+      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
+    )
+
+    // If a child node has an available format as className, we wrap it in a
+    // span and render the children with the correct component
+    if (hasFormat) {
+      return next(node.children, embeds, fullRenderOptions)
+    }
+
+    return (
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <p className={cx(styles.p, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </p>
+      </Typography>
+    )
+  },
+
+  [RTETypeEnum.span]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    let propsClassName = className
+
+    if (className) {
+      if (hasAvailableULFormat(className)) {
+        propsClassName = styles[className]
+      }
+    }
+
+    return (
+      <span className={propsClassName} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </span>
+    )
+  },
+  [RTETypeEnum.div]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    let propsClassName = className
+
+    if (className) {
+      if (hasAvailableULFormat(className)) {
+        propsClassName = styles[className]
+      }
+    }
+
+    return (
+      <div className={cx(styles.div, propsClassName)} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </div>
+    )
+  },
+
+  [RTETypeEnum.reference]: (
+    node: RTENode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    if (!('attrs' in node)) {
+      return null
+    }
+
+    const type = node.attrs.type
+    if (type === RTEItemTypeEnum.asset) {
+      const imageTypeRegex = /^image\//
+      const isImage = imageTypeRegex.test(node.attrs['asset-type'] as string)
+      if (isImage) {
+        const image = embeds?.[node?.attrs?.['asset-uid'] as string]
+        if (image?.node.__typename === 'SysAsset') {
+          if (image.node.url) {
+            const alt = image?.node?.title ?? node.attrs.alt
+            const { className, ...props } = extractPossibleAttributes(
+              node.attrs
+            )
+            return (
+              <div key={node.uid} className={styles.imageWrapper}>
+                <Image
+                  className={cx(styles.image, className)}
+                  src={image.node.url}
+                  alt={alt as string}
+                  fill
+                  sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+                  {...props}
+                />
+              </div>
+            )
+          }
+        }
+      } else if (node.attrs['display-type'] === 'link' && node.attrs.href) {
+        const { className, ...props } = extractPossibleAttributes(node.attrs)
+        return (
+          <Link
+            key={node.uid}
+            className={className}
+            href={node.attrs.href as string}
+            textDecoration="underline"
+            target="_blank"
+            variant="icon"
+            {...props}
+          >
+            {next(
+              // Sometimes editors happen to nest a reference inside a link and vice versa.
+              // In that case use the outermost link, i.e. ignore nested links.
+              node.children.flatMap(noNestedLinksOrReferences),
+              embeds,
+              fullRenderOptions
+            )}
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+          </Link>
+        )
+      }
+    }
+
+    if (type === RTEItemTypeEnum.entry) {
+      const entry = embeds?.[node?.attrs?.['entry-uid'] as string]
+
+      if (entry?.node.__typename === 'ImageContainer') {
+        if (entry.node.image_left && entry.node.image_right) {
+          return (
+            <ImageContainer
+              key={node.uid}
+              leftImage={entry.node.image_left}
+              rightImage={entry.node.image_right}
+            />
+          )
+        }
+        return null
+      } else if (
+        entry?.node.__typename === 'AccountPage' ||
+        entry?.node.__typename === 'CampaignOverviewPage' ||
+        entry?.node.__typename === 'CampaignPage' ||
+        entry?.node.__typename === 'CollectionPage' ||
+        entry?.node.__typename === 'ContentPage' ||
+        entry?.node.__typename === 'DestinationCityPage' ||
+        entry?.node.__typename === 'DestinationCountryPage' ||
+        entry?.node.__typename === 'DestinationOverviewPage' ||
+        entry?.node.__typename === 'HotelPage' ||
+        entry?.node.__typename === 'LoyaltyPage' ||
+        entry?.node.__typename === 'StartPage'
+      ) {
+        // If entry is not an ImageContainer, it is a page and we return it as a link
+        const { className, ...props } = extractPossibleAttributes(node.attrs)
+
+        const href = node.attrs?.locale
+          ? `/${node.attrs.locale}${node.attrs.href ?? node.attrs.url}`
+          : ((node.attrs.href ?? node.attrs.url) as string)
+
+        return (
+          <Link
+            key={node.uid}
+            className={className}
+            {...props}
+            href={href}
+            textDecoration="underline"
+          >
+            {next(
+              // Sometimes editors happen to nest a reference inside a link and vice versa.
+              // In that case use the outermost link, i.e. ignore nested links.
+              node.children.flatMap(noNestedLinksOrReferences),
+              embeds,
+              fullRenderOptions
+            )}
+          </Link>
+        )
+      }
+    }
+  },
+
+  [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
+    const type = node.type
+    if (!('attrs' in node) || type !== RTETypeEnum.ImageVault) {
+      return null
+    }
+
+    const attrs = node.attrs as RTEImageVaultAttrs
+    const image =
+      'dimensions' in attrs ? attrs : insertResponseToImageVaultAsset(attrs)
+
+    const alt = image.meta.alt ?? image.title
+    const caption = image.meta.caption
+    const { className, ...props } = extractPossibleAttributes(attrs)
+    return (
+      <div key={node.uid} className={styles.imageWithCaption}>
+        <div className={styles.imageWrapper}>
+          <Image
+            alt={alt}
+            className={cx(styles.image, className)}
+            src={image.url}
+            fill
+            sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
+            focalPoint={image.focalPoint}
+            {...props}
+          />
+        </div>
+        {caption ? (
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{image.meta.caption}</p>
+          </Typography>
+        ) : null}
+      </div>
+    )
+  },
+
+  [RTETypeEnum.table]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    return (
+      <div key={node.uid} className={styles.tableContainer}>
+        <Table className={cx(styles.table, className)} {...props}>
+          {next(node.children, embeds, fullRenderOptions)}
+        </Table>
+      </div>
+    )
+  },
+
+  [RTETypeEnum.thead]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    // Override the styling of p tags inside the thead tag
+    const theadChildPRenderOptions = {
+      ...fullRenderOptions,
+      [RTETypeEnum.p]: (
+        node: RTEDefaultNode,
+        embeds: EmbedByUid,
+        next: RTENext,
+        fullRenderOptions: RenderOptions
+      ) => (
+        <Typography variant="Body/Paragraph/mdBold">
+          <span className={styles.theadContent}>
+            {next(node.children, embeds, fullRenderOptions)}
+          </span>
+        </Typography>
+      ),
+    }
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <Table.THead key={node.uid} {...props}>
+        {next(node.children, embeds, theadChildPRenderOptions)}
+      </Table.THead>
+    )
+  },
+
+  [RTETypeEnum.tbody]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <Table.TBody key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </Table.TBody>
+    )
+  },
+
+  [RTETypeEnum.tfoot]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <tfoot key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </tfoot>
+    )
+  },
+
+  [RTETypeEnum.fragment]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return <>{next(node.children, embeds, fullRenderOptions)}</>
+  },
+
+  [RTETypeEnum.tr]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <Table.TR key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </Table.TR>
+    )
+  },
+
+  [RTETypeEnum.th]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <Table.TH key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </Table.TH>
+    )
+  },
+
+  [RTETypeEnum.td]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const props = extractPossibleAttributes(node.attrs)
+    return (
+      <Table.TD key={node.uid} {...props}>
+        {next(node.children, embeds, fullRenderOptions)}
+      </Table.TD>
+    )
+  },
+
+  [RTETypeEnum.ul]: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    const { className, ...props } = extractPossibleAttributes(node.attrs)
+    const compatibleClassName = makeCssModuleCompatibleClassName(
+      className,
+      'ul'
+    )
+
+    // Set the number of rows dynamically to create even rows for each column. We want the li:s
+    // to flow with the column, so therefore this is needed.
+    let numberOfRows: number | undefined
+    if (node.children.length > 4) {
+      const half = node.children.length / 2
+      numberOfRows = Math.ceil(half)
+    }
+
+    return (
+      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
+        <ul
+          className={cx(styles.ul, compatibleClassName)}
+          {...props}
+          style={
+            numberOfRows
+              ? {
+                  gridTemplateRows: `repeat(${numberOfRows}, auto)`,
+                }
+              : {}
+          }
+        >
+          {next(node.children, embeds, fullRenderOptions)}
+        </ul>
+      </Typography>
+    )
+  },
+
+  /** TextNode wrappers */
+  [RTEMarkType.bold]: (children: React.ReactNode) => {
+    return (
+      <Typography variant="Body/Paragraph/mdBold">
+        <strong>{children}</strong>
+      </Typography>
+    )
+  },
+
+  [RTEMarkType.italic]: (children: React.ReactNode) => {
+    return <em>{children}</em>
+  },
+
+  [RTEMarkType.underline]: (children: React.ReactNode) => {
+    return (
+      <Typography variant="Link/md">
+        <u>{children}</u>
+      </Typography>
+    )
+  },
+
+  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
+    return <s>{children}</s>
+  },
+
+  [RTEMarkType.inlineCode]: (children: React.ReactNode) => {
+    return <span>{children}</span>
+  },
+
+  [RTEMarkType.subscript]: (children: React.ReactNode) => {
+    return <sub>{children}</sub>
+  },
+
+  [RTEMarkType.superscript]: (children: React.ReactNode) => {
+    return <sup>{children}</sup>
+  },
+
+  [RTEMarkType.break]: (children: React.ReactNode) => {
+    return (
+      <>
+        <br />
+        {children}
+      </>
+    )
+  },
+
+  [RTEMarkType.classnameOrId]: (
+    children: React.ReactNode,
+    className?: string,
+    id?: string
+  ) => {
+    const props = { id }
+    let propsClassName = className
+
+    if (!id) {
+      delete props.id
+    }
+
+    if (className) {
+      if (hasAvailableULFormat(className)) {
+        propsClassName = styles[className]
+      }
+    }
+
+    if (className === AvailableParagraphFormatEnum.footnote) {
+      return (
+        <Typography key={id} variant="Label/xsRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum.caption) {
+      return (
+        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum['script-1']) {
+      return (
+        <Typography key={id} variant="Title/Decorative/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum['script-2']) {
+      return (
+        <Typography key={id} variant="Title/Decorative/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+
+    if (className === AvailableParagraphFormatEnum['subtitle-1']) {
+      return (
+        <Typography key={id} variant="Title/Subtitle/lg">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+    if (className === AvailableParagraphFormatEnum['subtitle-2']) {
+      return (
+        <Typography key={id} variant="Title/Subtitle/md">
+          <p className={cx(styles.p, propsClassName)} {...props}>
+            {children}
+          </p>
+        </Typography>
+      )
+    }
+    return (
+      <Typography key={id} variant="Body/Paragraph/mdRegular">
+        <span className={propsClassName} {...props}>
+          {children}
+        </span>
+      </Typography>
+    )
+  },
+
+  /**
+   * Contentstack can return something called `default` as seen here in their
+   * own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
+   */
+  default: (
+    node: RTEDefaultNode,
+    embeds: EmbedByUid,
+    next: RTENext,
+    fullRenderOptions: RenderOptions
+  ) => {
+    return next(node.children, embeds, fullRenderOptions)
+  },
+}

packages/design-system/lib/components/JsonToHtml/types/rte/attrs.ts

@@ -0,0 +1,55 @@
+import type { Lang } from '@scandic-hotels/common/constants/language'
+
+import type { EmbedTypesEnum, RTEItemType, RTEItemTypeEnum } from './enums'
+
+export interface Attributes {
+  [key: string]: unknown
+  'class-name'?: string
+  type: RTEItemType
+  style?: { [key: string]: unknown } | undefined
+}
+
+export interface RTEAssetAttrs extends Attributes {
+  alt: string
+  'asset-alt': string
+  'asset-link': string
+  'asset-name': string
+  'asset-type': 'image/png' | 'image/jpg' | 'image/jpeg'
+  'asset-uid': string
+  'display-type': EmbedTypesEnum.display
+  'content-type-uid': 'sys_assets'
+  inline: false
+  type: RTEItemTypeEnum.asset
+}
+
+export interface RTEAnchorAttrs extends Attributes {
+  target: string
+  url: string
+}
+
+export interface RTELinkAttrs extends Attributes {
+  'display-type': EmbedTypesEnum.link
+  'class-name': string
+  'content-type-uid': string
+  'entry-uid': string
+  locale: Lang
+  href: string
+  target: HTMLAnchorElement['target']
+  type: RTEItemTypeEnum.entry
+}
+
+export interface RTEImageVaultAttrs extends Attributes {
+  height: string
+  // style: string[]
+  width: string
+  id: number
+  title: string
+  url: string
+  dimensions: {
+    width: number
+    height: number
+    aspectRatio: number
+  }
+  meta: { alt: string | undefined | null; caption: string | undefined | null }
+  focalPoint: { x: number; y: number }
+}

packages/design-system/lib/components/JsonToHtml/types/rte/enums.ts

@@ -0,0 +1,84 @@
+export enum EmbedTypesEnum {
+  block = 'block',
+  display = 'display',
+  download = 'download',
+  inline = 'inline',
+  link = 'link',
+}
+
+export type EmbedTypes = keyof typeof EmbedTypesEnum
+
+/** Copied from https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/nodes/node-type.ts */
+export enum RTETypeEnum {
+  a = 'a',
+  blockquote = 'blockquote',
+  code = 'code',
+  doc = 'doc',
+  embed = 'embed',
+  h1 = 'h1',
+  h2 = 'h2',
+  h3 = 'h3',
+  h4 = 'h4',
+  h5 = 'h5',
+  h6 = 'h6',
+  hr = 'hr',
+  img = 'img',
+  li = 'li',
+  ol = 'ol',
+  p = 'p',
+  reference = 'reference',
+  span = 'span',
+  /**
+   * Included for compatibility when copying RTE from other sources e.g. epi
+   */
+  div = 'div',
+  table = 'table',
+  tbody = 'tbody',
+  td = 'td',
+  text = 'text',
+  tfoot = 'tfoot',
+  th = 'th',
+  thead = 'thead',
+  tr = 'tr',
+  ul = 'ul',
+  ImageVault = 'ImageVault',
+  fragment = 'fragment',
+}
+
+export type RTEType = keyof typeof RTETypeEnum
+
+export enum RTEItemTypeEnum {
+  asset = 'asset',
+  entry = 'entry',
+}
+
+export type RTEItemType = keyof typeof RTEItemTypeEnum
+
+export enum AvailableParagraphFormatEnum {
+  'script-1' = 'script-1',
+  'script-2' = 'script-2',
+  'footnote' = 'footnote',
+  'caption' = 'caption',
+  'subtitle-1' = 'subtitle-1',
+  'subtitle-2' = 'subtitle-2',
+}
+
+export enum AvailableULFormatEnum {
+  'heart' = 'heart',
+  'check' = 'check',
+}
+
+export type ContentBlockType =
+  | 'AccountPage'
+  | 'CampaignOverviewPage'
+  | 'CampaignPage'
+  | 'CollectionPage'
+  | 'ContentPage'
+  | 'DestinationCityPage'
+  | 'DestinationCountryPage'
+  | 'DestinationOverviewPage'
+  | 'HotelPage'
+  | 'ImageContainer'
+  | 'LoyaltyPage'
+  | 'StartPage'
+  | 'SysAsset'

packages/design-system/lib/components/JsonToHtml/types/rte/node.ts

@@ -0,0 +1,98 @@
+import type { JSX } from 'react'
+
+import type { EmbedByUid } from '../../JsonToHtml'
+import type {
+  Attributes,
+  RTEAnchorAttrs,
+  RTEAssetAttrs,
+  RTEImageVaultAttrs,
+  RTELinkAttrs,
+} from './attrs'
+import type { RTETypeEnum } from './enums'
+import type { RenderOptions } from './option'
+
+export interface RTEDefaultNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTELinkNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTEReferenceAssetNode extends RTEDefaultNode {
+  attrs: RTEAssetAttrs
+}
+
+export interface RTEAnchorNode extends RTEDefaultNode {
+  attrs: RTEAnchorAttrs
+  type: RTETypeEnum.a
+}
+
+export interface RTEReferenceLinkNode extends RTEDefaultNode {
+  attrs: RTELinkAttrs
+}
+
+export interface RTEImageVaultNode extends RTEDefaultNode {
+  attrs: RTEImageVaultAttrs
+  type: RTETypeEnum.ImageVault
+}
+
+export enum RTEMarkType {
+  bold = 'bold',
+  break = 'break',
+  classnameOrId = 'classnameOrId',
+  inlineCode = 'inlineCode',
+  italic = 'italic',
+  strikethrough = 'strikethrough',
+  subscript = 'subscript',
+  superscript = 'superscript',
+  underline = 'underline',
+}
+
+type RTETextNodeOptionalKeys = {
+  [key in RTEMarkType]?: boolean
+}
+
+export type RTETextNode = RTETextNodeOptionalKeys & {
+  classname?: string
+  id?: string
+  text: string
+}
+
+export type RTERegularNode = RTEDefaultNode | RTEAnchorNode | RTEImageVaultNode
+
+export type RTEImageNode = RTEDefaultNode | RTEImageVaultNode
+
+export type RTEReferenceNode = RTEAnchorNode
+
+export type RTENode = RTERegularNode | RTEReferenceNode | RTETextNode
+
+export type RTERenderMark = (
+  children: React.ReactNode,
+  classname?: string,
+  id?: string
+) => JSX.Element
+
+export interface RTEDocument extends RTEDefaultNode {
+  type: RTETypeEnum.doc
+  _version: number
+}
+
+export type RTERenderOptionComponent = (
+  node: RTERegularNode,
+  embeds: EmbedByUid,
+  next: RTENext,
+  fullRenderOptions: RenderOptions
+) => React.ReactNode
+
+export type RTENext = (
+  nodes: RTENode[],
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+) => string

packages/design-system/lib/components/JsonToHtml/types/rte/option.ts

@@ -0,0 +1,5 @@
+import type { RTERenderMark, RTERenderOptionComponent } from "./node"
+
+export type RenderOptions = {
+  [type: string]: RTERenderOptionComponent | RTERenderMark
+}

packages/design-system/lib/components/JsonToHtml/utils.tsx

@@ -0,0 +1,184 @@
+import React, { cloneElement } from 'react'
+
+import { renderOptions } from './renderOptions'
+
+import styles from './jsontohtml.module.css'
+
+import type { Node, Embeds } from './JsonToHtml'
+
+import {
+  AvailableParagraphFormatEnum,
+  AvailableULFormatEnum,
+  RTETypeEnum,
+} from './types/rte/enums'
+import {
+  RTEMarkType,
+  type RTENode,
+  type RTERenderMark,
+  type RTERenderOptionComponent,
+  type RTETextNode,
+} from './types/rte/node'
+import type { RenderOptions } from './types/rte/option'
+import { EmbedByUid } from './JsonToHtml'
+
+export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
+  const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
+    if ('system' in embed.node && embed.node.system?.uid) {
+      acc[embed.node.system.uid] = embed
+    }
+    return acc
+  }, {})
+
+  return embedsByUid
+}
+
+export function nodeChildrenToHtml(
+  nodes: RTENode[],
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+  // TODO: Change this to an actual return
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): any {
+  return nodes
+    .map((node, i) => {
+      // This function either returns a JSX element or null
+      const element = nodeToHtml(node, embeds, fullRenderOptions)
+      if (!element) {
+        return null
+      }
+
+      return cloneElement(element, {
+        key: `child-rte-${i}`,
+      })
+    })
+    .filter(Boolean)
+}
+
+export function textNodeToHtml(
+  node: RTETextNode,
+  fullRenderOptions: RenderOptions
+) {
+  let text = <>{node.text}</>
+
+  if (node.classname || node.id) {
+    text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(
+      text,
+      node.classname,
+      node.id
+    )
+  }
+  if (node.break) {
+    text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text)
+  }
+  if (node.superscript) {
+    text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text)
+  }
+  if (node.subscript) {
+    text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text)
+  }
+  if (node.inlineCode) {
+    text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text)
+  }
+  if (node.strikethrough) {
+    text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text)
+  }
+  if (node.underline) {
+    text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text)
+  }
+  if (node.italic) {
+    text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text)
+  }
+  if (node.bold) {
+    text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text)
+  }
+  return text
+}
+
+function next(
+  nodes: RTENode[],
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+) {
+  return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
+}
+
+export function hasAvailableParagraphFormat(className?: string) {
+  if (!className) {
+    return false
+  }
+  return Object.keys(AvailableParagraphFormatEnum).includes(className)
+}
+
+export function hasAvailableULFormat(className?: string) {
+  if (!className) {
+    return false
+  }
+  return Object.keys(AvailableULFormatEnum).includes(className)
+}
+
+export function nodeToHtml(
+  node: RTENode,
+  embeds: EmbedByUid,
+  fullRenderOptions: RenderOptions
+) {
+  if ('type' in node === false) {
+    return textNodeToHtml(node, fullRenderOptions)
+  } else {
+    const renderer = fullRenderOptions[node.type] as RTERenderOptionComponent
+    if (renderer) {
+      if (node.type === RTETypeEnum.doc) {
+        return null
+      }
+
+      return renderer(node, embeds, next, fullRenderOptions)
+    } else {
+      return next(node.children, embeds, fullRenderOptions)
+    }
+  }
+}
+
+function getUniqueId(node: RTENode) {
+  if ('uid' in node) {
+    return node.uid
+  }
+  return node.id
+}
+
+export function nodesToHtml(
+  nodes: RTENode[],
+  embedsArray: Node<Embeds>[],
+  overrideRenderOptions: RenderOptions
+) {
+  const embeds = groupEmbedsByUid(embedsArray)
+  const fullRenderOptions: RenderOptions = {
+    ...renderOptions,
+    ...overrideRenderOptions,
+  }
+
+  return nodes.map((node, index) => {
+    const nodeHtml = nodeToHtml(node, embeds, fullRenderOptions)
+
+    return (
+      <React.Fragment key={getUniqueId(node) ?? `node-${index}`}>
+        {nodeHtml}
+      </React.Fragment>
+    )
+  })
+}
+
+export function makeCssModuleCompatibleClassName(
+  className: string | undefined,
+  formatType: 'ul'
+): string {
+  if (!className) return ''
+
+  if (formatType === 'ul' && hasAvailableULFormat(className)) {
+    // TODO: REMOVE
+    // @ats-expect-error: We want to set css modules classNames even if it does not correspond
+    // to an existing class in the module style sheet. Due to our css modules plugin for
+    // typescript, we cannot do this without the ts-ignore
+    return styles[className] || className
+  }
+
+  return className
+}

packages/design-system/lib/components/Label/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Label } from './Label'
 

packages/design-system/lib/components/Loading/Loading.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Loading } from './Loading'
 import { config } from './variants'

packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import CampaignRateCard from '.'
 
 const meta: Meta<typeof CampaignRateCard> = {

packages/design-system/lib/components/RateCard/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import CodeRateCard from '.'
 
 const meta: Meta<typeof CodeRateCard> = {

packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import NoRateAvailableCard from '.'
 
 const meta: Meta<typeof NoRateAvailableCard> = {

packages/design-system/lib/components/RateCard/Points/Points.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import PointsRateCard from '.'
 

packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import RegularRateCard from '.'
 
 const meta: Meta<typeof RegularRateCard> = {

packages/design-system/lib/components/Select/Select.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Select } from './Select'
 

packages/design-system/lib/components/Typography/Typography.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 import { Typography } from './Typography.tsx'
 

packages/design-system/package.json

@@ -10,11 +10,13 @@
     "./Body": "./lib/components/Body/index.tsx",
     "./Button": "./lib/components/Button/index.tsx",
     "./ButtonLink": "./lib/components/ButtonLink/index.tsx",
+    "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
     "./Caption": "./lib/components/Caption/index.tsx",
     "./Card": "./lib/components/Card/index.tsx",
     "./ChipButton": "./lib/components/ChipButton/index.tsx",
     "./ChipLink": "./lib/components/ChipLink/index.tsx",
     "./Chips": "./lib/components/Chips/index.tsx",
+    "./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
     "./DeprecatedSelect": "./lib/components/DeprecatedSelect/index.tsx",
     "./Divider": "./lib/components/Divider/index.tsx",
     "./Footnote": "./lib/components/Footnote/index.tsx",
@@ -24,48 +26,27 @@
     "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
     "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
-    "./IconChip": "./lib/components/IconChip/index.tsx",
-    "./Image": "./lib/components/Image.tsx",
-    "./ImageContainer": "./lib/components/ImageContainer/index.tsx",
-    "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
-    "./ImageGallery": "./lib/components/ImageGallery/index.tsx",
-    "./Input": "./lib/components/Input/index.tsx",
-    "./Label": "./lib/components/Label/index.tsx",
-    "./Lightbox": "./lib/components/Lightbox/index.tsx",
-    "./Link": "./lib/components/Link/index.tsx",
-    "./Modal": "./lib/components/Modal/index.tsx",
-    "./Modal/ModalContentWithActions": "./lib/components/Modal/ModalContentWithActions/index.tsx",
-    "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
-    "./OpeningHours": "./lib/components/OpeningHours/index.tsx",
-    "./Select": "./lib/components/Select/index.tsx",
-    "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
-    "./SidePeek": "./lib/components/SidePeek/index.tsx",
-    "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
-    "./StaticMap": "./lib/components/StaticMap/index.tsx",
-    "./Subtitle": "./lib/components/Subtitle/index.tsx",
-    "./Switch": "./lib/components/Switch/index.tsx",
-    "./Table": "./lib/components/Table/index.tsx",
-    "./Title": "./lib/components/Title/index.tsx",
-    "./Tooltip": "./lib/components/Tooltip/index.tsx",
-    "./Typography": "./lib/components/Typography/index.tsx",
-    "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
-    "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
-    "./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
-    "./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
-    "./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
-    "./Preamble": "./lib/components/Preamble/index.tsx",
-    "./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
     "./IconButton": "./lib/components/IconButton/index.tsx",
+    "./IconChip": "./lib/components/IconChip/index.tsx",
     "./Icons": "./lib/components/Icons/index.tsx",
-    "./Icons/IconByCSSelect": "./lib/components/Icons/IconByCSSelect.tsx",
-    "./Icons/IconByIconName": "./lib/components/Icons/IconByIconName.tsx",
-    "./Icons/IllustrationByIconName": "./lib/components/Icons/IllustrationByIconName.ts",
-    "./Icons/iconName": "./lib/components/Icons/iconName.ts",
     "./Icons/BathroomCabinetIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx",
+    "./Icons/BedBunkExtraIcon": "./lib/components/Icons/Illustrations/BedBunkExtra.tsx",
+    "./Icons/BedBunkIcon": "./lib/components/Icons/Illustrations/BedBunk.tsx",
+    "./Icons/BedGenericIcon": "./lib/components/Icons/Illustrations/BedGeneric.tsx",
     "./Icons/BedHotelIcon": "./lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx",
     "./Icons/BedIcon": "./lib/components/Icons/Illustrations/Bed.tsx",
+    "./Icons/BedKingIcon": "./lib/components/Icons/Illustrations/BedKing.tsx",
+    "./Icons/BedPullOutExtraIcon": "./lib/components/Icons/Illustrations/BedPullOutExtra.tsx",
+    "./Icons/BedPullOutIcon": "./lib/components/Icons/Illustrations/BedPullOut.tsx",
+    "./Icons/BedQueenIcon": "./lib/components/Icons/Illustrations/BedQueen.tsx",
+    "./Icons/BedSingleIcon": "./lib/components/Icons/Illustrations/BedSingle.tsx",
+    "./Icons/BedSofaExtraIcon": "./lib/components/Icons/Illustrations/BedSofaExtra.tsx",
+    "./Icons/BedSofaIcon": "./lib/components/Icons/Illustrations/BedSofa.tsx",
+    "./Icons/BedTwinIcon": "./lib/components/Icons/Illustrations/BedTwin.tsx",
+    "./Icons/BedWallExtraIcon": "./lib/components/Icons/Illustrations/BedWallExtra.tsx",
     "./Icons/BouquetIcon": "./lib/components/Icons/Nucleo/Benefits/bouquet.tsx",
     "./Icons/BowlingPinsIcon": "./lib/components/Icons/Nucleo/Experiences/bowling-pins.tsx",
+    "./Icons/BreakfastBuffetIcon": "./lib/components/Icons/Illustrations/BreakfastBuffet.tsx",
     "./Icons/BunkBedIcon": "./lib/components/Icons/Customised/Amenities_Facilities/MdiBunkBedOutline.tsx",
     "./Icons/ChipsIcon": "./lib/components/Icons/Nucleo/Food/chips-3.tsx",
     "./Icons/CoinIcon": "./lib/components/Icons/Illustrations/Coin.tsx",
@@ -77,22 +58,27 @@
     "./Icons/CutleryTwoIcon": "./lib/components/Icons/Illustrations/CutleryTwo.tsx",
     "./Icons/DiamondAddIcon": "./lib/components/Icons/Customised/Benefits/DiamondAdd.tsx",
     "./Icons/DiscountIcon": "./lib/components/Icons/Nucleo/Benefits/discount-2-2.tsx",
-    "./Icons/FilledDiscountIcon": "./lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx",
-    "./Icons/FacilityIcon": "./lib/components/Icons/FacilityIcon.tsx",
     "./Icons/DoorIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/door-2.tsx",
     "./Icons/DowntownCamperIcon": "./lib/components/Icons/Logos/DowntownCamper.tsx",
     "./Icons/FacebookIcon": "./lib/components/Icons/Customised/Socials/Facebook.tsx",
+    "./Icons/FacilityIcon": "./lib/components/Icons/FacilityIcon.tsx",
+    "./Icons/FilledDiscountIcon": "./lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx",
     "./Icons/FootStoolIcon": "./lib/components/Icons/Customised/Amenities_Facilities/FootStool.tsx",
     "./Icons/GiftOpenIcon": "./lib/components/Icons/Illustrations/GiftOpen.tsx",
     "./Icons/GrandHotelOsloIcon": "./lib/components/Icons/Logos/GrandHotelOslo.tsx",
-    "./Icons/HairdryerIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx",
     "./Icons/HairdresserIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/hairdresser-1.tsx",
+    "./Icons/HairdryerIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx",
     "./Icons/HandKeyIcon": "./lib/components/Icons/Illustrations/HandKey.tsx",
     "./Icons/HandSoapIcon": "./lib/components/Icons/Customised/Amenities_Facilities/HandSoap.tsx",
     "./Icons/HaymarketIcon": "./lib/components/Icons/Logos/Haymarket.tsx",
+    "./Icons/HotelLogoIcon": "./lib/components/Icons/Logos/index.tsx",
     "./Icons/HotelNightIcon": "./lib/components/Icons/Illustrations/HotelNight.tsx",
     "./Icons/HotelNorgeIcon": "./lib/components/Icons/Logos/HotelNorge.tsx",
     "./Icons/IceMachineIcon": "./lib/components/Icons/Customised/Amenities_Facilities/IceMachine.tsx",
+    "./Icons/IconByCSSelect": "./lib/components/Icons/IconByCSSelect.tsx",
+    "./Icons/IconByIconName": "./lib/components/Icons/IconByIconName.tsx",
+    "./Icons/iconName": "./lib/components/Icons/iconName.ts",
+    "./Icons/IllustrationByIconName": "./lib/components/Icons/IllustrationByIconName.ts",
     "./Icons/InstagramIcon": "./lib/components/Icons/Customised/Socials/Instagram.tsx",
     "./Icons/KidsIcon": "./lib/components/Icons/Illustrations/Kids.tsx",
     "./Icons/KidsMocktailIcon": "./lib/components/Icons/Illustrations/KidsMocktail.tsx",
@@ -104,22 +90,8 @@
     "./Icons/MinimizeIcon": "./lib/components/Icons/Customised/UI/Minimize.tsx",
     "./Icons/MirrorIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Mirror.tsx",
     "./Icons/MoneyHandIcon": "./lib/components/Icons/Illustrations/MoneyHand.tsx",
-    "./Icons/BedBunkExtraIcon": "./lib/components/Icons/Illustrations/BedBunkExtra.tsx",
-    "./Icons/BedGenericIcon": "./lib/components/Icons/Illustrations/BedGeneric.tsx",
-    "./Icons/BedBunkIcon": "./lib/components/Icons/Illustrations/BedBunk.tsx",
-    "./Icons/HotelLogoIcon": "./lib/components/Icons/Logos/index.tsx",
-    "./Icons/BedKingIcon": "./lib/components/Icons/Illustrations/BedKing.tsx",
-    "./Icons/BedQueenIcon": "./lib/components/Icons/Illustrations/BedQueen.tsx",
-    "./Icons/BedSofaIcon": "./lib/components/Icons/Illustrations/BedSofa.tsx",
-    "./Icons/BedSofaExtraIcon": "./lib/components/Icons/Illustrations/BedSofaExtra.tsx",
-    "./Icons/BedTwinIcon": "./lib/components/Icons/Illustrations/BedTwin.tsx",
-    "./Icons/BedWallExtraIcon": "./lib/components/Icons/Illustrations/BedWallExtra.tsx",
-    "./Icons/BreakfastBuffetIcon": "./lib/components/Icons/Illustrations/BreakfastBuffet.tsx",
-    "./Icons/NoBreakfastBuffetIcon": "./lib/components/Icons/Illustrations/NoBreakfastBuffet.tsx",
-    "./Icons/BedSingleIcon": "./lib/components/Icons/Illustrations/BedSingle.tsx",
-    "./Icons/BedPullOutIcon": "./lib/components/Icons/Illustrations/BedPullOut.tsx",
-    "./Icons/BedPullOutExtraIcon": "./lib/components/Icons/Illustrations/BedPullOutExtra.tsx",
     "./Icons/MovingBedsIcon": "./lib/components/Icons/Customised/Amenities_Facilities/MovingBeds.tsx",
+    "./Icons/NoBreakfastBuffetIcon": "./lib/components/Icons/Illustrations/NoBreakfastBuffet.tsx",
     "./Icons/PalmTreeIcon": "./lib/components/Icons/Nucleo/Experiences/palm-tree-2.tsx",
     "./Icons/PopcornIcon": "./lib/components/Icons/Nucleo/Food/popcorn-2.tsx",
     "./Icons/RecordPlayerIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/record-player-3.tsx",
@@ -139,6 +111,35 @@
     "./Icons/WardIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Ward.tsx",
     "./Icons/WindowNotAvailableIcon": "./lib/components/Icons/Customised/Amenities_Facilities/WindowNotAvailable.tsx",
     "./Icons/WoodFloorIcon": "./lib/components/Icons/Customised/Amenities_Facilities/WoodFloor.tsx",
+    "./Image": "./lib/components/Image.tsx",
+    "./ImageContainer": "./lib/components/ImageContainer/index.tsx",
+    "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
+    "./ImageGallery": "./lib/components/ImageGallery/index.tsx",
+    "./Input": "./lib/components/Input/index.tsx",
+    "./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
+    "./Label": "./lib/components/Label/index.tsx",
+    "./Lightbox": "./lib/components/Lightbox/index.tsx",
+    "./Link": "./lib/components/Link/index.tsx",
+    "./Modal": "./lib/components/Modal/index.tsx",
+    "./Modal/ModalContentWithActions": "./lib/components/Modal/ModalContentWithActions/index.tsx",
+    "./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
+    "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
+    "./OpeningHours": "./lib/components/OpeningHours/index.tsx",
+    "./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
+    "./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
+    "./Preamble": "./lib/components/Preamble/index.tsx",
+    "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
+    "./Select": "./lib/components/Select/index.tsx",
+    "./SidePeek": "./lib/components/SidePeek/index.tsx",
+    "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
+    "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
+    "./StaticMap": "./lib/components/StaticMap/index.tsx",
+    "./Subtitle": "./lib/components/Subtitle/index.tsx",
+    "./Switch": "./lib/components/Switch/index.tsx",
+    "./Table": "./lib/components/Table/index.tsx",
+    "./Title": "./lib/components/Title/index.tsx",
+    "./Tooltip": "./lib/components/Tooltip/index.tsx",
+    "./Typography": "./lib/components/Typography/index.tsx",
     "./style.css": "./lib/style.css",
     "./base.css": "./lib/base.css",
     "./globals.css": "./lib/globals.css",
@@ -198,7 +199,7 @@
     "@storybook/addon-links": "^9.1.2",
     "@storybook/addon-themes": "^9.1.2",
     "@storybook/addon-vitest": "^9.1.2",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/nextjs-vite": "^9.1.2",
     "@types/css-modules": "^1.0.5",
     "@types/node": "^20.17.17",
     "@types/react": "^19",