@monkey-mini-app/ui 0.1.0

package/dist/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/src/products/cells.tsx

@@ -0,0 +1,18 @@
+import { StatusBadge } from "@monkey-mini-app/ui/blocks/status-badge"
+
+export function TextCell({ value }: { value: unknown }) {
+  return <span className="truncate">{String(value ?? "")}</span>
+}
+
+export function StatusCell({ value }: { value: unknown }) {
+  return <StatusBadge status={String(value ?? "pending")} />
+}
+
+export function BooleanCell({ value }: { value: unknown }) {
+  return <span className="text-muted-foreground">{value ? "Yes" : "No"}</span>
+}
+
+export function NumberCell({ value }: { value: unknown }) {
+  const n = Number(value)
+  return <span className="tabular-nums">{Number.isFinite(n) ? n.toLocaleString() : "—"}</span>
+}

package/dist/src/products/code-block.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { codeToHtml } from "shiki"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+const aliases: Record<string, string> = {
+  typescript: "ts",
+  javascript: "js",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  plaintext: "text",
+  txt: "text",
+}
+
+export function CodeBlock({
+  code,
+  language = "ts",
+  className,
+}: {
+  code: string
+  language?: string
+  className?: string
+}) {
+  const [html, setHtml] = React.useState<string | null>(null)
+  const lang = aliases[language.toLowerCase()] ?? language.toLowerCase()
+  const dark =
+    typeof document !== "undefined" &&
+    document.documentElement.classList.contains("dark")
+
+  React.useEffect(() => {
+    let cancelled = false
+    codeToHtml(code, {
+      lang,
+      theme: dark ? "github-dark" : "github-light",
+    })
+      .then((out) => {
+        if (!cancelled) setHtml(out)
+      })
+      .catch(() =>
+        codeToHtml(code, {
+          lang: "text",
+          theme: dark ? "github-dark" : "github-light",
+        }).then((out) => {
+          if (!cancelled) setHtml(out)
+        })
+      )
+    return () => {
+      cancelled = true
+    }
+  }, [code, lang, dark])
+
+  return (
+    <div
+      data-testid="code-block"
+      data-language={lang}
+      data-highlighted={html ? "true" : "false"}
+      className={cn(
+        "overflow-auto rounded-xl border text-xs leading-6 [&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent [&_pre]:p-3",
+        className
+      )}
+    >
+      {html ? (
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        <pre>
+          <code>{code}</code>
+        </pre>
+      )}
+    </div>
+  )
+}

package/dist/src/products/code-editor.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { html } from "@codemirror/lang-html"
+import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
+import { markdown } from "@codemirror/lang-markdown"
+import { oneDark } from "@codemirror/theme-one-dark"
+import CodeMirror from "@uiw/react-codemirror"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+const langs = {
+  js: javascript(),
+  ts: javascript({ typescript: true }),
+  json: json(),
+  html: html(),
+  md: markdown(),
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  language = "ts",
+  height = "220px",
+  className,
+}: {
+  value: string
+  onChange?: (value: string) => void
+  language?: keyof typeof langs
+  height?: string
+  className?: string
+}) {
+  const dark =
+    typeof document !== "undefined" &&
+    document.documentElement.classList.contains("dark")
+
+  return (
+    <div data-testid="code-editor" className={cn("overflow-hidden rounded-xl border", className)}>
+      <CodeMirror
+        value={value}
+        height={height}
+        theme={dark ? oneDark : "light"}
+        extensions={[langs[language] ?? langs.ts]}
+        onChange={(next) => onChange?.(next)}
+        basicSetup={{ lineNumbers: true }}
+      />
+    </div>
+  )
+}

package/dist/src/products/column-meta.d.ts

@@ -0,0 +1,9 @@
+import type { DataGridColumnMeta } from "./data-grid"
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData, TValue> extends DataGridColumnMeta {
+    _unused?: TValue | TData
+  }
+}
+
+export {}