akanjs 2.0.6 → 2.0.7

package/ui/Signal/Message.tsx

@@ -14,6 +14,7 @@ import Listener from "./Listener";
 import { makeRequestExample } from "./makeExample";
 import UiObject from "./Object";
 import Response from "./Response";
+import { getEndpointBadgeClassName, getGuardBadgeClassName, signalUi } from "./style";
 
 export default function Message() {
   return <div></div>;
@@ -28,58 +29,39 @@ interface MessageEndpointProps {
 const MessageEndpoint = ({ refName, endpointKey, endpoint, open }: MessageEndpointProps) => {
   const { l } = usePage();
   const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
-  const args = endpoint.args.filter((arg) => arg.refName !== "Upload");
-  const uploadArgs = endpoint.args.filter((arg) => arg.refName === "Upload");
   return (
-    <div className="collapse-arrow collapse my-1 bg-base-300">
-      <input type="checkbox" checked={open} />
-      <div className="collapse-title text-xl">
-        <div className="flex items-center gap-3">
-          <div className={`btn btn-xs w-16 ${endpoint.type === "pubsub" ? "btn-info" : "btn-warning"}`}>
-            {endpoint.type}
-          </div>
-          {endpointKey} <span className="text-sm">({l._(`${refName}.signal.${endpointKey}`)})</span>
+    <div className={signalUi.endpointCard}>
+      <input type="checkbox" defaultChecked={open} />
+      <div className="collapse-title">
+        <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-base-content/70 text-sm">{l._(`${refName}.signal.${endpointKey}`)}</div>
         </div>
       </div>
-      <div className="collapse-content w-full bg-base-200">
-        <div className="mt-4 text-lg">
-          Description
-          <hr className="my-2 border-[0.1px] border-gray-400" />
+      <div className={signalUi.endpointContent}>
+        <div className="rounded-xl bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Description</div>
           {endpoint.guards?.some((guard) => guard !== "None") ? (
-            <div className="flex items-center gap-2 pb-3 pl-3 font-normal text-base">
-              - Guards:
+            <div className="mt-2 flex flex-wrap items-center gap-2 font-normal text-sm">
+              <span className="text-base-content/70">Guards</span>
               {endpoint.guards.map((guard) => (
-                <span
-                  className={`badge ${
-                    guard === "Public"
-                      ? "badge-success"
-                      : guard === "SuperAdmin"
-                        ? "badge-error"
-                        : guard === "Admin"
-                          ? "badge-error"
-                          : guard === "User"
-                            ? "badge-accent"
-                            : guard === "Owner"
-                              ? "badge-accent"
-                              : guard === "Every"
-                                ? "badge-warning"
-                                : ""
-                  }`}
-                  key={guard}
-                >
+                <span className={getGuardBadgeClassName(guard)} key={guard}>
                   {guard}
                 </span>
               ))}
             </div>
           ) : null}
-          <div className="pb-3 pl-3 font-normal text-base">- {l._(`${refName}.signal.${endpointKey}.desc`)}</div>
+          <div className="mt-2 font-normal text-base-content/70 text-sm">
+            {l._(`${refName}.signal.${endpointKey}.desc`)}
+          </div>
         </div>
-        <div className="my-4 flex w-full gap-5 px-5">
+        <div className="join w-fit">
           <button
             onClick={() => {
               setViewStatus("doc");
             }}
-            className={`btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`}
+            className={`btn join-item btn-sm ${viewStatus === "doc" ? "btn-primary" : "btn-outline"}`}
           >
             <AiOutlineFileWord className="text-xl" /> View Doc
           </button>
@@ -87,7 +69,7 @@ const MessageEndpoint = ({ refName, endpointKey, endpoint, open }: MessageEndpoi
             onClick={() => {
               setViewStatus("test");
             }}
-            className={`btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`}
+            className={`btn join-item btn-sm ${viewStatus === "test" ? "btn-primary" : "btn-outline"}`}
           >
             <BiSolidNetworkChart className="text-xl" /> Message
           </button>
@@ -117,16 +99,16 @@ const MessageInterface = ({ refName, endpointKey, endpoint }: MessageInterfacePr
     <div className="flex flex-col gap-4">
       {uploadArgs.length ? (
         <div>
-          <div className="text-lg">Form data upload</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Form data upload</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={uploadArgs} />
           </div>
         </div>
       ) : null}
       {args.length ? (
         <div>
-          <div className="text-lg">Variables</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Variables</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={args} />
           </div>
         </div>
@@ -134,14 +116,14 @@ const MessageInterface = ({ refName, endpointKey, endpoint }: MessageInterfacePr
       <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">
-            Response Type
-            <div className="max-h-[500px] overflow-auto rounded-md bg-base-100 p-4 md:h-[500px]">
+            <div className={signalUi.sectionTitle}>Response Type</div>
+            <div className="max-h-[500px] overflow-auto rounded-xl bg-base-100 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">
-            Response Example
+            <div className={signalUi.sectionTitle}>Response Example</div>
             <Response.Example endpoint={endpoint} />
           </div>
         </div>
@@ -213,7 +195,7 @@ const MessageTry = ({ endpointKey, endpoint }: MessageTryProps) => {
       <div>
         <div className="grid gap-2 lg:grid-cols-2">
           <div>
-            <div className="text-lg">Variables</div>
+            <div className={signalUi.sectionTitle}>Variables</div>
             <div className="w-full items-center justify-center">
               <Arg.Json
                 value={gqlRequest}
@@ -234,19 +216,19 @@ const MessageTry = ({ endpointKey, endpoint }: MessageTryProps) => {
           <div className="flex w-full flex-col gap-2">
             <button
               disabled={!!stopListen}
-              className="btn btn-success w-full"
+              className="btn btn-primary w-full"
               onClick={() => {
                 onListen();
               }}
             >
               <AiOutlineSwap className="" /> Listen Message
             </button>
-            <button disabled={!stopListen} className="btn btn-info w-full" onClick={() => void onSend()}>
+            <button disabled={!stopListen} className="btn btn-secondary w-full" onClick={() => void onSend()}>
               <AiOutlineSend className="" /> Send Message
             </button>
             <button
               disabled={!stopListen}
-              className="btn btn-error w-full"
+              className="btn btn-outline w-full"
               onClick={() => {
                 onStopListen();
               }}
@@ -258,7 +240,7 @@ const MessageTry = ({ endpointKey, endpoint }: MessageTryProps) => {
       </div>
 
       <div>
-        <div className="text-lg">Response</div>
+        <div className={signalUi.sectionTitle}>Response</div>
         <Listener.Result status={response.status} data={messages} />
       </div>
     </div>

package/ui/Signal/Object.tsx

@@ -5,6 +5,7 @@ import { capitalize } from "akanjs/common";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import { useState } from "react";
 import { Modal } from "../Modal";
+import { signalUi } from "./style";
 
 export default function Object() {
   return <div></div>;
@@ -22,7 +23,7 @@ const ObjectType = ({ objRef, arrDepth, nullable }: ObjectTypeProps) => {
   return (
     <>
       <div
-        className={isModelType ? "btn btn-sm btn-primary" : ""}
+        className={isModelType ? "badge badge-primary cursor-pointer" : "badge badge-outline"}
         onClick={() => {
           if (isModelType) setOpenDetail(true);
         }}
@@ -55,22 +56,24 @@ const ObjectDetail = ({ objRef }: ObjectDetailProps) => {
   const modelRefName = ConstantRegistry.getRefName(objRef);
   const { l } = usePage();
   return (
-    <div>
+    <div className={signalUi.tablePanel}>
       <table className="table">
         <thead>
-          <tr className="text-bold">
-            <th className="text-base">Key</th>
-            <th className="text-center text-base">Cls</th>
-            <th className="text-center text-base">Field Name</th>
-            <th className="text-center text-base">Description</th>
-            <th className="text-center text-base">Enum</th>
+          <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>
           </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>
-                <td className="">{key}</td>
+                <td>
+                  <div className="font-bold">{key}</div>
+                </td>
                 <td className="text-center">
                   {isClass ? (
                     <ObjectType objRef={modelRef} arrDepth={arrDepth} />
@@ -90,13 +93,13 @@ const ObjectDetail = ({ objRef }: ObjectDetailProps) => {
                     </>
                   ) : null}
                 </td>
-                <td className="text-center">{l._(`${modelRefName}.${key}`)}</td>
-                <td className="text-center">{l._(`${modelRefName}.${key}.desc`)}</td>
+                <td className="text-center text-base-content/70">{l._(`${modelRefName}.${key}`)}</td>
+                <td className="text-center text-base-content/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) => (
                         <div key={idx} className="tooltip tooltip-primary" data-tip={l._(`${enumOpt.refName}.${opt}`)}>
-                          <button className="btn btn-xs">{opt}</button>
+                          <button className="btn btn-outline btn-xs">{opt}</button>
                         </div>
                       ))
                     : "-"}
@@ -122,7 +125,7 @@ const ObjectSchema = ({ objRef }: ObjectSchemaProps) => {
     <div className="flex break-after-page flex-col gap-4">
       <div className="mt-24" />
       <div className="font-bold text-3xl">{gqlName}</div>
-      <div className="mb-5"> - {l._(`${refName}.modelDesc`)}</div>
+      <div className="text-base-content/70">{l._(`${refName}.modelDesc`)}</div>
       <div className="font-bold text-2xl">Schema</div>
       <ObjectDetail objRef={objRef as ConstantCls} />
     </div>

package/ui/Signal/PubSub.tsx

@@ -3,7 +3,6 @@ import { PrimitiveRegistry } from "akanjs/base";
 import { fetch, usePage } from "akanjs/client";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import type { SerializedEndpoint } from "akanjs/signal";
-import { st } from "akanjs/store";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineDisconnect, AiOutlineFileWord, AiOutlineSwap } from "react-icons/ai";
 import { BiSolidNetworkChart } from "react-icons/bi";
@@ -12,6 +11,7 @@ import Listener from "./Listener";
 import { makeRequestExample } from "./makeExample";
 import UiObject from "./Object";
 import Response from "./Response";
+import { getEndpointBadgeClassName, getGuardBadgeClassName, signalUi } from "./style";
 
 export default function PubSub() {
   return <div></div>;
@@ -27,55 +27,38 @@ const PubSubEndpoint = ({ refName, endpointKey, endpoint, open }: PubSubEndpoint
   const { l } = usePage();
   const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
   return (
-    <div className="collapse-arrow collapse my-1 bg-base-300">
-      <input type="checkbox" checked={open} />
-      <div className="collapse-title text-xl">
-        <div className="flex items-center gap-3">
-          <div className={`btn btn-xs w-16 ${endpoint.type === "pubsub" ? "btn-info" : "btn-warning"}`}>
-            {endpoint.type}
-          </div>
-          {endpointKey} <span className="text-sm">({l._(`${refName}.signal.${endpointKey}`)})</span>
+    <div className={signalUi.endpointCard}>
+      <input type="checkbox" defaultChecked={open} />
+      <div className="collapse-title">
+        <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-base-content/70 text-sm">{l._(`${refName}.signal.${endpointKey}`)}</div>
         </div>
       </div>
-      <div className="collapse-content w-full bg-base-200">
-        <div className="mt-4 text-lg">
-          Description
-          <hr className="my-2 border-[0.1px] border-gray-400" />
+      <div className={signalUi.endpointContent}>
+        <div className="rounded-xl bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Description</div>
           {endpoint.guards?.some((guard) => guard !== "None") ? (
-            <div className="flex items-center gap-2 pb-3 pl-3 font-normal text-base">
-              - Guards:
+            <div className="mt-2 flex flex-wrap items-center gap-2 font-normal text-sm">
+              <span className="text-base-content/70">Guards</span>
               {endpoint.guards.map((guard) => (
-                <span
-                  className={`badge ${
-                    guard === "Public"
-                      ? "badge-success"
-                      : guard === "SuperAdmin"
-                        ? "badge-error"
-                        : guard === "Admin"
-                          ? "badge-error"
-                          : guard === "User"
-                            ? "badge-accent"
-                            : guard === "Owner"
-                              ? "badge-accent"
-                              : guard === "Every"
-                                ? "badge-warning"
-                                : ""
-                  }`}
-                  key={guard}
-                >
+                <span className={getGuardBadgeClassName(guard)} key={guard}>
                   {guard}
                 </span>
               ))}
             </div>
           ) : null}
-          <div className="pb-3 pl-3 font-normal text-base">- {l._(`${refName}.signal.${endpointKey}.desc`)}</div>
+          <div className="mt-2 font-normal text-base-content/70 text-sm">
+            {l._(`${refName}.signal.${endpointKey}.desc`)}
+          </div>
         </div>
-        <div className="my-4 flex w-full gap-5 px-5">
+        <div className="join w-fit">
           <button
             onClick={() => {
               setViewStatus("doc");
             }}
-            className={`btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`}
+            className={`btn join-item btn-sm ${viewStatus === "doc" ? "btn-primary" : "btn-outline"}`}
           >
             <AiOutlineFileWord className="text-xl" /> View Doc
           </button>
@@ -83,7 +66,7 @@ const PubSubEndpoint = ({ refName, endpointKey, endpoint, open }: PubSubEndpoint
             onClick={() => {
               setViewStatus("test");
             }}
-            className={`btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`}
+            className={`btn join-item btn-sm ${viewStatus === "test" ? "btn-primary" : "btn-outline"}`}
           >
             <BiSolidNetworkChart className="text-xl" /> PubSub
           </button>
@@ -111,8 +94,8 @@ const PubSubInterface = ({ refName, endpointKey, endpoint }: PubSubInterfaceProp
     <div className="flex flex-col gap-4">
       {endpoint.args.length ? (
         <div>
-          <div className="text-lg">Variables</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Variables</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={endpoint.args} />
           </div>
         </div>
@@ -120,14 +103,14 @@ const PubSubInterface = ({ refName, endpointKey, endpoint }: PubSubInterfaceProp
       <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">
-            Response Type
-            <div className="max-h-[500px] overflow-auto rounded-md bg-base-100 p-4 md:h-[500px]">
+            <div className={signalUi.sectionTitle}>Response Type</div>
+            <div className="max-h-[500px] overflow-auto rounded-xl bg-base-100 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">
-            Response Example
+            <div className={signalUi.sectionTitle}>Response Example</div>
             <Response.Example endpoint={endpoint} />
           </div>
         </div>
@@ -143,7 +126,6 @@ interface PubSubTryProps {
   endpoint: SerializedEndpoint;
 }
 const PubSubTry = ({ refName, endpointKey, endpoint }: PubSubTryProps) => {
-  const tryJwt = st.use.tryJwt();
   const requestExample = useMemo(() => JSON.stringify(makeRequestExample(endpoint), null, 2), []);
   const [gqlRequest, setGqlRequest] = useState<string>(requestExample);
   const [unsubscribe, setUnsubscribe] = useState<(() => void) | null>(null);
@@ -198,7 +180,7 @@ const PubSubTry = ({ refName, endpointKey, endpoint }: PubSubTryProps) => {
       <div>
         <div className="grid gap-2 lg:grid-cols-2">
           <div>
-            <div className="text-lg">Variables</div>
+            <div className={signalUi.sectionTitle}>Variables</div>
             <div className="w-full items-center justify-center">
               <Arg.Json
                 value={gqlRequest}
@@ -218,7 +200,7 @@ const PubSubTry = ({ refName, endpointKey, endpoint }: PubSubTryProps) => {
         <div className="relative flex items-center justify-center gap-2">
           <button
             disabled={!!unsubscribe}
-            className="btn btn-success w-1/2"
+            className="btn btn-primary w-1/2"
             onClick={() => {
               onSubscribe();
             }}
@@ -227,7 +209,7 @@ const PubSubTry = ({ refName, endpointKey, endpoint }: PubSubTryProps) => {
           </button>
           <button
             disabled={!unsubscribe}
-            className="btn btn-error w-1/2"
+            className="btn btn-outline w-1/2"
             onClick={() => {
               onUnsubscribe();
             }}
@@ -238,7 +220,7 @@ const PubSubTry = ({ refName, endpointKey, endpoint }: PubSubTryProps) => {
       </div>
 
       <div>
-        <div className="text-lg">Response</div>
+        <div className={signalUi.sectionTitle}>Response</div>
         <Listener.Result status={response.status} data={messages} />
       </div>
     </div>

package/ui/Signal/Response.tsx

@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import { AiOutlineCopy } from "react-icons/ai";
 import { Copy } from "../Copy";
 import { makeResponseExample } from "./makeExample";
+import { getStatusBadgeClassName, getStatusTextareaClassName, signalUi } from "./style";
 
 export default function Response() {
   return <div></div>;
@@ -17,14 +18,10 @@ const ResponseExample = ({ endpoint }: ResponseExampleProps) => {
   const example = useMemo(() => JSON.stringify(makeResponseExample(endpoint), null, 2), []);
   return (
     <div className="relative">
-      <textarea
-        className="min-h-72 w-full rounded-md bg-base-100 p-4 text-base"
-        value={example}
-        onChange={() => true}
-      />
+      <textarea className={`${signalUi.codePanel} min-h-72 text-base`} value={example} onChange={() => true} />
       <div className="absolute top-4 right-4">
         <Copy text={example}>
-          <button className="btn btn-sm">
+          <button className="btn btn-outline btn-sm">
             <AiOutlineCopy /> Copy
           </button>
         </Copy>
@@ -43,15 +40,7 @@ const ResponseResult = ({ status, data }: ResponseResultProps) => {
   return (
     <div className="relative">
       <textarea
-        className={`textarea ${
-          status === "loading"
-            ? "textarea-disabled"
-            : status === "success"
-              ? "textarea-success border-success"
-              : status === "error"
-                ? "textarea-error border-error text-error"
-                : ""
-        } min-h-[300px] w-full rounded-md bg-base-100 p-4 font-normal text-sm`}
+        className={`${signalUi.codePanel} ${getStatusTextareaClassName(status)}`}
         value={dataStr}
         onChange={() => true}
       />
@@ -62,9 +51,10 @@ const ResponseResult = ({ status, data }: ResponseResultProps) => {
       ) : status === "idle" ? (
         <></>
       ) : (
-        <div className="absolute top-4 right-4">
+        <div className="absolute top-4 right-4 flex items-center gap-2">
+          <span className={getStatusBadgeClassName(status)}>{status}</span>
           <Copy text={dataStr}>
-            <button className="btn btn-sm">
+            <button className="btn btn-outline btn-sm">
               <AiOutlineCopy /> Copy
             </button>
           </Copy>