akanjs 0.0.1 → 2.0.0-beta.1

package/ui/Signal/Object.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { type Cls, FIELD_META, getNonArrayModel, PrimitiveRegistry, type PrimitiveScalar } from "akanjs/base";
+import { usePage } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
+import { useState } from "react";
+import { Modal } from "../Modal";
+
+export default function Object() {
+  return <div></div>;
+}
+
+interface ObjectTypeProps {
+  objRef: Cls;
+  arrDepth: number;
+  nullable?: boolean;
+}
+const ObjectType = ({ objRef, arrDepth, nullable }: ObjectTypeProps) => {
+  const isModelType = !PrimitiveRegistry.has(objRef);
+  const modelName = ConstantRegistry.getModelName(objRef);
+  const [openDetail, setOpenDetail] = useState(false);
+  return (
+    <>
+      <div
+        className={isModelType ? "btn btn-sm btn-primary" : ""}
+        onClick={() => {
+          if (isModelType) setOpenDetail(true);
+        }}
+      >
+        {"[".repeat(arrDepth)}
+        {modelName}
+        {"]".repeat(arrDepth)}
+        {nullable ? "" : "!"}
+      </div>
+      {isModelType ? (
+        <Modal
+          title={`Model Cls - ${modelName}`}
+          open={openDetail}
+          onCancel={() => {
+            setOpenDetail(false);
+          }}
+        >
+          {openDetail ? <ObjectDetail objRef={objRef as ConstantCls} /> : null}
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+Object.Type = ObjectType;
+
+interface ObjectDetailProps {
+  objRef: ConstantCls;
+}
+const ObjectDetail = ({ objRef }: ObjectDetailProps) => {
+  const modelRefName = ConstantRegistry.getRefName(objRef);
+  const { l } = usePage();
+  return (
+    <div>
+      <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>
+        </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 className="text-center">
+                  {isClass ? (
+                    <ObjectType objRef={modelRef} arrDepth={arrDepth} />
+                  ) : (
+                    `${"[".repeat(arrDepth)}${ConstantRegistry.getModelName(modelRef)}${"]".repeat(arrDepth)}${nullable ? "" : "!"}`
+                  )}
+
+                  {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">{l._(`${modelRefName}.${key}`)}</td>
+                <td className="text-center">{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>
+                        </div>
+                      ))
+                    : "-"}
+                </td>
+              </tr>
+            </tbody>
+          ),
+        )}
+      </table>
+    </div>
+  );
+};
+Object.Detail = ObjectDetail;
+
+interface ObjectSchemaProps {
+  objRef: Cls;
+}
+const ObjectSchema = ({ objRef }: ObjectSchemaProps) => {
+  const { l } = usePage();
+  const refName = capitalize(ConstantRegistry.getRefName(objRef));
+  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="mb-5"> - {l._(`${refName}.modelDesc`)}</div>
+      <div className="font-bold text-2xl">Schema</div>
+      <ObjectDetail objRef={objRef as ConstantCls} />
+    </div>
+  );
+};
+Object.Schema = ObjectSchema;

package/ui/Signal/PubSub.tsx

