akanjs 0.0.1 → 2.0.0-beta.0

package/ui/Popconfirm.tsx

@@ -0,0 +1,135 @@
+"use client";
+import { useSpring } from "@react-spring/web";
+
+import { clsx, usePage } from "akanjs/client";
+import { type ButtonHTMLAttributes, type ReactNode, useEffect, useState } from "react";
+import { BiMessageRoundedError } from "react-icons/bi";
+
+import { animated } from "./animated";
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  loading?: boolean;
+};
+
+export interface PopconfirmProps {
+  /** Confirmation title. */
+  title: string;
+  /** Optional detailed confirmation message. */
+  description?: ReactNode;
+  /** Called when the user confirms. */
+  onConfirm?: () => void;
+  /** Props forwarded to the OK button. */
+  okButtonProps?: ButtonProps;
+  /** Props forwarded to the cancel button. */
+  cancelButtonProps?: ButtonProps;
+  /** Custom OK button text. */
+  okText?: string;
+  /** Custom cancel button text. */
+  cancelText?: string;
+  /** Trigger content. */
+  children?: ReactNode;
+  /** Additional classes for the trigger wrapper. */
+  triggerClassName?: string;
+  /** Additional classes for the popover arrow/decorator. */
+  decoClassName?: string;
+}
+
+export const Popconfirm = ({
+  title,
+  description,
+  onConfirm,
+  okButtonProps,
+  cancelButtonProps,
+  okText,
+  cancelText,
+  children,
+  triggerClassName,
+  decoClassName,
+}: PopconfirmProps) => {
+  const { l } = usePage();
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  const popconfirmProps = useSpring({
+    opacity: isConfirming ? 1 : 0,
+    from: {
+      opacity: 0,
+    },
+  });
+
+  useEffect(() => {
+    const popconfirm = document.querySelector(".popconfirm");
+    const popconfirmRect = popconfirm?.getBoundingClientRect();
+    const popconfirmDeco = document.querySelector(".popconfirm-deco");
+
+    if (popconfirmRect && popconfirmRect.x < 0) {
+      popconfirm?.classList.add("left-0", "right-auto");
+      popconfirmDeco?.classList.add("left-10", "left-auto");
+    }
+    
+    if (popconfirmRect && popconfirmRect.x + popconfirmRect.width > window.innerWidth) {
+      popconfirm?.classList.add("left-auto", "right-0");
+    }
+  }, [isConfirming]);
+
+  const handleConfirm = () => {
+    setIsConfirming(false);
+    onConfirm?.();
+  };
+
+  const handleCancel = () => {
+    setIsConfirming(false);
+  };
+
+  return (
+    <>
+      <div className="relative inline-block">
+        <div
+          className={clsx("trigger", triggerClassName)}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsConfirming(true);
+          }}
+        >
+          {children}
+        </div>
+        {isConfirming && (
+          <animated.div
+            className="popconfirm absolute -right-2 bottom-0 z-10 translate-y-[106%] rounded-lg border border-base-300 bg-base-100 p-4 shadow-xl"
+            style={popconfirmProps}
+          >
+            <div
+              className={clsx(
+                "popconfirm-deco absolute -top-2 size-4 rotate-45 rounded-sm border-base-300 border-t border-l bg-base-100",
+                { "right-10": !decoClassName },
+                decoClassName,
+              )}
+            ></div>
+            <div className="flex gap-1">
+              <BiMessageRoundedError className="text-orange-500" />
+              <div>
+                <p className="mb-2 whitespace-nowrap font-bold">{title}</p>
+                <div className="mb-2 whitespace-nowrap">{description}</div>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <button className="btn btn-xs btn-outline" onClick={handleCancel} {...cancelButtonProps}>
+                {cancelText ?? l("base.cancel")}
+              </button>
+              <button className="btn btn-xs" onClick={handleConfirm} {...okButtonProps}>
+                {okText ?? l("base.ok")}
+              </button>
+            </div>
+          </animated.div>
+        )}
+      </div>
+      {isConfirming && (
+        <div
+          className="absolute top-0 left-0 h-screen w-full"
+          onClick={() => {
+            setIsConfirming(false);
+          }}
+        ></div>
+      )}
+    </>
+  );
+};

package/ui/Portal.tsx

@@ -0,0 +1,10 @@
+import { createPortal } from "react-dom";
+
+interface PortalProps {
+  children: React.ReactNode;
+  id: string;
+}
+export const Portal = ({ children, id }: PortalProps) => {
+  const targetElement = document.getElementById(id);
+  return targetElement ? createPortal(children, targetElement) : null;
+};

