@taskon/widget-react 0.0.1 → 0.0.2

package/dist/chunks/PageBuilder-DHM3Il6f.js

@@ -0,0 +1,150 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { DEFAULT_PAGE_BUILDER_CONFIG, createPageBuilderApi, parsePageBuilderConfig, SectionLayoutType, WidgetTypeEnum, SECTION_LAYOUT_RATIOS } from "@taskon/core";
+import { Q as QuestWidget } from "./Quest-Dqx4OCat.js";
+import { C as CommunityTaskList } from "./CommunityTaskList-2nFy6l6m.js";
+import { L as LeaderboardWidget } from "./LeaderboardWidget-DyoiiNS6.js";
+import { U as UserCenterWidget } from "./UserCenterWidget-XL6LZRZM.js";
+import { h as useTaskOnContext } from "./ThemeProvider-CulHkqqY.js";
+import '../PageBuilder.css';function usePageBuilderConfig(pageId, localConfig) {
+  const { client } = useTaskOnContext();
+  const [config, setConfig] = useState(
+    localConfig ?? null
+  );
+  const [pageInfo, setPageInfo] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (localConfig) {
+      setConfig(localConfig ?? { ...DEFAULT_PAGE_BUILDER_CONFIG });
+      setPageInfo(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    if (!pageId || !client) {
+      setConfig(null);
+      setPageInfo(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const api = createPageBuilderApi(client);
+    api.getPageBuilder(pageId).then((info) => {
+      if (!cancelled) {
+        setPageInfo(info);
+        setConfig(parsePageBuilderConfig(info.config_json));
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.warn("[TaskOn] Failed to load page builder config:", err);
+        setError(
+          err instanceof Error ? err.message : "Failed to load page builder config"
+        );
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pageId, client, localConfig]);
+  return { config, pageInfo, isLoading, error };
+}
+const ROOT_CLASS = "taskon-page-builder";
+function normalizeConfig(config) {
+  if (!config || !Array.isArray(config.sections)) return null;
+  return {
+    version: typeof config.version === "number" ? config.version : 1,
+    sections: Array.isArray(config.sections) ? config.sections : []
+  };
+}
+function getSlotFlex(section, index) {
+  const ratios = SECTION_LAYOUT_RATIOS[section.layout] ?? [1];
+  return ratios[index] ?? 1;
+}
+function renderWidget(slot) {
+  if (!slot.widgetId || !slot.widgetType) return null;
+  switch (slot.widgetType) {
+    case WidgetTypeEnum.Quest:
+      return /* @__PURE__ */ jsx(QuestWidget, { widgetId: slot.widgetId });
+    case WidgetTypeEnum.Tasks:
+      return /* @__PURE__ */ jsx(CommunityTaskList, { widgetId: slot.widgetId });
+    case WidgetTypeEnum.Leaderboard:
+      return /* @__PURE__ */ jsx(LeaderboardWidget, { widgetId: slot.widgetId });
+    case WidgetTypeEnum.UserCenter:
+      return /* @__PURE__ */ jsx(UserCenterWidget, { widgetId: slot.widgetId });
+    default:
+      console.warn("[TaskOn] Unknown widgetType in PageBuilder:", slot.widgetType);
+      return null;
+  }
+}
+function PageBuilder(props) {
+  const { pageId, config: localConfig, className, style } = props;
+  const { config, isLoading, error } = usePageBuilderConfig(
+    pageId,
+    localConfig
+  );
+  const resolvedConfig = useMemo(
+    () => normalizeConfig(config ?? localConfig),
+    [config, localConfig]
+  );
+  const errorMessage = error ?? (!resolvedConfig && !pageId && !localConfig ? "Page ID or config is required." : null);
+  const hasTrackedRef = useRef(false);
+  useEffect(() => {
+    if (hasTrackedRef.current) return;
+    if (!resolvedConfig) return;
+    hasTrackedRef.current = true;
+  }, [resolvedConfig]);
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS} ${className ?? ""}`, style, children: /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS}-error`, children: errorMessage }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS} ${className ?? ""}`, style, children: /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS}-loading`, children: "Loading page..." }) });
+  }
+  if (!resolvedConfig) {
+    return /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS} ${className ?? ""}`, style });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS} ${className ?? ""}`, style, children: resolvedConfig.sections.map((section) => {
+    const isTwoColumn = section.layout !== SectionLayoutType.SingleColumn;
+    const sectionClass = [
+      `${ROOT_CLASS}-section`,
+      section.mobileStackOrder === "right-first" && isTwoColumn ? `${ROOT_CLASS}-section--stack-right-first` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: sectionClass,
+        "data-layout": section.layout,
+        children: section.slots.map((slot, index) => {
+          const widgetNode = renderWidget(slot);
+          const isEmpty = !widgetNode;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${ROOT_CLASS}-slot ${isEmpty ? `${ROOT_CLASS}-slot--empty` : ""}`,
+              style: { flex: getSlotFlex(section, index) },
+              children: widgetNode ?? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${ROOT_CLASS}-slot-placeholder`,
+                  "aria-hidden": "true"
+                }
+              )
+            },
+            slot.id
+          );
+        })
+      },
+      section.id
+    );
+  }) });
+}
+export {
+  PageBuilder as P
+};