akanjs 0.0.1 → 2.0.0-beta.0

package/ui/System/SelectLanguage.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { clsx, router, usePage } from "akanjs/client";
+import { parseAkanI18nEnv } from "akanjs/common";
+
+const languageNames = {
+  en: "English",
+  ko: "한국어",
+  zhChs: "简体中文",
+  zhCht: "繁體中文",
+};
+
+export interface SelectLanguageProps {
+  className?: string;
+  languages?: string[];
+}
+export const SelectLanguage = ({ className, languages = parseAkanI18nEnv().locales }: SelectLanguageProps) => {
+  const { lang } = usePage();
+
+  return (
+    <div className={clsx("dropdown dropdown-end", className)}>
+      <div
+        id="select-language"
+        tabIndex={0}
+        role="button"
+        className="btn btn-ghost btn-sm mx-2 my-auto min-h-0 rounded-btn px-3 font-medium text-xs md:mx-4"
+      >
+        {languageNames[lang as keyof typeof languageNames]}
+      </div>
+      <ul tabIndex={0} className="dropdown-content menu rounded-box bg-base-100 p-2 shadow-sm">
+        {languages
+          .filter((lang) => !!languageNames[lang as keyof typeof languageNames])
+          .map((lang) => (
+            <li key={lang}>
+              <button
+                type="button"
+                onClick={() => {
+                  router.setLang(lang);
+                }}
+              >
+                {languageNames[lang as keyof typeof languageNames]}
+              </button>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+};

package/ui/System/ThemeToggle.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { setCookie } from "akanjs/client";
+import { useCallback, useEffect, useState } from "react";
+
+interface ThemeToggleProps {
+  themes?: string[];
+}
+
+export const ThemeToggle = ({ themes }: ThemeToggleProps) => {
+  const [theme, setTheme] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (!themes) return;
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    setTheme(currentTheme && themes.includes(currentTheme) ? currentTheme : themes[0]);
+  }, [themes]);
+
+  const applyTheme = useCallback((theme: string) => {
+    document.documentElement.setAttribute("data-theme", theme);
+    setCookie("theme", theme);
+    setTheme(theme);
+  }, []);
+  if (!themes || themes.length <= 1) return null;
+  if (themes.length === 2)
+    return (
+      <label className="toggle text-base-content">
+        {/* this hidden checkbox controls the state */}
+        <input
+          type="checkbox"
+          className="theme-controller"
+          value={themes[1]}
+          checked={theme === themes[1]}
+          onChange={(e) => applyTheme(e.target.checked ? themes[1] : themes[0])}
+        />
+
+        {/* sun icon */}
+        {/* <svg className="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+        </svg> */}
+        {/* moon icon */}
+        {/* <svg className="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+        </svg> */}
+        <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="4"></circle>
+            <path d="M12 2v2"></path>
+            <path d="M12 20v2"></path>
+            <path d="m4.93 4.93 1.41 1.41"></path>
+            <path d="m17.66 17.66 1.41 1.41"></path>
+            <path d="M2 12h2"></path>
+            <path d="M20 12h2"></path>
+            <path d="m6.34 17.66-1.41 1.41"></path>
+            <path d="m19.07 4.93-1.41 1.41"></path>
+          </g>
+        </svg>
+
+        <svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor">
+            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+          </g>
+        </svg>
+      </label>
+    );
+  else
+    return (
+      <div className="dropdown mb-72">
+        <div tabIndex={0} role="button" className="btn m-1">
+          Theme
+          <svg
+            width="12px"
+            height="12px"
+            className="inline-block h-2 w-2 fill-current opacity-60"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 2048 2048"
+          >
+            <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
+          </svg>
+        </div>
+        <ul tabIndex={-1} className="dropdown-content z-1 w-52 rounded-box bg-base-300 p-2 shadow-2xl">
+          {themes.map((theme) => (
+            <li key={theme}>
+              <input
+                type="radio"
+                name="theme-dropdown"
+                className="theme-controller btn btn-sm btn-block btn-ghost w-full justify-start"
+                aria-label={theme}
+                value={theme}
+                onChange={(e) => {
+                  applyTheme(e.target.value);
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+};

package/ui/System/index.tsx

@@ -0,0 +1,23 @@
+import { getEnv } from "akanjs/base";
+import { default as CSR, type CSRProviderProps } from "./CSR";
+import { DevModeToggle } from "./DevModeToggle";
+import { Reconnect } from "./Reconnect";
+import { Root } from "./Root";
+import { SelectLanguage } from "./SelectLanguage";
+import { default as SSR, type SSRProviderProps } from "./SSR";
+import { ThemeToggle } from "./ThemeToggle";
+
+export type { WebAppManifest } from "akanjs/client";
+
+export const Provider = (props: CSRProviderProps | SSRProviderProps) => {
+  if (getEnv().renderMode === "csr") return <CSR {...(props as CSRProviderProps)} />;
+  else return <SSR {...(props as SSRProviderProps)} />;
+};
+export const System = {
+  Provider,
+  ThemeToggle,
+  Root,
+  SelectLanguage,
+  Reconnect,
+  DevModeToggle,
+};

package/ui/Tab/Menu.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { type ReactNode, useContext, useEffect } from "react";
+
+import { TabContext } from "./context";
+
+export interface MenuProps {
+  className?: string;
+  activeClassName?: string;
+  disabledClassName?: string;
+  disabled?: boolean;
+  menu: string;
+  children: ReactNode;
+  scrollToTop?: boolean;
+  tooltip?: string;
+}
+export const Menu = ({
+  className,
+  activeClassName = "",
+  disabledClassName = "",
+  disabled = false,
+  menu,
+  children,
+  scrollToTop,
+  tooltip,
+}: MenuProps) => {
+  const { menu: currentMenu, setMenu, menuSet } = useContext(TabContext);
+  useEffect(() => {
+    if (!menuSet.current) return;
+    menuSet.current.add(menu);
+  }, [menu]);
+  useEffect(() => {
+    if (!disabled || !menuSet.current) return;
+    if (currentMenu === menu) setMenu([...menuSet.current.values()].find((m) => m !== menu) ?? null);
+  }, [disabled]);
+
+  return (
+    <div
+      data-tip={tooltip}
+      className={clsx(className, {
+        "cursor-pointer": menu !== currentMenu && !disabled,
+        "cursor-not-allowed": disabled,
+        tooltip: !!tooltip,
+        [activeClassName]: menu === currentMenu,
+        [disabledClassName]: disabled,
+      })}
+      onClick={() => {
+        if (disabled) return;
+        setMenu(menu);
+        if (scrollToTop) window.scrollTo({ top: 0, behavior: "smooth" });
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/ui/Tab/Menus.tsx

@@ -0,0 +1,10 @@
+"use client";
+import type { ReactNode } from "react";
+
+export interface MenusProps {
+  className?: string;
+  children: ReactNode;
+}
+export const Menus = ({ className, children }: MenusProps) => {
+  return <div className={className}>{children}</div>;
+};

package/ui/Tab/Panel.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { type ReactNode, useContext, useEffect, useState } from "react";
+
+import { TabContext } from "./context";
+
+export interface PanelProps {
+  className?: string;
+  menu: string;
+  children?: ReactNode;
+  loading?: "eager" | "lazy" | "every";
+}
+export const Panel = ({ className, menu, children, loading = "eager" }: PanelProps) => {
+  const { menu: currentMenu } = useContext(TabContext);
+  const [loaded, setLoaded] = useState(menu === currentMenu);
+
+  useEffect(() => {
+    if (loading === "eager") setLoaded(true);
+    else if (loading === "lazy" && !loaded && currentMenu === menu) setLoaded(true);
+    else if (loading === "every") setLoaded(currentMenu === menu);
+  }, [currentMenu]);
+
+  if (loading === "eager") return <div className={clsx(className, { hidden: currentMenu !== menu })}>{children}</div>;
+  else return loaded ? <div className={clsx(className, { hidden: currentMenu !== menu })}>{children}</div> : null;
+};

package/ui/Tab/Provider.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { type ReactNode, useRef, useState } from "react";
+
+import { TabContext } from "./context";
+
+export interface ProviderProps {
+  /** Additional classes for the tab state wrapper. */
+  className?: string;
+  /** Initial active menu key. */
+  defaultMenu?: string | null;
+  /** Tab.Menus and Tab.Panel children. */
+  children?: ReactNode;
+}
+export const Provider = ({ className, defaultMenu = null, children }: ProviderProps) => {
+  const menuSet = useRef(new Set<string>());
+  const [menu, setMenu] = useState<string | null>(defaultMenu);
+  return (
+    <TabContext.Provider value={{ defaultMenu, menu, setMenu, menuSet }}>
+      <div data-menu={menu} className={clsx(className, "group/tab")}>
+        {children}
+      </div>
+    </TabContext.Provider>
+  );
+};

package/ui/Tab/context.ts

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, type RefObject } from "react";
+
+interface TabContextType {
+  defaultMenu: string | null;
+  menu: string | null;
+  setMenu: (value: string | null) => void;
+  menuSet: RefObject<Set<string>>;
+}
+
+export const TabContext = createContext<TabContextType>({
+  defaultMenu: null,
+  menu: null,
+  setMenu: (value: string | null) => null,
+  menuSet: null as unknown as RefObject<Set<string>>,
+});

package/ui/Tab/index.tsx

@@ -0,0 +1,11 @@
+import { Menu } from "./Menu";
+import { Menus } from "./Menus";
+import { Panel } from "./Panel";
+import { Provider, type ProviderProps } from "./Provider";
+
+export const Tab = (props: ProviderProps) => {
+  return <Provider {...props} />;
+};
+Tab.Menu = Menu;
+Tab.Menus = Menus;
+Tab.Panel = Panel;

package/ui/Table.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { clsx } from "akanjs/client";
+import type { Responsive } from "akanjs/constant";
+import { st } from "akanjs/store";
+import type React from "react";
+import { type ReactNode, useMemo } from "react";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+
+import { Empty } from "./Empty";
+import { Pagination, type PaginationProps } from "./Pagination";
+
+export interface Column {
+  /** Stable column key. Defaults to index when omitted. */
+  key?: string;
+  /** Header label. */
+  title: ReactNode;
+  /** Field name read from each row object. */
+  dataIndex: string;
+  /** Custom cell renderer. */
+  render?: (text: any, record: any, idx: number) => React.ReactNode;
+  /** Responsive breakpoints where this column should be visible. */
+  responsive?: Responsive["value"][];
+}
+
+export interface TableProps {
+  /** Column definitions. */
+  columns: Column[];
+  /** Rows rendered by the table. */
+  dataSource: any[];
+  /** Show a centered loading spinner and dim rows. */
+  loading?: boolean;
+  /** Table density. */
+  size?: "small" | "middle";
+  /** Add a border around the table wrapper. */
+  bordered?: boolean;
+  /** Pagination config, or false to hide pagination. */
+  pagination?: PaginationProps | false;
+  /** Show header always, never, or only at selected responsive breakpoints. */
+  showHeader?: boolean | Responsive["value"][];
+  /** Row event factory. */
+  onRow?: (record: any, index: number) => { onClick: (() => void) | (() => Promise<boolean>) };
+  /** Row class or class factory. */
+  rowClassName?: string | ((record: any, index: number) => string) | undefined;
+  /** Custom row key resolver. */
+  rowKey?: (model: any) => string;
+}
+
+export const Table = ({
+  columns,
+  dataSource,
+  loading,
+  size,
+  bordered,
+  pagination,
+  showHeader = true,
+  onRow,
+  rowClassName,
+  rowKey,
+}: TableProps) => {
+  const sizeClassName = size === "small" ? "table-compact" : "";
+  const loadingClassName = loading ? "opacity-30" : "";
+  const borderedClassName = bordered ? "border border-gray-200 rounded-xl" : "";
+  const responsive = st.use.responsive();
+  const renderedColumns = useMemo(() => {
+    return columns
+      .filter((c) => !c.responsive || c.responsive.includes(responsive))
+      .map((column, idx) => (
+        <th key={idx} className="whitespace-nowrap">
+          {column.title}
+        </th>
+      ));
+  }, [columns, responsive]);
+
+  const renderedRows = useMemo(() => {
+    return dataSource.map((rowData: { [key: string]: any }, rowIndex) => {
+      const renderedCells = columns
+        .filter((c) => !c.responsive || c.responsive.includes(responsive))
+        .map((column, idx) => (
+          <td
+            key={idx}
+            className={clsx(
+              "whitespace-nowrap",
+              rowClassName ? (typeof rowClassName === "string" ? rowClassName : rowClassName(rowData, rowIndex)) : "",
+            )}
+            {...onRow?.(rowData, rowIndex)}
+          >
+            {column.render
+              ? column.render(rowData[column.dataIndex], rowData, rowIndex)
+              : column.dataIndex
+                ? rowData[column.dataIndex]
+                : null}
+          </td>
+        ));
+
+      return <tr key={rowIndex}>{renderedCells}</tr>;
+    });
+  }, [columns, dataSource, responsive]);
+
+  return (
+    <div className={clsx("relative w-full", loadingClassName, borderedClassName)}>
+      {loading && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <AiOutlineLoading3Quarters className="animate-spin text-3xl" />
+        </div>
+      )}
+      <table className={clsx("table w-full", sizeClassName)}>
+        {showHeader === true || (Array.isArray(showHeader) && showHeader.includes(responsive)) ? (
+          <thead className="normal-case">
+            <tr>{renderedColumns}</tr>
+          </thead>
+        ) : null}
+        {!!dataSource.length && <tbody>{renderedRows}</tbody>}
+      </table>
+      {!dataSource.length && (
+        <div className="w-full">
+          <Empty />
+        </div>
+      )}
+      {pagination && (
+        <div className="mt-3 flex justify-center">
+          <Pagination
+            currentPage={pagination.currentPage}
+            total={pagination.total}
+            onPageSelect={pagination.onPageSelect}
+            itemsPerPage={pagination.itemsPerPage}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/ui/ToggleSelect.tsx

@@ -0,0 +1,144 @@
+import { clsx, usePage } from "akanjs/client";
+
+interface ToggleSelectProps<I extends string | number | boolean | null> {
+  className?: string;
+  btnClassName?: string;
+  items: string[] | number[] | { label: string; value: I; disabled?: boolean }[];
+  value: I;
+  nullable: boolean;
+  validate: (value: I) => boolean | string;
+  onChange: (value: I, idx: number) => void;
+  disabled?: boolean;
+}
+export const ToggleSelect = <I extends string | number | boolean | null>({
+  className,
+  btnClassName,
+  items,
+  nullable,
+  validate,
+  value,
+  onChange,
+  disabled,
+}: ToggleSelectProps<I>) => {
+  const { l } = usePage();
+  const validateResult = value !== null ? validate(value) : false;
+
+  const invalidMessage =
+    value === null || (typeof value === "string" && !value.length) || validateResult === true
+      ? null
+      : validateResult === false
+        ? l("base.invalidValueError")
+        : validateResult;
+  const options = items.map(
+    (item) =>
+      (typeof item === "string" || typeof item === "number" ? { label: item.toString(), value: item } : item) as {
+        label: string;
+        value: I;
+        disabled?: boolean;
+      },
+  );
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full flex-wrap items-center gap-1 rounded-md border border-base-content/20 p-2",
+        className,
+      )}
+    >
+      {options.map((option, idx: number) => {
+        const isSelected = value === option.value;
+        const isDisabled = (disabled ?? false) || (option.disabled ?? false);
+        return (
+          <button
+            key={idx}
+            disabled={isDisabled}
+            className={clsx(
+              "btn btn-sm",
+              { "bg-success/70 text-success-content": isSelected, "btn-disabled cursor-not-allowed": isDisabled },
+
+              btnClassName,
+            )}
+            onClick={() => {
+              onChange(option.value, idx);
+            }}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+      {invalidMessage ? (
+        <div className="absolute -bottom-4 animate-fadeIn text-error text-xs">{invalidMessage}</div>
+      ) : null}
+    </div>
+  );
+};
+
+interface MultiProps {
+  className?: string;
+  btnClassName?: string;
+  items: string[] | number[] | { label: string; value: string | number; disabled?: boolean }[];
+  value: string[] | number[];
+  nullable: boolean;
+  validate: (value: string[] | number[]) => boolean | string;
+  onChange: (value: string[] | number[]) => void;
+  disabled?: boolean;
+}
+const Multi = ({ className, btnClassName, items, nullable, validate, value, onChange, disabled }: MultiProps) => {
+  const { l } = usePage();
+  const validateResult = validate(value);
+
+  const invalidMessage =
+    !value.length || validateResult === true
+      ? null
+      : validateResult === false
+        ? l("base.invalidValueError")
+        : validateResult;
+  const options = items.map(
+    (item) =>
+      (typeof item === "string" || typeof item === "number" ? { label: item.toString(), value: item } : item) as {
+        label: string;
+        value: string | number;
+        disabled?: boolean;
+      },
+  );
+  return (
+    <div
+      className={clsx(
+        "relative flex w-full flex-wrap items-center gap-1 rounded-md border border-base-content/20 p-2",
+        className,
+      )}
+    >
+      {options.map((option, idx) => {
+        const isSelected = (value as string[]).includes(option.value as string);
+        const isDisabled = (disabled ?? false) || (option.disabled ?? false);
+        return (
+          <button
+            key={idx}
+            disabled={isDisabled}
+            className={clsx(
+              "btn btn-sm",
+              { "bg-success/70 text-success-content": isSelected, "cursor-not-allowed": isDisabled },
+              btnClassName,
+            )}
+            onClick={() => {
+              onChange(
+                isSelected
+                  ? (value.filter((i) => i !== option.value) as string[])
+                  : ([...value, option.value].sort(
+                      (a, b) =>
+                        options.findIndex((o) => o.value === a) -
+                        items.findIndex((o) => (o as { label: string; value: string }).value === b),
+                    ) as string[]),
+              );
+            }}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+      {invalidMessage ? (
+        <div className="absolute -bottom-4 animate-fadeIn text-error text-xs">{invalidMessage}</div>
+      ) : null}
+    </div>
+  );
+};
+ToggleSelect.Multi = Multi;

package/ui/Unauthorized.tsx

@@ -0,0 +1,29 @@
+
+import { clsx, usePage } from "akanjs/client";
+import type { ReactNode } from "react";
+import { AiOutlineBlock } from "react-icons/ai";
+
+interface UnauthorizedProps {
+  className?: string;
+  description?: ReactNode;
+  children?: ReactNode;
+  minHeight?: number;
+}
+
+export const Unauthorized = ({ className = "", description, children, minHeight = 300 }: UnauthorizedProps) => {
+  const { l } = usePage();
+  return (
+    <div>
+      <div
+        className={clsx(
+          `min-h-[ w-full${minHeight}px] flex flex-col items-center justify-center gap-3 pt-6 pb-3 text-base-content/30`,
+          className,
+        )}
+      >
+        <AiOutlineBlock className="scale-150 text-4xl" />
+        <p>{description ?? l("base.unauthorized")}</p>
+      </div>
+      {children}
+    </div>
+  );
+};

package/ui/animated.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { a } from "@react-spring/web";
+
+export const animated = {
+  div: a("div"),
+  g: a("g"),
+  progress: a("progress"),
+};