feat: json rich text editor, blocks, asides, general structure

types/components/current/asides/puff.ts

@@ -0,0 +1,3 @@
+import type { Puff } from "@/types/requests/puff"
+
+export type PuffProps = Puff

types/components/current/breadcrumbs.ts

@@ -0,0 +1,8 @@
+import type { Breadcrumb } from "@/types/requests/currentBlockPage"
+import type { Edges, Node } from "@/types/requests/utils/edges"
+
+export type BreadcrumbsProps = {
+  breadcrumbs: Edges<Breadcrumb>
+  parent?: Node<Breadcrumb>
+  title: string
+}

types/components/current/preamble.ts

@@ -0,0 +1,10 @@
+import type { BreadcrumbsProps } from "./breadcrumbs"
+import type { Preamble } from "@/types/requests/preamble"
+
+export type PreambleProps = {
+  breadcrumbs: BreadcrumbsProps["breadcrumbs"]
+  breadcrumbParent: BreadcrumbsProps["parent"]
+  breadcrumbTitle: BreadcrumbsProps["title"]
+  preamble?: Preamble
+  title: string
+}

types/components/current/subnavMobile.ts

@@ -0,0 +1,8 @@
+import type { Breadcrumb } from "@/types/requests/currentBlockPage"
+import type { Edges, Node } from "@/types/requests/utils/edges"
+
+export type SubnavMobileProps = {
+  breadcrumbs: Edges<Breadcrumb>
+  parent?: Node<Breadcrumb>
+  title: string
+}

types/components/jsontohtml.ts

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

types/image.ts

@@ -1,8 +1,13 @@
 export type Image = {
+  description?: string
   dimension: {
     height: number
     width: number
   }
+  metadata: JSON
+  system: {
+    uid: string
+  }
   title: string
   url: string
 }

types/requests/blocks/preamble.ts

@@ -1,17 +0,0 @@
-import type { SysAsset } from "../utils/asset"
-import type { Edges } from "../utils/edges"
-import type { ExternalLink } from "../utils/externalLink"
-import type { PageLink } from "../utils/pageLink"
-
-export type Preamble = {
-  preamble: {
-    text: {
-      json: JSON
-      embedded_itemsConnection: Edges<
-        | ExternalLink
-        | PageLink
-        | SysAsset
-      >
-    }
-  }
-}

types/requests/blocks/text.ts

@@ -1,14 +1,12 @@
-import type { RTERootObject } from "@/types/rte"
-import type { SysAsset } from "../utils/asset"
 import type { Edges } from "../utils/edges"
-import type { ExternalLink } from "../utils/externalLink"
-import type { PageLink } from "../utils/pageLink"
+import type { Embeds } from "../embeds"
+import type { RTEDocument } from "@/types/rte/node"
 
 export type Text = {
   text: {
     content: {
-      json: RTERootObject
-      embedded_itemsConnection: Edges<ExternalLink | PageLink | SysAsset>
+      embedded_itemsConnection: Edges<Embeds>
+      json: RTEDocument
     }
   }
 }

types/requests/currentBlockPage.ts

@@ -5,10 +5,12 @@ import type { PuffAside } from "./asides/puff"
 import type { Hero } from "./hero"
 import type { List } from "./blocks/list"
 import type { PuffBlock } from "./blocks/puff"
-import type { Preamble } from "./blocks/preamble"
+import type { Preamble } from "./preamble"
 import type { Text } from "./blocks/text"
 import type { AllRequestResponse } from "./utils/all"
 import type { AsideTypenameEnum, Typename } from "./utils/typename"
+import type { EmbedEnum } from "./utils/embeds"
+import type { Edges } from "./utils/edges"
 
 export type Asides =
   | Typename<Contact, AsideTypenameEnum.CurrentBlocksPageAsideContact>
@@ -16,14 +18,38 @@ export type Asides =
 
 export type Blocks =
   | Typename<List, BlocksTypenameEnum.CurrentBlocksPageBlocksList>
-  | Typename<Preamble, BlocksTypenameEnum.CurrentBlocksPageBlocksPreamble>
   | Typename<PuffBlock, BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs>
   | Typename<Text, BlocksTypenameEnum.CurrentBlocksPageBlocksText>
 
