feat: improve nodes and marks TS types, update demo typings

Signed-off-by: Edvinas Jurele <edvinas.j@nordsec.com>
NordSecurity · Sep 5, 2023 · 282a146 · 282a146
1 parent f535e5b
commit 282a146
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 68 deletions.
diff --git a/demo/src/components/CodeBlock.astro b/demo/src/components/CodeBlock.astro
@@ -1,4 +1,7 @@
 ---
+export type Props = {
+  syntax: string;
+};
 const { syntax } = Astro.props;
 ---
 

diff --git a/demo/src/components/Link.astro b/demo/src/components/Link.astro
@@ -1,13 +1,15 @@
 ---
-export type Props = {
-  link: {
-    href: string;
-    target?: "_blank" | "_self";
-  };
-};
+import type { HTMLAttributes } from "astro/types";
+import type { Link } from "storyblok-rich-text-astro-renderer";
 
-const { link, ...props } = Astro.props;
-const { href, target } = link;
+export interface Props extends HTMLAttributes<"a"> {
+  link: Link["attrs"];
+}
+
+const {
+  link: { href, target },
+  ...props
+} = Astro.props;
 ---
 
 <a {href} {target} {...props}><slot /></a>
diff --git a/demo/src/components/Picture.astro b/demo/src/components/Picture.astro
@@ -1,4 +1,8 @@
 ---
+import type { Image } from "storyblok-rich-text-astro-renderer";
+
+export type Props = Image["attrs"];
+
 const { src, alt, title } = Astro.props;
 
 /*

diff --git a/demo/src/components/Styled.astro b/demo/src/components/Styled.astro
@@ -1,4 +1,8 @@
 ---
+import type { Styled } from "storyblok-rich-text-astro-renderer";
+
+export type Props = Styled["attrs"];
+
 const { class: className } = Astro.props;
 ---
 

diff --git a/lib/src/types.ts b/lib/src/types.ts
@@ -8,37 +8,37 @@ export type ComponentNode = {
   content?: string | ComponentNode[];
 };
 
-type ResponseSchemaAttrsFn = ({ attrs }) => ComponentNode;
-type ResponseSchemaFn = () => ComponentNode;
+type ResolverAttrs<Attrs> = ({ attrs }: { attrs: Attrs }) => ComponentNode;
+type Resolver = () => ComponentNode;
 
 export type Schema = {
   nodes?: {
-    heading?: ResponseSchemaAttrsFn;
-    paragraph?: ResponseSchemaFn;
-    text?: ResponseSchemaFn;
-    hard_break?: ResponseSchemaFn;
-    bullet_list?: ResponseSchemaFn;
-    ordered_list?: ResponseSchemaAttrsFn;
-    list_item?: ResponseSchemaFn;
-    horizontal_rule?: ResponseSchemaFn;
-    blockquote?: ResponseSchemaFn;
-    image?: ResponseSchemaAttrsFn;
-    code_block?: ResponseSchemaAttrsFn;
-    emoji?: ResponseSchemaAttrsFn;
+    heading?: ResolverAttrs<Heading["attrs"]>;
+    paragraph?: Resolver;
+    text?: Resolver;
+    hard_break?: Resolver;
+    bullet_list?: Resolver;
+    ordered_list?: ResolverAttrs<OrderedList["attrs"]>;
+    list_item?: Resolver;
+    horizontal_rule?: Resolver;
+    blockquote?: Resolver;
+    image?: ResolverAttrs<Image["attrs"]>;
+    code_block?: ResolverAttrs<CodeBlock["attrs"]>;
+    emoji?: ResolverAttrs<Emoji["attrs"]>;
   };
   marks?: {
-    link?: ResponseSchemaAttrsFn;
-    bold?: ResponseSchemaFn;
-    underline?: ResponseSchemaFn;
-    italic?: ResponseSchemaFn;
-    styled?: ResponseSchemaAttrsFn;
-    strike?: ResponseSchemaFn;
-    superscript?: ResponseSchemaFn;
-    subscript?: ResponseSchemaFn;
-    code?: ResponseSchemaFn;
-    anchor?: ResponseSchemaAttrsFn;
-    textStyle?: ResponseSchemaAttrsFn;
-    highlight?: ResponseSchemaAttrsFn;
+    link?: ResolverAttrs<Link["attrs"]>;
+    bold?: Resolver;
+    underline?: Resolver;
+    italic?: Resolver;
+    styled?: ResolverAttrs<Styled["attrs"]>;
+    strike?: Resolver;
+    superscript?: Resolver;
+    subscript?: Resolver;
+    code?: Resolver;
+    anchor?: ResolverAttrs<Anchor["attrs"]>;
+    textStyle?: ResolverAttrs<TextStyle["attrs"]>;
+    highlight?: ResolverAttrs<Highlight["attrs"]>;
   };
 };
 
@@ -47,6 +47,46 @@ export type Options = {
   resolver?: (blok: SbBlok) => ComponentNode;
 };
 
+export type Anchor = {
+  type: "anchor";
+  attrs: {
+    id: string;
+  };
+};
+
+export type Styled = {
+  type: "styled";
+  attrs: {
+    class: string;
+  };
+};
+
+export type TextStyle = {
+  type: "textStyle";
+  attrs: {
+    color: string;
+  };
+};
+
+export type Highlight = {
+  type: "highlight";
+  attrs: {
+    color: string;
+  };
+};
+
+export type Link = {
+  type: "link";
+  attrs: {
+    href: string;
+    uuid?: Nullable<string>;
+    anchor?: Nullable<string>;
+    custom?: Record<string, unknown>;
+    target: "_self" | "_blank";
+    linktype: "url" | "story" | "email" | "asset";
+  };
+};
+
 export type Mark =
   | {
       type:
@@ -58,35 +98,11 @@ export type Mark =
         | "subscript"
         | "code";
     }
-  | {
-      type: "anchor";
-      attrs: {
-        id: string;
-      };
-    }
-  | {
-      type: "styled";
-      attrs: {
-        class: string;
-      };
-    }
-  | {
-      type: "textStyle" | "highlight";
-      attrs: {
-        color: string;
-      };
-    }
-  | {
-      type: "link";
-      attrs: {
-        href: string;
-        uuid?: Nullable<string>;
-        anchor?: Nullable<string>;
-        custom?: Record<string, unknown>;
-        target: "_self" | "_blank";
-        linktype: "url" | "story" | "email" | "asset";
-      };
-    };
+  | Anchor
+  | Styled
+  | TextStyle
+  | Highlight
+  | Link;
 
 type Break = { type: "hard_break" };
 
@@ -103,7 +119,7 @@ type Paragraph = {
   content?: Array<Text | Break | ListItem | Image | Emoji>;
 };
 
-type Heading = {
+export type Heading = {
   type: "heading";
   attrs: {
     level: 1 | 2 | 3 | 4 | 5 | 6;
@@ -119,7 +135,7 @@ type Blok = {
   };
 };
 
-type Image = {
+export type Image = {
   type: "image";
   attrs: {
     id: number;
@@ -132,7 +148,7 @@ type Image = {
   };
 };
 
-type Emoji = {
+export type Emoji = {
   type: "emoji";
   attrs: {
     name: string;
@@ -167,15 +183,15 @@ type BulletList = {
   content?: Array<ListItem>;
 };
 
-type OrderedList = {
+export type OrderedList = {
   type: "ordered_list";
   attrs: {
     order: number;
   };
   content?: Array<ListItem>;
 };
 
-type CodeBlock = {
+export type CodeBlock = {
   type: "code_block";
   attrs: {
     class: string;