package/ui/Radio.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { ReactElement, ReactNode } from "react";
+
+export interface RadioProps {
+  value: string | number | null;
+  className?: string;
+  disabled?: boolean;
+  children: ReactNode | ReactElement | ReactElement[];
+  onChange: (value: string | number | null, idx: number) => void;
+}
+export const Radio = ({ value, children, disabled, className, onChange }: RadioProps) => {
+  return (
+    <div className={clsx(`flex gap-2`, className)}>
+      {(children as ReactElement<{ value: string | number | null }>[]).map((child, idx) => {
+        return (
+          <div className="flex items-center justify-center gap-1" key={idx}>
+            <input
+              type="radio"
+              disabled={disabled}
+              className="radio radio-primary radio-sm"
+              checked={value === child.props.value || value === idx}
+              onChange={() => {
+                onChange(child.props.value, idx);
+              }}
+            />
+            <button
+              className="bg-transparent"
+              onClick={() => {
+                onChange(child.props.value, idx);
+              }}
+            >
+              {child}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export interface ItemProps {
+  value: string | number;
+  children: ReactNode | ReactElement;
+  className?: string;
+  checked?: boolean;
+  onChange?: (value: string) => void;
+}
+
+const Item = ({ value, className, children }: ItemProps) => {
+  return <div className={clsx("", className)}>{children}</div>;
+};
+Radio.Item = Item;

package/ui/RecentTime.tsx

@@ -0,0 +1,123 @@
+import { type Dayjs, dayjs } from "akanjs/base";
+import { clsx, usePage } from "akanjs/client";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+export interface RecentTimeProps {
+  /** Date value to render. Null renders nothing, and epoch placeholder values render --:--. */
+  date: Date | Dayjs | null;
+  /** Unit at which relative labels stop and formatted dates are shown instead. */
+  breakUnit?: Intl.RelativeTimeFormatUnit;
+  /** Use compact automatic formatting or always include date and time. */
+  format?: "full" | "auto";
+  /** Additional classes for the tooltip span. */
+  className?: string;
+}
+
+export const RecentTime = ({ date, breakUnit, format = "auto", className }: RecentTimeProps) => {
+  const { lang } = usePage();
+  const now = dayjs();
+  const datejs = dayjs(date);
+  datejs.locale(lang);
+  const diff = dayjs().diff(datejs);
+  const dateFormat =
+    format === "full"
+      ? "YY-MM-DD HH:mm"
+      : now.year() !== datejs.year()
+        ? "YYYY-MM-DD"
+        : now.month() !== datejs.month() || now.date() !== datejs.date()
+          ? "MM-DD"
+          : "HH:mm";
+
+  const diffSecs = Math.floor(diff / 1000);
+  if (!date) return null;
+  if (dayjs(0).isSame(date) || dayjs(-1).isSame(date)) return <span>--:--</span>;
+  if (breakUnit === "second")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm:ss")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  if (Math.abs(diffSecs) < 60)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "minute")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  const diffMins = Math.floor(diff / (1000 * 60));
+  if (Math.abs(diffMins) < 60)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "hour")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  const diffHours = Math.floor(diff / (1000 * 3600));
+  if (Math.abs(diffHours) < 24)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "day")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  const diffDays = Math.floor(diff / (1000 * 3600 * 24));
+  if (Math.abs(diffDays) < 7)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "week")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  const diffWeeks = Math.floor(diff / (1000 * 3600 * 24 * 7));
+  if (Math.abs(diffWeeks) < 4)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "month")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  const diffMonths = Math.floor(diff / (1000 * 3600 * 24 * 30));
+  if (Math.abs(diffMonths) < 12)
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.fromNow()}
+      </span>
+    );
+  else if (breakUnit === "year")
+    return (
+      <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+        {datejs.format(dateFormat)}
+      </span>
+    );
+  return (
+    <span className={clsx("tooltip", className)} data-tip={datejs.format("YYYY-MM-DD HH:mm")}>
+      {datejs.fromNow()}
+    </span>
+  );
+};

package/ui/Refresh.tsx