+interface SharedBreadcrumb {
+  breadcrumbs: {
+    title?: string
+  } | null
+  title: string
+  url: string
+}
+
+export interface CurrentBlocksPageBreadcrumb extends SharedBreadcrumb {
+  __typename: EmbedEnum.CurrentBlocksPage
+}
+
+export interface TempPageBreadcrumb extends SharedBreadcrumb {
+  __typename: EmbedEnum.TempPage
+}
+
+export type Breadcrumb = CurrentBlocksPageBreadcrumb | TempPageBreadcrumb
+
+export type Breadcrumbs = {
+  parentsConnection: Edges<Breadcrumb>
+  title: string
+}
+
 export type BlockPage = {
   aside: Asides[]
   blocks: Blocks[]
+  breadcrumbs: Breadcrumbs
   hero: Hero
+  preamble: Preamble
   title: string
   url: string
 }

types/requests/embeds.ts

@@ -0,0 +1,8 @@
+import type { SysAsset } from "./utils/asset"
+import type { ExternalLinkType } from "./utils/externalLink"
+import type { PageLinkType } from "./utils/pageLink"
+
+export type Embeds =
+  | ExternalLinkType
+  | PageLinkType
+  | SysAsset

types/requests/footer.ts

@@ -1,16 +1,11 @@
 import type { AllRequestResponse } from "./utils/all"
 import type { Edges } from "./utils/edges"
