akanjs 2.0.6 → 2.0.7

package/ui/Signal/RestApi.tsx

@@ -12,6 +12,7 @@ import { Signal } from ".";
 import Arg from "./Arg";
 import { getExampleData } from "./makeExample";
 import Response from "./Response";
+import { getEndpointBadgeClassName, getGuardBadgeClassName, signalUi } from "./style";
 
 type RestApiFetchFn = (
   ...args: [...args: unknown[], option: { token?: string; crystalize?: boolean }]
@@ -100,55 +101,38 @@ const RestApiEndpoint = ({
   const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
   const path = FetchClient.makeHttpUrl(endpointKey, endpoint, signalPrefix, new Map());
   return (
-    <div className="collapse-arrow collapse my-1 bg-base-300">
-      <input type="checkbox" checked={open} />
+    <div className={signalUi.endpointCard}>
+      <input type="checkbox" defaultChecked={open} />
       <div className="collapse-title">
-        <div className="flex items-center gap-3">
-          <div className={`btn btn-xs w-16 ${endpoint.type === "query" ? "btn-success" : "btn-accent"}`}>
-            {endpoint.type === "query" ? "GET" : "POST"}
-          </div>
-          {path} <span className="text-lg">({l._(`${refName}.signal.${endpointKey}`)})</span>
+        <div className="flex flex-wrap items-center gap-2">
+          <div className={getEndpointBadgeClassName(endpoint.type)}>{endpoint.type === "query" ? "GET" : "POST"}</div>
+          <div className="font-bold text-lg">{path}</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">
-          <div className="font-extrabold text-lg">Description</div>
-          <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>
@@ -156,7 +140,7 @@ const RestApiEndpoint = ({
             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"}`}
           >
             <AiOutlineApi className="text-xl" /> Restful API
           </button>
@@ -195,32 +179,32 @@ const RestApiInterface = ({ refName, endpointKey, endpoint }: RestApiInterfacePr
     <div className="flex w-full flex-col gap-4">
       {uploadArgs.length ? (
         <div>
-          <div className="font-extrabold 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}
       {paramArgs.length ? (
         <div>
-          <div className="font-extrabold text-lg">Parameters</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Parameters</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={paramArgs} />
           </div>
         </div>
       ) : null}
       {searchArgs.length ? (
         <div>
-          <div className="font-extrabold text-lg">Query</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Query</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={searchArgs} />
           </div>
         </div>
       ) : null}
       {bodyArgs.length ? (
         <div>
-          <div className="font-extrabold text-lg">Body</div>
-          <div className="overflow-x-auto rounded-md bg-base-100 p-3">
+          <div className={signalUi.sectionTitle}>Body</div>
+          <div className={signalUi.tablePanel}>
             <Arg.Table refName={refName} endpointKey={endpointKey} args={bodyArgs} />
           </div>
         </div>
@@ -228,14 +212,14 @@ const RestApiInterface = ({ refName, endpointKey, endpoint }: RestApiInterfacePr
       <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="font-extrabold text-lg">Response Type</div>
-            <div className="max-h-72 overflow-auto rounded-md bg-base-100 p-4 md:h-72">
+            <div className={signalUi.sectionTitle}>Response Type</div>
+            <div className="max-h-72 overflow-auto rounded-xl bg-base-100 p-4 md:h-72">
               Returns: <Signal.Object.Type objRef={returnRef} arrDepth={endpoint.returns.arrDepth ?? 0} />
               {isReturnModelType ? <Signal.Object.Detail objRef={returnRef as ConstantCls} /> : null}
             </div>
           </div>
           <div className="w-full md:w-1/2">
-            <div className="font-extrabold text-lg">Response Example</div>
+            <div className={signalUi.sectionTitle}>Response Example</div>
             <Response.Example endpoint={endpoint} />
           </div>
         </div>
@@ -313,8 +297,8 @@ const RestApiTry = ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpU
   };
   return (
     <div className="flex w-full flex-col gap-4">
-      <div className="flex items-center gap-2 text-lg">
-        <div className="font-extrabold text-lg">Request URL:</div>
+      <div className="flex flex-wrap items-center gap-2 rounded-xl bg-base-100 p-3">
+        <div className={signalUi.sectionTitle}>Request URL</div>
         <Copy text={`${httpUri ?? ""}${requestPath}`}>
           <button className="btn btn-sm btn-outline">
             {requestPath} <AiOutlineCopy />
@@ -323,7 +307,7 @@ const RestApiTry = ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpU
       </div>
       {uploadArgs.length ? (
         <div>
-          <div className="text-lg">Form data uplaod</div>
+          <div className={signalUi.sectionTitle}>Form data upload</div>
           {uploadArgs.map((arg) => (
             <Arg.FormData
               key={arg.name}
@@ -338,8 +322,8 @@ const RestApiTry = ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpU
         </div>
       ) : null}
       {paramArgs.length ? (
-        <div className="border-gray-400 border-t pt-5">
-          <div className="font-extrabold text-lg">Parameters</div>
+        <div className={signalUi.sectionPanel}>
+          <div className={signalUi.sectionTitle}>Parameters</div>
           {paramArgs.map((arg, idx) => (
             <Arg.Param
               key={idx}
@@ -354,8 +338,8 @@ const RestApiTry = ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpU
         </div>
       ) : null}
       {queryArgs.length ? (
-        <div>
-          <div className="font-extrabold text-lg">Queries</div>
+        <div className={signalUi.sectionPanel}>
+          <div className={signalUi.sectionTitle}>Queries</div>
           {queryArgs.map((arg, idx) => (
             <Arg.Query
               key={idx}
@@ -371,17 +355,17 @@ const RestApiTry = ({ signalPrefix, refName, endpointKey, endpoint, fetch, httpU
       ) : null}
       {bodyArgs.length ? (
         <div>
-          <div className="text-lg">Body</div>
+          <div className={signalUi.sectionTitle}>Body</div>
           <Arg.Json value={bodyRequest} onChange={setBodyRequest} />
         </div>
       ) : null}
-      <div className="border-gray-400 border-b pb-5">
-        <button className="btn w-full bg-success" onClick={() => void onSend()}>
+      <div>
+        <button className="btn btn-primary w-full" onClick={() => void onSend()}>
           <AiOutlineSend className="-mt-0.5" /> Send Request
         </button>
       </div>
       <div>
-        <div className="font-extrabold text-lg">Response</div>
+        <div className={signalUi.sectionTitle}>Response</div>
         <Response.Result status={response.status} data={response.data as object} />
       </div>
     </div>

package/ui/Signal/WebSocket.tsx

@@ -23,7 +23,7 @@ const WebSocketEndpoints = ({ refName, fetch, openAll }: WebSocketEndpointsProps
       return false;
     });
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       {endpointEntries.map(([endpointKey, endpoint], idx) => {
         if (endpoint.type === "pubsub") {
           return (

package/ui/Signal/style.ts

@@ -0,0 +1,36 @@
+"use client";
+
+export const signalUi = {
+  sectionTitle: "font-extrabold text-lg",
+  sectionDescription: "text-base-content/70 text-sm",
+  sectionPanel: "rounded-xl bg-base-100 p-3",
+  endpointCard: "collapse-arrow collapse my-2 bg-base-200",
+  endpointContent: "collapse-content flex w-full flex-col gap-4 bg-base-100/60",
+  tablePanel: "overflow-x-auto rounded-xl bg-base-100 p-3",
+  inputRow: "flex w-full flex-col gap-2 py-2 md:flex-row md:items-center",
+  inputLabel: "w-full font-semibold text-base-content/70 text-sm md:w-36",
+  codePanel:
+    "textarea min-h-[300px] w-full rounded-xl border border-base-300 bg-base-100 p-4 font-normal text-sm text-base-content",
+};
+
+export const getEndpointBadgeClassName = (type: string) =>
+  type === "query" || type === "pubsub" ? "badge badge-primary" : "badge badge-secondary";
+
+export const getGuardBadgeClassName = (guard: string) =>
+  guard === "Public" ? "badge badge-primary" : guard === "None" ? "badge" : "badge badge-secondary";
+
+export const getStatusBadgeClassName = (status: string) =>
+  status === "error"
+    ? "badge badge-error"
+    : status === "success" || status === "listening"
+      ? "badge badge-primary"
+      : "badge badge-outline";
+
+export const getStatusTextareaClassName = (status: string) =>
+  status === "error"
+    ? "border-error text-error"
+    : status === "success" || status === "listening"
+      ? "border-primary"
+      : status === "loading"
+        ? "textarea-disabled"
+        : "";

package/webkit/useCsrValues.ts

@@ -21,6 +21,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHistory } from "./useHistory";
 import { useLocation } from "./useLocation";
 
+const linearEasing = (t: number) => t;
+
 const useNoneTrans = ({ clientHeight, location, prevLocation }: RouteState): UseCsrTransition => {
   const transDirection = "none";
   const transUnit = useSpringValue(0, { config: { clamp: true } });
@@ -107,19 +109,15 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
 
   useEffect(() => {
     onBack.current.fade = async () => {
-      const startValue = transUnitRange[0];
-      if (startValue) await transUnit.start(startValue);
+      await transUnit.start(transUnitRange[0]);
     };
   }, []);
   useEffect(() => {
     if (history.current.type === "forward") {
-      const startValue = transUnitRange[0];
-      if (startValue) void transUnit.start(startValue, { immediate: true });
-      const endValue = transUnitRange[1];
-      if (endValue) void transUnit.start(endValue, { config: { duration: 150 } });
+      void transUnit.start(transUnitRange[0], { immediate: true });
+      void transUnit.start(transUnitRange[1], { config: { duration: 150 } });
     } else {
-      const endValue = transUnitRange[1];
-      if (endValue) void transUnit.start(endValue, { immediate: true });
+      void transUnit.start(transUnitRange[1], { immediate: true });
       return;
     }
   }, [location.pathname]);
@@ -173,9 +171,11 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
         height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
       },
       contentStyle: {
+        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
         opacity: transProgress.to((progress) => progress),
       },
       prevContentStyle: {
+        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
         opacity: transProgress.to((progress) => 1 - progress),
       },
     },
@@ -191,11 +191,143 @@ const useFadeTrans = ({ clientHeight, location, prevLocation, onBack, history }:
         ),
       },
       contentStyle: {
-        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
+        top: transProgress.to(
+          [0, 1],
+          [
+            0,
+            0,
+          ],
+        ),
         opacity: transProgress.to((progress) => progress),
+        
+        transformOrigin: "top",
+      },
+      prevContentStyle: {
+        
+        height: transProgress.to(
+          [0, 1],
+          [
+            prevPageState.bottomInset ? -(pageState.bottomInset - prevPageState.bottomInset) : 0,
+            pageState.bottomInset ? -(pageState.bottomInset - prevPageState.bottomInset) : 0,
+          ],
+        ),
+        opacity: transProgress.to((progress) => 1 - progress),
+        transformOrigin: "top",
+      },
+    },
+  };
+
+  const useCsrTransition: UseCsrTransition = {
+    ...csrTranstionStyles,
+    pageBind: () => ({}),
+    pageClassName: "",
+    transDirection,
+    transUnitRange,
+    transUnit,
+    transPercent,
+    transProgress,
+  };
+  return useCsrTransition;
+};
+
+const useScaleOutTrans = ({ clientHeight, location, prevLocation, onBack, history }: RouteState): UseCsrTransition => {
+  const transDirection = "none";
+  const transUnit = useSpringValue(1, { config: { clamp: true } });
+  const transUnitRange = useMemo(() => [0, 1], []);
+  const transProgress = transUnit.to((unit) => unit);
+  const transPercent = transUnit.to([0, 1], [0, 100], "clamp");
+  const pageState = location.pathRoute.pageState;
+  const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
+
+  useEffect(() => {
+    onBack.current.scaleOut = async () => {
+      await transUnit.start(transUnitRange[0]);
+    };
+  }, []);
+  useEffect(() => {
+    if (history.current.type === "forward") {
+      void transUnit.start(transUnitRange[0], { immediate: true });
+      void transUnit.start(transUnitRange[1], { config: { duration: 180 } });
+    } else {
+      void transUnit.start(transUnitRange[1], { immediate: true });
+      return;
+    }
+  }, [location.pathname]);
+
+  const csrTranstionStyles: CsrTransitionStyles = {
+    topSafeArea: {
+      containerStyle: {
+        height: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
+      },
+    },
+    bottomSafeArea: {
+      containerStyle: {
+        top: transProgress.to(
+          [0, 1],
+          [clientHeight - prevPageState.bottomSafeArea, clientHeight - pageState.bottomSafeArea],
+        ),
+        height: transProgress.to([0, 1], [prevPageState.bottomSafeArea, pageState.bottomSafeArea]),
+      },
+    },
+    page: {
+      containerStyle: {
+        transform: transProgress.to((progress) => `scale(${0.96 + progress * 0.04})`),
+      },
+      contentStyle: {
+        paddingTop: pageState.topSafeArea + pageState.topInset,
+        paddingBottom: pageState.bottomInset + pageState.bottomSafeArea,
+        opacity: transProgress,
+        height: clientHeight,
+      },
+    },
+    prevPage: {
+      containerStyle: {
+        paddingTop: prevPageState.topSafeArea + prevPageState.topInset,
+        transform: transProgress.to((progress) => `scale(${1 - progress * 0.04})`),
+      },
+      contentStyle: {
+        opacity: transProgress.to((progress) => 1 - progress / 2),
+      },
+    },
+    topInset: {
+      containerStyle: {
+        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
+      },
+      contentStyle: {
+        opacity: transProgress,
+      },
+      prevContentStyle: {
+        opacity: transProgress.to((progress) => 1 - progress),
+      },
+    },
+    topLeftAction: {
+      containerStyle: {
+        top: transProgress.to([0, 1], [prevPageState.topSafeArea, pageState.topSafeArea]),
+        height: transProgress.to([0, 1], [prevPageState.topInset, pageState.topInset]),
+      },
+      contentStyle: {
+        opacity: transProgress,
+      },
+      prevContentStyle: {
+        opacity: transProgress.to((progress) => 1 - progress),
+      },
+    },
+    bottomInset: {
+      containerStyle: {
+        height: transProgress.to([0, 1], [prevPageState.bottomInset, pageState.bottomInset]),
+        top: transProgress.to(
+          [0, 1],
+          [
+            clientHeight - prevPageState.bottomInset - prevPageState.bottomSafeArea,
+            clientHeight - pageState.bottomInset - pageState.bottomSafeArea,
+          ],
+        ),
+      },
+      contentStyle: {
+        opacity: transProgress,
       },
       prevContentStyle: {
-        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset) * 2]),
         opacity: transProgress.to((progress) => 1 - progress),
       },
     },
@@ -337,28 +469,10 @@ const useStackTrans = ({
         ),
       },
       contentStyle: {
-        top: transProgress.to(
-          [0, 1],
-          [
-            0,
-            0,
-          ],
-        ),
         opacity: transProgress.to((progress) => progress),
-        
-        transformOrigin: "top",
       },
       prevContentStyle: {
-        
-        height: transProgress.to(
-          [0, 1],
-          [
-            prevPageState.bottomInset ? -(pageState.bottomInset - prevPageState.bottomInset) : 0,
-            pageState.bottomInset ? -(pageState.bottomInset - prevPageState.bottomInset) : 0,
-          ],
-        ),
         opacity: transProgress.to((progress) => 1 - progress),
-        transformOrigin: "top",
       },
     },
   };
@@ -388,7 +502,7 @@ const useBottomUpTrans = ({
   const transUnit = useSpringValue(0, { config: { clamp: true } });
   const transUnitRange = useMemo(() => [clientHeight, 0], []);
   const transUnitReversed = transUnit.to((unit) => transUnitRange[0] - unit);
-  const transUnitRangeReversed = useMemo(() => [0, clientWidth], []);
+  const transUnitRangeReversed = useMemo(() => [0, clientHeight], []);
   const transProgress = transUnitReversed.to(transUnitRangeReversed, [0, 1], "clamp");
   const transPercent = transUnitReversed.to(transUnitRangeReversed, [0, 100], "clamp");
   const initThreshold = useMemo(() => Math.floor(clientWidth / 3), []);
@@ -397,13 +511,13 @@ const useBottomUpTrans = ({
   const prevPageState = prevLocation?.pathRoute.pageState ?? defaultPageState;
   useEffect(() => {
     onBack.current.bottomUp = async () => {
-      await transUnit.start(transUnitRange[0]);
+      await transUnit.start(transUnitRange[0], { config: { duration: 220, easing: linearEasing } });
     };
   }, []);
   useEffect(() => {
     if (history.current.type === "forward") {
       void transUnit.start(transUnitRange[0], { immediate: true });
-      void transUnit.start(transUnitRange[1], { config: { duration: 150 } });
+      void transUnit.start(transUnitRange[1], { config: { duration: 220, easing: linearEasing } });
     } else {
       void transUnit.start(transUnitRange[1], { immediate: true });
       return;
@@ -495,14 +609,9 @@ const useBottomUpTrans = ({
         ),
       },
       contentStyle: {
-        top: transProgress.to(
-          [0, 1],
-          [0, prevPageState.bottomInset ? -(pageState.bottomInset - prevPageState.bottomInset) : 0],
-        ),
         opacity: transProgress.to((progress) => progress),
       },
       prevContentStyle: {
-        top: transProgress.to([0, 1], [0, -(pageState.bottomInset - prevPageState.bottomInset)]),
         opacity: transProgress.to((progress) => 1 - progress),
       },
     },
@@ -625,6 +734,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
   };
   const useNonTransition = useNoneTrans(routeState);
   const useFadeTransition = useFadeTrans(routeState);
+  const useScaleOutTransition = useScaleOutTrans(routeState);
   const useStackTransition = useStackTrans(routeState);
   const useBottomUpTransition = useBottomUpTrans(routeState);
   const useCsrTransitionMap: { [key in TransitionType]: UseCsrTransition } = {
@@ -632,7 +742,7 @@ export const useCsrValues = (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]
     fade: useFadeTransition,
     stack: useStackTransition,
     bottomUp: useBottomUpTransition,
-    scaleOut: useNonTransition,
+    scaleOut: useScaleOutTransition,
   };
 
   useEffect(() => {