akanjs 0.0.1 → 2.0.0-beta.1

package/ui/Link/types.ts

@@ -0,0 +1,47 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+type LinkProps = any;
+export type CommonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps | "href"> &
+  Omit<LinkProps, "href"> & {
+    /** Destination route. When omitted or disabled, Link renders a non-clickable div with the same children. */
+    href?: string | null;
+    children?: ReactNode;
+    /** Prevent navigation while preserving layout and children rendering. */
+    disabled?: boolean;
+    /** Scroll to the top after client-side navigation. */
+    scrollToTop?: boolean;
+    /** Class applied when the current route matches href. */
+    activeClassName?: string;
+    /** Match activeClassName only on exact route matches. */
+    activeExact?: boolean;
+    /** Bypass route cache for client-side navigation when supported by the renderer. */
+    noCache?: boolean;
+  };
+
+export interface CsrLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Destination route for client-side navigation. */
+  href: string;
+  children?: ReactNode;
+  /** Replace current history entry instead of pushing a new one. */
+  replace?: boolean;
+  /** Class applied when the current route matches href. */
+  activeClassName?: string;
+  /** Match activeClassName only on exact route matches. */
+  activeExact?: boolean;
+  /** Scroll to the top after client-side navigation. */
+  scrollToTop?: boolean;
+}
+
+export interface SsrLinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps | "href">,
+    LinkProps {
+  /** Destination route for server-rendered anchor output. */
+  href: string;
+  children?: ReactNode;
+  /** Prevent navigation while preserving layout and children rendering. */
+  disabled?: boolean;
+  /** Scroll to the top after navigation. */
+  scrollToTop?: boolean;
+  /** Class applied when the current route matches href. */
+  activeClassName?: string;
+}

package/ui/Load/Edit.tsx

@@ -0,0 +1,19 @@
+import { deepObjectify } from "akanjs/common";
+import type { ServerEdit } from "akanjs/fetch";
+
+import Edit_Client, { type EditProps } from "./Edit_Client";
+
+export default function Edit<T extends string, Full extends { id: string }>({ edit, ...props }: EditProps<T, Full>) {
+  const getObjEdit = (edit: ServerEdit<T, Full> | Partial<Full> | Promise<Partial<Full>>) => {
+    const editType: "edit" | "new" =
+      (edit as ServerEdit<string, Full>).refName &&
+      ((edit as ServerEdit<string, Full>)[`${(edit as ServerEdit<string, Full>).refName}Obj`] as Full)
+        ? "edit"
+        : "new";
+    return editType === "edit" ? edit : deepObjectify(edit, { serializable: true });
+  };
+  const objEdit = edit instanceof Promise ? edit.then(getObjEdit) : getObjEdit(edit);
+  return (
+    <Edit_Client edit={objEdit as unknown as ServerEdit<T, Full> | Partial<Full> | Promise<Partial<Full>>} {...props} />
+  );
+}

package/ui/Load/Edit_Client.tsx

