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

import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect } from 'storybook/test'
import { JsonToHtml } from './JsonToHtml'
import { RTETypeEnum } from './types/rte/enums'
import { RTEImageVaultNode, RTENode } from './types/rte/node'

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',
    fileName: 'Scandic_Family_Breakfast_2.jpg',
    imageVaultId: 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: [],
  },
}