akanjs 0.0.1 → 2.0.0-beta.0

package/ui/Model/Edit.tsx

@@ -0,0 +1,46 @@
+import { clsx, usePage } from "akanjs/client";
+import type { SliceMeta } from "akanjs/fetch";
+import type { ReactNode } from "react";
+import { AiOutlineEdit } from "react-icons/ai";
+
+import EditModal from "./EditModal";
+import EditWrapper from "./EditWrapper";
+
+interface EditProps {
+  type?: "icon" | "button";
+  className?: string;
+  wrapperClassName?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  modelId: string;
+  modal?: string | null;
+  renderTitle?: ((model: { id: string }) => string | ReactNode) | string;
+}
+
+export default function Edit({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  slice,
+  modelId,
+  modal,
+  renderTitle,
+}: EditProps) {
+  const { l } = usePage();
+  return (
+    <div className={clsx("inline", wrapperClassName)}>
+      <EditWrapper
+        className={clsx("flex w-full items-center justify-center gap-2", className)}
+        slice={slice}
+        modelId={modelId}
+        modal={modal}
+      >
+        <AiOutlineEdit /> {type === "button" ? l("base.edit") : null}
+      </EditWrapper>
+      <EditModal renderTitle={renderTitle} slice={slice} id={modelId}>
+        {children}
+      </EditModal>
+    </div>
+  );
+}

package/ui/Model/EditModal.tsx

