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/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: [],
+  },
+}