@@ -0,0 +1,120 @@
+"use client";
+import { deepObjectify } from "akanjs/common";
+import type { ClientEdit, ServerEdit, SliceMeta } from "akanjs/fetch";
+import type { CreateOption } from "akanjs/store";
+import { useFetch } from "akanjs/webkit";
+import type { ReactNode } from "react";
+
+import { Empty } from "../Empty";
+import { Model } from "../Model";
+
+interface DefaultProps {
+  type?: "modal" | "form" | "empty";
+  className?: string;
+  modalClassName?: string;
+  checkSubmit?: boolean;
+  slice: SliceMeta;
+  modal?: string;
+  children?: ReactNode;
+  onSubmit?: string;
+  onCancel?: string;
+  submitText?: string;
+  submitClassName?: string;
+  submitOption?: CreateOption<any>;
+  renderSubmit?: boolean;
+}
+
+export interface EditProps<T extends string, Full extends { id: string }> extends DefaultProps {
+  edit: ClientEdit<T, Full> | Partial<Full> | Promise<Partial<Full>>;
+}
+
+interface RenderProps<T extends string, Full extends { id: string }> extends DefaultProps {
+  edit: ServerEdit<T, Full> | Partial<Full> | Promise<Partial<Full>>;
+}
+
+function Render<T extends string, Full extends { id: string }>({
+  className,
+  checkSubmit,
+  modalClassName,
+  type,
+  edit,
+  modal,
+  slice,
+  children,
+  onSubmit,
+  onCancel,
+  submitText,
+  submitClassName,
+  submitOption,
+  renderSubmit,
+}: RenderProps<T, Full>) {
+  const editType: "edit" | "new" =
+    (edit as ServerEdit<string, Full>).refName &&
+    ((edit as ServerEdit<string, Full>)[`${(edit as ServerEdit<string, Full>).refName}Obj`] as Full)
+      ? "edit"
+      : "new";
+  const modelId =
+    editType === "edit"
+      ? ((edit as ServerEdit<string, Full>)[`${(edit as ServerEdit<string, Full>).refName}Obj`] as Full).id
+      : undefined;
+  return (
+    <Model.EditModal
+      type={type}
+      id={modelId}
+      checkSubmit={checkSubmit}
+      className={className}
+      modalClassName={modalClassName}
+      slice={slice}
+      edit={
+        editType === "edit"
+          ? (edit as ServerEdit<string, Full>)
+          : deepObjectify(edit as Partial<Full>, { serializable: true })
+      }
+      modal={modal}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      submitText={submitText}
+      submitClassName={submitClassName}
+      submitOption={submitOption}
+      renderSubmit={renderSubmit}
+    >
+      {children}
+    </Model.EditModal>
+  );
+}
+
+export default function Edit_Client<T extends string, Full extends { id: string }>({
+  className,
+  checkSubmit,
+  modalClassName,
+  type,
+  edit,
+  modal,
+  slice,
+  children,
+  onSubmit,
+  onCancel,
+  submitText,
+  submitClassName,
+  submitOption,
+  renderSubmit,
+}: EditProps<T, Full>) {
+  const props: EditProps<T, Full> = {
+    className,
+    checkSubmit,
+    modalClassName,
+    type,
+    edit,
+    modal,
+    slice,
+    children,
+    onSubmit,
+    onCancel,
+    submitText,
+    submitClassName,
+    submitOption,
+    renderSubmit,
+  };
+  const { fulfilled, value: promiseEdit } = useFetch(edit);
+  return fulfilled ? promiseEdit ? <Render {...props} edit={promiseEdit} /> : <Empty /> : <Empty />;
+}

package/ui/Load/Page.tsx

@@ -0,0 +1,40 @@
+import { getEnv } from "akanjs/base";
+import type { ReactNode } from "react";
+
+import { PageCSR } from "./PageCSR";
+
+export interface PageProps<Return> {
+  /** Route component used by the CSR page wrapper. */
+  of: (props: unknown) => ReactNode | null;
+  /** Async data loader shared by SSR and CSR rendering. */
+  loader: () => Promise<Return>;
+  /** Render callback invoked with the loaded data. */
+  render: (data: Return) => ReactNode;
+  /** Optional loading renderer used while CSR data is pending. */
+  loading?: () => ReactNode;
+  /** Disable cached CSR loader results when fresh data is required. */
+  noCache?: boolean;
+}
+const Page: <Return>(props: PageProps<Return>) => ReactNode =
+  getEnv().renderMode === "csr"
+    ? PageCSR
+    : <Return,>({ loader, render }: PageProps<Return>) => {
+        return new Promise((resolve, reject) => {
+          loader()
+            .then((data) => {
+              resolve(render(data));
+            })
+            .catch((error: unknown) => {
+              const message =
+                error instanceof Error ? error.message : typeof error === "string" ? error : "Unknown error";
+              if (message === "NEXT_REDIRECT") reject(error);
+              else {
+                
+                console.error(error);
+                resolve(<div className="text-red-500">{message}</div>);
+              }
+            });
+        });
+      };
+
+export default Page;

