add link component

library/link.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { last } from "../helpers/last.js"
+import { ReacordElement } from "./element.js"
+import type { MessageOptions } from "./message"
+import { Node } from "./node.js"
+
+export type LinkProps = {
+  label?: string
+  children?: string
+  emoji?: string
+  disabled?: boolean
+  url: string
+}
+
+export function Link(props: LinkProps) {
+  return <ReacordElement props={props} createNode={() => new LinkNode(props)} />
+}
+
+class LinkNode extends Node<LinkProps> {
+  override modifyMessageOptions(options: MessageOptions): void {
+    let actionRow = last(options.actionRows)
+
+    if (
+      actionRow == undefined ||
+      actionRow.length >= 5 ||
+      actionRow[0]?.type === "select"
+    ) {
+      actionRow = []
+      options.actionRows.push(actionRow)
+    }
+
+    actionRow.push({
+      type: "link",
+      disabled: this.props.disabled,
+      emoji: this.props.emoji,
+      label: this.props.label || this.props.children,
+      url: this.props.url,
+    })
+  }
+}

library/main.ts

@@ -10,5 +10,6 @@ export * from "./embed/embed-image"
 export * from "./embed/embed-thumbnail"
 export * from "./embed/embed-title"
 export * from "./interaction"
+export * from "./link"
 export * from "./message"
 export * from "./reacord"

library/message.ts

@@ -3,7 +3,9 @@ import type { EmbedOptions } from "./embed/embed-options"
 export type MessageOptions = {
   content: string
   embeds: EmbedOptions[]
-  actionRows: Array<Array<MessageButtonOptions | MessageSelectOptions>>
+  actionRows: Array<
+    Array<MessageButtonOptions | MessageLinkOptions | MessageSelectOptions>
+  >
 }
 
 export type MessageButtonOptions = {
@@ -15,6 +17,14 @@ export type MessageButtonOptions = {
   emoji?: string
 }
 
+export type MessageLinkOptions = {
+  type: "link"
+  url: string
+  label?: string
+  emoji?: string
+  disabled?: boolean
+}
+
 export type MessageSelectOptions = {
   type: "select"
   customId: string

notes.md

@@ -16,7 +16,7 @@
   - [x] test
 - message components
   - [x] buttons
-  - [ ] links
+  - [x] links
   - [ ] select
   - [ ] action row
   - [x] button onClick

test/link.test.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import {
+  Link,
+  Reacord,
+  TestAdapter,
+  TestCommandInteraction,
+} from "../library/main"
+import { assertMessages } from "./assert-messages"
+
+const adapter = new TestAdapter()
+const reacord = new Reacord({ adapter })
+const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+
+test("link", async () => {
+  reply.render(
+    <>
+      <Link url="https://example.com/">link text</Link>
+      <Link label="link text" url="https://example.com/" />
+      <Link label="link text" url="https://example.com/" disabled />
+    </>,
+  )
+
+  await assertMessages(adapter, [
+    {
+      content: "",
+      embeds: [],
+      actionRows: [
+        [
+          {
+            type: "link",
+            url: "https://example.com/",
+            label: "link text",
+          },
+          {
+            type: "link",
+            url: "https://example.com/",
+            label: "link text",
+          },
+          {
+            type: "link",
+            url: "https://example.com/",
+            label: "link text",
+            disabled: true,
+          },
+        ],
+      ],
+    },
+  ])
+})