akanjs 3.0.0-alpha.7 → 3.0.0-alpha.71

package/ui/Signal/Message.tsx

@@ -1,22 +1,26 @@
 "use client";
 import { PrimitiveRegistry } from "akanjs/base";
-
 import { fetch, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import type { SerializedEndpoint } from "akanjs/signal";
-
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSend, AiOutlineSwap } from "react-icons/ai";
 import { BiSolidNetworkChart } from "react-icons/bi";
 import { buttonRecipe } from "../Button";
+import { Collapse, dictText, docUi, Panel, Segmented } from "../Reference";
 import Arg from "./Arg";
-import { SignalCollapse } from "./Collapse";
+import { guardsOf } from "./endpointEntries";
 import Listener from "./Listener";
 import { makeRequestExample } from "./makeExample";
 import UiObject from "./Object";
 import Response from "./Response";
-import { getEndpointBadgeClassName, getGuardBadgeClassName, signalUi } from "./style";
+import { getGuardBadgeClassName, getWsBadgeClassName } from "./style";
+
+const messageViewItems = [
+  { key: "doc", label: "Reference", icon: <AiOutlineFileWord /> },
+  { key: "test", label: "Try it", icon: <BiSolidNetworkChart /> },
+] as const;
 
 export default function Message() {
   return <div></div>;
@@ -31,66 +35,37 @@ interface MessageEndpointProps {
 const MessageEndpoint = ({ refName, endpointKey, endpoint, open }: MessageEndpointProps) => {
   const { l } = usePage();
   const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
+  const guards = guardsOf(endpoint);
+  const label = dictText(l, `${refName}.signal.${endpointKey}`);
+  const desc = dictText(l, `${refName}.signal.${endpointKey}.desc`);
   return (
-    <SignalCollapse
+    <Collapse
       open={open}
-      contentClassName="bg-background/60"
       summary={
-        <div className="flex flex-wrap items-center gap-2">
-          <div className={getEndpointBadgeClassName(endpoint.type)}>{endpoint.type}</div>
-          <div className="font-bold text-lg">{endpointKey}</div>
-          <div className="text-foreground/70 text-sm">{l._(`${refName}.signal.${endpointKey}`)}</div>
-        </div>
-      }
-    >
-      <div>
-        <div className="rounded-xl bg-background p-3">
-          <div className={signalUi.sectionTitle}>Description</div>
-          {endpoint.guards?.some((guard) => guard !== "None") ? (
-            <div className="mt-2 flex flex-wrap items-center gap-2 font-normal text-sm">
-              <span className="text-foreground/70">Guards</span>
-              {endpoint.guards.map((guard) => (
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className={getWsBadgeClassName(endpoint.type)}>{endpoint.type}</span>
+            <span className="break-all font-medium font-mono text-sm">{endpointKey}</span>
+            <span className="ml-auto flex flex-wrap items-center gap-1.5">
+              {guards.map((guard) => (
                 <span className={getGuardBadgeClassName(guard)} key={guard}>
                   {guard}
                 </span>
               ))}
-            </div>
-          ) : null}
-          <div className="mt-2 font-normal text-foreground/70 text-sm">
-            {l._(`${refName}.signal.${endpointKey}.desc`)}
+            </span>
           </div>
+          {label ? <div className="text-foreground/55 text-sm">{label}</div> : null}
         </div>
-        <div className="inline-flex w-fit overflow-hidden rounded-field">
-          <button
-            onClick={() => {
-              setViewStatus("doc");
-            }}
-            className={buttonRecipe(
-              { variant: viewStatus === "doc" ? "primary" : "outline", size: "sm" },
-              "rounded-none",
-            )}
-          >
-            <AiOutlineFileWord className="text-xl" /> View Doc
-          </button>
-          <button
-            onClick={() => {
-              setViewStatus("test");
-            }}
-            className={buttonRecipe(
-              { variant: viewStatus === "test" ? "primary" : "outline", size: "sm" },
-              "rounded-none",
-            )}
-          >
-            <BiSolidNetworkChart className="text-xl" /> Message
-          </button>
-        </div>
-        {viewStatus === "doc" ? (
-          <MessageInterface refName={refName} endpointKey={endpointKey} endpoint={endpoint} />
-        ) : (
-          <MessageTry endpointKey={endpointKey} endpoint={endpoint} />
-        )}
-      </div>
-    </SignalCollapse>
+      }
+    >
+      {desc ? <p className={docUi.prose}>{desc}</p> : null}
+      <Segmented items={messageViewItems} onChange={setViewStatus} value={viewStatus} />
+      {viewStatus === "doc" ? (
+        <MessageInterface refName={refName} endpointKey={endpointKey} endpoint={endpoint} />
+      ) : (
+        <MessageTry endpointKey={endpointKey} endpoint={endpoint} />
+      )}
+    </Collapse>
   );
 };
 Message.Endpoint = MessageEndpoint;
@@ -105,38 +80,30 @@ const MessageInterface = ({ refName, endpointKey, endpoint }: MessageInterfacePr
   const uploadArgs = endpoint.args.filter((arg) => arg.refName === "Upload");
   const args = endpoint.args.filter((arg) => arg.refName !== "Upload");
   const isReturnModelType = !PrimitiveRegistry.has(returnRef);
+  const argSections = [
+    { label: "Form data", args: uploadArgs },
+    { label: "Variables", args },
+  ].filter((section) => section.args.length);
   return (
     <div className="flex flex-col gap-4">
-      {uploadArgs.length ? (
-        <div>
-          <div className={signalUi.sectionTitle}>Form data upload</div>
-          <div className={signalUi.tablePanel}>
-            <Arg.Table refName={refName} endpointKey={endpointKey} args={uploadArgs} />
+      {argSections.map((section) => (
+        <div className="flex flex-col gap-2" key={section.label}>
+          <div className={docUi.sectionLabel}>{section.label}</div>
+          <div className={docUi.tablePanel}>
+            <Arg.Table refName={refName} endpointKey={endpointKey} args={section.args} />
           </div>
         </div>
-      ) : null}
-      {args.length ? (
-        <div>
-          <div className={signalUi.sectionTitle}>Variables</div>
-          <div className={signalUi.tablePanel}>
-            <Arg.Table refName={refName} endpointKey={endpointKey} args={args} />
+      ))}
+      <div className="grid gap-3 md:grid-cols-2 md:items-start">
+        <Panel bodyClassName="max-h-none" label="Returns">
+          <div className="flex flex-col items-start gap-3">
+            <UiObject.Type objRef={returnRef} arrDepth={endpoint.returns.arrDepth ?? 0} />
+            {isReturnModelType ? (
+              <UiObject.Detail className="w-full border-0 bg-transparent" objRef={returnRef as ConstantCls} />
+            ) : null}
           </div>
-        </div>
-      ) : null}
-      <div className="font-bold text-lg">
-        <div className="flex w-full flex-col gap-2 rounded-md font-normal md:flex-row">
-          <div className="w-full md:w-1/2">
-            <div className={signalUi.sectionTitle}>Response Type</div>
-            <div className="max-h-[500px] overflow-auto rounded-xl bg-background p-4 md:h-[500px]">
-              Returns: <UiObject.Type objRef={returnRef} arrDepth={endpoint.returns.arrDepth ?? 0} />
-              {isReturnModelType ? <UiObject.Detail objRef={returnRef as ConstantCls} /> : null}
-            </div>
-          </div>
-          <div className="w-full md:w-1/2">
-            <div className={signalUi.sectionTitle}>Response Example</div>
-            <Response.Example endpoint={endpoint} />
-          </div>
-        </div>
+        </Panel>
+        <Response.Example endpoint={endpoint} />
       </div>
     </div>
   );
@@ -202,61 +169,46 @@ const MessageTry = ({ endpointKey, endpoint }: MessageTryProps) => {
 
   return (
     <div className="flex w-full flex-col gap-4">
-      <div>
-        <div className="grid gap-2 lg:grid-cols-2">
-          <div>
-            <div className={signalUi.sectionTitle}>Variables</div>
-            <div className="w-full items-center justify-center">
-              <Arg.Json
-                value={gqlRequest}
-                onChange={(value: string) => {
-                  setGqlRequest(value);
-                }}
-              />
-            </div>
-          </div>
-          {/* <div>
-              <div className="text-lg">Message String</div>
-              <div className="w-full items-center justify-center">
-                <Request.Example value={gqlStr} />
-              </div>
-            </div> */}
-        </div>
-        <div className="relative flex items-start justify-center gap-2">
-          <div className="flex w-full flex-col gap-2">
-            <button
-              disabled={!!stopListen}
-              className={buttonRecipe({ variant: "primary" }, "w-full")}
-              onClick={() => {
-                onListen();
-              }}
-            >
-              <AiOutlineSwap className="" /> Listen Message
-            </button>
-            <button
-              disabled={!stopListen}
-              className={buttonRecipe({ variant: "secondary" }, "w-full")}
-              onClick={() => void onSend()}
-            >
-              <AiOutlineSend className="" /> Send Message
-            </button>
-            <button
-              disabled={!stopListen}
-              className={buttonRecipe({ variant: "outline" }, "w-full")}
-              onClick={() => {
-                onStopListen();
-              }}
-            >
-              <AiOutlineDisconnect className="" /> Stop Listen Message
-            </button>
-          </div>
-        </div>
+      <div className="flex flex-col gap-2">
+        <div className={docUi.sectionLabel}>Variables</div>
+        <Arg.Json
+          value={gqlRequest}
+          onChange={(value: string) => {
+            setGqlRequest(value);
+          }}
+        />
       </div>
-
-      <div>
-        <div className={signalUi.sectionTitle}>Response</div>
-        <Listener.Result status={response.status} data={messages} />
+      <div className="grid gap-2 md:grid-cols-3">
+        <button
+          disabled={!!stopListen}
+          className={buttonRecipe({ variant: "primary" }, "w-full")}
+          onClick={() => {
+            onListen();
+          }}
+          type="button"
+        >
+          <AiOutlineSwap /> Listen
+        </button>
+        <button
+          disabled={!stopListen}
+          className={buttonRecipe({ variant: "secondary" }, "w-full")}
+          onClick={() => void onSend()}
+          type="button"
+        >
+          <AiOutlineSend /> Send
+        </button>
+        <button
+          disabled={!stopListen}
+          className={buttonRecipe({ variant: "outline" }, "w-full")}
+          onClick={() => {
+            onStopListen();
+          }}
+          type="button"
+        >
+          <AiOutlineDisconnect /> Stop
+        </button>
       </div>
+      <Listener.Result status={response.status} data={messages} />
     </div>
   );
 };

package/ui/Signal/Object.tsx

@@ -1,19 +1,21 @@
 "use client";
 import { type Cls, FIELD_META, getNonArrayModel, PrimitiveRegistry, type PrimitiveScalar } from "akanjs/base";
-import { usePage } from "akanjs/client";
+import { cn, usePage } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import { useState } from "react";
-import { badgeRecipe } from "../Badge";
 import { buttonRecipe } from "../Button";
 import { Modal } from "../Modal";
+import { dictText, docPill, docUi } from "../Reference";
 import { Tooltip } from "../Tooltip";
-import { signalUi } from "./style";
 
 export default function Object() {
   return <div></div>;
 }
 
+const typeLabel = (modelName: string, arrDepth: number, nullable?: boolean) =>
+  `${"[".repeat(arrDepth)}${modelName}${"]".repeat(arrDepth)}${nullable ? "" : "!"}`;
+
 interface ObjectTypeProps {
   objRef: Cls;
   arrDepth: number;
@@ -25,22 +27,22 @@ const ObjectType = ({ objRef, arrDepth, nullable }: ObjectTypeProps) => {
   const [openDetail, setOpenDetail] = useState(false);
   return (
     <>
-      <div
+      <span
         className={
-          isModelType ? badgeRecipe({ variant: "primary" }, "cursor-pointer") : badgeRecipe({ variant: "outline" })
+          isModelType
+            ? docPill("info", "cursor-pointer font-mono transition-colors hover:ring-info/60")
+            : docPill("muted", "font-mono")
         }
         onClick={() => {
           if (isModelType) setOpenDetail(true);
         }}
       >
-        {"[".repeat(arrDepth)}
-        {modelName}
-        {"]".repeat(arrDepth)}
-        {nullable ? "" : "!"}
-      </div>
+        {typeLabel(modelName, arrDepth, nullable)}
+      </span>
       {isModelType ? (
         <Modal
-          title={`Model Cls - ${modelName}`}
+          className="max-w-4xl"
+          title={`Model — ${modelName}`}
           open={openDetail}
           onCancel={() => {
             setOpenDetail(false);
@@ -55,64 +57,83 @@ const ObjectType = ({ objRef, arrDepth, nullable }: ObjectTypeProps) => {
 Object.Type = ObjectType;
 
 interface ObjectDetailProps {
+  className?: string;
   objRef: ConstantCls;
 }
-const ObjectDetail = ({ objRef }: ObjectDetailProps) => {
+const ObjectDetail = ({ className, objRef }: ObjectDetailProps) => {
   const modelRefName = ConstantRegistry.getRefName(objRef);
   const { l } = usePage();
   return (
-    <div className={signalUi.tablePanel}>
-      <table className={signalUi.tableClass}>
+    <div className={cn(docUi.tablePanel, className)}>
+      <table className={docUi.tableClass}>
         <thead>
           <tr>
-            <th>Key</th>
-            <th className="text-center">Cls</th>
-            <th className="text-center">Field Name</th>
-            <th className="text-center">Description</th>
-            <th className="text-center">Enum</th>
+            <th>Field</th>
+            <th>Type</th>
+            <th>Values</th>
+            <th className="w-1/2">Description</th>
           </tr>
         </thead>
-        {globalThis.Object.entries(objRef[FIELD_META]).map(
-          ([key, { arrDepth, nullable, modelRef, isClass, enum: enumOpt, isMap, of }], idx) => (
-            <tbody className="font-normal" key={idx}>
-              <tr>
+        <tbody>
+          {globalThis.Object.entries(objRef[FIELD_META]).map(
+            ([key, { arrDepth, nullable, modelRef, isClass, enum: enumOpt, isMap, of }], idx) => (
+              <tr key={idx}>
+                <td>
+                  <div className="font-medium font-mono">{key}</div>
+                  {dictText(l, `${modelRefName}.${key}`) ? (
+                    <div className="text-foreground/45 text-xs">{dictText(l, `${modelRefName}.${key}`)}</div>
+                  ) : null}
+                </td>
                 <td>
-                  <div className="font-bold">{key}</div>
+                  <div className="flex flex-wrap items-center gap-1">
+                    {isClass ? (
+                      <ObjectType objRef={modelRef} arrDepth={arrDepth} nullable={nullable} />
+                    ) : (
+                      <span className={docPill("muted", "font-mono")}>
+                        {typeLabel(isMap ? "Map" : ConstantRegistry.getModelName(modelRef), arrDepth, nullable)}
+                      </span>
+                    )}
+                    {isMap ? (
+                      <>
+                        <span className="text-foreground/35">⇒</span>
+                        {(() => {
+                          const [valueRef, valueArrDepth] = getNonArrayModel(of as Cls);
+                          if (PrimitiveRegistry.has(of as Cls))
+                            return (
+                              <span className={docPill("muted", "font-mono")}>
+                                {typeLabel(
+                                  PrimitiveRegistry.getName(of as typeof PrimitiveScalar),
+                                  valueArrDepth,
+                                  true,
+                                )}
+                              </span>
+                            );
+                          return <ObjectType objRef={valueRef as ConstantCls} arrDepth={valueArrDepth} nullable />;
+                        })()}
+                      </>
+                    ) : null}
+                  </div>
                 </td>
-                <td className="text-center">
-                  {isClass ? (
-                    <ObjectType objRef={modelRef} arrDepth={arrDepth} />
+                <td>
+                  {enumOpt ? (
+                    <div className="flex max-w-56 flex-wrap gap-1">
+                      {enumOpt.map((opt, idx: number) => (
+                        <Tooltip content={l._(`${enumOpt.refName}.${opt}`)} key={idx} variant="primary">
+                          <span className={buttonRecipe({ variant: "outline", size: "xs" }, "font-mono")}>{opt}</span>
+                        </Tooltip>
+                      ))}
+                    </div>
                   ) : (
-                    `${"[".repeat(arrDepth)}${ConstantRegistry.getModelName(modelRef)}${"]".repeat(arrDepth)}${nullable ? "" : "!"}`
+                    <span className="text-foreground/25">—</span>
                   )}
-
-                  {isMap ? (
-                    <>
-                      {" => "}
-                      {(() => {
-                        const [valueRef, valueArrDepth] = getNonArrayModel(of as Cls);
-                        if (PrimitiveRegistry.has(of as Cls))
-                          return `${"[".repeat(valueArrDepth)}${PrimitiveRegistry.getName(of as typeof PrimitiveScalar)}${"]".repeat(valueArrDepth)}`;
-                        else return <ObjectType objRef={valueRef as ConstantCls} arrDepth={valueArrDepth} />;
-                      })()}
-                    </>
-                  ) : null}
                 </td>
-                <td className="text-center text-foreground/70">{l._(`${modelRefName}.${key}`)}</td>
-                <td className="text-center text-foreground/70">{l._(`${modelRefName}.${key}.desc`)}</td>
-                <td className="flex flex-wrap items-center justify-center gap-2 text-center">
-                  {enumOpt
-                    ? enumOpt.map((opt, idx: number) => (
-                        <Tooltip key={idx} content={l._(`${enumOpt.refName}.${opt}`)} variant="primary">
-                          <button className={buttonRecipe({ variant: "outline", size: "xs" })}>{opt}</button>
-                        </Tooltip>
-                      ))
-                    : "-"}
+                <td className="text-foreground/70">
+                  {dictText(l, `${modelRefName}.${key}.desc`) || <span className="text-foreground/25">—</span>}
                 </td>
               </tr>
-            </tbody>
-          ),
-        )}
+            ),
+          )}
+        </tbody>
       </table>
     </div>
   );
@@ -128,10 +149,11 @@ const ObjectSchema = ({ objRef }: ObjectSchemaProps) => {
   const gqlName = `${ConstantRegistry.isLight(objRef) ? "Light" : ""}${refName}${ConstantRegistry.isInsight(objRef) ? "Insight" : ""}`;
   return (
     <div className="flex break-after-page flex-col gap-4">
-      <div className="mt-24" />
-      <div className="font-bold text-3xl">{gqlName}</div>
-      <div className="text-foreground/70">{l._(`${refName}.modelDesc`)}</div>
-      <div className="font-bold text-2xl">Schema</div>
+      <div>
+        <div className="font-bold text-3xl">{gqlName}</div>
+        <div className={docUi.sectionDescription}>{dictText(l, `${refName}.modelDesc`)}</div>
+      </div>
+      <div className={docUi.sectionLabel}>Schema</div>
       <ObjectDetail objRef={objRef as ConstantCls} />
     </div>
   );