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: "Core 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: [],
  },
}