akanjs 0.0.1 → 2.0.0-beta.0

package/ui/Layout/BottomInset.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { getEnv } from "akanjs/base";
+import { clsx, usePathCtx } from "akanjs/client";
+import { st } from "akanjs/store";
+import { type ReactNode, useEffect, useState } from "react";
+
+import { Portal } from "../Portal";
+
+export interface BottomInsetProps {
+  className?: string;
+  children: ReactNode;
+  keyboardSticky?: boolean;
+}
+
+export const BottomInset = ({ className, children, keyboardSticky }: BottomInsetProps) => {
+  const [render, setRender] = useState(false);
+  const { location } = usePathCtx();
+  const suffix = getEnv().renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  const keyboardHeight = st.use.keyboardHeight();
+
+  useEffect(() => {
+    setRender(true);
+  }, []);
+
+  if (!render) return null;
+  return (
+    <Portal id={`bottomInsetContent${suffix}`}>
+      <div
+        className={clsx(className, `size-full transition-all ease-out`, {
+          "duration-[285ms]": keyboardHeight,
+          "duration-0": !keyboardHeight,
+          absolute: keyboardSticky && keyboardHeight,
+        })}
+        style={{
+          bottom: keyboardSticky && keyboardHeight ? keyboardHeight - location.pathRoute.pageState.bottomSafeArea : 0,
+        }}
+      >
+        {children}
+      </div>
+    </Portal>
+  );
+};

package/ui/Layout/BottomTab.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { clsx, usePage } from "akanjs/client";
+import { useEffect, useState } from "react";
+
+import { Link } from "../Link";
+import { BottomInset } from "./BottomInset";
+
+interface TabType {
+  name: string;
+  icon: React.ReactNode;
+  activeIcon?: React.ReactNode;
+  notiCount?: number;
+  href: string;
+}
+
+export interface BottomTabProps {
+  className?: string;
+  tabs: TabType[];
+  height?: number;
+}
+
+export const BottomTab = ({ className, tabs, height = 64 }: BottomTabProps) => {
+  const { lang, path } = usePage();
+  
+  const [isRendered, setIsRendered] = useState<boolean>(false);
+  const isActiveTab = (tabHref: string) => {
+    if (!isRendered) return false;
+    const locationPath = window.location.pathname.startsWith(`/${lang}`)
+      ? window.location.pathname.slice(lang.length + 1) === ""
+        ? "/"
+        : window.location.pathname.slice(lang.length + 1)
+      : window.location.pathname;
+    return tabHref === "/" ? locationPath === tabHref : locationPath.startsWith(tabHref);
+  };
+
+  useEffect(() => {
+    setIsRendered(true);
+  }, []);
+
+  return (
+    <BottomInset className="h-full">
+      <div
+        className={clsx(
+          `flex size-full items-center justify-around rounded-t-xl border border-base-200 border-b-0 bg-base-100`,
+          className,
+        )}
+      >
+        {tabs.map((tab) => (
+          <Link
+            key={tab.name}
+            href={tab.href}
+            className={`relative flex w-full flex-col items-center justify-end gap-1 ${
+              isActiveTab(tab.href) ? "" : "opacity-60"
+            }`}
+          >
+            <div className="indicator">
+              {isActiveTab(tab.href) ? (tab.activeIcon ?? tab.icon) : tab.icon}
+              {tab.notiCount && tab.notiCount > 0 ? (
+                
+                <div className="indicator-item flex size-2 items-center justify-center rounded-full bg-secondary text-[10px] text-base-100">
+                  {/* {tab.notiCount > 99 ? "99+" : tab.notiCount} */}
+                </div>
+              ) : null}
+            </div>
+            <span>{tab.name}</span>
+          </Link>
+        ))}
+      </div>
+    </BottomInset>
+  );
+};