@@ -0,0 +1,301 @@
+"use client";
+import { clsx, router, usePage } from "akanjs/client";
+import { capitalize, deepObjectify, lowerlize } from "akanjs/common";
+import { ConstantRegistry, immerify } from "akanjs/constant";
+import type { ClientEdit, ServerEdit, SliceMeta } from "akanjs/fetch";
+import { type CreateOption, type Submit, st } from "akanjs/store";
+import { useDebounce } from "akanjs/webkit";
+import { type ReactNode, type Usable, use, useCallback, useEffect, useMemo } from "react";
+import { AiOutlinePlus, AiOutlineSave } from "react-icons/ai";
+
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+
+interface EditModelProps<Full> {
+  /** Rendering mode for the edit shell. */
+  type?: "modal" | "form" | "empty";
+  /** Slice metadata generated for the model store/fetch contract. */
+  slice: SliceMeta;
+  /** Additional classes for the wrapper. */
+  className?: string;
+  /** Re-check submit eligibility when form state changes. */
+  checkSubmit?: boolean;
+  /** Client edit promise or partial form seed. */
+  edit?: ClientEdit<string, Full> | Partial<Full>;
+  /** Store modal name that should activate this editor. */
+  modal?: string;
+  children: any;
+  /** Custom loading overlay wrapper, or false to disable the default overlay. */
+  loadingWrapper?: boolean | ((props: { children?: any; className?: string }) => ReactNode);
+}
+const EditModel = <Full,>({
+  type = "modal",
+  slice,
+  className,
+  checkSubmit = true,
+  edit,
+  modal,
+  children,
+  loadingWrapper,
+}: EditModelProps<Full>) => {
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => void };
+  const { refName, sliceName } = slice;
+  const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
+  const names = useMemo(
+    () => ({
+      model: modelName,
+      Model: ModelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      checkModelSubmitable: `check${ModelName}Submitable`,
+    }),
+    [],
+  );
+  const modelModal = storeUse[names.modelModal]() as string | null;
+  const modelForm = storeUse[names.modelForm]() as { id: string | null; [key: string]: any };
+
+  const checkSubmitable = useDebounce(() => {
+    storeDo[names.checkModelSubmitable]();
+  });
+
+  useEffect(() => {
+    if (checkSubmit) checkSubmitable();
+  }, [modelModal, modelForm]);
+
+  const LoadingWrapper = useMemo(() => {
+    return loadingWrapper === false
+      ? ({ children, className }: { children?: any; className?: string }) => children as ReactNode
+      : typeof loadingWrapper === "function"
+        ? loadingWrapper
+        : ({ children, className }: { children?: any; className?: string }) => {
+            const modelFormLoading = storeUse[names.modelFormLoading]();
+            return (
+              <div className={clsx("", className)}>
+                {children}
+                {modelFormLoading ? <div className="absolute inset-0 animate-pulse bg-base-100/50" /> : null}
+              </div>
+            );
+          };
+  }, []);
+
+  return <LoadingWrapper className={clsx("w-full", className)}>{children}</LoadingWrapper>;
+};
+
+interface EditModalProps<Full extends { id: string }> extends EditModelProps<Full> {
+  /** Model id used to scope edit modal state. */
+  id?: string;
+  /** Disable modal trigger and submit behavior. */
+  disabled?: boolean;
+  checkSubmit?: boolean;
+  /** Additional classes for the modal window. */
+  modalClassName?: string;
+  /** Modal title or title renderer receiving the current model. */
+  renderTitle?: ((model: Full) => string | ReactNode) | string;
+  /** Submit button label. */
+  submitText?: string;
+  /** Additional classes for the submit button. */
+  submitClassName?: string;
+  /** Store submit options passed to the generated submit action. */
+  submitOption?: CreateOption<Full>;
+  /** Custom submit renderer, or false to hide the default submit button. */
+  renderSubmit?: boolean | ((arg: any) => ReactNode);
+  /** Action name or callback invoked after submit. */
+  onSubmit?: string | ((model: Full) => void);
+  /** Action name or callback invoked on cancel. */
+  onCancel?: string | ((form?: any) => any);
+}
+
+export default function EditModal<Full extends { id: string }>({
+  type = "modal",
+  slice,
+  id,
+  className,
+  disabled,
+  checkSubmit = true,
+  modalClassName,
+  edit,
+  modal,
+  renderTitle,
+  children,
+  submitText,
+  submitClassName,
+  submitOption,
+  renderSubmit,
+  loadingWrapper,
+  onSubmit,
+  onCancel,
+}: EditModalProps<Full>) {
+  const { l } = usePage();
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const storeSel = st.sel as <Ret>(selector: (state: unknown) => Ret) => Ret;
+  const modelEdit = ((edit as Promise<any> | { then?: any } | undefined)?.then
+    ? use(edit as Usable<any>)
+    : edit) as unknown as ServerEdit<string, Full> | Full | undefined;
+  const { refName, sliceName } = slice;
+  const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
+  const names = useMemo(
+    () => ({
+      model: modelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      modelSubmit: `${modelName}Submit`,
+      submitModel: `submit${ModelName}`,
+      resetModel: `reset${ModelName}`,
+      setModelModal: `set${ModelName}Modal`,
+      modelLoading: `${modelName}Loading`,
+      modelViewAt: `${modelName}ViewAt`,
+      newModel: `new${ModelName}`,
+      crystalizeModel: `crystalize${ModelName}`,
+      modelObj: `${modelName}Obj`,
+    }),
+    [],
+  );
+  const modelModal = storeUse[names.modelModal]() as string | null;
+  const modelFormId = storeSel<string | null>(
+    (state: unknown) => (state as { [key: string]: { id: string | null } })[names.modelForm].id,
+  );
+  const modelFormLoading = storeUse[names.modelFormLoading]() as string | boolean;
+  const isModalOpen =
+    modelModal === (modal ?? "edit") &&
+    (modelFormLoading === false || modelFormLoading === id) &&
+    ((!modelFormId && !id) || id === modelFormId);
+  useEffect(() => {
+    if (!modelEdit) return;
+    const refName = (modelEdit as ServerEdit<string, Full>).refName;
+    const editType: "edit" | "new" = refName && (modelEdit as any)[names.modelObj] ? "edit" : "new";
+    const cnst = ConstantRegistry.getDatabase(modelName);
+    const modelRef = cnst.full;
+    if (editType === "edit") {
+      const crystal = new modelRef().set((modelEdit as any)[names.modelObj] as Full) as unknown as Full;
+      st.set({
+        [names.model]: crystal,
+        [names.modelLoading]: false,
+        [names.modelForm]: immerify(modelRef, crystal),
+        [names.modelFormLoading]: false,
+        [names.modelModal]: modal ?? "edit",
+        [names.modelViewAt]: (modelEdit as any)[names.modelViewAt] as Date,
+      });
+    } else {
+      
+      const crystal = new modelRef().set(modelEdit as Full) as unknown as Full;
+      void storeDo[names.newModel](crystal, { modal, setDefault: true, sliceName });
+    }
+    return () => {
+    };
+  }, [modelEdit]);
+
+  const handleCancel = useCallback(() => {
+    const modelForm = (st.get() as any)[names.modelForm] as Full;
+    const form = deepObjectify({ ...modelForm });
+    
+    void storeDo[names.setModelModal](null);
+    if (typeof onCancel === "function") onCancel(form);
+    else if (onCancel === "back") router.back();
+    else if (onCancel === "reset") void storeDo[names.resetModel]();
+    else if (typeof onCancel === "string") router.replace(onCancel);
+  }, []);
+
+  const Title: () => ReactNode = () => {
+    const modelFormLoading = storeUse[names.modelFormLoading]() as string | boolean;
+    const modelForm = storeUse[names.modelForm]() as Full;
+    return modelFormLoading
+      ? null
+      : renderTitle
+        ? typeof renderTitle === "string"
+          ? `${l(`${modelName}.modelName` as "base.success")}${renderTitle === "default" ? "" : ` - ${(modelForm as any)[renderTitle] ?? l("base.new")}`}`
+          : renderTitle(modelForm)
+        : null;
+  };
+  const Submit: () => ReactNode = useMemo(
+    () =>
+      renderSubmit === false
+        ? () => <></>
+        : typeof renderSubmit === "function"
+          ? () => renderSubmit(storeUse[names.modelForm]() as Full)
+          : () => {
+              const modelSubmit = storeUse[names.modelSubmit]() as Submit;
+              const handleSubmit = async ({ onError }: { onError?: (e: string) => void } = {}) => {
+                await storeDo[names.submitModel]({
+                  ...submitOption,
+                  sliceName,
+                  onError: (e: string) => {
+                    onError?.(e);
+                    submitOption?.onError?.(e);
+                  },
+                  onSuccess: (model: Full) => {
+                    if (typeof onSubmit === "function") onSubmit(model);
+                    void submitOption?.onSuccess?.(model);
+                    if (onSubmit === "back") router.back();
+                    else if (onSubmit === "reset") void storeDo[names.resetModel]();
+                    else if (typeof onSubmit === "string")
+                      router.replace(onSubmit.replace(new RegExp(`\\[${names.model}Id\\]`, "g"), model.id));
+                  },
+                });
+              };
+              return (
+                <Button
+                  className={clsx("btn btn-primary mt-4 w-full gap-2 rounded-2xl", submitClassName)}
+                  disabled={modelSubmit.disabled || !!disabled}
+                  onClick={async (e, { onError }) => {
+                    await handleSubmit({ onError });
+                  }}
+                  onSuccess={() => {
+                  }}
+                >
+                  {modelFormId ? <AiOutlineSave /> : <AiOutlinePlus />}
+                  {submitText ??
+                    l(modelFormId ? "base.updateModel" : "base.createModel", {
+                      model: l._(`${names.model}.modelName`),
+                    })}
+                </Button>
+              );
+            },
+    [disabled, modelFormId],
+  );
+  if (type === "modal")
+    return (
+      <Modal
+        open={isModalOpen}
+        onCancel={() => {
+          handleCancel();
+        }}
+        className={modalClassName}
+        title={<Title />}
+        action={<Submit />}
+      >
+        {isModalOpen ? (
+          <EditModel
+            type={type}
+            slice={slice}
+            className={className}
+            checkSubmit={checkSubmit}
+            edit={edit}
+            modal={modal}
+            loadingWrapper={loadingWrapper}
+          >
+            {children}
+          </EditModel>
+        ) : null}
+      </Modal>
+    );
+  else if (isModalOpen)
+    return (
+      <EditModel
+        type={type}
+        slice={slice}
+        className={className}
+        checkSubmit={checkSubmit}
+        edit={edit}
+        modal={modal}
+        loadingWrapper={loadingWrapper}
+      >
+        <Title />
+        {children}
+        {type === "form" ? <Submit /> : null}
+      </EditModel>
+    );
+}

