feat(SW-66, SW-348): search functionality and ui

types/transitionTypes/jsontohtml.ts

@@ -0,0 +1,12 @@
+import type { Node } from "@/types/requests/utils/edges"
+import type { Embeds } from "@/types/trpc/routers/utils/embeds"
+import type { RTENode } from "./rte/node"
+import type { RenderOptions } from "./rte/option"
+
+export type JsonToHtmlProps = {
+  embeds: Node<Embeds>[]
+  nodes: RTENode[]
+  renderOptions?: RenderOptions
+}
+
+export type EmbedByUid = Record<string, Node<Embeds>>

types/transitionTypes/rte/attrs.ts

@@ -0,0 +1,46 @@
+import { ImageVaultAsset } from "../../components/imageVault"
+import { RTEItemTypeEnum } from "./enums"
+
+import type { Lang } from "@/constants/languages"
+import type { EmbedTypesEnum, RTEItemType } from "./enums"
+
+export interface Attributes {
+  [key: string]: any
+  "class-name"?: string
+  type: RTEItemType
+}
+
+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, ImageVaultAsset {
+  height: string
+  style: string[]
+  width: string
+}

types/transitionTypes/rte/enums.ts

@@ -0,0 +1,64 @@
+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",
+  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",
+}

types/transitionTypes/rte/node.ts

@@ -0,0 +1,97 @@
+import { RTETypeEnum } from "./enums"
+
+import type { EmbedByUid } from "../jsontohtml"
+import type {
+  Attributes,
+  RTEAnchorAttrs,
+  RTEAssetAttrs,
+  RTEImageVaultAttrs,
+  RTELinkAttrs,
+} from "./attrs"
+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

types/transitionTypes/rte/option.ts

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