akanjs 0.0.1 → 2.0.0-beta.1

package/ui/System/Common.tsx

@@ -0,0 +1,83 @@
+import "dayjs/locale/ko";
+
+import type { ClientEnv } from "akanjs/base";
+import type { RootLayoutProps, WebAppManifest } from "akanjs/client";
+import type { AkanTheme } from "akanjs/fetch";
+import type { ReactNode } from "react";
+
+export interface ProviderProps {
+  /** Additional classes for the app frame/root wrapper. */
+  className?: string;
+  /** Public application name used by client routing and metadata. */
+  appName: string;
+  /** Route params passed from the app root layout. */
+  params: RootLayoutProps["params"];
+  /** Additional head content rendered by the app shell. */
+  head?: ReactNode;
+  /** Web app manifest emitted as a data URL. */
+  manifest?: WebAppManifest;
+  /** Client runtime environment injected into the app bridge. */
+  env: ClientEnv;
+  /** Initial Akan theme configuration. */
+  theme?: AkanTheme;
+  /** Optional route prefix/base path. */
+  prefix?: string;
+  /** App content rendered inside the system provider. */
+  children: ReactNode | ReactNode[];
+  /** Optional Google Analytics tracking id. */
+  gaTrackingId?: string;
+  /** Select mobile-style frame behavior or normal web layout. */
+  layoutStyle?: "mobile" | "web";
+  /** Enable reconnect helper. Defaults to local operation mode in CSR. */
+  reconnect?: boolean;
+  /** Root route component used by CSR page loading. */
+  of: (props: unknown) => ReactNode | null;
+}
+
+export const Common = () => {
+  return <></>;
+};
+
+export function ManifestLink({ manifest }: { manifest?: WebAppManifest }) {
+  if (!manifest) return null;
+  return <link rel="manifest" href={createManifestDataUrl(manifest)} />;
+}
+
+export function createManifestDataUrl(manifest: WebAppManifest): string {
+  const json = JSON.stringify(toManifestJson(manifest));
+  return `data:application/manifest+json;base64,${encodeBase64Utf8(json)}`;
+}
+
+export function toManifestJson(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map(toManifestJson);
+  if (!isPlainObject(value)) return value;
+
+  return Object.fromEntries(
+    Object.entries(value)
+      .filter(([, entryValue]) => entryValue !== undefined)
+      .map(([key, entryValue]) => [camelToSnake(key), toManifestJson(entryValue)]),
+  );
+}
+
+function camelToSnake(key: string): string {
+  return key.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`);
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return Object.prototype.toString.call(value) === "[object Object]";
+}
+
+function encodeBase64Utf8(value: string): string {
+  const bytes = new TextEncoder().encode(value);
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  if (typeof btoa === "function") return btoa(binary);
+
+  const buffer = (
+    globalThis as typeof globalThis & {
+      Buffer?: { from: (bytes: Uint8Array) => { toString: (encoding: "base64") => string } };
+    }
+  ).Buffer;
+  if (buffer) return buffer.from(bytes).toString("base64");
+  throw new Error("Base64 encoding is not available in this runtime");
+}

package/ui/System/DevModeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { st } from "akanjs/store";
+
+export const DevModeToggle = () => {
+  const devMode = st.use.devMode();
+  return (
+    <div className="form-control">
+      <label className="label cursor-pointer">
+        <span className="label-text mr-2 whitespace-nowrap text-sm">Dev Mode</span>
+        <input
+          type="checkbox"
+          className="toggle"
+          checked={devMode}
+          onChange={(e) => {
+            st.do.setDevMode(e.target.checked);
+          }}
+        />
+      </label>
+    </div>
+  );
+};

package/ui/System/Gtag.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { st } from "akanjs/store";
+import { useEffect } from "react";
+
+declare const window: {
+  gtag?: (...args: unknown[]) => void;
+  debugMode?: boolean;
+};
+
+export const Gtag = ({ trackingId, debugMode = false }: { trackingId: string; debugMode?: boolean }) => {
+  const pathname = st.use.pathname();
+  const searchParams = st.use.searchParams();
+  
+  const pageview = (url: string) => {
+    window.gtag?.("config", trackingId, { page_path: url });
+  };
+
+  const event = ({
+    action,
+    category,
+    label,
+    value,
+  }: {
+    action: string;
+    category: string;
+    label: string;
+    value: number;
+  }) => {
+    window.gtag?.("event", action, {
+      event_category: category,
+      event_label: label,
+      value: value,
+    });
+  };
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      pageview(url);
+    };
+    const urlSearchParams = new URLSearchParams();
+    for (const [key, value] of Object.entries(searchParams)) {
+      if (Array.isArray(value)) {
+        value.forEach((v) => {
+          urlSearchParams.append(key, v);
+        });
+      } else urlSearchParams.set(key, value);
+    }
+    handleRouteChange(pathname + (urlSearchParams.size ? urlSearchParams.toString() : ""));
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} />
+      <script
+        
+        dangerouslySetInnerHTML={{
+          __html: `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${trackingId}', {
+      page_path: window.location.pathname,
+      debug_mode: ${debugMode},
+    });
+  `,
+        }}
+      />
+    </>
+  );
+};

package/ui/System/Messages.tsx

@@ -0,0 +1,175 @@
+"use client";
+import { clsx, msg, usePage } from "akanjs/client";
+import { st } from "akanjs/store";
+import { type ReactNode, useEffect, useState } from "react";
+import {
+  AiOutlineCheckCircle,
+  AiOutlineInfoCircle,
+  AiOutlineLoading3Quarters,
+  AiOutlineQuestionCircle,
+} from "react-icons/ai";
+import { BsExclamationCircleFill } from "react-icons/bs";
+
+type MessageType = "success" | "error" | "info" | "warning" | "loading";
+
+interface MessageProps {
+  content: ReactNode;
+  type?: MessageType;
+  duration: number; 
+  keyForMessage: string;
+}
+
+interface TimeOutType {
+  key: string;
+  timeoutId: NodeJS.Timeout;
+}
+interface MsgOption {
+  key?: string;
+  duration?: number;
+  data?: Record<string, string | number>;
+}
+
+let timeOuts: TimeOutType[] = [];
+
+const Message = ({ content, type = "info" as MessageType, duration, keyForMessage }: MessageProps) => {
+  const pageState = st.use.pageState();
+  const [preBlind, setPreBlind] = useState(false);
+  useEffect(() => {
+    if (!content) return;
+    
+    const existingTimeOut = timeOuts.find((item) => item.key === keyForMessage);
+    if (existingTimeOut) {
+      clearTimeout(existingTimeOut.timeoutId);
+      removeTimeOut(keyForMessage);
+    }
+
+    const timeoutId = setTimeout(() => {
+      setPreBlind(true);
+    }, duration * 1000);
+    addTimeOut(keyForMessage, timeoutId);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [content, keyForMessage, type]);
+
+  useEffect(() => {
+    if (!preBlind) return;
+    setTimeout(() => {
+      st.do.hideMessage(keyForMessage);
+      removeTimeOut(keyForMessage);
+    }, 100);
+  }, [preBlind]);
+
+  const addTimeOut = (key: string, timeoutId: NodeJS.Timeout) => {
+    const filteredTimeOuts = timeOuts.filter((item) => item.key !== key);
+    timeOuts = [...filteredTimeOuts, { key, timeoutId }];
+  };
+
+  const removeTimeOut = (key: string) => {
+    timeOuts = timeOuts.filter((item) => item.key !== key);
+  };
+
+  const iconClassName = type === "loading" ? "text-info" : `text-${type}`;
+  const getIcon = (type: MessageType) => {
+    const icons: { [key in MessageType]: ReactNode } = {
+      info: <AiOutlineInfoCircle className={clsx("text-2xl", iconClassName)} />,
+      success: <AiOutlineCheckCircle className={clsx("text-2xl", iconClassName)} />,
+      error: <BsExclamationCircleFill className={clsx("text-2xl", iconClassName)} />,
+      warning: <AiOutlineQuestionCircle className={clsx("text-2xl", iconClassName)} />,
+      loading: <AiOutlineLoading3Quarters className={clsx("animate-spin text-2xl", iconClassName)} />,
+    };
+    return icons[type];
+  };
+
+  return (
+    <div
+      data-state={preBlind}
+      className="group w-screen animate-zoomIn px-6 duration-300 data-[state=true]:animate-smaller md:max-w-[60%]"
+      style={{
+        paddingTop: pageState.topSafeArea,
+      }}
+    >
+      <div
+        className={clsx(
+          "typo-body1 flex w-full items-center gap-2 rounded-[4px] border px-4 py-2 text-base-content drop-shadow-lg",
+          {
+            "border-[#EEEEEE] bg-primary-content stroke-base-content": type === "loading" || type === "info",
+            "border-success-border bg-success/80 stroke-success": type === "success",
+            "border-error-border bg-error/80 stroke-error": type === "error",
+            "border-warning-border bg-warning/80 stroke-warning": type === "warning",
+          },
+        )}
+      >
+        <div className="flex size-6 items-center justify-center rounded-full bg-base-100">{getIcon(type)}</div>
+        <span className="truncate whitespace-nowrap text-base-100">{content}</span>
+      </div>
+    </div>
+  );
+};
+
+export const Messages = () => {
+  const messages = st.use.messages();
+  const { l } = usePage();
+  useEffect(() => {
+    Object.assign(msg, {
+      info: (msgKey: `${string}.${string}`, option = {} as MsgOption) => {
+        st.do.showMessage({
+          type: "info",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey as "base.new", option.data),
+        });
+      },
+      success: (msgKey: `${string}.${string}`, option = {} as MsgOption) => {
+        st.do.showMessage({
+          type: "success",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey as "base.new", option.data),
+        });
+      },
+      error: (msgKey: `${string}.${string}`, option = {} as MsgOption) => {
+        st.do.showMessage({
+          type: "error",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey as "base.new", option.data),
+        });
+      },
+      warning: (msgKey: `${string}.${string}`, option = {} as MsgOption) => {
+        st.do.showMessage({
+          type: "warning",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey as "base.new", option.data),
+        });
+      },
+      loading: (msgKey: `${string}.${string}`, option = {} as MsgOption) => {
+        st.do.showMessage({
+          type: "loading",
+          key: option.key,
+          duration: option.duration ?? 3,
+          content: l(msgKey as "base.new", option.data),
+        });
+      },
+    });
+  }, []);
+  if (!messages.length) return null;
+  return (
+    <div
+      id="toast"
+      className="fixed top-0 left-0 z-[100] mt-[var(--safe-area-top)] flex h-fit w-screen flex-col items-center justify-start gap-2 pt-2"
+    >
+      {messages.map((message) => (
+        <Message
+          content={message.content}
+          type={message.type}
+          duration={message.duration}
+          key={message.key}
+          keyForMessage={message.key}
+        />
+      ))}
+    </div>
+  );
+};

package/ui/System/Reconnect.tsx

@@ -0,0 +1,156 @@
+"use client";
+import { clsx, fetch, usePage } from "akanjs/client";
+import { useInterval } from "akanjs/webkit";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TbPlugConnected, TbPlugConnectedX } from "react-icons/tb";
+
+const DOTS_LENGTH = 4;
+
+export const Reconnect = () => {
+  const { l } = usePage();
+  const devMode = process.env.AKAN_PUBLIC_ENV === "local";
+  const [dots, setDots] = useState(0);
+  const [connectStatus, setConnectStatus] = useState<
+    "initial" | "normal" | "connected" | "disconnected" | "connecting"
+  >("initial");
+  const wasHiddenOnDisconnect = useRef(false);
+
+  const handleConnect = useCallback(() => {
+    wasHiddenOnDisconnect.current = false;
+    setConnectStatus((prev) => (prev === "normal" || prev === "initial" ? prev : "connected"));
+  }, []);
+
+  const handleDisconnect = async () => {
+    
+    if (document.hidden) {
+      wasHiddenOnDisconnect.current = true;
+      return;
+    }
+
+    try {
+      await (fetch as unknown as { ping: () => Promise<string> }).ping();
+    } catch (e) {
+      setConnectStatus((prev) => (prev === "normal" || prev === "initial" ? "disconnected" : prev));
+      setTimeout(() => {
+        setConnectStatus((prev) => (prev === "disconnected" ? "connecting" : prev));
+      }, 2000);
+    }
+  };
+
+  const handleVisibilityChange = useCallback(() => {
+    
+    if (!document.hidden && wasHiddenOnDisconnect.current) {
+      
+      if (fetch.ws.connected) {
+        wasHiddenOnDisconnect.current = false;
+        setConnectStatus("normal");
+      } else {
+        
+        void handleDisconnect();
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    fetch.ws.on("connect", handleConnect);
+    fetch.ws.on("disconnect", () => handleDisconnect());
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    setTimeout(() => {
+      if (connectStatus !== "initial") return;
+      if (fetch.ws.connected) setConnectStatus("normal");
+      else void handleDisconnect();
+    }, 1000);
+
+    return () => {
+      fetch.ws.off("connect", handleConnect);
+      fetch.ws.off("disconnect", handleDisconnect);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleConnect, handleVisibilityChange]);
+
+  useEffect(() => {
+    if (connectStatus === "connected") window.location.reload();
+  }, [connectStatus]);
+
+  useInterval(() => {
+    if (connectStatus === "connecting") setDots((prev) => (prev + 1) % DOTS_LENGTH);
+  }, 500);
+  if (!devMode) return null;
+  if (process.env.AKAN_PUBLIC_ENV !== "local") return null;
+  if (connectStatus === "initial" || connectStatus === "normal") return null;
+  return (
+    <div className="fixed top-0 left-0 flex h-screen w-screen animate-fadeIn flex-col items-center justify-center bg-base-100/50">
+      <div className="flex w-4/5 flex-col items-center justify-center rounded-md bg-base-300 p-5 md:w-1/3">
+        <div className="whitespace-nowrap font-bold text-3xl">
+          {connectStatus === "disconnected"
+            ? l("base.somethingWrong")
+            : connectStatus === "connecting"
+              ? l("base.connecting")
+              : l("base.connected")}
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          <div className="py-5">
+            {connectStatus === "disconnected" ? (
+              <div className="text-[150px] text-gray-500">
+                <TbPlugConnectedX />
+              </div>
+            ) : connectStatus === "connecting" ? (
+              <div className="animate-pulse py-5 text-[150px] text-gray-500">
+                <TbPlugConnectedX />
+              </div>
+            ) : (
+              <div className="animate-pop text-[150px] text-white">
+                <TbPlugConnected />
+              </div>
+            )}
+          </div>
+
+          {connectStatus === "connected" ? (
+            <>
+              <div className="animate-pop"></div>
+              <span>
+                <span className="text-lg">{l("base.refreshing")}</span>
+              </span>
+            </>
+          ) : connectStatus === "connecting" ? (
+            <div className="flex items-center justify-center">
+              <div className="text-lg">{l("base.tryReconnecting")}</div>
+              <div className="flex items-center">
+                {Array.from({ length: DOTS_LENGTH }).map((_, index) =>
+                  dots >= index ? (
+                    <div key={index} className="visible">
+                      .
+                    </div>
+                  ) : (
+                    <div key={index} className="invisible">
+                      .
+                    </div>
+                  ),
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="text-lg">{l("base.serverDisconnected")}</div>
+          )}
+        </div>
+
+        <div
+          className={clsx(
+            "mt-2 text-center text-gray-500 text-sm leading-tight",
+            connectStatus === "disconnected" || connectStatus === "connecting" ? "visible" : "invisible",
+          )}
+        >
+          <div className="flex items-center justify-center gap-2">
+            <div className="flex flex-col items-center justify-center">
+              <div>{l("base.serverHasProblem")}</div>
+              <div className="font-bold">{l("base.checkServerStatus")}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/ui/System/Root.tsx

@@ -0,0 +1,10 @@
+"use client";
+import type { ReactNode } from "react";
+
+export interface RootProps {
+  children: ReactNode;
+  st: unknown;
+}
+export const Root = ({ children, st }: RootProps) => {
+  return <>{children}</>;
+};

package/ui/System/SSR.tsx

@@ -0,0 +1,163 @@
+import { getEnv } from "akanjs/base";
+import { clsx, type ReactFont, router, type WebAppManifest } from "akanjs/client";
+import { setRequestTheme } from "akanjs/fetch";
+import { Children, Fragment, type ReactNode, Suspense } from "react";
+import { FontCss } from "../fontCss";
+import { Load } from "../Load";
+import { ClientBridge, ClientInner, ClientPathWrapper, ClientSsrBridge, ClientWrapper } from "./Client";
+import { ManifestLink, type ProviderProps } from "./Common";
+
+export const SSR = () => {
+  return <></>;
+};
+
+export type SSRProviderProps = ProviderProps & {
+  fonts?: ReactFont[];
+};
+
+const SSRProvider = ({
+  className,
+  appName,
+  params,
+  head,
+  manifest,
+  env,
+  gaTrackingId,
+  children,
+  theme = "css",
+  prefix,
+  fonts,
+  layoutStyle = "web",
+  reconnect = getEnv().operationMode === "local",
+  of,
+}: SSRProviderProps) => {
+  setRequestTheme(theme);
+
+  return (
+    <Load.Page
+      of={of}
+      loader={async () => {
+        const { lang } = params;
+        if (!router.isInitialized) router.init({ type: "ssr", side: "server", lang, prefix });
+        return { lang } as const;
+      }}
+      render={({ lang }) => (
+        <SSRWrapper
+          className={className}
+          appName={appName}
+          lang={lang}
+          head={head}
+          manifest={manifest}
+          fonts={fonts}
+          prefix={prefix}
+          layoutStyle={layoutStyle}
+        >
+          <ClientWrapper theme={theme} lang={lang} reconnect={reconnect}>
+            <Fragment key="children">{Children.toArray(children)}</Fragment>
+            <Suspense key="client-inner" fallback={null}>
+              <ClientInner />
+            </Suspense>
+            <Suspense key="client-bridge" fallback={null}>
+              <ClientBridge key="bridge" env={env} theme={theme} prefix={prefix} gaTrackingId={gaTrackingId} />
+              <ClientSsrBridge key="ssr-bridge" lang={lang} prefix={prefix} />
+            </Suspense>
+          </ClientWrapper>
+        </SSRWrapper>
+      )}
+    />
+  );
+};
+
+SSR.Provider = SSRProvider;
+
+const ServerFontFace = ({ fonts }: { fonts: ReactFont[] }) => {
+  const css = FontCss.getRuntimeCss(fonts);
+  const preloads = FontCss.getPreloads(fonts);
+  if (!css && preloads.length === 0) return null;
+  return (
+    <>
+      {preloads.map((preload) => (
+        <link key={preload.href} rel="preload" href={preload.href} as="font" type={preload.type} crossOrigin="" />
+      ))}
+      {css ? (
+        
+        <style data-akan-fonts dangerouslySetInnerHTML={{ __html: css }} />
+      ) : null}
+    </>
+  );
+};
+
+interface SSRWrapperProps {
+  className?: string;
+  appName: string;
+  lang: "en" | "ko" | (string & {});
+  head?: ReactNode;
+  manifest?: WebAppManifest;
+  fonts?: ReactFont[];
+  children: ReactNode;
+  prefix?: string;
+  layoutStyle?: "mobile" | "web";
+}
+
+const SSRWrapper = ({
+  children,
+  head,
+  manifest,
+  fonts = [],
+  className,
+  prefix,
+  layoutStyle = "web",
+}: SSRWrapperProps) => (
+  <>
+    <ServerFontFace key="fonts" fonts={fonts} />
+    <ManifestLink key="manifest" manifest={manifest} />
+    {head ? <Fragment key="head">{head}</Fragment> : null}
+    <div key="frame-root" id="frameRoot" className={className}>
+      <ClientPathWrapper layoutStyle={layoutStyle} prefix={prefix}>
+        <div key="top-safe-area" id="topSafeArea" className={clsx("fixed inset-x-0 top-0 bg-base-100")} />
+        <div key="page-containers" id="pageContainers" className={clsx("isolate")}>
+          <div id="pageContainer">
+            <div
+              id="pageContent"
+              className={clsx("relative isolate bg-base-100", {
+                "w-full": layoutStyle === "web",
+                "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+              })}
+            >
+              {Children.toArray(children)}
+            </div>
+          </div>
+        </div>
+        <div
+          key="top-inset"
+          id="topInsetContainer"
+          className={clsx("fixed inset-x-0 top-0 isolate bg-base-100", {
+            "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+            "w-full": layoutStyle === "web",
+          })}
+        >
+          <div id="topInsetContent" className={clsx("relative isolate size-full")} />
+        </div>
+        <div
+          key="top-left-action"
+          id="topLeftActionContainer"
+          className="absolute top-0 left-0 isolate flex aspect-1 items-center justify-center"
+        />
+        <div
+          key="bottom-inset"
+          id="bottomInsetContainer"
+          className={clsx("fixed inset-x-0 bottom-0 isolate", {
+            "left-1/2 w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+            "w-full": layoutStyle === "web",
+          })}
+        >
+          <div id="bottomInsetContent" className="isolate size-full" />
+        </div>
+        <div key="bottom-safe-area" id="bottomSafeArea" className="fixed inset-x-0 bg-base-100" />
+      </ClientPathWrapper>
+    </div>
+  </>
+);
+SSR.Wrapper = SSRWrapper;
+
+export default SSRProvider;