first attempt at files api

.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@2.1.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

.eslintrc.cjs

@@ -13,7 +13,6 @@ module.exports = {
   ],
   parserOptions: {
     project: require.resolve("./tsconfig.base.json"),
-    extraFileExtensions: [".astro"],
   },
   overrides: [
     {
@@ -22,17 +21,5 @@ module.exports = {
         project: require.resolve("./packages/website/cypress/tsconfig.json"),
       },
     },
-    {
-      files: ["*.astro"],
-      parser: "astro-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser",
-      },
-      rules: {
-        "react/no-unknown-property": "off",
-        "react/jsx-key": "off",
-        "react/jsx-no-undef": "off",
-      },
-    },
   ],
 }

.github/workflows/main.yml

@@ -10,10 +10,6 @@ env:
   TEST_CHANNEL_ID: ${{ secrets.TEST_CHANNEL_ID }}
   TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   run-commands:
     strategy:
@@ -23,31 +19,23 @@ jobs:
           # if these run in the same process, it dies,
           # so we test them separate
           - name: test reacord
-            run: pnpm -C packages/reacord test
-          # - name: test website
-          #   run: pnpm -C packages/website test
+            run: pnpm test -C packages/reacord
+          - name: test website
+            run: pnpm test -C packages/website
           - name: build
-            run: pnpm --recursive run build
+            run: pnpm build --recursive
           - name: lint
-            run: pnpm run lint
+            run: pnpm lint
           - name: typecheck
-            run: pnpm --recursive run typecheck
+            run: pnpm typecheck --parallel
     name: ${{ matrix.command.name }}
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          version: 7.13.4
-
-      - name: setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: pnpm
-
+          # https://github.com/actions/setup-node#supported-version-syntax
+          node-version: "16"
+      - run: npm i -g pnpm
       - run: pnpm install --frozen-lockfile
       - run: ${{ matrix.command.run }}

.github/workflows/release.yml

@@ -1,40 +0,0 @@
-# https://pnpm.io/using-changesets
-name: release
-
-on:
-  push:
-    branches:
-      - main
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: release
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 7.13.4
-
-      - name: setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: pnpm
-
-      - name: install deps
-        run: pnpm install --frozen-lockfile
-
-      - name: changesets release
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: pnpm run release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -4,9 +4,6 @@ node_modules
 coverage
 .env
 *.code-workspace
-.pnpm-debug.log
 
 build
 .cache
-
-.vercel

.prettierrc.cjs

@@ -1,14 +0,0 @@
-const base = require("@itsmapleleaf/configs/prettier")
-
-module.exports = {
-  ...base,
-  plugins: [require.resolve("prettier-plugin-astro")],
-  overrides: [
-    {
-      files: "*.astro",
-      options: {
-        parser: "astro",
-      },
-    },
-  ],
-}

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:lts-slim
+
+ENV CYPRESS_INSTALL_BINARY=0
+
+WORKDIR /app
+
+COPY / ./
+RUN ls -R
+
+RUN npm install -g pnpm
+RUN pnpm install --unsafe-perm --frozen-lockfile
+RUN pnpm run build -C packages/website
+
+ENV NODE_ENV=production
+CMD [ "pnpm", "-C", "packages/website", "start" ]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 itsMapleLeaf
+Copyright (c) 2022  itsMapleLeaf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,26 +1,20 @@
 {
-  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write .",
-    "build": "pnpm -r run build",
-    "start": "pnpm -C packages/website run start",
-    "release": "pnpm -r run build && changeset publish"
+    "format": "prettier --write ."
   },
   "devDependencies": {
-    "@changesets/cli": "^2.25.0",
-    "@itsmapleleaf/configs": "^1.1.7",
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@types/eslint": "^8.4.6",
-    "astro-eslint-parser": "^0.12.0",
-    "eslint": "^8.36.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-astro": "^0.8.0",
-    "typescript": "^4.8.4"
+    "@itsmapleleaf/configs": "^1.1.3",
+    "@rushstack/eslint-patch": "^1.1.3",
+    "@types/eslint": "^8.4.1",
+    "eslint": "^8.14.0",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.3"
   },
   "resolutions": {
     "esbuild": "latest"
-  }
+  },
+  "prettier": "@itsmapleleaf/configs/prettier"
 }

packages/helpers/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@reacord/helpers",
-  "version": "0.0.0",
-  "private": true,
-  "dependencies": {
-    "@types/lodash-es": "^4.17.6",
-    "lodash-es": "^4.17.21",
-    "type-fest": "^2.17.0",
-    "vitest": "^0.18.1"
-  }
-}

packages/reacord/CHANGELOG.md

@@ -1,23 +0,0 @@
-# reacord
-
-## 0.5.2
-
-### Patch Changes
-
-- 9813a01: import react-reconciler/constants.js for esm
-
-  ESM projects which tried to import reacord would fail due to the lack of .js on this import
-
-## 0.5.1
-
-### Patch Changes
-
-- 72f4a4a: upgrade dependencies and remove some unneeded
-- 7536bde: add types in exports to work with TS nodenext
-- e335165: fix links
-
-## 0.5.0
-
-### Minor Changes
-
-- aa65da5: allow JSX in more places

packages/reacord/helpers/prune-nullish-values.test.ts

@@ -1,6 +1,5 @@
 import { expect, test } from "vitest"
-import type { PruneNullishValues } from "./prune-nullish-values"
-import { pruneNullishValues } from "./prune-nullish-values"
+import { PruneNullishValues, pruneNullishValues } from "./prune-nullish-values"
 
 test("pruneNullishValues", () => {
   type InputType = {
@@ -15,7 +14,6 @@ test("pruneNullishValues", () => {
 
   const input: InputType = {
     a: "a",
-    // eslint-disable-next-line unicorn/no-null
     b: null,
     c: undefined,
     d: {

packages/reacord/helpers/prune-nullish-values.ts

@@ -10,7 +10,7 @@ export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
   }
 
   const result: any = {}
-  for (const [key, value] of Object.entries(input as any)) {
+  for (const [key, value] of Object.entries(input)) {
     if (value != undefined) {
       result[key] = pruneNullishValues(value)
     }

packages/reacord/helpers/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unused-modules */
 export type MaybePromise<T> = T | Promise<T>
 
 export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>

packages/reacord/helpers/wait-for.ts

@@ -1,4 +1,4 @@
-import { setTimeout } from "node:timers/promises"
+import { setTimeout } from "timers/promises"
 
 const maxTime = 1000
 

packages/reacord/library/core/components/button-shared-props.ts

@@ -1,12 +1,10 @@
-import type { ReactNode } from "react"
-
 /**
  * Common props between button-like components
  * @category Button
  */
 export type ButtonSharedProps = {
   /** The text on the button. Rich formatting (markdown) is not supported here. */
-  label?: ReactNode
+  label?: string
 
   /** When true, the button will be slightly faded, and cannot be clicked. */
   disabled?: boolean

packages/reacord/library/core/components/button.tsx

@@ -1,4 +1,4 @@
-import { randomUUID } from "node:crypto"
+import { nanoid } from "nanoid"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
@@ -34,22 +34,12 @@ export type ButtonClickEvent = ComponentEvent
  */
 export function Button(props: ButtonProps) {
   return (
-    <ReacordElement props={props} createNode={() => new ButtonNode(props)}>
-      <ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
-        {props.label}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)} />
   )
 }
 
 class ButtonNode extends Node<ButtonProps> {
-  private customId = randomUUID()
-
-  // this has text children, but buttons themselves shouldn't yield text
-  // eslint-disable-next-line class-methods-use-this
-  override get text() {
-    return ""
-  }
+  private customId = nanoid()
 
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
@@ -58,7 +48,7 @@ class ButtonNode extends Node<ButtonProps> {
       style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.children.findType(ButtonLabelNode)?.text,
+      label: this.props.label,
     })
   }
 
@@ -73,5 +63,3 @@ class ButtonNode extends Node<ButtonProps> {
     return false
   }
 }
-
-class ButtonLabelNode extends Node<{}> {}

packages/reacord/library/core/components/embed-author.tsx

@@ -1,7 +1,5 @@
-import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -9,8 +7,8 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedAuthorProps = {
-  name?: ReactNode
-  children?: ReactNode
+  name?: string
+  children?: string
   url?: string
   iconUrl?: string
 }
@@ -20,22 +18,19 @@ export type EmbedAuthorProps = {
  */
 export function EmbedAuthor(props: EmbedAuthorProps) {
   return (
-    <ReacordElement props={props} createNode={() => new EmbedAuthorNode(props)}>
-      <ReacordElement props={{}} createNode={() => new AuthorTextNode({})}>
-        {props.name ?? props.children}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedAuthorNode(props)}
+    />
   )
 }
 
 class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.author = {
-      name: this.children.findType(AuthorTextNode)?.text ?? "",
+      name: this.props.name ?? this.props.children ?? "",
       url: this.props.url,
       icon_url: this.props.iconUrl,
     }
   }
 }
-
-class AuthorTextNode extends Node<{}> {}

packages/reacord/library/core/components/embed-field.tsx

@@ -1,7 +1,5 @@
-import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -9,10 +7,10 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFieldProps = {
-  name: ReactNode
-  value?: ReactNode
+  name: string
+  value?: string
   inline?: boolean
-  children?: ReactNode
+  children?: string
 }
 
 /**
@@ -20,14 +18,10 @@ export type EmbedFieldProps = {
  */
 export function EmbedField(props: EmbedFieldProps) {
   return (
-    <ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
-      <ReacordElement props={{}} createNode={() => new FieldNameNode({})}>
-        {props.name}
-      </ReacordElement>
-      <ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
-        {props.value || props.children}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedFieldNode(props)}
+    />
   )
 }
 
@@ -35,12 +29,9 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.fields ??= []
     options.fields.push({
-      name: this.children.findType(FieldNameNode)?.text ?? "",
-      value: this.children.findType(FieldValueNode)?.text ?? "",
+      name: this.props.name,
+      value: this.props.value ?? this.props.children ?? "",
       inline: this.props.inline,
     })
   }
 }
