Allow for title and description for entire panel (#33)

Author: aidansunbury

.github/workflows/pr-package.yml

@@ -24,4 +24,4 @@ jobs:
         run: |
             cd packages/trpc-ui
             yarn install
-            yarn pkg-pr-new publish
+            yarn pkg-pr-new publish --packageManager=yarn

CONTRIBUTING.md

@@ -15,6 +15,8 @@ The repo is configured to work with yarn v1 workspaces. To install dependencies
 yarn
 ```
 
+When adding new dependencies, be sure to add them in the correct package, and not the top level `package.json`.
+
 ### Development App
 
 Included in this repo there is a development app that makes it easy to work on `trpc-ui` locally. It is a `next.js` app that will render the router included in the dev app. To run it, do:

README.MD

@@ -51,13 +51,18 @@ import { renderTrpcPanel } from "trpc-ui";
 // ...
 app.use("/panel", (_, res) => {
   return res.send(
-    renderTrpcPanel(myTrpcRouter, { url: "http://localhost:4000/trpc" })
+    renderTrpcPanel(myTrpcRouter, { url: "http://localhost:4000/trpc", meta: {
+      title: "My Backend Title",
+      description: "This is a description of my API, which supports [markdown](https://en.wikipedia.org/wiki/Markdown).",
+    }})
   );
 });
 ```
 
 `trpc-ui` just renders as a string, so it can be used with any backend.
 
+To document your entire backend, you can pass in a metadata object with a title and description. To document individual procedures, see the [documenting procedures](#documenting-procedures).
+
 ## NextJS / create-t3-app example
 
 In Nextjs you'd want to create an api route somewhere like `src/pages/api/panel.ts` and send a text response:

packages/dev-app/src/pages/index.tsx

@@ -13,6 +13,11 @@ const App = dynamic(
       options={{
         url: "http://localhost:3000/api/trpc",
         transformer: "superjson",
+        meta: {
+          title: "Dev App Title",
+          description:
+            "Dev App Description is longer and should support [markdown](https://github.com/aidansunbury/trpc-ui) \n## Heading 2\n### Heading 3 \n - list item 1\n - list item 2\n",
+        },
       }}
       trpc={trpc}
     />

packages/trpc-ui/package.json

@@ -4,6 +4,10 @@
   "description": "UI for testing tRPC backends",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aidansunbury/trpc-ui/"
+  },
   "typings": "lib/src/index.d.ts",
   "scripts": {
     "test": "jest",
@@ -92,13 +96,15 @@
   },
   "dependencies": {
     "@textea/json-viewer": "^3.0.0",
+    "clsx": "^2.1.1",
     "fuzzysort": "^2.0.4",
     "nuqs": "^2.2.1",
     "path": "^0.12.7",
     "pretty-bytes": "^6.1.0",
     "pretty-ms": "^8.0.0",
     "react-markdown": "^9.0.1",
     "string-byte-length": "^1.6.0",
+    "tailwind-merge": "^2.5.5",
     "url": "^0.11.0",
     "zod-to-json-schema": "^3.20.0"
   }

packages/trpc-ui/src/react-app/Root.tsx

@@ -20,6 +20,7 @@ import React, { type ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 import superjson from "superjson";
 import type { ParsedRouter } from "../parse/parseRouter";
+import { MetaHeader } from "./components/MetaHeader";
 import { RouterContainer } from "./components/RouterContainer";
 import { SideNav } from "./components/SideNav";
 import { TopBar } from "./components/TopBar";
@@ -122,6 +123,7 @@ function AppInnards({
           }}
         >
           <div className="container max-w-6xl p-4 pt-8">
+            <MetaHeader meta={options.meta} />
             <RouterContainer router={rootRouter} options={options} />
           </div>
         </div>

packages/trpc-ui/src/react-app/components/MetaHeader.tsx

@@ -0,0 +1,20 @@
+import type { Info } from "@src/render";
+import React from "react";
+import Markdown from "react-markdown";
+
+export function MetaHeader({ meta }: { meta?: Info }) {
+  if (!meta) {
+    return null;
+  }
+  const { title, description } = meta;
+  return (
+    <header>
+      {title && <h1 className="pb-2 font-bold text-5xl">{title}</h1>}
+      {description && (
+        <article className="prose">
+          <Markdown className={"prose"}>{description}</Markdown>
+        </article>
+      )}
+    </header>
+  );
+}

packages/trpc-ui/src/react-app/components/RouterContainer.tsx

@@ -3,6 +3,7 @@ import { ProcedureForm } from "@src/react-app/components/form/ProcedureForm";
 import type { RenderOptions } from "@src/render";
 import React from "react";
 import type { ParsedRouter } from "../../parse/parseRouter";
+import { cn } from "../utils/utils";
 
 export function RouterContainer({
   router,
@@ -28,7 +29,9 @@ export function RouterContainer({
       isRoot={isRoot}
     >
       <div
-        className={`space-y-3${!isRoot ? "space-y-1 border-l-grey-400 p-1" : ""}`}
+        className={cn("space-y-3", {
+          "space-y-1 border-l-grey-400 p-1": !isRoot,
+        })}
       >
         {Object.entries(router.children).map(
           ([childName, routerOrProcedure]) => {

packages/trpc-ui/src/react-app/components/TopBar.tsx

@@ -30,15 +30,21 @@ export function TopBar({
             <Chevron className="h-4 w-4" direction="right" />
           )}
         </button>
-        <span className="flex flex-row items-center font-bold font-mono text-lg">
+        <a
+          href="https://github.com/aidansunbury/trpc-ui"
+          target="_blank"
+          className="flex flex-row items-center font-bold font-mono text-lg"
+          rel="noreferrer"
+        >
           <LogoSvg className="mr-2 h-10 w-10 rounded-lg" />
-          tRPC.panel()
-        </span>
+          tRPC.ui()
+        </a>
       </div>
       <RouterSearchTooltip />
       <button
         onClick={() => setHeadersPopupShown(true)}
         className="rounded-sm border border-neutralSolidTransparent px-4 py-2 font-bold text-neutralText shadow-sm"
+        type="button"
       >
         Headers
         <MailLockIcon className="ml-1 h-6 w-6" />

packages/trpc-ui/src/react-app/utils/utils.ts

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