package/ui/Load/PageCSR.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+
+import type { PageProps } from "./Page";
+
+const CacheMap = new WeakMap<object, Record<string, unknown>>();
+
+const setFetchedData = (target: (props: unknown) => ReactNode | null, data: unknown, pathname: string) => {
+  const fetchedData = CacheMap.get(target) ?? {};
+  CacheMap.set(target, { ...fetchedData, [pathname]: data });
+};
+const getFetchedData = (target: (props: unknown) => ReactNode | null, pathname: string): unknown => {
+  const data = CacheMap.get(target) ?? {};
+  return data[pathname] ?? null;
+};
+
+export const PageCSR = <Return,>({ of, loader, render, loading, noCache = false }: PageProps<Return>) => {
+  const fetchData = useMemo(() => {
+    const cachedData = getFetchedData(of, location.pathname) as Return;
+    if (!noCache && cachedData) return cachedData;
+    else return loader();
+  }, [location.pathname]);
+  const [fetchState, setFetchState] = useState<{ fulfilled: boolean; value: Return | null }>(
+    fetchData instanceof Promise ? { fulfilled: false, value: null } : { fulfilled: true, value: fetchData as Return },
+  );
+  useEffect(() => {
+    if (fetchState.fulfilled || !(fetchData instanceof Promise)) return;
+    void (async () => {
+      try {
+        const ret = await fetchData;
+        setFetchState({ fulfilled: true, value: ret });
+        setFetchedData(of, ret, location.pathname);
+      } catch {
+      }
+    })();
+  }, []);
+  if (!fetchState.fulfilled || !fetchState.value) return loading ? loading() : null;
+  else return <>{render(fetchState.value)}</>;
+};