-
-class FieldNameNode extends Node<{}> {}
-class FieldValueNode extends Node<{}> {}

packages/reacord/library/core/components/embed-footer.tsx

@@ -1,7 +1,5 @@
-import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -9,8 +7,8 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFooterProps = {
-  text?: ReactNode
-  children?: ReactNode
+  text?: string
+  children?: string
   iconUrl?: string
   timestamp?: string | number | Date
 }
@@ -18,22 +16,19 @@ export type EmbedFooterProps = {
 /**
  * @category Embed
  */
-export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
+export function EmbedFooter(props: EmbedFooterProps) {
   return (
-    <ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
-      <ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
-        {text ?? children}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedFooterNode(props)}
+    />
   )
 }
 
-class EmbedFooterNode extends EmbedChildNode<
-  Omit<EmbedFooterProps, "text" | "children">
-> {
+class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.footer = {
-      text: this.children.findType(FooterTextNode)?.text ?? "",
+      text: this.props.text ?? this.props.children ?? "",
       icon_url: this.props.iconUrl,
     }
     options.timestamp = this.props.timestamp
@@ -41,5 +36,3 @@ class EmbedFooterNode extends EmbedChildNode<
       : undefined
   }
 }
-
-class FooterTextNode extends Node<{}> {}

packages/reacord/library/core/components/embed-title.tsx

@@ -1,7 +1,5 @@
-import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -9,28 +7,25 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedTitleProps = {
-  children: ReactNode
+  children: string
   url?: string
 }
 
 /**
  * @category Embed
  */
-export function EmbedTitle({ children, ...props }: EmbedTitleProps) {
+export function EmbedTitle(props: EmbedTitleProps) {
   return (
-    <ReacordElement props={props} createNode={() => new EmbedTitleNode(props)}>
-      <ReacordElement props={{}} createNode={() => new TitleTextNode({})}>
-        {children}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedTitleNode(props)}
+    />
   )
 }
 
-class EmbedTitleNode extends EmbedChildNode<Omit<EmbedTitleProps, "children">> {
+class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
-    options.title = this.children.findType(TitleTextNode)?.text ?? ""
+    options.title = this.props.children
     options.url = this.props.url
   }
 }
-
-class TitleTextNode extends Node<{}> {}

packages/reacord/library/core/components/embed.tsx

@@ -1,6 +1,6 @@
-import { snakeCaseDeep } from "@reacord/helpers/convert-object-property-case"
-import { omit } from "@reacord/helpers/omit"
 import React from "react"
+import { snakeCaseDeep } from "../../../helpers/convert-object-property-case"
+import { omit } from "../../../helpers/omit"
 import { ReacordElement } from "../../internal/element.js"
 import type { MessageOptions } from "../../internal/message"
 import { Node } from "../../internal/node.js"

packages/reacord/library/core/components/link.tsx

@@ -18,26 +18,18 @@ export type LinkProps = ButtonSharedProps & {
 /**
  * @category Link
  */
-export function Link({ label, children, ...props }: LinkProps) {
-  return (
-    <ReacordElement props={props} createNode={() => new LinkNode(props)}>
-      <ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
-        {label || children}
-      </ReacordElement>
-    </ReacordElement>
-  )
+export function Link(props: LinkProps) {
+  return <ReacordElement props={props} createNode={() => new LinkNode(props)} />
 }
 
-class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
+class LinkNode extends Node<LinkProps> {
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
       type: "link",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.children.findType(LinkTextNode)?.text,
+      label: this.props.label || this.props.children,
       url: this.props.url,
     })
   }
 }
-
-class LinkTextNode extends Node<{}> {}

packages/reacord/library/core/components/option-node.ts

@@ -2,18 +2,13 @@ import type { MessageSelectOptionOptions } from "../../internal/message"
 import { Node } from "../../internal/node"
 import type { OptionProps } from "./option"
 