-import { Asset } from "./utils/asset"
-import { PageLink } from "./utils/pageLink"
-
-type AppDownloadLink = {
-  title: string
-  url: string
-}
+import type { Image } from "../image"
+import type { PageLink } from "./utils/pageLink"
 
 type AppDownload = {
   href: string
-  imageConnection: Edges<Asset>
+  imageConnection: Edges<Image>
 }
 
 export type InternalLink = {
@@ -52,7 +47,7 @@ export type Footer = {
     app_store: AppDownload
     google_play: AppDownload
   }
-  logoConnection: Edges<Asset>
+  logoConnection: Edges<Image>
   navigation: NavigationItem[]
   social_media: {
     title: string
@@ -62,7 +57,7 @@ export type Footer = {
   }
   trip_advisor: {
     title: string
-    logoConnection: Edges<Asset>
+    logoConnection: Edges<Image>
   }
 }
 

types/requests/preamble.ts

@@ -0,0 +1,10 @@
+import type { Edges } from "./utils/edges"
+import type { RTEDocument } from "../rte/node"
+import type { Embeds } from "./embeds"
+
+export type Preamble = {
+  text: {
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
+  }
+}

types/requests/puff.ts

@@ -1,13 +1,12 @@
+import type { Image } from "../image"
 import type { Edges } from "./utils/edges"
+import type { Embeds } from "./embeds"
 import type { ExternalLink } from "./utils/externalLink"
 import type { PageLink } from "./utils/pageLink"
-import type { Typename } from "./utils/typename"
+import type { RTEDocument } from "../rte/node"
 
 export type Puff = {
-  imageConnection: Edges<{
-    title: string
-    url: string
-  }>
+  imageConnection: Edges<Image>
   is_internal: boolean
   link: {
     href: string
@@ -15,12 +14,12 @@ export type Puff = {
   }
   link_text?: string
   pageConnection: Edges<ExternalLink | PageLink>
+  system: {
+    uid: string
+  }
   text: {
-    json: JSON
-    embedded_itemsConnection: Edges<Typename<{
-      title: string
-      url: string
-    }, "SysAsset">>
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
   }
   title: string
 }

types/requests/utils/asset.ts

@@ -1,8 +1,5 @@
+import type { EmbedEnum } from "./embeds"
+import type { Image } from "@/types/image"
 import type { Typename } from "./typename"
 
-export type Asset = {
-  title: string
-  url: string
-}
-
-export type SysAsset = Typename<Asset, "SysAsset">
+export type SysAsset = Typename<Image, EmbedEnum.SysAsset>

types/requests/utils/embeds.ts

@@ -0,0 +1,7 @@
+export enum EmbedEnum {
+  CurrentBlocksPage = "CurrentBlocksPage",
+  SysAsset = "SysAsset",
+  TempPage = "TempPage",
+}
+
+export type Embed = keyof typeof EmbedEnum

types/requests/utils/externalLink.ts

@@ -1,5 +1,12 @@
+import type { EmbedEnum } from "./embeds"
+import type { Typename } from "./typename"
+
 export type ExternalLink = {
-  __typename: "TempPage"
+  system: {
+    uid: string
+  }
   title: string
   url: string
 }
+
+export type ExternalLinkType = Typename<ExternalLink, EmbedEnum.TempPage>

types/requests/utils/pageLink.ts

@@ -1,5 +1,12 @@
+import type { EmbedEnum } from "./embeds"
+import type { Typename } from "./typename"
+
 export type PageLink = {
-  __typename: "CurrentBlocksPage"
+  system: {
+    uid: string
+  }
   title: string
   url: string
-}
+}
+
+export type PageLinkType = Typename<PageLink, EmbedEnum.CurrentBlocksPage>

types/requests/utils/typename.ts

@@ -1,8 +1,3 @@
-export const AsideTypenames = {
-  CurrentBlocksPageAsideContact: "CurrentBlocksPageAsideContact",
-  CurrentBlocksPageAsidePuff: "CurrentBlocksPageAsidePuff",
-}
-
 export enum AsideTypenameEnum {
   CurrentBlocksPageAsideContact = "CurrentBlocksPageAsideContact",
   CurrentBlocksPageAsidePuff = "CurrentBlocksPageAsidePuff",
@@ -10,15 +5,6 @@ export enum AsideTypenameEnum {
 
 export type AsideTypename = keyof typeof AsideTypenameEnum
 
-export const blocksTypenameEnum = {
-  CurrentBlocksPageBlocksList: "CurrentBlocksPageBlocksList",
-  CurrentBlocksPageBlocksPreamble: "CurrentBlocksPageBlocksPreamble",
-  CurrentBlocksPageBlocksPuffs: "CurrentBlocksPageBlocksPuffs",
-  CurrentBlocksPageBlocksText: "CurrentBlocksPageBlocksText",
-}
-
-export type BlocksTypename = keyof typeof blocksTypenameEnum
-
 export enum BlocksTypenameEnum {
   CurrentBlocksPageBlocksList = "CurrentBlocksPageBlocksList",
   CurrentBlocksPageBlocksPreamble = "CurrentBlocksPageBlocksPreamble",
@@ -26,6 +12,8 @@ export enum BlocksTypenameEnum {
   CurrentBlocksPageBlocksText = "CurrentBlocksPageBlocksText",
 }
 
+export type BlocksTypename = keyof typeof BlocksTypenameEnum
+
 export type Typename<T, K> = T & {
   __typename: K
 }

types/rte.ts

@@ -1,58 +0,0 @@
-export const rteType = {
-  asset: "asset",
-  p: "p",
-  reference: "reference",
-}
-
-export enum RTETypeEnum {
-  asset = "asset",
-  p = "p",
-  reference = "reference",
-}
-
-export type RTEType = keyof typeof rteType
-
-export type RTEText = {
-  text: string
-}
-
-export type RTEAssetAttrs = {
-  "alt": string
-  "asset-alt": string
-  "asset-link": string
-  "asset-name": string
-  "asset-type": "image/png" | "image/jpg" | "image/jpeg"
-  "asset-uid": string
-  "display-type": "display"
-  "class-name": string
-  "content-type-uid": "sys_assets"
-  "inline": false
-  "type": RTETypeEnum.asset
-}
-
-type RTEBaseObject<T> = {
-  type: T
-  uid: string
-}
-
-type AssetReferenceObject = RTEBaseObject<RTETypeEnum.reference> & {
-  attrs: RTEAssetAttrs
-  children: RTEText[]
-}
-
-export type RTEObject =
-  | AssetReferenceObject
-  | {
-    attrs: Record<string, any>
-    children: (RTEObject | RTEText)[]
-    type: RTEType
-    uid: string
-  }
-
-export type RTERootObject = {
-  attrs: RTEAssetAttrs | Record<string, any>
-  children: RTEObject[]
-  uid: string
-  type: "doc"
-  _version: number
-}

types/rte/attrs.ts

@@ -0,0 +1,38 @@
+import { RTEItemTypeEnum } from "./enums"
+import type { EmbedTypesEnum, RTEItemType } from "./enums"
+import type { Lang } from "../lang"
+
+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
+}

types/rte/enums.ts

@@ -0,0 +1,48 @@
+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",
+}
+
+export type RTEType = keyof typeof RTETypeEnum
+
+export enum RTEItemTypeEnum {
+  asset = "asset",
+  entry = "entry",
+}
+
+export type RTEItemType = keyof typeof RTEItemTypeEnum

types/rte/node.ts

@@ -0,0 +1,71 @@
+import { RTETypeEnum } from "./enums"
+import type { Attributes, RTEAnchorAttrs, RTEAssetAttrs, RTELinkAttrs } from "./attrs"
+import type { EmbedByUid } from "../components/jsontohtml"
+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 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
+
+export type RTEReferenceNode = RTEDefaultNode | 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/rte/option.ts

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