package/ui/Model/EditWrapper.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { clsx } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import type { SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import type { ReactNode } from "react";
+
+interface EditWrapperProps {
+  className?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  modelId: string;
+  modal?: string | null;
+  disabled?: boolean;
+  resets?: string[] | null;
+}
+
+export default function EditWrapper({
+  children,
+  slice,
+  modelId,
+  className,
+  modal,
+  disabled,
+  resets,
+}: EditWrapperProps) {
+  const { refName, sliceName } = slice;
+  const modelName = refName;
+  const names = {
+    editModel: `edit${capitalize(modelName)}`,
+  };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  return (
+    <div
+      className={clsx("cursor-pointer", className)}
+      onClick={(e) => {
+        if (disabled) return;
+        e.stopPropagation();
+        void storeDo[names.editModel](modelId, { modal });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${capitalize(reset)}`]();
+        });
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/ui/Model/LoadInit.tsx

@@ -0,0 +1,11 @@
+"use client";
+import type { ClientInit } from "akanjs/fetch";
+
+import { Load } from "../Load";
+
+interface LoadInitProps<T extends string, Light extends { id: string }> {
+  init: ClientInit<T, Light>;
+}
+export default function LoadInit<T extends string, Light extends { id: string }>({ init }: LoadInitProps<T, Light>) {
+  return <Load.Units init={init} renderList={() => null} loading={null} renderEmpty={null} />;
+}

package/ui/Model/New.tsx

@@ -0,0 +1,46 @@
+import { clsx, usePage } from "akanjs/client";
+import type { SliceMeta } from "akanjs/fetch";
+import type { ReactNode } from "react";
+import { AiOutlinePlus } from "react-icons/ai";
+
+import EditModal from "./EditModal";
+import NewWrapper from "./NewWrapper";
+
+interface NewProps<Full = any> {
+  type?: "icon" | "button";
+  className?: string;
+  wrapperClassName?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  modal?: string | null;
+  partial?: Partial<Full> | (() => Partial<Full>);
+  renderTitle?: ((model: { id: string }) => string | ReactNode) | string;
+}
+
+export default function New({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  slice,
+  modal,
+  partial,
+  renderTitle,
+}: NewProps) {
+  const { l } = usePage();
+  return (
+    <div className={clsx("inline", wrapperClassName)}>
+      <NewWrapper
+        className={clsx("flex w-full items-center justify-center gap-2", className)}
+        slice={slice}
+        modal={modal}
+        partial={partial}
+      >
+        <AiOutlinePlus /> {type === "button" ? l("base.new") : null}
+      </NewWrapper>
+      <EditModal renderTitle={renderTitle} slice={slice}>
+        {children}
+      </EditModal>
+    </div>
+  );
+}

package/ui/Model/NewWrapper.tsx

@@ -0,0 +1,20 @@
+import { deepObjectify } from "akanjs/common";
+import type { SliceMeta } from "akanjs/fetch";
+import type { ReactNode } from "react";
+
+import { NewWrapper_Client } from "./NewWrapper_Client";
+
+interface NewWrapperProps<Full = any> {
+  className?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  partial?: Partial<Full> | (() => Partial<Full>);
+  setDefault?: boolean;
+  modal?: string | null;
+  resets?: string[] | null;
+}
+
+export default function NewWrapper<Full>({ partial = {}, ...props }: NewWrapperProps<Full>) {
+  const serializedPartial = deepObjectify(typeof partial === "function" ? partial() : partial, { serializable: true });
+  return <NewWrapper_Client {...props} partial={serializedPartial} />;
+}

package/ui/Model/NewWrapper_Client.tsx

@@ -0,0 +1,57 @@
+"use client";
+import type { GetStateObject } from "akanjs/base";
+import { clsx } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import { ConstantRegistry } from "akanjs/constant";
+import type { SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import type { ReactNode } from "react";
+
+interface NewWrapperProps<Full = any> {
+  className?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  partial?: Partial<Full>;
+  setDefault?: boolean;
+  modal?: string | null;
+  resets?: string[] | null;
+}
+
+export const NewWrapper_Client = <Full,>({
+  children,
+  slice,
+  partial,
+  setDefault,
+  className,
+  modal,
+  resets,
+}: NewWrapperProps<Full>) => {
+  const { refName, sliceName } = slice;
+  const modelName = refName;
+  const names = {
+    newModel: `new${capitalize(modelName)}`,
+    crystalizeModel: `crystalize${capitalize(modelName)}`,
+    modelModal: `${modelName}Modal`,
+  };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const modelModal = storeUse[names.modelModal]() as string | null;
+  const disabled = modelModal === "edit";
+  return (
+    <div
+      className={clsx({ "cursor-pointer": !disabled, "pointer-events-none": disabled }, className)}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (disabled) return;
+        const cnst = ConstantRegistry.getDatabase(modelName);
+        const crystal = new cnst.full().set(partial as unknown as GetStateObject<Full>) as unknown as Full;
+        void storeDo[names.newModel](crystal, { modal, setDefault, sliceName });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${capitalize(reset)}`]();
+        });
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/ui/Model/Remove.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { clsx, msg, router, usePage } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import type { SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import { type ReactNode, useMemo, useState } from "react";
+
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+
+interface RemoveProps {
+  className?: string;
+  name?: string;
+  modelId: string;
+  slice: SliceMeta;
+  modal?: string | null;
+  redirect?: string;
+  children: ReactNode;
+}
+export default function Remove({ className, name, modelId, slice, modal, redirect, children }: RemoveProps) {
+  const { l } = usePage();
+  const [modalOpen, setModalOpen] = useState(false);
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const { refName, sliceName } = slice;
+  const modelName = refName;
+  const names = useMemo(
+    () => ({
+      removeModel: `remove${capitalize(modelName)}`,
+    }),
+    [],
+  );
+  return (
+    <>
+      <div
+        className={clsx("cursor-pointer", className)}
+        onClick={(e) => {
+          e.stopPropagation();
+          setModalOpen(true);
+        }}
+      >
+        {children}
+      </div>
+      <Modal
+        open={modalOpen}
+        onCancel={() => {
+          setModalOpen(false);
+        }}
+        title={
+          <div className="font-bold text-error text-lg">
+            {l("base.removeModel", { model: l(`${modelName}.modelName` as "base.new") })}
+          </div>
+        }
+        action={
+          <Button
+            className="btn btn-warning w-full"
+            onClick={async (e, { onError }) => {
+              await storeDo[names.removeModel](modelId, { onError, modal });
+              msg.success("base.removeSuccess", { data: { model: l(`${modelName}.modelName` as "base.new") } });
+              setModalOpen(false);
+              if (!redirect) return;
+              if (redirect === "back") router.back();
+              else router.push(redirect);
+            }}
+          >
+            {l("base.yesRemove", { model: l(`${modelName}.modelName` as "base.new") })}
+          </Button>
+        }
+      >
+        <div className="flex w-full items-center justify-center">
+          {l("base.sureToRemove", { model: l(`${modelName}.modelName` as "base.new"), name: name ?? "" })}
+        </div>
+      </Modal>
+    </>
+  );
+}

package/ui/Model/RemoveWrapper.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { clsx, usePage } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import type { SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import type { ReactNode } from "react";
+
+import { Popconfirm } from "../Popconfirm";
+
+interface RemoveWrapperProps {
+  className?: string;
+  children: ReactNode;
+  slice: SliceMeta;
+  modelId: string;
+  name: string;
+  modal?: string | null;
+}
+
+export default function RemoveWrapper({ children, slice, name, modelId, className, modal }: RemoveWrapperProps) {
+  const { l } = usePage();
+  const { refName, sliceName } = slice;
+  const modelName = refName;
+  const names = {
+    removeModel: `remove${capitalize(modelName)}`,
+  };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  return (
+    <Popconfirm
+      title={l("base.removeModel", { model: l(`${modelName}.modelName` as "base.new") })}
+      description={<div>{l("base.sureToRemove", { model: l(`${modelName}.modelName` as "base.new"), name })}</div>}
+      onConfirm={() => {
+        void storeDo[names.removeModel](modelId, { modal });
+      }}
+    >
+      <div className={clsx("cursor-pointer", className)}>{children}</div>
+    </Popconfirm>
+  );
+}