@@ -0,0 +1,247 @@
+"use client";
+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";
+import Arg from "./Arg";
+import Listener from "./Listener";
+import { makeRequestExample } from "./makeExample";
+import UiObject from "./Object";
+import Response from "./Response";
+
+export default function PubSub() {
+  return <div></div>;
+}
+
+interface PubSubEndpointProps {
+  refName: string;
+  endpointKey: string;
+  endpoint: SerializedEndpoint;
+  open?: boolean;
+}
+const PubSubEndpoint = ({ refName, endpointKey, endpoint, open }: PubSubEndpointProps) => {
+  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>
+      </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" />
+          {endpoint.guards?.some((guard) => guard !== "None") ? (
+            <div className="flex items-center gap-2 pb-3 pl-3 font-normal text-base">
+              - Guards:
+              {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}
+                >
+                  {guard}
+                </span>
+              ))}
+            </div>
+          ) : null}
+          <div className="pb-3 pl-3 font-normal text-base">- {l._(`${refName}.signal.${endpointKey}.desc`)}</div>
+        </div>
+        <div className="my-4 flex w-full gap-5 px-5">
+          <button
+            onClick={() => {
+              setViewStatus("doc");
+            }}
+            className={`btn btn-success w-1/2 ${viewStatus === "doc" ? "" : "btn-outline"}`}
+          >
+            <AiOutlineFileWord className="text-xl" /> View Doc
+          </button>
+          <button
+            onClick={() => {
+              setViewStatus("test");
+            }}
+            className={`btn btn-primary w-1/2 ${viewStatus === "test" ? "" : "btn-outline"}`}
+          >
+            <BiSolidNetworkChart className="text-xl" /> PubSub
+          </button>
+        </div>
+        {viewStatus === "doc" ? (
+          <PubSubInterface refName={refName} endpointKey={endpointKey} endpoint={endpoint} />
+        ) : (
+          <PubSubTry refName={refName} endpointKey={endpointKey} endpoint={endpoint} />
+        )}
+      </div>
+    </div>
+  );
+};
+PubSub.Endpoint = PubSubEndpoint;
+
+interface PubSubInterfaceProps {
+  refName: string;
+  endpointKey: string;
+  endpoint: SerializedEndpoint;
+}
+const PubSubInterface = ({ refName, endpointKey, endpoint }: PubSubInterfaceProps) => {
+  const returnRef = ConstantRegistry.getModelRef(endpoint.returns.refName, endpoint.returns.modelType);
+  const isReturnModelType = !PrimitiveRegistry.has(returnRef);
+  return (
+    <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">
+            <Arg.Table refName={refName} endpointKey={endpointKey} args={endpoint.args} />
+          </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">
+            Response Type
+            <div className="max-h-[500px] overflow-auto rounded-md 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
+            <Response.Example endpoint={endpoint} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+PubSub.Interface = PubSubInterface;
+
+interface PubSubTryProps {
+  refName: string;
+  endpointKey: string;
+  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);
+  const [messages, setMessages] = useState<string | boolean | object[] | null>("");
+  const [response, setResponse] = useState<{
+    status: "ready" | "error" | "listening" | "loading";
+    data: string | boolean | object[] | null;
+  }>({ status: "ready", data: "" });
+  const onSubscribe = () => {
+    setResponse({ status: "loading", data: "" });
+    const request = JSON.parse(gqlRequest) as { [key: string]: string | number | boolean | null };
+    const argData = endpoint.args.map((arg) => request[arg.name]);
+
+    const fetchFn = ((fetch as any)[endpointKey] as (...args: any[]) => Promise<any>).bind(fetch) as (
+      ...args: [...args: (string | number | boolean | null)[], data: (data: unknown) => void]
+    ) => Promise<() => void>;
+    setResponse({ status: "loading", data: messages });
+    const unsubscribe = fetchFn(...argData, (data: any) => {
+      setMessages((prev) =>
+        typeof data === "boolean"
+          ? data
+          : typeof data === "string"
+            ? `${prev as string}\n${data}`
+            : typeof data === "object"
+              ? ([
+                  ...(((prev as object[] | undefined)?.length ? [...(prev as object[])] : []) as object[]),
+                  data,
+                ] as object[])
+              : data,
+      );
+    });
+    setResponse({ status: "listening", data: messages });
+    setUnsubscribe(() => unsubscribe);
+  };
+  const onUnsubscribe = () => {
+    if (!unsubscribe) return;
+    unsubscribe();
+    setUnsubscribe(null);
+    setResponse({ status: "ready", data: null });
+    setMessages("");
+  };
+
+  useEffect(() => {
+    if (!unsubscribe) return;
+    return () => {
+      onUnsubscribe();
+    };
+  }, [unsubscribe]);
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div>
+        <div className="grid gap-2 lg:grid-cols-2">
+          <div>
+            <div className="text-lg">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">PubSub String</div>
+              <div className="w-full items-center justify-center">
+                <Request.Example value={gqlStr} />
+              </div>
+            </div> */}
+        </div>
+        <div className="relative flex items-center justify-center gap-2">
+          <button
+            disabled={!!unsubscribe}
+            className="btn btn-success w-1/2"
+            onClick={() => {
+              onSubscribe();
+            }}
+          >
+            <AiOutlineSwap className="-mt-0.5" /> Subscribe PubSub
+          </button>
+          <button
+            disabled={!unsubscribe}
+            className="btn btn-error w-1/2"
+            onClick={() => {
+              onUnsubscribe();
+            }}
+          >
+            <AiOutlineDisconnect className="-mt-0.5" /> Unsubscribe PubSub
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-lg">Response</div>
+        <Listener.Result status={response.status} data={messages} />
+      </div>
+    </div>
+  );
+};
+PubSub.Try = PubSubTry;

package/ui/Signal/Request.tsx

@@ -0,0 +1,30 @@
+import { AiOutlineCopy } from "react-icons/ai";
+
+import { Copy } from "../Copy";
+
+export default function Request() {
+  return <div></div>;
+}
+
+interface RequestExampleProps {
+  value: string;
+}
+const RequestExample = ({ value }: RequestExampleProps) => {
+  return (
+    <div className="relative">
+      <textarea
+        className="min-h-[300px] w-full rounded-md bg-base-100 p-4 text-base"
+        value={value}
+        onChange={() => true}
+      />
+      <div className="absolute top-4 right-4">
+        <Copy text={value}>
+          <button className="btn btn-sm">
+            <AiOutlineCopy /> Copy
+          </button>
+        </Copy>
+      </div>
+    </div>
+  );
+};
+Request.Example = RequestExample;

package/ui/Signal/Response.tsx

@@ -0,0 +1,76 @@
+
+
+import type { SerializedEndpoint } from "akanjs/signal";
+import { useMemo } from "react";
+import { AiOutlineCopy } from "react-icons/ai";
+import { Copy } from "../Copy";
+import { makeResponseExample } from "./makeExample";
+
+export default function Response() {
+  return <div></div>;
+}
+
+interface ResponseExampleProps {
+  endpoint: SerializedEndpoint;
+}
+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}
+      />
+      <div className="absolute top-4 right-4">
+        <Copy text={example}>
+          <button className="btn btn-sm">
+            <AiOutlineCopy /> Copy
+          </button>
+        </Copy>
+      </div>
+    </div>
+  );
+};
+Response.Example = ResponseExample;
+
+interface ResponseResultProps {
+  status: "idle" | "loading" | "success" | "error";
+  data: unknown;
+}
+const ResponseResult = ({ status, data }: ResponseResultProps) => {
+  const dataStr = data ? JSON.stringify(data, null, 2) : "";
+  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`}
+        value={dataStr}
+        onChange={() => true}
+      />
+      {status === "loading" ? (
+        <div className="absolute inset-0 flex animate-fadeIn items-center justify-center backdrop-blur-sm">
+          <span className="loading loading-dots loading-lg"></span>
+        </div>
+      ) : status === "idle" ? (
+        <></>
+      ) : (
+        <div className="absolute top-4 right-4">
+          <Copy text={dataStr}>
+            <button className="btn btn-sm">
+              <AiOutlineCopy /> Copy
+            </button>
+          </Copy>
+        </div>
+      )}
+    </div>
+  );
+};
+Response.Result = ResponseResult;