package/ui/Layout/Header.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+export interface HeaderProps {
+  className?: string;
+  type?: "static" | "hide";
+  children?: ReactNode;
+  height?: number;
+}
+export const Header = ({ className, type, children, height = 40 }: HeaderProps) => {
+  const [visible, setVisible] = useState(true);
+  const position = useRef(0);
+  useEffect(() => {
+    if (type === "static") return;
+    const handleScroll = () => {
+      const isVisible = window.scrollY < 64 ? true : position.current > window.scrollY;
+      position.current = window.scrollY;
+      setVisible(isVisible);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return (
+    <div
+      className={clsx(
+        `fixed top-0 z-[9] flex duration-300 ${
+          !visible ? "md:-translate-y-full" : ""
+        } w-full bg-base-100 shadow-sm backdrop-blur-lg`,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/ui/Layout/LeftSider.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+import { BiX } from "react-icons/bi";
+
+export interface LeftSiderProps {
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  width?: number | string;
+  onCancel: () => void;
+}
+export const LeftSider = ({ className, children, open, width, onCancel }: LeftSiderProps) => {
+  return (
+    <div
+      className={clsx(
+        "absolute top-0 border-base-200 border-r bg-base-100 transition-all duration-150",
+        { "translate-x-0": open, "translate-x-[-100%]": !open },
+        className,
+      )}
+      style={{ width }}
+    >
+      {children}
+      <button
+        className="btn btn-ghost btn-square absolute top-0 right-0"
+        onClick={() => {
+          onCancel();
+        }}
+      >
+        <BiX />
+      </button>
+    </div>
+  );
+};

package/ui/Layout/Navbar.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { getEnv } from "akanjs/base";
+import { clsx, usePathCtx } from "akanjs/client";
+import { type ReactNode, useEffect, useState } from "react";
+import { BiChevronLeft } from "react-icons/bi";
+
+import { Link } from "../Link";
+import { Portal } from "../Portal";
+
+export interface NavbarProps {
+  className?: string;
+  children?: ReactNode;
+  height?: number;
+  title?: ReactNode;
+  back?: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
+}
+
+export const Navbar = ({ back = false, className, height, children, title, left, right }: NavbarProps) => {
+  const [render, setRender] = useState(false); 
+  const { location } = usePathCtx();
+  const suffix = getEnv().renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  useEffect(() => {
+    setRender(true);
+  }, []);
+  if (!render) return null;
+  return (
+    <>
+      <Portal id={`topInsetContent${suffix}`}>
+        <div className={clsx("size-full", className)}>{children}</div>
+      </Portal>
+      {back ? (
+        <Portal id={`topLeftActionContent${suffix}`}>
+          {typeof back === "boolean" ? (
+            <Link.Back className="text-4xl">
+              <BiChevronLeft />
+            </Link.Back>
+          ) : (
+            back
+          )}
+        </Portal>
+      ) : null}
+    </>
+  );
+};

package/ui/Layout/RightSider.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+import { AiOutlineClose } from "react-icons/ai";
+
+export interface RightSiderProps {
+  className?: string;
+  children: ReactNode;
+  open: boolean;
+  title?: string;
+  width?: number | string;
+  onCancel: () => void;
+}
+export const RightSider = ({ className, children, open, title, width, onCancel }: RightSiderProps) => {
+  return (
+    <div
+      className={clsx(
+        "group absolute top-0 right-0 overflow-y-auto border-base-200 border-l bg-base-100 pt-14 transition-all duration-150",
+        { "translate-x-0": open, "translate-x-[100%]": !open },
+        className,
+      )}
+      style={{ width }}
+    >
+      {children}
+      <div className="absolute top-2 left-4 flex items-center gap-4 pt-2 text-xl">
+        <div
+          className={clsx("cursor-pointer border-base-200 bg-base-100 transition-all duration-150", {
+            "opacity-100": open,
+            "opacity-0": !open,
+          })}
+          onClick={() => {
+            onCancel();
+          }}
+        >
+          <AiOutlineClose />
+        </div>
+        {title ? <div className="whitespace-nowrap">{title}</div> : null}
+      </div>
+    </div>
+  );
+};

package/ui/Layout/Sider.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { st } from "akanjs/store";
+import { animated } from "akanjs/ui";
+import { type ReactNode, useEffect, useState } from "react";
+import { AiOutlineMenu } from "react-icons/ai";
+import { BiX } from "react-icons/bi";
+import { useSpring } from "react-spring";
+
+export interface SiderProps {
+  className?: string;
+  bgClassName?: string;
+  children?: ReactNode;
+}
+
+export const Sider = ({ className, bgClassName, children }: SiderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const path = st.use.path();
+  useEffect(() => {
+    setIsOpen(false);
+  }, [path]);
+  const siderAnimation = useSpring({
+    translateX: isOpen ? "0%" : "-100%",
+    config: { tension: 300, friction: 30 },
+  });
+
+  const overlayAnimation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    config: { tension: 300, friction: 30 },
+  });
+
+  return (
+    <>
+      <button
+        className="btn btn-ghost"
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        <AiOutlineMenu />
+      </button>
+
+      {isOpen ? (
+        <animated.div
+          style={overlayAnimation}
+          className={clsx("fixed inset-0 z-40 h-screen w-screen", bgClassName)}
+          onClick={() => {
+            setIsOpen(false);
+          }}
+        />
+      ) : null}
+
+      <animated.div
+        style={siderAnimation}
+        className={clsx("fixed top-0 left-0 z-50 h-full w-3/4 bg-base-200 p-4 text-base-content md:w-80", className)}
+      >
+        <button
+          className="absolute top-4 left-4 text-lg"
+          onClick={() => {
+            setIsOpen(false);
+          }}
+        >
+          <BiX />
+        </button>
+        {children}
+      </animated.div>
+    </>
+  );
+};

package/ui/Layout/Template.tsx

@@ -0,0 +1,11 @@
+import { clsx } from "akanjs/client";
+
+export interface TemplateProps {
+  /** Additional classes merged with the default vertical form/template spacing. */
+  className?: string;
+  /** Template content, usually Field components in a model form. */
+  children?: React.ReactNode;
+}
+export const Template = ({ className, children }: TemplateProps) => {
+  return <div className={clsx("flex w-full flex-col gap-6 p-2", className)}>{children}</div>;
+};

package/ui/Layout/TopLeftAction.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { getEnv } from "akanjs/base";
+import { usePathCtx } from "akanjs/client";
+import { type ReactNode, useEffect, useState } from "react";
+
+import { Portal } from "../Portal";
+
+export interface TopLeftActionProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export const TopLeftAction = ({ className, children }: TopLeftActionProps) => {
+  const [render, setRender] = useState(false); 
+  const { location } = usePathCtx();
+  const suffix = getEnv().renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  useEffect(() => {
+    setRender(true);
+  }, []);
+
+  if (!render) return null;
+
+  return (
+    <Portal id={`topLeftActionContent${suffix}`}>
+      <div className={className}>{children}</div>
+    </Portal>
+  );
+};

package/ui/Layout/Unit.tsx

@@ -0,0 +1,19 @@
+import { clsx } from "akanjs/client";
+
+import { Link } from "../Link";
+
+export interface UnitProps {
+  /** Additional classes merged with the default list/card item layout. */
+  className?: string;
+  /** Unit body content. */
+  children: React.ReactNode;
+  /** Optional route that makes the whole unit clickable through Link. */
+  href?: string;
+}
+export const Unit = ({ className, children, href }: UnitProps) => {
+  return (
+    <Link href={href}>
+      <div className={clsx("flex w-full flex-col gap-2 p-4", { "cursor-pointer": !!href }, className)}>{children}</div>
+    </Link>
+  );
+};

package/ui/Layout/View.tsx

@@ -0,0 +1,12 @@
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+
+export interface ViewProps {
+  /** Additional classes merged with the default detail page container. */
+  className?: string;
+  /** View content, usually a model detail component. */
+  children: ReactNode;
+}
+export const View = ({ className, children }: ViewProps) => {
+  return <div className={clsx("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+};

package/ui/Layout/Zone.tsx

@@ -0,0 +1,10 @@
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+
+export interface ZoneProps {
+  className?: string;
+  children: ReactNode;
+}
+export const Zone = ({ className, children }: ZoneProps) => {
+  return <div className={clsx("flex size-full max-w-5xl flex-col gap-6 px-2", className)}>{children}</div>;
+};

package/ui/Layout/index.ts

@@ -0,0 +1,27 @@
+import { BottomInset } from "./BottomInset";
+import { BottomTab } from "./BottomTab";
+import { Header } from "./Header";
+import { LeftSider } from "./LeftSider";
+import { Navbar } from "./Navbar";
+import { RightSider } from "./RightSider";
+import { Sider } from "./Sider";
+import { Template } from "./Template";
+import { TopLeftAction } from "./TopLeftAction";
+import { Unit } from "./Unit";
+import { View } from "./View";
+import { Zone } from "./Zone";
+
+export const Layout = {
+  Header,
+  Sider,
+  Navbar,
+  BottomTab,
+  BottomInset,
+  Template,
+  Unit,
+  View,
+  Zone,
+  TopLeftAction,
+  LeftSider,
+  RightSider,
+};

package/ui/Link/Back.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { clsx, router } from "akanjs/client";
+import type { ReactNode } from "react";
+
+interface BackProps {
+  className?: string;
+  children?: ReactNode;
+}
+export default function Back({ className, children }: BackProps) {
+  return (
+    <div className={clsx("cursor-pointer", className)} onClick={() => router.back()}>
+      {children}
+    </div>
+  );
+}

package/ui/Link/Close.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { ReactNode } from "react";
+
+interface CloseProps {
+  className?: string;
+  children?: ReactNode;
+}
+export default function Close({ className, children }: CloseProps) {
+  return (
+    <div
+      className={clsx("cursor-pointer", className)}
+      onClick={() => {
+        window.close();
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/ui/Link/CsrLink.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { clsx, getPathInfo, loadCapacitorBrowser, router, usePage, usePathCtx } from "akanjs/client";
+import { st } from "akanjs/store";
+
+import type { CsrLinkProps } from "./types";
+
+export default function CsrLink({
+  className,
+  children,
+  href,
+  replace,
+  activeClassName,
+  scrollToTop,
+  activeExact,
+  ...props
+}: CsrLinkProps) {
+  const pathCtx = usePathCtx();
+  const prefix = pathCtx.prefix;
+  const currentPath = st.use.path();
+  const { lang } = usePage();
+  const { path, hash } = getPathInfo(href, lang, prefix ?? "");
+  return (
+    <a
+      className={clsx("cursor-pointer", className, {
+        [activeClassName ?? ""]: activeExact ? currentPath === path : currentPath.startsWith(path),
+      })}
+      onClick={() => {
+        const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+        const isHash = href.startsWith("#");
+        const url = isHash ? `${window.location.pathname}#${hash}` : href;
+        if (isExternal)
+          void loadCapacitorBrowser().then(({ Browser }) => Browser.open({ url: href, presentationStyle: "popover" }));
+        else if (replace) router.replace(url, { scrollToTop });
+        else router.push(url, { scrollToTop });
+      }}
+    >
+      {children}
+    </a>
+  );
+}

package/ui/Link/Lang.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { clsx, router } from "akanjs/client";
+import type { ReactNode } from "react";
+
+interface LangProps {
+  className?: string;
+  lang: "ko" | "en" | (string & {});
+  children?: ReactNode;
+}
+export default function Lang({ className, lang, children }: LangProps) {
+  return (
+    <div className={clsx("cursor-pointer", className)} onClick={() => router.setLang(lang)}>
+      {children}
+    </div>
+  );
+}

package/ui/Link/SsrLink.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { getEnv } from "akanjs/base";
+import { clsx, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { Logger } from "akanjs/common";
+import { st } from "akanjs/store";
+import type { SsrLinkProps } from "./types";
+
+export default function SsrLink({
+  className,
+  children,
+  disabled,
+  href,
+  scrollToTop,
+  replace,
+  activeClassName,
+  activeExact,
+  noCache,
+  ...props
+}: SsrLinkProps) {
+  const pathCtx = usePathCtx();
+  const prefix = pathCtx.prefix;
+  const { lang, path: pagePath } = usePage();
+  const storePathname = st.use.pathname();
+  const currentPath =
+    getEnv().side === "server"
+      ? getPathInfo(pagePath, lang, prefix ?? "").path
+      : getPathInfo(storePathname, lang, prefix ?? "").path;
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const internalPathInfo = getPathInfo(href, lang, prefix ?? "");
+  const publicPathInfo = getPathInfo(href, lang, "");
+  const requestHref = getEnv().operationMode === "local" ? internalPathInfo.href : publicPathInfo.href;
+  const path = internalPathInfo.path;
+  if (href.startsWith("#")) {
+    return (
+      <a className={clsx(className, { [activeClassName ?? ""]: currentPath === path })} href={href}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <a
+      className={clsx(className, {
+        [activeClassName ?? ""]: activeExact ? currentPath === path : currentPath.startsWith(path),
+      })}
+      href={isExternal ? href : href.startsWith("#") ? href : requestHref}
+
+      {...props}
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        if (isExternal || href.startsWith("#")) return;
+        event.preventDefault();
+        Logger.log(`pathChange-start:${requestHref}`);
+        window.parent.postMessage({ type: "pathChange", href: requestHref }, "*");
+        if (replace) router.replace(requestHref, { scrollToTop });
+        else router.push(requestHref, { scrollToTop });
+      }}
+    >
+      {children}
+    </a>
+  );
+}

package/ui/Link/index.tsx

@@ -0,0 +1,32 @@
+import { getEnv } from "akanjs/base";
+
+import Back from "./Back";
+import Close from "./Close";
+import CsrLink from "./CsrLink";
+import Lang from "./Lang";
+import SsrLink from "./SsrLink";
+import type { CommonLinkProps } from "./types";
+
+export const Link = ({ className, href, disabled = false, children, ...props }: CommonLinkProps) => {
+  if (disabled || !href)
+    return (
+      <div className={className} {...(props as any)}>
+        {children}
+      </div>
+    );
+
+  if (getEnv().renderMode === "csr")
+    return (
+      <CsrLink className={className} href={href} {...props}>
+        {children}
+      </CsrLink>
+    );
+  return (
+    <SsrLink className={className} href={href} {...props}>
+      {children}
+    </SsrLink>
+  );
+};
+Link.Back = Back;
+Link.Close = Close;
+Link.Lang = Lang;