more docks mockuping

packages/website/app/modules/api/api-data.server.ts

@@ -1,8 +1,8 @@
 import type { JSONOutput } from "typedoc"
+import apiData from "~/assets/api.json"
 
 export type ApiData = JSONOutput.ContainerReflection
 
-export async function loadApiData(): Promise<ApiData> {
-  const data = await import("~/assets/api.json")
-  return data as ApiData
+export function getApiData(): ApiData {
+  return apiData as ApiData
 }

packages/website/app/routes/api.tsx

@@ -2,16 +2,12 @@ import clsx from "clsx"
 import { Fragment } from "react"
 import type { LoaderFunction } from "remix"
 import { Outlet, useLoaderData } from "remix"
-import { loadApiData } from "~/modules/api/api-data.server"
+import { getApiData } from "~/modules/api/api-data.server"
 import { ActiveLink } from "~/modules/navigation/active-link"
 import type { AppLinkProps } from "~/modules/navigation/app-link"
 import { AppLink } from "~/modules/navigation/app-link"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
-import {
-  docsProseClass,
-  linkClass,
-  maxWidthContainer,
-} from "~/modules/ui/components"
+import { linkClass, maxWidthContainer } from "~/modules/ui/components"
 
 type LoaderData = {
   categorySections: Array<{
@@ -22,7 +18,7 @@ type LoaderData = {
 }
 
 export const loader: LoaderFunction = async () => {
-  const apiData = await loadApiData()
+  const apiData = getApiData()
 
   const childrenById = Object.fromEntries(
     apiData.children.map((child) => [child.id, { name: child.name }]),
@@ -73,7 +69,7 @@ export default function ApiReferencePage() {
           ))}
         </nav>
 
-        <main className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
+        <main className="pb-8 flex-1 min-w-0">
           <Outlet />
         </main>
       </div>

packages/website/app/routes/api/$name.tsx

@@ -1,21 +1,21 @@
 import type { LoaderFunction } from "remix"
 import { useLoaderData } from "remix"
-import { inspect } from "node:util"
-import { loadApiData } from "~/modules/api/api-data.server"
+import { getApiData } from "~/modules/api/api-data.server"
 import { renderMarkdown } from "~/modules/markdown/render-markdown.server"
+import { docsProseClass } from "~/modules/ui/components"
 
 type LoaderData = {
   title: string
   description?: { __html: string }
+  [key: string]: unknown
 }
 
 export const loader: LoaderFunction = async ({ params }) => {
-  const apiData = await loadApiData()
+  const apiData = getApiData()
 
   const entityName = params.name!
 
   const info = apiData.children?.find((child) => child.name === entityName)
-  console.log(inspect(info, { depth: Number.POSITIVE_INFINITY }))
 
   const description = [
     info?.comment?.shortText,
@@ -29,6 +29,11 @@ export const loader: LoaderFunction = async ({ params }) => {
   const data: LoaderData = {
     title: entityName,
     description: description ? await renderMarkdown(description) : undefined,
+    sig: await renderMarkdown(`
+\`\`\`tsx
+function ActionRow(props: ActionRowProps): ReactElement
+\`\`\`
+`),
   }
   return data
 }
@@ -38,14 +43,50 @@ export default function ApiDetailPage() {
 
   return (
     <>
-      <h1>{data.title}</h1>
-      {data.description ? (
-        <section dangerouslySetInnerHTML={data.description} />
-      ) : undefined}
+      <h1 className="text-3xl font-light">{data.title}</h1>
+      <p className="text-sm font-bold opacity-50 uppercase mt-1">Component</p>
+      <section
+        className={docsProseClass}
+        dangerouslySetInnerHTML={data.description}
+      />
+      <section className={docsProseClass}>
+        <ul>
+          <li>
+            <p>
+              <code>children?: ReactNode</code>
+            </p>
+            <p>
+              This should be a list of <code>{`<Option />`}</code> components.
+            </p>
+            <ul>
+              <li>
+                <p>
+                  <code>disabled?: boolean</code>
+                </p>
+                <p>
+                  When true, the select will be slightly faded, and cannot be
+                  interacted with.
+                </p>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p>
+              <code>minValues?: number</code>
+            </p>
+            <p>
+              With <code>multiple</code>, the minimum number of values that can
+              be selected. When <code>multiple</code> is false or not defined,
+              this is always 1.
+            </p>
+            <p>
+              This only limits the number of values that can be received by the
+              user. This does not limit the number of values that can be
+              displayed by you.
+            </p>
+          </li>
+        </ul>
+      </section>
     </>
   )
 }
-
-function addDefined<Value extends number | string>(
-  ...values: Array<Value | undefined>
-): Value | undefined {}