@@ -0,0 +1,24 @@
+"use client";
+import type { ReactElement } from "react";
+import { BiLoaderAlt } from "react-icons/bi";
+import PullToRefresh from "react-simple-pull-to-refresh";
+
+interface RefreshProps {
+  children: ReactElement;
+  onRefresh: () => Promise<void>;
+}
+
+export const Refresh = ({ children, onRefresh }: RefreshProps) => {
+  return (
+    <PullToRefresh
+      onRefresh={onRefresh}
+      refreshingContent={
+        <div className="fixed left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full bg-base-100 shadow-sm">
+          <BiLoaderAlt className="animate-spin text-2xl" />
+        </div>
+      }
+    >
+      {children}
+    </PullToRefresh>
+  );
+};

package/ui/ScreenNavigator.tsx

@@ -0,0 +1,129 @@
+"use client";
+import { useDrag } from "@use-gesture/react";
+import { clsx } from "akanjs/client";
+import { animated } from "akanjs/ui";
+import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { SpringValue, useSpringValue } from "react-spring";
+
+interface ScreenNavigatorContextType {
+  bind: (...args: any[]) => any;
+  menus: string[];
+  currentMenu: string;
+  setMenu: (menu: string) => void;
+  xValue: SpringValue<number>;
+  onClickMenu: (menu: string) => void;
+}
+
+const ScreenNavigatorContext = createContext<ScreenNavigatorContextType>({
+  bind: () => ({}),
+  xValue: new SpringValue(0),
+  setMenu: null as unknown as (menu: string) => void,
+  onClickMenu: null as unknown as (menu: string) => void,
+  currentMenu: "",
+  menus: [],
+});
+
+interface ScreenNavigatorProps {
+  
+  children: React.ReactNode;
+  setMenu?: (menu: string) => void;
+  menus: string[];
+}
+
+export const ScreenNavigator = ({
+  children,
+  setMenu = () => {
+  },
+  menus,
+}: ScreenNavigatorProps) => {
+  const [currentMenu, setCurrentMenu] = useState(menus[0]);
+  const xValue = useSpringValue(0, { config: { clamp: true } });
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const deviceWidth = ref.current.clientWidth / 2;
+    if (currentMenu === menus[1]) xValue.set(-deviceWidth);
+    else xValue.set(0);
+  }, []);
+
+  const bind = useDrag(
+    ({ first, last, offset: [x], velocity: [vx], direction: [dx], movement: [mx], cancel }) => {
+      if (!ref.current) return;
+      
+      const deviceWidth = ref.current.clientWidth / 2;
+      if (x > 0 || x < -deviceWidth) return;
+      if (dx < 1) {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(x);
+        } else {
+          void xValue.start(-deviceWidth);
+          setCurrentMenu(menus[1]);
+          setMenu(menus[1]);
+        }
+        if (last && x > -deviceWidth / 2) {
+          void xValue.start(0);
+        }
+      } else {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(0);
+          setCurrentMenu(menus[0]);
+          setMenu(menus[0]);
+        } else {
+          void xValue.start(x);
+        }
+        if (last && x < -deviceWidth / 2) {
+          void xValue.start(-deviceWidth);
+        }
+      }
+    },
+    { axis: "x", filterTaps: true, threshold: 10 },
+  );
+
+  const onClickMenu = (menu: string) => {
+    if (!ref.current) return;
+    const deviceWidth = ref.current.clientWidth / 2;
+
+    if (menu === menus[0]) {
+      void xValue.start(0);
+      setMenu(menus[0]);
+      setCurrentMenu(menus[0]);
+    } else {
+      void xValue.start(-deviceWidth);
+      setMenu(menus[1]);
+      setCurrentMenu(menus[1]);
+    }
+  };
+
+  return (
+    <ScreenNavigatorContext.Provider value={{ bind, xValue, onClickMenu, menus, currentMenu, setMenu }}>
+      <animated.div {...bind()} className="flex h-full w-[200vw] overflow-x-scroll" style={{ x: xValue }} ref={ref}>
+        {children}
+      </animated.div>
+    </ScreenNavigatorContext.Provider>
+  );
+};
+
+const NavbarItem = ({ menu, children, className }: { menu: string; children: ReactNode; className?: string }) => {
+  const { onClickMenu, currentMenu } = useContext(ScreenNavigatorContext);
+  return (
+    <div
+      className={clsx(className, currentMenu === menu ? "opacity-100" : "opacity-40")}
+      onClick={() => {
+        onClickMenu(menu);
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+ScreenNavigator.NavbarItem = NavbarItem;
+
+const Screen = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-full w-screen overflow-scroll" style={{ touchAction: "pan-y" }}>
+      {children}
+    </div>
+  );
+};
+ScreenNavigator.Screen = Screen;