-export class OptionNode extends Node<
-  Omit<OptionProps, "children" | "label" | "description">
-> {
+export class OptionNode extends Node<OptionProps> {
   get options(): MessageSelectOptionOptions {
     return {
-      label: this.children.findType(OptionLabelNode)?.text ?? this.props.value,
+      label: this.props.children || this.props.label || this.props.value,
       value: this.props.value,
-      description: this.children.findType(OptionDescriptionNode)?.text,
+      description: this.props.description,
       emoji: this.props.emoji,
     }
   }
 }
-
-export class OptionLabelNode extends Node<{}> {}
-export class OptionDescriptionNode extends Node<{}> {}

packages/reacord/library/core/components/option.tsx

@@ -1,11 +1,6 @@
-import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element"
-import {
-  OptionDescriptionNode,
-  OptionLabelNode,
-  OptionNode,
-} from "./option-node"
+import { OptionNode } from "./option-node"
 
 /**
  * @category Select
@@ -14,11 +9,11 @@ export type OptionProps = {
   /** The internal value of this option */
   value: string
   /** The text shown to the user. This takes priority over `children` */
-  label?: ReactNode
+  label?: string
   /** The text shown to the user */
-  children?: ReactNode
+  children?: string
   /** Description for the option, shown to the user */
-  description?: ReactNode
+  description?: string
 
   /**
    * Renders an emoji to the left of the text.
@@ -36,27 +31,8 @@ export type OptionProps = {
 /**
  * @category Select
  */
-export function Option({
-  label,
-  children,
-  description,
-  ...props
-}: OptionProps) {
+export function Option(props: OptionProps) {
   return (
-    <ReacordElement props={props} createNode={() => new OptionNode(props)}>
-      {(label !== undefined || children !== undefined) && (
-        <ReacordElement props={{}} createNode={() => new OptionLabelNode({})}>
-          {label || children}
-        </ReacordElement>
-      )}
-      {description !== undefined && (
-        <ReacordElement
-          props={{}}
-          createNode={() => new OptionDescriptionNode({})}
-        >
-          {description}
-        </ReacordElement>
-      )}
-    </ReacordElement>
+    <ReacordElement props={props} createNode={() => new OptionNode(props)} />
   )
 }

packages/reacord/library/core/components/select.tsx

@@ -1,7 +1,7 @@
-import { isInstanceOf } from "@reacord/helpers/is-instance-of"
-import { randomUUID } from "node:crypto"
+import { nanoid } from "nanoid"
 import type { ReactNode } from "react"
 import React from "react"
+import { isInstanceOf } from "../../../helpers/is-instance-of"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
 import type {
@@ -89,7 +89,7 @@ export function Select(props: SelectProps) {
 }
 
 class SelectNode extends Node<SelectProps> {
-  readonly customId = randomUUID()
+  readonly customId = nanoid()
 
   override modifyMessageOptions(message: MessageOptions): void {
     const actionRow: ActionRow = []

packages/reacord/library/core/file.ts

@@ -0,0 +1,7 @@
+import { Readable } from "node:stream"
+
+export type ReacordFile = {
+  name?: string
+  description?: string
+  data: Buffer | Readable | string
+}

packages/reacord/library/core/instance-context.tsx

@@ -1,5 +1,5 @@
-import { raise } from "@reacord/helpers/raise"
 import * as React from "react"
+import { raise } from "../../helpers/raise"
 import type { ReacordInstance } from "./instance"
 
 const Context = React.createContext<ReacordInstance | undefined>(undefined)

packages/reacord/library/core/instance.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import { ReacordFile } from "./file"
 
 /**
  * Represents an interactive message, which can later be replaced or deleted.
@@ -16,4 +17,7 @@ export type ReacordInstance = {
    * This prevents it from listening to user interactions.
    */
   deactivate: () => void
+
+  /** Attach a file to the message for this instance */
+  attach: (file: ReacordFile) => void
 }

packages/reacord/library/core/reacord-discord-js.ts

@@ -1,16 +1,13 @@
 /* eslint-disable class-methods-use-this */
-import { pick } from "@reacord/helpers/pick"
-import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
-import { raise } from "@reacord/helpers/raise"
 import * as Discord from "discord.js"
 import type { ReactNode } from "react"
 import type { Except } from "type-fest"
+import { pick } from "../../helpers/pick"
+import { pruneNullishValues } from "../../helpers/prune-nullish-values"
+import { raise } from "../../helpers/raise"
+import { toUpper } from "../../helpers/to-upper"
 import type { ComponentInteraction } from "../internal/interaction"
-import type {
-  Message,
-  MessageButtonOptions,
-  MessageOptions,
-} from "../internal/message"
+import type { Message, MessageOptions } from "../internal/message"
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
@@ -33,7 +30,7 @@ export class ReacordDiscordJs extends Reacord {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
-      if (interaction.isButton() || interaction.isSelectMenu()) {
+      if (interaction.isMessageComponent()) {
         this.handleComponentInteraction(
           this.createReacordComponentInteraction(interaction),
         )
@@ -91,7 +88,7 @@ export class ReacordDiscordJs extends Reacord {
           (await this.client.channels.fetch(channelId)) ??
           raise(`Channel ${channelId} not found`)
 
-        if (!channel.isTextBased()) {
+        if (!channel.isText()) {
           raise(`Channel ${channelId} is not a text channel`)
         }
 
@@ -207,7 +204,7 @@ export class ReacordDiscordJs extends Reacord {
               ]),
             ),
             displayName: interaction.member.displayName,
-            roles: interaction.member.roles.cache.map((role) => role.id),
+            roles: [...interaction.member.roles.cache.map((role) => role.id)],
             joinedAt: interaction.member.joinedAt?.toISOString(),
             premiumSince: interaction.member.premiumSince?.toISOString(),
             communicationDisabledUntil:
@@ -304,6 +301,15 @@ function createReacordMessage(message: Discord.Message): Message {
     delete: async () => {
       await message.delete()
     },
+    updateFiles: async (files) => {
+      await message.edit({
+        files: files.map(({ name, description, data }) => ({
+          name,
+          description,
+          attachment: data,
+        })),
+      })
+    },
   }
 }
 
@@ -313,6 +319,10 @@ function createEphemeralReacordMessage(): Message {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
+    updateFiles: () => {
+      console.warn("Ephemeral messages can't be edited")
+      return Promise.resolve()
+    },
     delete: () => {
       console.warn("Ephemeral messages can't be deleted")
       return Promise.resolve()
@@ -320,45 +330,25 @@ function createEphemeralReacordMessage(): Message {
   }
 }
 
-function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
-  const styleMap = {
-    primary: Discord.ButtonStyle.Primary,
-    secondary: Discord.ButtonStyle.Secondary,
-    success: Discord.ButtonStyle.Success,
-    danger: Discord.ButtonStyle.Danger,
-  } as const
-
-  return styleMap[style ?? "secondary"]
-}
-
 // TODO: this could be a part of the core library,
 // and also handle some edge cases, e.g. empty messages
-function getDiscordMessageOptions(reacordOptions: MessageOptions) {
-  const options = {
+function getDiscordMessageOptions(
+  reacordOptions: MessageOptions,
+): Discord.MessageOptions {
+  const options: Discord.MessageOptions = {
     // eslint-disable-next-line unicorn/no-null
     content: reacordOptions.content || null,
     embeds: reacordOptions.embeds,
     components: reacordOptions.actionRows.map((row) => ({
-      type: Discord.ComponentType.ActionRow,
+      type: "ACTION_ROW",
       components: row.map(
-        (component): Discord.MessageActionRowComponentData => {
+        (component): Discord.MessageActionRowComponentOptions => {
           if (component.type === "button") {
             return {
-              type: Discord.ComponentType.Button,
+              type: "BUTTON",
               customId: component.customId,
               label: component.label ?? "",
-              style: convertButtonStyleToEnum(component.style),
-              disabled: component.disabled,
-              emoji: component.emoji,
-            }
-          }
-
-          if (component.type === "link") {
-            return {
-              type: Discord.ComponentType.Button,
-              url: component.url,
-              label: component.label ?? "",
-              style: Discord.ButtonStyle.Link,
+              style: toUpper(component.style ?? "secondary"),
               disabled: component.disabled,
               emoji: component.emoji,
             }
@@ -367,7 +357,7 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
           if (component.type === "select") {
             return {
               ...component,
-              type: Discord.ComponentType.SelectMenu,
+              type: "SELECT_MENU",
               options: component.options.map((option) => ({
                 ...option,
                 default: component.values?.includes(option.value),
@@ -375,13 +365,16 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
             }
           }
 
-          raise(`Unsupported component type: ${(component as any).type}`)
+          raise(`Unsupported component type: ${component.type}`)
         },
       ),
     })),
   }
 
-  if (!options.content && !options.embeds?.length) {
+  const hasContent =
+    options.content || options.embeds?.length || options.files?.length
+
+  if (!hasContent) {
     options.content = "_ _"
   }
 

packages/reacord/library/core/reacord.tsx

@@ -47,19 +47,7 @@ export abstract class Reacord {
 
     this.renderers.push(renderer)
 
-    const container = reconciler.createContainer(
-      renderer,
-      0,
-      // eslint-disable-next-line unicorn/no-null
-      null,
-      false,
-      // eslint-disable-next-line unicorn/no-null
-      null,
-      "reacord",
-      () => {},
-      // eslint-disable-next-line unicorn/no-null
-      null,
-    )
+    const container = reconciler.createContainer(renderer, 0, false, {})
 
     const instance: ReacordInstance = {
       render: (content: ReactNode) => {
@@ -75,6 +63,9 @@ export abstract class Reacord {
         this.renderers = this.renderers.filter((it) => it !== renderer)
         renderer.destroy()
       },
+      attach: (file) => {
+        renderer.attach(file)
+      },
     }
 
     if (initialContent !== undefined) {

packages/reacord/library/internal/channel.ts

@@ -1,5 +1,7 @@
+import { ReacordFile } from "../core/file"
 import type { Message, MessageOptions } from "./message"
 
 export type Channel = {
   send(message: MessageOptions): Promise<Message>
+  sendFiles(files: readonly ReacordFile[]): Promise<Message>
 }

packages/reacord/library/internal/container.ts

@@ -21,16 +21,6 @@ export class Container<T> {
     this.items = []
   }
 
-  find(predicate: (item: T) => boolean): T | undefined {
-    return this.items.find(predicate)
-  }
-
-  findType<U extends T>(type: new (...args: any[]) => U): U | undefined {
-    for (const item of this.items) {
-      if (item instanceof type) return item
-    }
-  }
-
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]()
   }

packages/reacord/library/internal/message.ts

@@ -1,7 +1,8 @@
-import { last } from "@reacord/helpers/last"
 import type { Except } from "type-fest"
+import { last } from "../../helpers/last"
 import type { EmbedOptions } from "../core/components/embed-options"
 import type { SelectProps } from "../core/components/select"
+import { ReacordFile } from "../main"
 
 export type MessageOptions = {
   content: string
@@ -49,6 +50,7 @@ export type MessageSelectOptionOptions = {
 export type Message = {
   edit(options: MessageOptions): Promise<void>
   delete(): Promise<void>
+  updateFiles(files: readonly ReacordFile[]): Promise<void>
 }
 
 export function getNextActionRow(options: MessageOptions): ActionRow {

packages/reacord/library/internal/node.ts

@@ -13,8 +13,4 @@ export abstract class Node<Props> {
   handleComponentInteraction(interaction: ComponentInteraction): boolean {
     return false
   }
-
-  get text(): string {
-    return [...this.children].map((child) => child.text).join("")
-  }
 }

packages/reacord/library/internal/reconciler.ts

@@ -1,7 +1,6 @@
-import { raise } from "@reacord/helpers/raise.js"
 import type { HostConfig } from "react-reconciler"
 import ReactReconciler from "react-reconciler"
-import { DefaultEventPriority } from "react-reconciler/constants.js"
+import { raise } from "../../helpers/raise.js"
 import { Node } from "./node.js"
 import type { Renderer } from "./renderers/renderer"
 import { TextNode } from "./text-node.js"
@@ -21,6 +20,8 @@ const config: HostConfig<
   number, // TimeoutHandle,
   number // NoTimeout,
 > = {
+  // config
+  now: Date.now,
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
@@ -51,13 +52,8 @@ const config: HostConfig<
   },
   createTextInstance: (text) => new TextNode(text),
   shouldSetTextContent: () => false,
+  // @ts-expect-error
   detachDeletedInstance: (instance) => {},
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  // eslint-disable-next-line unicorn/no-null
-  getInstanceFromNode: (node: any) => null,
-  // eslint-disable-next-line unicorn/no-null
-  getInstanceFromScope: (scopeInstance: any) => null,
 
   clearContainer: (renderer) => {
     renderer.nodes.clear()
@@ -98,14 +94,11 @@ const config: HostConfig<
   resetAfterCommit: (renderer) => {
     renderer.render()
   },
-  prepareScopeUpdate: (scopeInstance: any, instance: any) => {},
 
   preparePortalMount: () => raise("Portals are not supported"),
   getPublicInstance: () => raise("Refs are currently not supported"),
 
   finalizeInitialChildren: () => false,
-
-  getCurrentEventPriority: () => DefaultEventPriority,
 }
 
 export const reconciler = ReactReconciler(config)

packages/reacord/library/internal/renderers/channel-message-renderer.ts

@@ -1,3 +1,4 @@
+import { ReacordFile } from "../../core/file"
 import type { Channel } from "../channel"
 import type { Message, MessageOptions } from "../message"
 import { Renderer } from "./renderer"
@@ -10,4 +11,10 @@ export class ChannelMessageRenderer extends Renderer {
   protected createMessage(options: MessageOptions): Promise<Message> {
     return this.channel.send(options)
   }
+
+  protected createMessageFromFiles(
+    files: readonly ReacordFile[],
+  ): Promise<Message> {
+    return this.channel.sendFiles(files)
+  }
 }

packages/reacord/library/internal/renderers/renderer.ts

@@ -1,5 +1,6 @@
 import { Subject } from "rxjs"
 import { concatMap } from "rxjs/operators"
+import { ReacordFile } from "../../core/file"
 import { Container } from "../container.js"
 import type { ComponentInteraction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
@@ -7,15 +8,21 @@ import type { Node } from "../node.js"
 
 type UpdatePayload =
   | { action: "update" | "deactivate"; options: MessageOptions }
+  | { action: "files"; files: readonly ReacordFile[] }
   | { action: "deferUpdate"; interaction: ComponentInteraction }
   | { action: "destroy" }
 
+type NewMessagePayload =
+  | { source: "content"; messageOptions?: MessageOptions }
+  | { source: "files"; files?: readonly ReacordFile[] }
+
 export abstract class Renderer {
   readonly nodes = new Container<Node<unknown>>()
   private componentInteraction?: ComponentInteraction
   private message?: Message
   private active = true
   private updates = new Subject<UpdatePayload>()
+  private files: readonly ReacordFile[] = []
 
   private updateSubscription = this.updates
     .pipe(concatMap((payload) => this.updateMessage(payload)))
@@ -46,6 +53,11 @@ export abstract class Renderer {
     this.updates.next({ action: "destroy" })
   }
 
+  attach(file: ReacordFile) {
+    const newFiles = (this.files = [...this.files, file])
+    this.updates.next({ action: "files", files: newFiles })
+  }
+
   handleComponentInteraction(interaction: ComponentInteraction) {
     this.componentInteraction = interaction
 
@@ -60,7 +72,7 @@ export abstract class Renderer {
     }
   }
 
-  protected abstract createMessage(options: MessageOptions): Promise<Message>
+  protected abstract createMessage(options: NewMessagePayload): Promise<Message>
 
   private getMessageOptions(): MessageOptions {
     const options: MessageOptions = {
@@ -102,6 +114,15 @@ export abstract class Renderer {
       return
     }
 
+    if (payload.action === "files") {
+      if (this.message) {
+        await this.message?.updateFiles(payload.files)
+      } else {
+        this.message = await this.createMessageFromFiles(payload.files)
+      }
+      return
+    }
+
     if (this.componentInteraction) {
       const promise = this.componentInteraction.update(payload.options)
       this.componentInteraction = undefined

packages/reacord/library/internal/text-node.ts

@@ -5,8 +5,4 @@ export class TextNode extends Node<string> {
   override modifyMessageOptions(options: MessageOptions) {
     options.content = options.content + this.props
   }
-
-  override get text() {
-    return this.props
-  }
 }

packages/reacord/library/main.ts

@@ -12,6 +12,7 @@ export * from "./core/components/embed-title"
 export * from "./core/components/link"
 export * from "./core/components/option"
 export * from "./core/components/select"
+export * from "./core/file"
 export * from "./core/instance"
 export { useInstance } from "./core/instance-context"
 export * from "./core/reacord"

packages/reacord/package.json

@@ -2,7 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.5.2",
+  "version": "0.3.5",
   "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -27,8 +27,7 @@
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "require": "./dist/main.cjs",
-      "types": "./dist/main.d.ts"
+      "require": "./dist/main.cjs"
     },
     "./package.json": {
       "import": "./package.json",
@@ -36,22 +35,24 @@
     }
   },
   "scripts": {
-    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
-    "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
+    "release": "bash scripts/release.sh"
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
-    "@types/react-reconciler": "^0.28.0",
-    "react-reconciler": "^0.29.0",
-    "rxjs": "^7.5.6"
+    "@types/react-reconciler": "^0.26.6",
+    "nanoid": "^3.3.3",
+    "react-reconciler": "^0.27.0",
+    "rxjs": "^7.5.5"
   },
   "peerDependencies": {
-    "discord.js": "^14",
+    "discord.js": "^13.3",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -60,21 +61,24 @@
     }
   },
   "devDependencies": {
-    "@reacord/helpers": "workspace:*",
     "@types/lodash-es": "^4.17.6",
-    "c8": "^7.12.0",
-    "discord.js": "^14.0.3",
-    "dotenv": "^16.0.1",
+    "c8": "^7.11.2",
+    "discord.js": "^13.6.0",
+    "dotenv": "^16.0.0",
+    "esbuild": "latest",
+    "esbuild-jest": "^0.5.0",
+    "esmo": "^0.14.1",
     "lodash-es": "^4.17.21",
-    "nodemon": "^2.0.19",
-    "prettier": "^2.7.1",
-    "pretty-ms": "^8.0.0",
-    "react": "^18.2.0",
-    "tsup": "^6.1.3",
-    "tsx": "^3.8.0",
-    "type-fest": "^2.17.0",
-    "typescript": "^4.7.4",
-    "vitest": "^0.18.1"
+    "nodemon": "^2.0.15",
+    "prettier": "^2.6.2",
+    "pretty-ms": "^7.0.1",
+    "react": "^18.0.0",
+    "release-it": "^14.14.2",
+    "tsup": "^5.12.6",
+    "type-fest": "^2.12.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vitest": "^0.9.4"
   },
   "resolutions": {
     "esbuild": "latest"
@@ -87,8 +91,5 @@
       "release": true,
       "web": true
     }
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

@@ -0,0 +1,36 @@
+import type { Client, CommandInteraction } from "discord.js"
+
+type Command = {
+  name: string
+  description: string
+  run: (interaction: CommandInteraction) => unknown
+}
+
+export function createCommandHandler(client: Client, commands: Command[]) {
+  client.on("ready", async () => {
+    for (const guild of client.guilds.cache.values()) {
+      client.application!.commands.set(
+        commands.map(({ name, description }) => ({
+          name,
+          description,
+        })),
+        guild.id,
+      )
+    }
+  })
+
+  client.on("interactionCreate", async (interaction) => {
+    if (!interaction.isCommand()) return
+
+    const command = commands.find(
+      (command) => command.name === interaction.commandName,
+    )
+    if (command) {
+      try {
+        await command.run(interaction)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  })
+}

packages/reacord/playground/counter.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
+
+export function Counter(props: { onDeactivate: () => void }) {
+  const [count, setCount] = React.useState(0)
+  const [embedVisible, setEmbedVisible] = React.useState(false)
+
+  return (
+    <>
+      this button was clicked {count} times
+      {embedVisible && (
+        <Embed>
+          <EmbedTitle>the counter</EmbedTitle>
+          {count > 0 && (
+            <EmbedField name="is it even?">
+              {count % 2 === 0 ? "yes" : "no"}
+            </EmbedField>
+          )}
+        </Embed>
+      )}
+      {embedVisible && (
+        <Button label="hide embed" onClick={() => setEmbedVisible(false)} />
+      )}
+      <Button
+        style="primary"
+        emoji="<:plus_one:778531744860602388>"
+        label="clicc"
+        onClick={() => setCount(count + 1)}
+      />
+      {!embedVisible && (
+        <Button label="show embed" onClick={() => setEmbedVisible(true)} />
+      )}
+      <Button style="danger" label="deactivate" onClick={props.onDeactivate} />
+    </>
+  )
+}

packages/reacord/playground/fruit-select.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react"
+import { Button, Option, Select } from "../library/main"
+
+export function FruitSelect({
+  onConfirm,
+}: {
+  onConfirm: (choice: string) => void
+}) {
+  const [value, setValue] = useState<string>()
+
+  return (
+    <>
+      <Select
+        placeholder="choose a fruit"
+        value={value}
+        onChangeValue={setValue}
+      >
+        <Option value="🍎" />
+        <Option value="🍌" />
+        <Option value="🍒" />
+      </Select>
+      <Button
+        label="confirm"
+        disabled={value == undefined}
+        onClick={() => {
+          if (value) onConfirm(value)
+        }}
+      />
+    </>
+  )
+}

packages/reacord/playground/main.tsx

@@ -0,0 +1,125 @@
+import { Client } from "discord.js"
+import "dotenv/config"
+import { readFile } from "fs/promises"
+import { join } from "path"
+import React from "react"
+import { fileURLToPath } from "url"
+import { Button, ReacordDiscordJs, useInstance } from "../library/main"
+import { createCommandHandler } from "./command-handler"
+import { Counter } from "./counter"
+import { FruitSelect } from "./fruit-select"
+
+const client = new Client({
+  intents: ["GUILDS"],
+})
+
+const reacord = new ReacordDiscordJs(client)
+
+client.on("ready", () => {
+  console.info("ready 💖")
+
+  // const now = new Date()
+
+  // function UptimeCounter() {
+  //   const [uptime, setUptime] = React.useState(0)
+
+  //   React.useEffect(() => {
+  //     const interval = setInterval(() => {
+  //       setUptime(Date.now() - now.getTime())
+  //     }, 5000)
+  //     return () => clearInterval(interval)
+  //   }, [])
+
+  //   return (
+  //     <Embed>this bot has been running for {prettyMilliseconds(uptime)}</Embed>
+  //   )
+  // }
+
+  // reacord.send("671787605624487941", <UptimeCounter />)
+})
+
+createCommandHandler(client, [
+  {
+    name: "button",
+    description: "it's a button",
+    run: (interaction) => {
+      reacord.reply(
+        interaction,
+        <Button label="clic" onClick={() => console.info("was clic")} />,
+      )
+    },
+  },
+  {
+    name: "counter",
+    description: "shows a counter button",
+    run: (interaction) => {
+      const reply = reacord.reply(interaction)
+      reply.render(<Counter onDeactivate={() => reply.destroy()} />)
+    },
+  },
+  {
+    name: "select",
+    description: "shows a select",
+    run: (interaction) => {
+      const instance = reacord.reply(
+        interaction,
+        <FruitSelect
+          onConfirm={(value) => {
+            instance.render(`you chose ${value}`)
+            instance.deactivate()
+          }}
+        />,
+      )
+    },
+  },
+  {
+    name: "ephemeral-button",
+    description: "button which shows ephemeral messages",
+    run: (interaction) => {
+      reacord.reply(
+        interaction,
+        <>
+          <Button
+            label="public clic"
+            onClick={(event) =>
+              reacord.reply(
+                interaction,
+                `${event.guild?.member.displayName} clic`,
+              )
+            }
+          />
+          <Button
+            label="clic"
+            onClick={(event) => event.ephemeralReply("you clic")}
+          />
+        </>,
+      )
+    },
+  },
+  {
+    name: "delete-this",
+    description: "delete this",
+    run: (interaction) => {
+      function DeleteThis() {
+        const instance = useInstance()
+        return <Button label="delete this" onClick={() => instance.destroy()} />
+      }
+      reacord.reply(interaction, <DeleteThis />)
+    },
+  },
+  {
+    name: "anime",
+    description: "shows an anime image",
+    run: async (interaction) => {
+      const reply = reacord.reply(interaction)
+      const image = await readFile(
+        join(fileURLToPath(import.meta.url), "../anime.jpg"),
+      )
+
+      reply.attach({ name: "anime.jpg", data: image })
+      // reply.render("anime")
+    },
+  },
+])
+
+await client.login(process.env.TEST_BOT_TOKEN)

packages/reacord/scripts/discordjs-manual-test.tsx

@@ -1,139 +0,0 @@
-import type { TextChannel } from "discord.js"
-import { ChannelType, Client, IntentsBitField } from "discord.js"
-import "dotenv/config"
-import { kebabCase } from "lodash-es"
-import * as React from "react"
-import { useState } from "react"
-import {
-  Button,
-  Link,
-  Option,
-  ReacordDiscordJs,
-  Select,
-  useInstance,
-} from "../library/main"
-
-const client = new Client({ intents: IntentsBitField.Flags.Guilds })
-const reacord = new ReacordDiscordJs(client)
-
-await client.login(process.env.TEST_BOT_TOKEN)
-
-const guild = await client.guilds.fetch(process.env.TEST_GUILD_ID!)
-
-const category = await guild.channels.fetch(process.env.TEST_CATEGORY_ID!)
-if (category?.type !== ChannelType.GuildCategory) {
-  throw new Error(
-    `channel ${process.env.TEST_CATEGORY_ID} is not a guild category. received ${category?.type}`,
-  )
-}
-
-for (const [, channel] of category.children.cache) {
-  await channel.delete()
-}
-
-let prefix = 0
-const createTest = async (
-  name: string,
-  block: (channel: TextChannel) => void | Promise<unknown>,
-) => {
-  prefix += 1
-  const channel = await category.children.create({
-    type: ChannelType.GuildText,
-    name: `${String(prefix).padStart(3, "0")}-${kebabCase(name)}`,
-  })
-  await block(channel)
-}
-
-await createTest("basic", (channel) => {
-  reacord.send(channel.id, "Hello, world!")
-})
-
-await createTest("counter", (channel) => {
-  const Counter = () => {
-    const [count, setCount] = React.useState(0)
-    return (
-      <>
-        count: {count}
-        <Button
-          style="primary"
-          emoji="➕"
-          onClick={() => setCount(count + 1)}
-        />
-        <Button
-          style="primary"
-          emoji="➖"
-          onClick={() => setCount(count - 1)}
-        />
-        <Button label="reset" onClick={() => setCount(0)} />
-      </>
-    )
-  }
-  reacord.send(channel.id, <Counter />)
-})
-
-await createTest("select", (channel) => {
-  function FruitSelect({ onConfirm }: { onConfirm: (choice: string) => void }) {
-    const [value, setValue] = useState<string>()
-
-    return (
-      <>
-        <Select
-          placeholder="choose a fruit"
-          value={value}
-          onChangeValue={setValue}
-        >
-          <Option value="🍎" emoji="🍎" label="apple" description="it red" />
-          <Option value="🍌" emoji="🍌" label="banana" description="bnanbna" />
-          <Option value="🍒" emoji="🍒" label="cherry" description="heh" />
-        </Select>
-        <Button
-          label="confirm"
-          disabled={value == undefined}
-          onClick={() => {
-            if (value) onConfirm(value)
-          }}
-        />
-      </>
-    )
-  }
-
-  const instance = reacord.send(
-    channel.id,
-    <FruitSelect
-      onConfirm={(value) => {
-        instance.render(`you chose ${value}`)
-        instance.deactivate()
-      }}
-    />,
-  )
-})
-
-await createTest("ephemeral button", (channel) => {
-  reacord.send(
-    channel.id,
-    <>
-      <Button
-        label="public clic"
-        onClick={(event) =>
-          event.reply(`${event.guild?.member.displayName} clic`)
-        }
-      />
-      <Button
-        label="clic"
-        onClick={(event) => event.ephemeralReply("you clic")}
-      />
-    </>,
-  )
-})
-
-await createTest("delete this", (channel) => {
-  function DeleteThis() {
-    const instance = useInstance()
-    return <Button label="delete this" onClick={() => instance.destroy()} />
-  }
-  reacord.send(channel.id, <DeleteThis />)
-})
-
-await createTest("link", (channel) => {
-  reacord.send(channel.id, <Link label="hi" url="https://mapleleaf.dev" />)
-})

packages/reacord/scripts/release.sh

@@ -0,0 +1,4 @@
+pnpm build
+cp ../../README.md .
+cp ../../LICENSE .
+pnpx release-it

packages/reacord/test/commonjs-require.test.ts

@@ -1,12 +0,0 @@
-import { spawnSync } from "node:child_process"
-import { createRequire } from "node:module"
-import { beforeAll, expect, test } from "vitest"
-
-beforeAll(() => {
-  spawnSync("pnpm", ["run", "build"])
-})
-
-test("can require commonjs", () => {
-  const require = createRequire(import.meta.url)
-  expect(() => require("../dist/main.cjs")).not.toThrow()
-})

packages/reacord/test/reacord.test.tsx

@@ -35,7 +35,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("show embed").click()
+  tester.findButtonByLabel("show embed").click()
   await tester.assertMessages([
     {
       content: "count: 0",
@@ -62,7 +62,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 1",
@@ -94,7 +94,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -126,7 +126,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("hide embed").click()
+  tester.findButtonByLabel("hide embed").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -153,7 +153,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -180,7 +180,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("deactivate").click()
+  tester.findButtonByLabel("deactivate").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -210,7 +210,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",

packages/reacord/test/select.test.tsx

@@ -59,16 +59,16 @@ test("single select", async () => {
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-  await tester.findSelectByPlaceholder("choose one").select("2")
+  tester.findSelectByPlaceholder("choose one").select("2")
   await assertSelect(["2"])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: ["2"] }),
   )
 
-  await tester.findButtonByLabel("disable").click()
+  tester.findButtonByLabel("disable").click()
   await assertSelect(["2"], true)
 
-  await tester.findSelectByPlaceholder("choose one").select("1")
+  tester.findSelectByPlaceholder("choose one").select("1")
   await assertSelect(["2"], true)
   expect(onSelect).toHaveBeenCalledTimes(1)
 })
@@ -125,19 +125,19 @@ test("multiple select", async () => {
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-  await tester.findSelectByPlaceholder("select").select("1", "3")
+  tester.findSelectByPlaceholder("select").select("1", "3")
   await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
   )
 
-  await tester.findSelectByPlaceholder("select").select("2")
+  tester.findSelectByPlaceholder("select").select("2")
   await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
   )
 
-  await tester.findSelectByPlaceholder("select").select()
+  tester.findSelectByPlaceholder("select").select()
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ values: [] }))
 })
@@ -145,7 +145,7 @@ test("multiple select", async () => {
 test("optional onSelect + unknown value", async () => {
   const tester = new ReacordTester()
   tester.reply().render(<Select placeholder="select" />)
-  await tester.findSelectByPlaceholder("select").select("something")
+  tester.findSelectByPlaceholder("select").select("something")
   await tester.assertMessages([
     {
       content: "",

packages/reacord/test/test-adapter.ts

@@ -1,14 +1,14 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable require-await */
-import { logPretty } from "@reacord/helpers/log-pretty"
-import { omit } from "@reacord/helpers/omit"
-import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
-import { raise } from "@reacord/helpers/raise"
-import { waitFor } from "@reacord/helpers/wait-for"
-import { randomUUID } from "node:crypto"
+import { nanoid } from "nanoid"
 import { setTimeout } from "node:timers/promises"
 import type { ReactNode } from "react"
 import { expect } from "vitest"
+import { logPretty } from "../helpers/log-pretty"
+import { omit } from "../helpers/omit"
+import { pruneNullishValues } from "../helpers/prune-nullish-values"
+import { raise } from "../helpers/raise"
+import { waitFor } from "../helpers/wait-for"
 import type {
   ChannelInfo,
   GuildInfo,
@@ -194,7 +194,7 @@ class TestCommandInteraction implements CommandInteraction {
 }
 
 class TestInteraction {
-  readonly id = randomUUID()
+  readonly id = nanoid()
   readonly channelId = "test-channel-id"
 
   constructor(

packages/reacord/test/text-children.test.tsx

@@ -1,89 +0,0 @@
-import * as React from "react"
-import { test } from "vitest"
-import {
-  Button,
-  Embed,
-  EmbedAuthor,
-  EmbedField,
-  EmbedFooter,
-  EmbedTitle,
-  Link,
-  Option,
-  Select,
-} from "../library/main"
-import { ReacordTester } from "./test-adapter"
-
-test("text children in other components", async () => {
-  const tester = new ReacordTester()
-
-  const SomeText = () => <>some text</>
-
-  await tester.assertRender(
-    <>
-      <Embed>
-        <EmbedTitle>
-          <SomeText />
-        </EmbedTitle>
-        <EmbedAuthor>
-          <SomeText />
-        </EmbedAuthor>
-        <EmbedField name={<SomeText />}>
-          <SomeText /> <Button label="ignore this" onClick={() => {}} />
-          nailed it
-        </EmbedField>
-        <EmbedFooter>
-          <SomeText />
-        </EmbedFooter>
-      </Embed>
-      <Button label={<SomeText />} onClick={() => {}} />
-      <Link url="https://discord.com" label={<SomeText />} />
-      <Select>
-        <Option value="1">
-          <SomeText />
-        </Option>
-        <Option value="2" label={<SomeText />} description={<SomeText />} />
-      </Select>
-    </>,
-    [
-      {
-        content: "",
-        embeds: [
-          {
-            title: "some text",
-            author: {
-              name: "some text",
-            },
-            fields: [{ name: "some text", value: "some text nailed it" }],
-            footer: {
-              text: "some text",
-            },
-          },
-        ],
-        actionRows: [
-          [
-            {
-              type: "button",
-              label: "some text",
-              style: "secondary",
-            },
-            {
-              type: "link",
-              url: "https://discord.com",
-              label: "some text",
-            },
-          ],
-          [
-            {
-              type: "select",
-              values: [],
-              options: [
-                { value: "1", label: "some text" },
-                { value: "2", label: "some text", description: "some text" },
-              ],
-            },
-          ],
-        ],
-      },
-    ],
-  )
-})

packages/reacord/tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": "../../tsconfig.base.json",
-  "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"]
+  "extends": "../../tsconfig.base.json"
 }

packages/reacord/vitest.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import { defineConfig } from "vitest/config"
+import { defineConfig } from "vite"
 
 export default defineConfig({
   build: {

packages/website/.gitignore

@@ -1,4 +1,5 @@
 node_modules
+
 /.cache
 /build
 /public/build
@@ -7,5 +8,3 @@ node_modules
 cypress/videos
 cypress/screenshots
 *.out.css
-/api
-.astro

packages/website/CHANGELOG.md

@@ -1,24 +0,0 @@
-# website
-
-## 0.4.3
-
-### Patch Changes
-
-- Updated dependencies [9813a01]
-  - reacord@0.5.2
-
-## 0.4.2
-
-### Patch Changes
-
-- Updated dependencies [72f4a4a]
-- Updated dependencies [7536bde]
-- Updated dependencies [e335165]
-  - reacord@0.5.1
-
-## 0.4.1
-
-### Patch Changes
-
-- Updated dependencies [aa65da5]
-  - reacord@0.5.0

packages/website/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom"
+import { RemixBrowser } from "@remix-run/react"
+
+hydrate(<RemixBrowser />, document)

packages/website/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server"
+import type { EntryContext } from "@remix-run/node"
+import { RemixServer } from "@remix-run/react"
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  )
+
+  responseHeaders.set("Content-Type", "text/html")
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  })
+}

packages/website/app/modules/app/app-footer.tsx

@@ -0,0 +1,27 @@
+import { HeartIcon } from "@heroicons/react/solid"
+import clsx from "clsx"
+import { ExternalLink } from "~/modules/dom/external-link"
+import { linkClass, maxWidthContainer } from "~/modules/ui/components"
+
+export function AppFooter() {
+  return (
+    <footer className={clsx(maxWidthContainer, "text-xs opacity-75")}>
+      <address className="not-italic">
+        &copy; {new Date().getFullYear()} itsMapleLeaf
+      </address>
+      <p>
+        Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
+        <ExternalLink className={linkClass()} href="https://remix.run">
+          Remix
+        </ExternalLink>
+      </p>
+      <p>
+        Uses{" "}
+        <ExternalLink className={linkClass()} href="https://umami.is/">
+          umami
+        </ExternalLink>{" "}
+        for simple, non-identifying analytics.
+      </p>
+    </footer>
+  )
+}

packages/website/app/modules/dom/external-link.tsx

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {children}
+    </a>
+  )
+}

packages/website/app/modules/dom/portal.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
+import { createPortal } from "react-dom"
+
+export function Portal({ children }: { children: ReactNode }) {
+  const containerRef = useRef<Element>()
+
+  if (!containerRef.current && typeof document !== "undefined") {
+    containerRef.current = document.createElement("react-portal")
+    document.body.append(containerRef.current)
+  }
+
+  useEffect(() => () => containerRef.current!.remove(), [])
+
+  return containerRef.current ? (
+    createPortal(children, containerRef.current)
+  ) : (
+    <>{children}</>
+  )
+}

packages/website/app/modules/helpers/raise.ts

@@ -0,0 +1,3 @@
+export function raise(error: unknown): never {
+  throw error instanceof Error ? error : new Error(String(error))
+}

packages/website/app/modules/landing/landing-animation.tsx

@@ -186,7 +186,7 @@ export function LandingAnimation() {
       <img
         src={cursorUrl}
         alt=""
-        className="transition-all duration-500 absolute scale-75 bg-transparent"
+        className="transition-all duration-500 absolute scale-75"
         style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
         ref={cursorRef}
       />

packages/website/app/modules/landing/landing-code.mdx

@@ -0,0 +1,26 @@
+{/* prettier-ignore */}
+```tsx
+import * as React from "react"
+import { Button, useInstance } from "reacord"
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  const instance = useInstance()
+  return (
+    <>
+      this button was clicked {count} times
+      <Button
+        label="+1"
+        style="success"
+        onClick={() => setCount(count + 1)}
+      />
+      <Button
+        label="delete"
+        emoji="🗑"
+        style="danger"
+        onClick={() => instance.destroy()}
+      />
+    </>
+  )
+}
+```

packages/website/app/modules/navigation/active-link.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import type { PathPattern } from "react-router"
+import { useMatch } from "react-router"
+
+export function ActiveLink({
+  to,
+  children,
+}: {
+  to: string | PathPattern
+  children: (props: { active: boolean }) => ReactNode
+}) {
+  const match = useMatch(to)
+  return <>{children({ active: match != undefined })}</>
+}

packages/website/app/modules/navigation/app-link.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef } from "react"
+import { Link } from "@remix-run/react"
+import { ExternalLink } from "~/modules/dom/external-link"
+
+export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
+  type: "internal" | "external" | "router"
+  to: string
+}
+
+export function AppLink({ type, to, children, ...props }: AppLinkProps) {
+  if (type === "internal") {
+    return (
+      <a href={to} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  if (type === "external") {
+    return (
+      <ExternalLink href={to} {...props}>
+        {children}
+      </ExternalLink>
+    )
+  }
+
+  return (
+    <Link to={to} {...props}>
+      {children}
+    </Link>
+  )
+}

packages/website/app/modules/navigation/guide-links-context.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react"
+import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
+
+const Context = createContext<GuideLink[]>([])
+
+export const GuideLinksProvider = Context.Provider
+
+export function useGuideLinksContext() {
+  return useContext(Context)
+}

packages/website/app/modules/navigation/load-guide-links.server.ts

@@ -0,0 +1,40 @@
+import glob from "fast-glob"
+import grayMatter from "gray-matter"
+import { readFile } from "node:fs/promises"
+import { join, parse } from "node:path"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+
+const guidesFolder = "app/routes/guides"
+
+export type GuideLink = {
+  title: string
+  order: number
+  link: AppLinkProps
+}
+
+export async function loadGuideLinks(): Promise<GuideLink[]> {
+  const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder })
+
+  const links: GuideLink[] = await Promise.all(
+    guideFiles.map(async (file) => {
+      const { data } = grayMatter(await readFile(join(guidesFolder, file)))
+
+      let order = data.order
+      if (!Number.isFinite(order)) {
+        order = Number.POSITIVE_INFINITY
+      }
+
+      return {
+        title: data.meta?.title,
+        order,
+        link: {
+          type: "router",
+          to: `/guides/${parse(file).name}`,
+          children: data.meta?.title,
+        },
+      }
+    }),
+  )
+
+  return links.sort((a, b) => a.order - b.order)
+}

packages/website/app/modules/navigation/main-links.tsx

@@ -0,0 +1,37 @@
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+import { inlineIconClass } from "../ui/components"
+
+export const mainLinks: AppLinkProps[] = [
+  {
+    type: "internal",
+    to: "/guides/getting-started",
+    children: (
+      <>
+        <DocumentTextIcon className={inlineIconClass} /> Guides
+      </>
+    ),
+  },
+  {
+    type: "internal",
+    to: "/api/",
+    children: (
+      <>
+        <CodeIcon className={inlineIconClass} /> API Reference
+      </>
+    ),
+  },
+  {
+    type: "external",
+    to: "https://github.com/itsMapleLeaf/reacord",
+    children: (
+      <>
+        <ExternalLinkIcon className={inlineIconClass} /> GitHub
+      </>
+    ),
+  },
+]

packages/website/app/modules/navigation/main-navigation-menu.tsx

@@ -0,0 +1,69 @@
+import { Menu, Transition } from "@headlessui/react"
+import { MenuAlt4Icon } from "@heroicons/react/outline"
+import clsx from "clsx"
+import { ActiveLink } from "~/modules/navigation/active-link"
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
+import { Popper } from "~/modules/ui/popper"
+import { AppLink } from "./app-link"
+import { mainLinks } from "./main-links"
+
+export function MainNavigationMenu() {
+  const guideLinks = useGuideLinksContext()
+  return (
+    <Menu>
+      <Popper
+        renderReference={(reference) => (
+          <Menu.Button {...reference}>
+            <MenuAlt4Icon className="w-6" />
+            <span className="sr-only">Menu</span>
+          </Menu.Button>
+        )}
+        renderPopover={() => (
+          <Transition
+            enter="transition"
+            enterFrom="translate-y-4 opacity-0"
+            enterTo="translate-y-0 opacity-100"
+            leave="transition"
+            leaveFrom="translate-y-0 opacity-100"
+            leaveTo="translate-y-4 opacity-0"
+          >
+            <Menu.Items className="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-hidden overflow-y-auto focus:outline-none">
+              {mainLinks.map((link) => (
+                <Menu.Item key={link.to}>
+                  {({ active }) => (
+                    <AppLink {...link} className={menuItemClass({ active })} />
+                  )}
+                </Menu.Item>
+              ))}
+              <Menu.Item disabled>
+                <hr className="border-0 h-[2px] bg-black/50" />
+              </Menu.Item>
+              {guideLinks.map(({ link }) => (
+                <Menu.Item key={link.to}>
+                  {(menuItem) => (
+                    <ActiveLink to={link.to}>
+                      {(activeLink) => (
+                        <AppLink
+                          {...link}
+                          className={menuItemClass({
+                            active: activeLink.active || menuItem.active,
+                          })}
+                        />
+                      )}
+                    </ActiveLink>
+                  )}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        )}
+      />
+    </Menu>
+  )
+}
+
+const menuItemClass = ({ active = false }) =>
+  clsx(
+    clsx`px-3 py-2 transition text-left font-medium block opacity-50`,
+    active && clsx`opacity-100 bg-black/75 text-emerald-400`,
+  )

packages/website/app/modules/navigation/main-navigation.tsx

@@ -0,0 +1,24 @@
+import { AppLogo } from "~/modules/app/app-logo"
+import { linkClass } from "../ui/components"
+import { AppLink } from "./app-link"
+import { mainLinks } from "./main-links"
+import { MainNavigationMenu } from "./main-navigation-menu"
+
+export function MainNavigation() {
+  return (
+    <nav className="flex justify-between items-center h-16">
+      <a href="/">
+        <AppLogo className="w-32" />
+        <span className="sr-only">Home</span>
+      </a>
+      <div className="hidden md:flex gap-4">
+        {mainLinks.map((link) => (
+          <AppLink {...link} key={link.to} className={linkClass()} />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <MainNavigationMenu />
+      </div>
+    </nav>
+  )
+}

packages/website/app/modules/ui/components.ts

@@ -0,0 +1,44 @@
+import clsx from "clsx"
+
+export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
+
+export const inlineIconClass = clsx`inline w-5 align-sub`
+
+export const linkClass = ({ active = false } = {}) =>
+  clsx(
+    clsx`font-medium inline-block relative`,
+    clsx`opacity-60 hover:opacity-100 transition-opacity`,
+    clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
+    clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
+    active
+      ? clsx`text-emerald-500 after:bg-emerald-500`
+      : clsx`after:bg-white/50`,
+  )
+
+export const docsProseClass = clsx`
+  prose prose-invert
+  prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl
+  prose-h2:font-light
+  prose-h3:font-light
+  prose-p:my-3
+  prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
+  prose-strong:font-medium prose-strong:text-emerald-400
+  prose-pre:font-monospace prose-pre:overflow-x-auto
+  prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400
+  prose-li:mb-5
+  max-w-none
+`
+
+export const buttonClass = ({
+  variant,
+}: {
+  variant: "solid" | "semiblack"
+}) => {
+  return clsx(
+    clsx`inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg`,
+    clsx`hover:translate-y-[-2px] hover:shadow`,
+    clsx`active:translate-y-[0px] active:transition-none`, // using translate-y-[0px] instead of just -0 so it takes priority
+    variant === "solid" && clsx`bg-emerald-700 hover:bg-emerald-800`,
+    variant === "semiblack" && clsx`bg-black/25 hover:bg-black/40`,
+  )
+}

packages/website/app/modules/ui/modal.tsx

@@ -0,0 +1,80 @@
+import { XIcon } from "@heroicons/react/outline"
+import clsx from "clsx"
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+import { FocusOn } from "react-focus-on"
+import { Portal } from "~/modules/dom/portal"
+
+export function Modal({
+  children,
+  visible,
+  onClose,
+}: {
+  children: ReactNode
+  visible: boolean
+  onClose: () => void
+}) {
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (visible) {
+      // trying to immediately focus doesn't work for whatever reason
+      // neither did requestAnimationFrame
+      setTimeout(() => {
+        closeButtonRef.current?.focus()
+      }, 50)
+    }
+  }, [visible])
+
+  return (
+    <Portal>
+      <div
+        className={clsx(
+          "bg-black/70 fixed inset-0 transition-all flex flex-col p-4",
+          visible ? "opacity-100 visible" : "opacity-0 invisible",
+        )}
+      >
+        <FocusOn
+          className={clsx(
+            "m-auto flex flex-col gap-2 w-full max-h-full max-w-screen-sm overflow-y-auto transition",
+            visible ? "translate-y-0" : "translate-y-3",
+          )}
+          enabled={visible}
+          onClickOutside={onClose}
+          onEscapeKey={onClose}
+        >
+          <button
+            type="button"
+            className="self-end"
+            onClick={onClose}
+            ref={closeButtonRef}
+          >
+            <span className="sr-only">Close</span>
+            <XIcon aria-hidden className="w-6 text-white" />
+          </button>
+          <div className={clsx("bg-slate-700 rounded-md shadow p-4")}>
+            {children}
+          </div>
+        </FocusOn>
+      </div>
+    </Portal>
+  )
+}
+
+export function UncontrolledModal({
+  children,
+  button,
+}: {
+  children: ReactNode
+  button: (buttonProps: { onClick: () => void }) => void
+}) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      {button({ onClick: () => setVisible(true) })}
+      <Modal visible={visible} onClose={() => setVisible(false)}>
+        {children}
+      </Modal>
+    </>
+  )
+}

packages/website/app/modules/ui/popper.tsx

@@ -0,0 +1,41 @@
+import { useRect } from "@reach/rect"
+import * as React from "react"
+import { Portal } from "~/modules/dom/portal"
+
+export function Popper({
+  renderReference,
+  renderPopover,
+}: {
+  renderReference: (referenceProps: {
+    ref: (element: HTMLElement | null | undefined) => void
+  }) => React.ReactNode
+  renderPopover: () => React.ReactNode
+}) {
+  const [reference, referenceRef] = React.useState<HTMLElement | null>()
+  const referenceRect = useRect(useValueAsRefObject(reference))
+
+  return (
+    <>
+      {renderReference({ ref: referenceRef })}
+      <Portal>
+        {referenceRect && (
+          <div
+            className="fixed -translate-x-full"
+            style={{
+              left: referenceRect.right,
+              top: referenceRect.bottom + 16,
+            }}
+          >
+            {renderPopover()}
+          </div>
+        )}
+      </Portal>
+    </>
+  )
+}
+
+function useValueAsRefObject<Value>(value: Value): { readonly current: Value } {
+  const ref = React.useRef<Value>(value)
+  ref.current = value
+  return ref
+}

packages/website/app/modules/ui/tailwind.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .prose aside {
+    @apply opacity-75 italic border-l-4 pl-3 border-white/50;
+  }
+}