akanjs 0.0.1 → 2.0.0-beta.0

package/ui/Constant/Mermaid.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { clsx } from "akanjs/client";
+import { useEffect, useId, useRef, useState } from "react";
+
+interface MermaidProps {
+  chart: string;
+  title?: string;
+  className?: string;
+  highlightNodes?: string[];
+  onSelectNode?: (nodeId: string) => void;
+}
+
+const lightThemeFallback = {
+  base100: "#ffffff",
+  base200: "#f5f5f5",
+  base300: "#d4d4d4",
+  baseContent: "#1f2937",
+  primary: "#3b82f6",
+};
+
+const darkThemeFallback = {
+  base100: "#1f2937",
+  base200: "#111827",
+  base300: "#374151",
+  baseContent: "#f9fafb",
+  primary: "#60a5fa",
+};
+
+export const Mermaid = ({ chart, title, className, highlightNodes = [], onSelectNode }: MermaidProps) => {
+  const reactId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const render = async () => {
+      try {
+        const { default: mermaid } = await import("mermaid");
+        const colors = getThemeColors();
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: "base",
+          themeVariables: {
+            background: colors.base100,
+            mainBkg: colors.base100,
+            primaryColor: colors.base100,
+            primaryTextColor: colors.baseContent,
+            primaryBorderColor: colors.baseContent,
+            lineColor: colors.baseContent,
+            secondaryColor: colors.base200,
+            tertiaryColor: colors.base300,
+          },
+        });
+        const id = `mermaid-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+        const result = await mermaid.render(id, chart.trim());
+        if (cancelled) return;
+        const parsed = new DOMParser().parseFromString(result.svg, "text/html");
+        const svg = parsed.querySelector("svg");
+        if (!svg) throw new Error("Mermaid did not return an SVG.");
+        applyHighlights(svg, highlightNodes, colors.primary);
+        applyNodeSelection(svg, onSelectNode);
+        const container = containerRef.current;
+        if (container) container.replaceChildren(document.importNode(svg, true));
+        setError(null);
+      } catch (err) {
+        if (cancelled) return;
+        containerRef.current?.replaceChildren();
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    };
+    void render();
+    const observer = new MutationObserver(() => void render());
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [chart, highlightNodes, onSelectNode, reactId]);
+
+  return (
+    <div className={clsx("my-4 overflow-hidden rounded-xl border border-base-300 bg-base-200/40", className)}>
+      {title ? (
+        <div className="border-base-300 border-b px-4 py-2 font-bold text-base-content/70 text-sm">{title}</div>
+      ) : null}
+      <div className="overflow-x-auto p-4">
+        {error ? (
+          <pre className="whitespace-pre-wrap text-error text-sm">{error}</pre>
+        ) : (
+          <div ref={containerRef} className="min-w-fit text-base-content" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+function getThemeColors() {
+  const root = document.documentElement;
+  const style = getComputedStyle(root);
+  const fallback = isDarkTheme(root) ? darkThemeFallback : lightThemeFallback;
+
+  return {
+    base100: getMermaidColor(style, "--color-base-100", fallback.base100),
+    base200: getMermaidColor(style, "--color-base-200", fallback.base200),
+    base300: getMermaidColor(style, "--color-base-300", fallback.base300),
+    baseContent: getMermaidColor(style, "--color-base-content", fallback.baseContent),
+    primary: getMermaidColor(style, "--color-primary", fallback.primary),
+  };
+}
+
+function getMermaidColor(style: CSSStyleDeclaration, token: string, fallback: string): string {
+  const color = style.getPropertyValue(token).trim();
+  if (!color) return fallback;
+  return isMermaidColor(color) ? color : fallback;
+}
+
+function isMermaidColor(color: string): boolean {
+  return /^(#[\da-f]{3,8}|rgba?\(|hsla?\(|[a-z]+$)/i.test(color);
+}
+
+function isDarkTheme(root: HTMLElement): boolean {
+  return root.dataset.theme === "dark" || root.classList.contains("dark");
+}
+
+function applyHighlights(svg: Element, nodeIds: string[], color: string): void {
+  if (nodeIds.length === 0) return;
+  const ids = new Set(nodeIds);
+  for (const node of svg.querySelectorAll<SVGGElement>(".node")) {
+    const id = getMermaidNodeId(node);
+    if (!ids.has(id)) continue;
+    node.querySelectorAll<SVGElement>("rect, circle, ellipse, polygon, path").forEach((shape) => {
+      shape.setAttribute("stroke", color);
+      shape.setAttribute("stroke-width", "3px");
+    });
+  }
+}
+
+function applyNodeSelection(svg: Element, onSelectNode?: (nodeId: string) => void): void {
+  if (!onSelectNode) return;
+  for (const node of svg.querySelectorAll<SVGGElement>(".node")) {
+    node.style.cursor = "pointer";
+    node.addEventListener("click", () => onSelectNode(getMermaidNodeId(node)));
+  }
+}
+
+function getMermaidNodeId(node: SVGGElement): string {
+  return node.id.replace(/^flowchart-/, "").replace(/-\d+$/, "");
+}

package/ui/Constant/index.ts

@@ -0,0 +1,6 @@
+import Doc from "./Doc";
+import { Mermaid } from "./Mermaid";
+
+export * from "./schemaDoc";
+
+export const Constant = { Doc, Mermaid };

package/ui/Constant/schemaDoc.ts

@@ -0,0 +1,324 @@
+import {
+  type Cls,
+  type EnumInstance,
+  FIELD_META,
+  getNonArrayModel,
+  PrimitiveRegistry,
+  type PrimitiveScalar,
+} from "akanjs/base";
+import { capitalize } from "akanjs/common";
+import { type ConstantCls, type ConstantField, type ConstantModel, ConstantRegistry } from "akanjs/constant";
+
+export const databaseModelVariants = ["input", "object", "full", "light", "insight"] as const;
+export type DatabaseModelVariant = (typeof databaseModelVariants)[number];
+
+export interface ConstantSchemaOptions {
+  models?: string[];
+  scalars?: string[];
+  enums?: string[];
+}
+
+export interface ConstantSchemaDoc {
+  databases: DatabaseSchema[];
+  scalars: ScalarSchema[];
+  enums: EnumSchema[];
+  relations: RelationSchema[];
+}
+
+export interface DatabaseSchema {
+  kind: "database";
+  refName: string;
+  modelName: string;
+  variants: Record<DatabaseModelVariant, ModelVariantSchema>;
+}
+
+export interface ScalarSchema {
+  kind: "scalar";
+  refName: string;
+  modelName: string;
+  modelRef: ConstantCls;
+  fields: FieldSchema[];
+}
+
+export interface ModelVariantSchema {
+  refName: string;
+  variant: DatabaseModelVariant | "scalar";
+  modelName: string;
+  modelRef: ConstantCls;
+  fields: FieldSchema[];
+}
+
+export interface EnumSchema {
+  key: string;
+  refName: string;
+  typeName: string;
+  values: (string | number)[];
+  enumRef: EnumInstance;
+  usedBy: EnumUsage[];
+}
+
+export interface EnumUsage {
+  refName: string;
+  variant: DatabaseModelVariant | "scalar";
+  fieldKey: string;
+}
+
+export interface RelationSchema {
+  sourceRefName: string;
+  sourceVariant: DatabaseModelVariant | "scalar";
+  targetRefName: string;
+  targetKind: "database" | "scalar";
+  fieldKey: string;
+  relationType: string;
+  external: boolean;
+}
+
+export interface FieldSchema {
+  key: string;
+  typeLabel: string;
+  typeRefName?: string;
+  typeKind: "primitive" | "database" | "scalar" | "map" | "unknown";
+  required: boolean;
+  nullable: boolean;
+  arrDepth: number;
+  fieldType: "property" | "hidden" | "resolve";
+  select: boolean;
+  immutable: boolean;
+  ref?: string;
+  refPath?: string;
+  refType?: "child" | "parent" | "relation";
+  relationLabel?: string;
+  enumRefName?: string;
+  enumValues?: (string | number)[];
+  defaultLabel?: string;
+  exampleLabel?: string;
+  constraints: string[];
+  text?: "search" | "filter";
+  meta: Record<string, unknown>;
+  raw: ConstantField;
+}
+
+export const getConstantSchemaDoc = (options: ConstantSchemaOptions = {}): ConstantSchemaDoc => {
+  const databases = getSelectedEntries(ConstantRegistry.database, options.models).map(([refName, model]) =>
+    buildDatabaseSchema(refName, model),
+  );
+  const scalars = getSelectedEntries(ConstantRegistry.scalar, options.scalars).map(([refName, scalar]) => {
+    const modelRef = scalar.model;
+    return {
+      kind: "scalar" as const,
+      refName,
+      modelName: getModelName(modelRef, refName),
+      modelRef,
+      fields: getFields(modelRef, "scalar"),
+    };
+  });
+  const selectedEnums = getSelectedEntries(ConstantRegistry.enum, options.enums);
+  const enumUsages = collectEnumUsages(databases, scalars);
+  const enums = selectedEnums.map(([key, enumRef]) => ({
+    key,
+    refName: enumRef.refName,
+    typeName: PrimitiveRegistry.getName(enumRef.type as typeof PrimitiveScalar),
+    values: [...enumRef.values] as (string | number)[],
+    enumRef,
+    usedBy: enumUsages.get(enumRef) ?? [],
+  }));
+  const relations = collectRelations(databases, scalars);
+  return { databases, scalars, enums, relations };
+};
+
+export const getDefaultVariant = (database: DatabaseSchema): ModelVariantSchema => database.variants.full;
+
+export const getVariantTitle = (variant: DatabaseModelVariant | "scalar") => {
+  if (variant === "scalar") return "Scalar";
+  return capitalize(variant);
+};
+
+const buildDatabaseSchema = (refName: string, model: ConstantModel): DatabaseSchema => {
+  const variants = Object.fromEntries(
+    databaseModelVariants.map((variant) => {
+      const modelRef = model[variant];
+      return [
+        variant,
+        {
+          refName,
+          variant,
+          modelName: ConstantRegistry.getModelName(modelRef),
+          modelRef,
+          fields: getFields(modelRef, variant),
+        },
+      ];
+    }),
+  ) as Record<DatabaseModelVariant, ModelVariantSchema>;
+  return { kind: "database", refName, modelName: ConstantRegistry.getModelName(model.full), variants };
+};
+
+const getFields = (modelRef: ConstantCls, variant: DatabaseModelVariant | "scalar"): FieldSchema[] =>
+  Object.entries(modelRef[FIELD_META]).map(([key, field]) => buildFieldSchema(key, field, variant));
+
+const buildFieldSchema = (
+  key: string,
+  field: ConstantField,
+  _variant: DatabaseModelVariant | "scalar",
+): FieldSchema => {
+  const props = field.getProps();
+  const typeInfo = getTypeInfo(props.modelRef, props.arrDepth, props.isMap, props.of as Cls | Cls[] | undefined);
+  const enumValues = props.enum ? ([...props.enum.values] as (string | number)[]) : undefined;
+  const relationLabel = props.refType ?? (typeInfo.typeKind === "database" ? "reference" : undefined);
+  return {
+    key,
+    typeLabel: typeInfo.typeLabel,
+    typeRefName: typeInfo.typeRefName,
+    typeKind: typeInfo.typeKind,
+    required: !props.nullable,
+    nullable: props.nullable,
+    arrDepth: props.arrDepth,
+    fieldType: props.fieldType,
+    select: props.select,
+    immutable: props.immutable,
+    ref: props.ref,
+    refPath: props.refPath,
+    refType: props.refType,
+    relationLabel,
+    enumRefName: props.enum?.refName,
+    enumValues,
+    defaultLabel: stringifyMetaValue(props.default),
+    exampleLabel: stringifyMetaValue(props.example),
+    constraints: getConstraints(props),
+    text: props.text,
+    meta: props.meta as Record<string, unknown>,
+    raw: field,
+  };
+};
+
+const getTypeInfo = (
+  modelRef: Cls,
+  arrDepth: number,
+  isMap: boolean,
+  of?: Cls | Cls[],
+): Pick<FieldSchema, "typeKind" | "typeLabel" | "typeRefName"> => {
+  if (isMap) {
+    const mapValue = of ? getNestedTypeInfo(of) : { label: "Unknown", refName: undefined };
+    return { typeKind: "map", typeLabel: `Map<String, ${mapValue.label}>`, typeRefName: mapValue.refName };
+  }
+  const refName = ConstantRegistry.getRefName(modelRef, { allowEmpty: true });
+  if (PrimitiveRegistry.has(modelRef)) {
+    return {
+      typeKind: "primitive",
+      typeLabel: formatArrayType(PrimitiveRegistry.getName(modelRef as typeof PrimitiveScalar), arrDepth),
+    };
+  }
+  if (refName && ConstantRegistry.database.has(refName)) {
+    return {
+      typeKind: "database",
+      typeLabel: formatArrayType(ConstantRegistry.getModelName(modelRef), arrDepth),
+      typeRefName: refName,
+    };
+  }
+  if (refName && ConstantRegistry.scalar.has(refName)) {
+    return {
+      typeKind: "scalar",
+      typeLabel: formatArrayType(getModelName(modelRef, refName), arrDepth),
+      typeRefName: refName,
+    };
+  }
+  return { typeKind: "unknown", typeLabel: formatArrayType("Unknown", arrDepth), typeRefName: refName };
+};
+
+const getModelName = (modelRef: Cls, refName: string) => {
+  if ((modelRef as ConstantCls).modelType) return ConstantRegistry.getModelName(modelRef);
+  return capitalize(refName);
+};
+
+const getNestedTypeInfo = (model: Cls | Cls[]) => {
+  const [modelRef, arrDepth] = getNonArrayModel(model as Cls);
+  const info = getTypeInfo(modelRef as Cls, arrDepth, modelRef === Map);
+  return { label: info.typeLabel, refName: info.typeRefName };
+};
+
+const formatArrayType = (name: string, arrDepth: number) => `${"[".repeat(arrDepth)}${name}${"]".repeat(arrDepth)}`;
+
+const stringifyMetaValue = (value: unknown): string | undefined => {
+  if (value === undefined) return undefined;
+  if (typeof value === "function") return "[function]";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
+const getConstraints = (props: ReturnType<ConstantField["getProps"]>) =>
+  [
+    props.min !== undefined ? `min ${props.min}` : null,
+    props.max !== undefined ? `max ${props.max}` : null,
+    props.minlength !== undefined ? `minlength ${props.minlength}` : null,
+    props.maxlength !== undefined ? `maxlength ${props.maxlength}` : null,
+    props.text ? `text:${props.text}` : null,
+    props.validate ? "custom validate" : null,
+    props.accumulate ? "accumulate" : null,
+  ].filter((constraint): constraint is string => !!constraint);
+
+const getSelectedEntries = <Value>(map: Map<string, Value>, selected?: string[]): [string, Value][] => {
+  if (!selected?.length) return [...map.entries()].sort(([a], [b]) => a.localeCompare(b));
+  return selected.flatMap((key) => {
+    const value = map.get(key);
+    return value ? ([[key, value]] as [string, Value][]) : [];
+  });
+};
+
+const collectEnumUsages = (databases: DatabaseSchema[], scalars: ScalarSchema[]) => {
+  const usages = new Map<EnumInstance, EnumUsage[]>();
+  const addUsage = (field: FieldSchema, usage: EnumUsage) => {
+    const enumRef = field.raw.enum;
+    if (!enumRef) return;
+    usages.set(enumRef, [...(usages.get(enumRef) ?? []), usage]);
+  };
+  databases.forEach((database) => {
+    Object.values(database.variants).forEach((variant) => {
+      variant.fields.forEach((field) => {
+        addUsage(field, { refName: database.refName, variant: variant.variant, fieldKey: field.key });
+      });
+    });
+  });
+  scalars.forEach((scalar) => {
+    scalar.fields.forEach((field) => {
+      addUsage(field, { refName: scalar.refName, variant: "scalar", fieldKey: field.key });
+    });
+  });
+  return usages;
+};
+
+const collectRelations = (databases: DatabaseSchema[], scalars: ScalarSchema[]): RelationSchema[] => {
+  const selectedDatabases = new Set(databases.map((database) => database.refName));
+  const selectedScalars = new Set(scalars.map((scalar) => scalar.refName));
+  const relations: RelationSchema[] = [];
+  const addRelations = (refName: string, variant: DatabaseModelVariant | "scalar", fields: FieldSchema[]) => {
+    fields.forEach((field) => {
+      if (
+        !field.typeRefName ||
+        (field.typeKind !== "database" && field.typeKind !== "scalar" && field.typeKind !== "map")
+      )
+        return;
+      const targetKind = ConstantRegistry.database.has(field.typeRefName) ? "database" : "scalar";
+      const selected =
+        targetKind === "database" ? selectedDatabases.has(field.typeRefName) : selectedScalars.has(field.typeRefName);
+      relations.push({
+        sourceRefName: refName,
+        sourceVariant: variant,
+        targetRefName: field.typeRefName,
+        targetKind,
+        fieldKey: field.key,
+        relationType: field.relationLabel ?? field.typeKind,
+        external: !selected,
+      });
+    });
+  };
+  databases.forEach((database) => {
+    addRelations(database.refName, "full", database.variants.full.fields);
+  });
+  scalars.forEach((scalar) => {
+    addRelations(scalar.refName, "scalar", scalar.fields);
+  });
+  return relations;
+};

package/ui/Copy.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { usePage } from "akanjs/client";
+import { st } from "akanjs/store";
+import type { ReactNode } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+
+export interface CopyProps {
+  /** Text copied to the clipboard. Defaults to an empty string. */
+  text?: string;
+  /** Success message shown through the global store message helper. */
+  copyMessage?: string;
+  /** Copy trigger element. */
+  children: ReactNode;
+}
+export const Copy = ({ text, copyMessage, children }: CopyProps) => {
+  const { l } = usePage();
+  return (
+    <CopyToClipboard
+      text={text ?? ""}
+      onCopy={() => {
+        st.do.showMessage({ content: copyMessage ?? l.trans({ en: "Copied", ko: "복사되었습니다" }), type: "success" });
+      }}
+    >
+      {children}
+    </CopyToClipboard>
+  );
+};

package/ui/CsrImage.tsx

@@ -0,0 +1,38 @@
+"use client";
+import type { ProtoFile } from "akanjs/constant";
+import type { ImgHTMLAttributes } from "react";
+
+type CsrImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "src"> & {
+  src?: string;
+  file?: ProtoFile | { url: string; imageSize: [number, number]; abstractData?: string | null } | null;
+  abstractData?: string;
+  priority?: boolean;
+  preload?: boolean;
+  quality?: number;
+  unoptimized?: boolean;
+  fill?: boolean;
+};
+
+export const CsrImage = ({ src, file, className, abstractData, ...props }: CsrImageProps) => {
+  const url = src ?? file?.url ?? "/empty.png";
+  const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
+  const defaultAbstractData =
+    "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg==";
+  
+  const blurDataURL = abstractData ?? file?.abstractData ?? defaultAbstractData;
+
+  const { priority, preload, quality, unoptimized, fill, ...csrProps } = props;
+  return (
+    <img
+      src={url}
+      data-src={blurDataURL}
+      width={width}
+      height={height}
+      
+      className={className}
+      alt="image"
+      
+      {...csrProps}
+    />
+  );
+};

package/ui/Data/CardList.tsx

@@ -0,0 +1,141 @@
+"use client";
+import type { DataList } from "akanjs/base";
+import { clsx, type DataAction, type DataColumn } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+import type { FilterInstance } from "akanjs/document";
+import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import { type ReactNode, useEffect } from "react";
+import { Loading } from "../Loading";
+import { Model } from "../Model";
+import DataItem from "./Item";
+import DataPagination from "./Pagination";
+
+type DataItemProps<T extends string, M extends { id: string }, L extends { id: string }> = {
+  [key in T]: L;
+} & { slice: SliceMeta };
+
+interface CardListProps<
+  T extends string,
+  Input,
+  Full extends { id: string },
+  Light extends { id: string },
+  Filter extends FilterInstance,
+> {
+  className?: string;
+  cardListClassName?: string;
+  init?: FetchInitForm<Input, Filter>;
+  slice: SliceMeta;
+  columns: DataColumn<any>[];
+  actions?: DataAction[] | ((item: Light, idx: number) => DataAction[]);
+  renderItem: (args: DataItemProps<T, Full, Light>) => ReactNode;
+  renderLoading?: () => ReactNode;
+  renderTemplate?: (props: any) => ReactNode | null;
+  renderView?: (model: Full) => ReactNode | null;
+  renderTitle?: (model: Full) => string | ReactNode;
+}
+export default function CardList<
+  T extends string,
+  Input,
+  Full extends { id: string },
+  Light extends { id: string },
+  Filter extends FilterInstance,
+>({
+  className,
+  cardListClassName = "",
+  init,
+  slice,
+  actions,
+  columns,
+  renderItem,
+  renderLoading,
+  renderTemplate,
+  renderView,
+  renderTitle,
+}: CardListProps<T, Input, Full, Light, Filter>) {
+  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 } = slice;
+  const [modelName, modelClassName] = [refName, capitalize(refName)];
+  const names = {
+    model: modelName,
+    modelId: `${modelName}Id`,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    limitOfModel: `limitOf${modelClassName}`,
+    initModel: `init${modelClassName}`,
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    initModel: sliceName.replace(names.model, names.initModel),
+  };
+  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
+  const RenderItem: any = renderItem;
+  useEffect(() => {
+    if (init) void storeDo[namesOfSlice.initModel](init);
+  }, []);
+  const RenderTemplate = ({ id }: { id: string }) => {
+    const Edit = renderTemplate;
+    return Edit ? <Edit {...{ [names.modelId]: id }} /> : null;
+  };
+  return (
+    <div className={className}>
+      {modelListLoading ? (
+        <div className={clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName)}>
+          {new Array(limitOfModel || 20)
+            .fill(0)
+            .map((_, idx) => `skeleton-${idx}`)
+            .map((key) => (renderLoading ? renderLoading() : <Loading.Skeleton key={key} active />))}
+        </div>
+      ) : (
+        <div className={clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName)}>
+          {modelList.map((model, idx) => {
+            return (
+              <DataItem
+                key={model.id}
+                model={model}
+                slice={slice}
+                actions={typeof actions === "function" ? actions(model, idx) : actions}
+                columns={columns}
+              >
+                <RenderItem
+                  {...({
+                    [sliceName]: model,
+                    slice,
+                    actions: typeof actions === "function" ? actions(model, idx) : actions,
+                    columns,
+                    idx,
+                  } as DataItemProps<T, Full, Light>)}
+                />
+              </DataItem>
+            );
+          })}
+        </div>
+      )}
+      <DataPagination slice={slice} />
+      {!modelListLoading
+        ? modelList.map((model) => (
+            <div key={model.id}>
+              <Model.EditModal key={model.id} id={model.id} slice={slice} renderTitle={renderTitle}>
+                <RenderTemplate id={model.id} />
+              </Model.EditModal>
+              {renderView ? (
+                <Model.ViewModal
+                  key={`${model.id}-view`}
+                  id={model.id}
+                  slice={slice}
+                  renderTitle={renderTitle}
+                  renderView={renderView}
+                />
+              ) : null}
+            </div>
+          ))
+        : null}
+    </div>
+  );
+}