package/ui/Load/Pagination.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { capitalize, lowerlize } from "akanjs/common";
+import type { BaseInsight } from "akanjs/constant";
+import type { ClientInit, ServerInit } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import { useFetch } from "akanjs/webkit";
+import { type Usable, use, useRef } from "react";
+
+import { Empty } from "../Empty";
+import { Pagination as Pagn } from "../Pagination";
+
+interface PaginationProps<RefName extends string, Light> {
+  className?: string;
+  init: ClientInit<RefName, Light>;
+  scrollToTop?: boolean;
+}
+
+interface RenderProps<RefName extends string, Light> {
+  className?: string;
+  init: ServerInit<RefName, Light>;
+  scrollToTop?: boolean;
+}
+function Render<RefName extends string, Light>({ className, init, scrollToTop }: RenderProps<RefName, Light>) {
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const storeGet = st.get as unknown as <T>() => { [key: string]: T };
+  const modelInit = (init as Promise<any> | { then?: any }).then
+    ? use(init as unknown as Usable<ServerInit<RefName, Light>>)
+    : init;
+  const { refName, sliceName } = modelInit;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const initModelInitAt = (modelInit as any)[`${modelName}InitAt`] as Date;
+  const loaded = useRef(storeGet<Date>()[`${modelInit.refName}InitAt`].getTime() >= initModelInitAt.getTime());
+  const names = {
+    model: modelName,
+    modelInsight: `${modelName}Insight`,
+    modelInitAt: `${modelName}InitAt`,
+    modelObjInsight: `${modelName}ObjInsight`,
+    pageOfModel: `pageOf${ModelName}`,
+    lastPageOfModel: `lastPageOf${ModelName}`,
+    limitOfModel: `limitOf${ModelName}`,
+    setPageOfModel: `setPageOf${ModelName}`,
+    addPageOfModel: `addPageOf${ModelName}`,
+  };
+  const namesOfSlice = {
+    modelInsight: sliceName.replace(names.model, names.modelInsight),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
+    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
+    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
+    addPageOfModel: sliceName.replace(names.model, names.addPageOfModel),
+  };
+  const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
+  const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
+  const initModelObjInsight = (modelInit as any)[names.modelObjInsight] as BaseInsight;
+  const initPageOfModel = (modelInit as any)[names.pageOfModel] as number;
+  const initLimitOfModel = (modelInit as any)[names.limitOfModel] as number;
+  const insight = loaded.current ? modelInsight : initModelObjInsight;
+  const page = loaded.current ? pageOfModel : initPageOfModel;
+  const limit = loaded.current ? limitOfModel : initLimitOfModel;
+
+  if (!loaded.current) loaded.current = true;
+
+  return (
+    <div className={clsx("mt-4 flex flex-wrap justify-center", className)}>
+      {insight.count > limit && (
+        <Pagn
+          currentPage={page}
+          total={insight.count}
+          itemsPerPage={limit || insight.count}
+          onPageSelect={(page) => {
+            void storeDo[namesOfSlice.setPageOfModel](page);
+            if (scrollToTop) {
+              window.parent.postMessage({ type: "pathChange", page }, "*");
+              window.scrollTo({ top: 0, behavior: "instant" });
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default function Pagination<T extends string, L>({ className, init, scrollToTop }: PaginationProps<T, L>) {
+  const { fulfilled, value: promiseInit } = useFetch(init);
+  return fulfilled ? promiseInit ? <Render scrollToTop init={promiseInit} /> : <Empty /> : <></>;
+}

package/ui/Load/Units.tsx

@@ -0,0 +1,330 @@
+"use client";
+import { DataList } from "akanjs/base";
+import { clsx } from "akanjs/client";
+import { capitalize, isQueryEqual, lowerlize } from "akanjs/common";
+import type { BaseInsight } from "akanjs/constant";
+import { ConstantRegistry } from "akanjs/constant";
+import type { ClientInit, ServerInit } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import { useFetch } from "akanjs/webkit";
+import { type ReactNode, type RefObject, useEffect, useMemo, useRef } from "react";
+
+import { Empty } from "../Empty";
+import { Loading } from "../Loading";
+import { More } from "../More";
+
+interface DefaultProps<L extends { id: string }> {
+  containerRef?: RefObject<HTMLDivElement | null>;
+  className?: string;
+  style?: React.CSSProperties;
+  noDiv?: boolean;
+  from?: number;
+  to?: number;
+  loading?: ReactNode;
+  filter?: (item: L, idx: number) => boolean;
+  sort?: (a: L, b: L) => number;
+  renderEmpty?: null | (() => ReactNode);
+  renderItem?: (item: L, idx: number) => ReactNode;
+  renderList?: (list: DataList<L>) => ReactNode;
+  reverse?: boolean;
+  pagination?: boolean;
+}
+
+interface UnitsProps<RefName extends string, Light extends { id: string }> extends DefaultProps<Light> {
+  init: ClientInit<RefName, Light>;
+}
+
+interface RenderProps<RefName extends string, Light extends { id: string }> extends DefaultProps<Light> {
+  init: ServerInit<RefName, Light>;
+}
+
+function Render<RefName extends string, Light extends { id: string }>({
+  containerRef,
+  className,
+  style,
+  init,
+  noDiv,
+  from,
+  to,
+  loading,
+  renderItem,
+  renderList,
+  renderEmpty = noDiv
+    ? () => null
+    : () => (
+        <div className="flex size-full items-center justify-center">
+          <Empty />
+        </div>
+      ),
+  filter = () => true,
+  sort = (a, b) => 1,
+  reverse,
+  pagination,
+}: RenderProps<RefName, Light>) {
+  const loaded = useRef(false);
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const storeGet = st.get as unknown as <T>() => { [key: string]: T };
+  const { refName, sliceName } = init;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const cnst = ConstantRegistry.getDatabase(refName);
+  const names = {
+    model: modelName,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    modelInsight: `${modelName}Insight`,
+    modelInitList: `${modelName}InitList`,
+    modelInitAt: `${modelName}InitAt`,
+    modelObjList: `${modelName}ObjList`,
+    modelObjInsight: `${modelName}ObjInsight`,
+    pageOfModel: `pageOf${ModelName}`,
+    lastPageOfModel: `lastPageOf${ModelName}`,
+    limitOfModel: `limitOf${ModelName}`,
+    queryArgsOfModel: `queryArgsOf${ModelName}`,
+    sortOfModel: `sortOf${ModelName}`,
+    setPageOfModel: `setPageOf${ModelName}`,
+    addPageOfModel: `addPageOf${ModelName}`,
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    modelInitList: sliceName.replace(names.model, names.modelInitList),
+    modelInitAt: sliceName.replace(names.model, names.modelInitAt),
+    modelInsight: sliceName.replace(names.model, names.modelInsight),
+    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
+    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    queryArgsOfModel: sliceName.replace(names.model, names.queryArgsOfModel),
+    sortOfModel: sliceName.replace(names.model, names.sortOfModel),
+    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
+    addPageOfModel: sliceName.replace(names.model, names.addPageOfModel),
+  };
+  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
+  const initQueryArgs = (init as any)[names.queryArgsOfModel] as object[];
+  const initModelInitAt = (init as any)[names.modelInitAt] as Date;
+  const initModelObjInsight = (init as any)[names.modelObjInsight] as BaseInsight;
+  const initLimitOfModel = (init as any)[names.limitOfModel] as number;
+  const initPageOfModel = (init as any)[names.pageOfModel] as number;
+
+  const useCache =
+    !modelListLoading &&
+    isQueryEqual(storeGet<object[]>()[namesOfSlice.queryArgsOfModel], initQueryArgs) &&
+    storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= initModelInitAt.getTime();
+  if (useCache) loaded.current = true;
+
+  const modelInitList = useMemo<DataList<Light>>(() => {
+    if (loaded.current) return modelList;
+    const initModelObjList = (init as any)[names.modelObjList] as Light[];
+    return new DataList<Light>(initModelObjList.map((model) => new cnst.light().set(model) as unknown as Light));
+  }, []);
+
+  useEffect(() => {
+    if (loaded.current) return;
+    const modelObjInsight = (init as any)[names.modelObjInsight] as BaseInsight;
+    const insight = new cnst.insight().set(modelObjInsight) as unknown as BaseInsight;
+    const initPageOfModel = (init as any)[names.pageOfModel] as number;
+    const initLastPageOfModel = (init as any)[names.lastPageOfModel] as number;
+    const initLimitOfModel = (init as any)[names.limitOfModel] as number;
+    const initQueryArgsOfModel = (init as any)[names.queryArgsOfModel] as object[];
+    const initSortOfModel = (init as any)[names.sortOfModel] as string;
+    st.set({
+      [namesOfSlice.modelList]: modelInitList,
+      [namesOfSlice.modelInitList]: modelInitList,
+      [namesOfSlice.modelInitAt]: initModelInitAt,
+      [namesOfSlice.modelListLoading]: false,
+      [namesOfSlice.modelInsight]: insight,
+      [namesOfSlice.pageOfModel]: initPageOfModel,
+      [namesOfSlice.lastPageOfModel]: initLastPageOfModel,
+      [namesOfSlice.limitOfModel]: initLimitOfModel,
+      [namesOfSlice.queryArgsOfModel]: initQueryArgsOfModel,
+      [namesOfSlice.sortOfModel]: initSortOfModel,
+    });
+    loaded.current = true; 
+  }, []);
+
+  const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
+  const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
+  const insight = loaded.current ? modelInsight : initModelObjInsight;
+  const limit = loaded.current ? limitOfModel : initLimitOfModel;
+  const page = loaded.current ? pageOfModel : initPageOfModel;
+  const moreProps = {
+    total: insight.count,
+    currentPage: page,
+    itemsPerPage: limit || insight.count,
+    onAddPage: async (page: number) => {
+      await storeDo[namesOfSlice.addPageOfModel](page);
+    },
+    onPageSelect: (page: number) => {
+      void storeDo[namesOfSlice.setPageOfModel](page);
+      
+      window.parent.postMessage({ type: "pathChange", page }, "*");
+      window.scrollTo({ top: 0, behavior: "instant" });
+    },
+    reverse,
+  };
+
+  const modelDataList = !loaded.current ? modelInitList.filter(filter).sort(sort) : modelList.filter(filter).sort(sort);
+  const showLoading = loaded.current && modelListLoading;
+  if (renderList)
+    return (
+      <>
+        {modelDataList.length ? (
+          <ContainerWrapper
+            containerRef={containerRef}
+            className={clsx(className, {
+              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1": modelDataList.length === 0,
+            })}
+            noDiv={noDiv}
+            pagination={pagination}
+            moreProps={moreProps}
+          >
+            {renderList(modelDataList)}
+          </ContainerWrapper>
+        ) : typeof renderEmpty === "function" ? (
+          renderEmpty()
+        ) : null}
+        {showLoading ? (loading ?? <Loading.Area />) : null}
+      </>
+    );
+  else if (!renderItem) throw new Error("renderItem is required");
+
+  const RenderItem = ({ model, idx }: { model: Light; idx: number }) => renderItem(model, idx);
+  return (
+    <>
+      <ContainerWrapper
+        containerRef={containerRef}
+        className={className}
+        noDiv={noDiv}
+        pagination={pagination}
+        moreProps={moreProps}
+      >
+        {modelDataList.length
+          ? (reverse ? [...modelDataList].reverse() : modelDataList)
+              .slice(from ?? 0, to ?? modelDataList.length + 1)
+              .map((model: Light, idx: number) => <RenderItem key={model.id} model={model} idx={idx} />)
+          : typeof renderEmpty === "function"
+            ? renderEmpty()
+            : null}
+      </ContainerWrapper>
+      {showLoading ? (loading ?? <Loading.Area />) : null}
+    </>
+  );
+}
+
+export default function Units<RefName extends string, Light extends { id: string }>({
+  containerRef,
+  className,
+  init,
+  noDiv,
+  from,
+  to,
+  loading,
+  renderItem,
+  renderList,
+  renderEmpty = noDiv
+    ? () => null
+    : () => (
+        <div className="flex size-full items-center justify-center">
+          <Empty />
+        </div>
+      ),
+  filter = () => true,
+  sort = (a, b) => 1,
+  reverse,
+  style,
+  pagination = true,
+}: UnitsProps<RefName, Light>) {
+  const props: UnitsProps<RefName, Light> = {
+    containerRef,
+    className,
+    style,
+    init,
+    noDiv,
+    from,
+    to,
+    loading,
+    renderItem,
+    renderList,
+    renderEmpty,
+    filter,
+    sort,
+    reverse,
+    pagination,
+  };
+
+  const { fulfilled, value: promiseInit } = useFetch(init);
+  return fulfilled ? (
+    promiseInit ? (
+      <Render {...props} init={promiseInit} />
+    ) : renderEmpty ? (
+      <>{renderEmpty()}</>
+    ) : (
+      <div className="flex size-full items-center justify-center">
+        <Empty />
+      </div>
+    )
+  ) : loading ? (
+    <>{loading}</>
+  ) : (
+    <div className="flex size-full items-center justify-center">
+      <Loading.Skeleton active />
+    </div>
+  );
+}
+
+interface MoreProps {
+  total: number;
+  itemsPerPage: number;
+  currentPage: number;
+  onAddPage: (page: number) => Promise<void>;
+  onPageSelect: (page: number) => void;
+  children?: React.ReactNode;
+  className?: string;
+  reverse?: boolean;
+}
+
+interface MoreWrapperProps {
+  children: ReactNode;
+  pagination?: boolean;
+  moreProps: MoreProps;
+}
+const MoreWrapper = ({ children, pagination, moreProps }: MoreWrapperProps) => {
+  return pagination ? <More {...moreProps}>{children}</More> : <>{children}</>;
+};
+
+interface ContainerWrapperProps {
+  children: ReactNode;
+  className?: string;
+  containerRef?: RefObject<HTMLDivElement | null>;
+  noDiv?: boolean;
+  pagination?: boolean;
+  moreProps: MoreProps;
+}
+const ContainerWrapper = ({
+  children,
+  className,
+  containerRef,
+  noDiv,
+  pagination,
+  moreProps,
+}: ContainerWrapperProps) => {
+  return noDiv ? (
+    <MoreWrapper pagination={pagination} moreProps={moreProps}>
+      {children}
+    </MoreWrapper>
+  ) : pagination ? (
+    <MoreWrapper pagination={pagination} moreProps={moreProps}>
+      <div ref={containerRef} className={className}>
+        {children}
+      </div>
+    </MoreWrapper>
+  ) : (
+    <div ref={containerRef} className={className}>
+      <MoreWrapper pagination={pagination} moreProps={moreProps}>
+        {children}
+      </MoreWrapper>
+    </div>
+  );
+};