@levo-so/blocks 0.1.81 → 0.1.83

package/src/blocks/community/community-1.schema.ts

@@ -72,7 +72,6 @@ const DEFAULT_CONTENT = {
   },
   edit_profile_block_title: "Wanderlooms",
   edit_profile_block_description: "<p>Joined on: 01/01/2026</p>",
-  post_detail_page_url: "/community",
   forum_key: "forum",
 };
 
@@ -83,6 +82,7 @@ export const Community1: IBlock = {
   title: "Community 1",
   key: "community-1",
   version: "v1",
+  source: [{ required: true, module: "community", type: "block", field_key: "community" }],
   content_schema: [
     {
       key: "layout",
@@ -157,11 +157,6 @@ export const Community1: IBlock = {
       label: "Posts",
       field_interface: "BoxWidget",
     },
-    {
-      key: "post_detail_page_url",
-      label: "Post Detail Page URL",
-      field_interface: "HeadingWidget",
-    },
     {
       key: "loading_container",
       label: "Loading Container",

package/src/blocks/community/community-1.tsx

@@ -26,10 +26,12 @@ import {
   Skeleton,
   Typography,
   useAuth,
+  useBlockContext,
 } from "@levo-so/studio";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { ICommunity1Content } from "./community-1.schema";
+import { SAMPLE_GET_MEMBER_RESPONSE } from "./MEMBER_RESPONSE";
 
 const PostSkeleton: React.FC = () => {
   return (
@@ -101,7 +103,15 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
   // Join request state
   const [joinRequest, setJoinRequest] = useState<IForumJoinRequest | null>(null);
 
-  const forumKey = content?.forum_key as unknown as string;
+  const { parsedBlockData, isBuilder } = useBlockContext();
+  const forumKey = useMemo(() => {
+    return (
+      parsedBlockData?.source?.find((s) => s.module === "community")?.identifier ||
+      // Fallback
+      (content?.forum_key as unknown as string) ||
+      ""
+    );
+  }, [content?.forum_key, parsedBlockData?.source]);
 
   useEffect(() => {
     return () => {
@@ -119,7 +129,17 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
         .json<IResponseSingle<IForum>>();
 
       if (response?.content?.data) {
-        setForumData(response.content.data);
+        if (isBuilder) {
+          setForumData({
+            ...response.content.data,
+            settings: {
+              ...response.content.data.settings,
+              invite_only: false,
+            },
+          });
+        } else {
+          setForumData(response.content.data);
+        }
       }
 
       return response;
@@ -127,7 +147,7 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
       levoClient?.logger?.error("Error fetching single forum data:", error);
       return null;
     }
-  }, [forumKey]);
+  }, [forumKey, isBuilder]);
 
   const checkMembership = useCallback(async () => {
     if (!forumData?.settings?.invite_only || !isLoggedIn) {
@@ -137,6 +157,15 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
       return;
     }
 
+    // In builder mode, bypass API call and use sample data
+    if (isBuilder) {
+      const data = SAMPLE_GET_MEMBER_RESPONSE.content.data;
+      setIsMember(!!data?.member);
+      setJoinRequest(data?.join_request || null);
+      hasFetchedMembershipRef.current = true;
+      return;
+    }
+
     setIsLoadingMembership(true);
 
     try {
@@ -157,7 +186,7 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
       setIsLoadingMembership(false);
       hasFetchedMembershipRef.current = true;
     }
-  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, levoClient]);
+  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, isBuilder, levoClient]);
 
   /**
    * Submit a join request for the current user
@@ -325,6 +354,40 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
     }
   }, [forumData, checkMembership]);
 
+  const detailPageStudioConfig = useMemo(() => {
+    return forumData?.studio_config?.find((v) => v?.block_instance_id === null);
+  }, [forumData]);
+
+  const listingPageStudioConfig = useMemo(() => {
+    return forumData?.studio_config?.find((v) => v?.block_instance_id !== null);
+  }, [forumData]);
+
+  const postDetailPageURLPattern = useMemo(() => {
+    if (
+      (isBuilder && detailPageStudioConfig?.preview_url) ||
+      (!isBuilder && detailPageStudioConfig?.live_url)
+    ) {
+      return isBuilder && detailPageStudioConfig.preview_url
+        ? detailPageStudioConfig.preview_url
+        : !isBuilder && detailPageStudioConfig.live_url
+          ? detailPageStudioConfig.live_url
+          : "";
+    }
+  }, [isBuilder, detailPageStudioConfig]);
+
+  const postListingPageURL = useMemo(() => {
+    if (
+      (isBuilder && listingPageStudioConfig?.preview_url) ||
+      (!isBuilder && listingPageStudioConfig?.live_url)
+    ) {
+      return isBuilder && listingPageStudioConfig.preview_url
+        ? listingPageStudioConfig.preview_url
+        : !isBuilder && listingPageStudioConfig.live_url
+          ? listingPageStudioConfig.live_url
+          : "";
+    }
+  }, [isBuilder, listingPageStudioConfig]);
+
   const isInviteOnly = forumData?.settings?.invite_only ?? false;
   const allowJoinRequests = forumData?.settings?.allow_join_requests ?? false;
 
@@ -474,7 +537,8 @@ const Community1: React.FC<ILevoBlockBaseProps<ICommunity1Content>> = ({ content
                       <ForumPost
                         key={`poll_${forumKey}_${item?._id}_${index}`}
                         post={item}
-                        postDetailPageBaseURL={content?.post_detail_page_url || ""}
+                        postDetailPageURLPattern={postDetailPageURLPattern}
+                        postListingPageURL={postListingPageURL}
                         forumKey={forumKey}
                       />
                     ))}

package/src/blocks/community/community-post-1.schema.ts

@@ -80,6 +80,7 @@ export const CommunityPost1: IBlock = {
   title: "Community Post 1",
   key: "community-post-1",
   version: "v1",
+  source: [{ required: true, module: "community", type: "page" }],
   content_schema: [
     {
       key: "layout",
@@ -129,11 +130,6 @@ export const CommunityPost1: IBlock = {
       label: "Post",
       field_interface: "HeadingWidget",
     },
-    {
-      key: "post_detail_page_url",
-      label: "Post Detail Page URL",
-      field_interface: "HeadingWidget",
-    },
     {
       key: "right_container",
       label: "Right Container",

package/src/blocks/community/community-post-1.tsx

@@ -25,10 +25,13 @@ import {
   Skeleton,
   Typography,
   useAuth,
+  useBlockContext,
+  usePageContext,
 } from "@levo-so/studio";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { ICommunityPost1Content } from "./community-post-1.schema";
+import { SAMPLE_GET_MEMBER_RESPONSE } from "./MEMBER_RESPONSE";
 
 /** Map API error codes to user-friendly messages */
 const JOIN_REQUEST_ERROR_MESSAGES: { [key: number]: string } = {
@@ -88,9 +91,16 @@ const PostDetailSkeleton: React.FC = () => (
 const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({ content }) => {
   const { fetch, logger } = useLevo();
   const { isLoggedIn } = useAuth();
+  const { isBuilder } = useBlockContext();
+  const pagePost = usePageContext("community");
+
+  const postSource = pagePost && Object.keys(pagePost).length > 0 ? pagePost : content?.post;
+  const postSlug = (postSource as unknown as IForumPost)?.slug;
+  const forumKey = pagePost?.forum;
+
   const [fetchedPostData, setFetchedPostData] = useState<Partial<IForumPost> | null>(null);
   const [commentCount, setCommentCount] = useState(
-    (content?.post as unknown as IForumPost)?.comments_count ?? 0,
+    (postSource as unknown as IForumPost)?.comments_count ?? 0,
   );
   const hasFetchedRef = useRef(false);
   const failedAttemptsRef = useRef(0);
@@ -103,9 +113,6 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
   const [isLoadingMembership, setIsLoadingMembership] = useState(false);
   const [joinRequest, setJoinRequest] = useState<IForumJoinRequest | null>(null);
 
-  const postSlug = (content?.post as unknown as IForumPost)?.slug;
-  const forumKey = content?.forum_key as unknown as string;
-
   const fetchForumData = useCallback(async () => {
     if (!forumKey || hasFetchedForumRef.current || failedForumAttemptsRef.current >= 3) return;
 
@@ -116,7 +123,18 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
         .json<IResponseSingle<IForum>>();
 
       if (response?.content?.data) {
-        setForumData(response.content.data);
+        if (isBuilder) {
+          setForumData({
+            ...response.content.data,
+            settings: {
+              ...response.content.data.settings,
+              invite_only: false,
+            },
+          });
+        } else {
+          setForumData(response.content.data);
+        }
+
         hasFetchedForumRef.current = true;
       }
     } catch (error) {
@@ -124,7 +142,7 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
       logger?.error("Failed to fetch forum data", levoError);
       failedForumAttemptsRef.current += 1;
     }
-  }, [forumKey, fetch, logger]);
+  }, [forumKey, fetch, logger, isBuilder]);
 
   const checkMembership = useCallback(async () => {
     if (!forumData?.settings?.invite_only || !isLoggedIn) {
@@ -134,6 +152,15 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
       return;
     }
 
+    // In builder mode, bypass API call and use sample data
+    if (isBuilder) {
+      const data = SAMPLE_GET_MEMBER_RESPONSE.content.data;
+      setIsMember(!!data?.member);
+      setJoinRequest(data?.join_request || null);
+      hasFetchedMembershipRef.current = true;
+      return;
+    }
+
     if (hasFetchedMembershipRef.current || failedMembershipAttemptsRef.current >= 3) {
       return;
     }
@@ -159,7 +186,7 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
     } finally {
       setIsLoadingMembership(false);
     }
-  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, fetch, logger]);
+  }, [forumKey, forumData?.settings?.invite_only, isLoggedIn, isBuilder, fetch, logger]);
 
   /** Submit a join request for the current user */
   const handleSubmitJoinRequest = useCallback(
@@ -198,9 +225,53 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
     }
   }, [forumData, checkMembership]);
 
+  const detailPageStudioConfig = useMemo(() => {
+    return forumData?.studio_config?.find((v) => v?.block_instance_id === null);
+  }, [forumData]);
+
+  const listingPageStudioConfig = useMemo(() => {
+    return forumData?.studio_config?.find((v) => v?.block_instance_id !== null);
+  }, [forumData]);
+
+  const postDetailPageURLPattern = useMemo(() => {
+    if (
+      (isBuilder && detailPageStudioConfig?.preview_url) ||
+      (!isBuilder && detailPageStudioConfig?.live_url)
+    ) {
+      return isBuilder && detailPageStudioConfig.preview_url
+        ? detailPageStudioConfig.preview_url
+        : !isBuilder && detailPageStudioConfig.live_url
+          ? detailPageStudioConfig.live_url
+          : "";
+    }
+  }, [isBuilder, detailPageStudioConfig]);
+
+  const postListingPageURL = useMemo(() => {
+    if (
+      (isBuilder && listingPageStudioConfig?.preview_url) ||
+      (!isBuilder && listingPageStudioConfig?.live_url)
+    ) {
+      return isBuilder && listingPageStudioConfig.preview_url
+        ? listingPageStudioConfig.preview_url
+        : !isBuilder && listingPageStudioConfig.live_url
+          ? listingPageStudioConfig.live_url
+          : "";
+    }
+  }, [isBuilder, listingPageStudioConfig]);
+
+  // Reset fetch state when the post changes
+  const postCommentsCount = (postSource as unknown as IForumPost)?.comments_count ?? 0;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Need to use postSlug to trigger refetch when changing post from studio.
+  useEffect(() => {
+    hasFetchedRef.current = false;
+    failedAttemptsRef.current = 0;
+    setFetchedPostData(null);
+    setCommentCount(postCommentsCount);
+  }, [postSlug, postCommentsCount]);
+
   useEffect(() => {
     const fetchPostVotes = async () => {
-      if (!postSlug || hasFetchedRef.current || failedAttemptsRef.current >= 3) return;
+      if (!postSlug || !forumKey || hasFetchedRef.current || failedAttemptsRef.current >= 3) return;
 
       try {
         const response = await fetch
@@ -227,11 +298,11 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
     };
 
     fetchPostVotes();
-  }, [postSlug, fetch, logger]);
+  }, [postSlug, forumKey, fetch, logger]);
 
-  const postWithVotes: IForumPost | null = content?.post
+  const postWithVotes: IForumPost | null = postSource
     ? {
-        ...(content.post as unknown as IForumPost),
+        ...(postSource as unknown as IForumPost),
         ...(fetchedPostData || {}),
         comments_count: commentCount,
       }
@@ -350,7 +421,8 @@ const CommunityPost1: React.FC<ILevoBlockBaseProps<ICommunityPost1Content>> = ({
                 <ForumPost
                   post={postWithVotes}
                   isRenderedSolo
-                  postDetailPageBaseURL={content?.post_detail_page_url || ""}
+                  postDetailPageURLPattern={postDetailPageURLPattern}
+                  postListingPageURL={postListingPageURL}
                   forumKey={forumKey}
                   actionsLoadingState={{
                     comments: isLoadingPostData,

package/src/blocks/event/event-details.schema.ts

@@ -11,6 +11,28 @@ const DUMMY_IMAGE = {
   },
 };
 
+const CALENDAR_ICON = {
+  kind: "icon",
+  data: {
+    id: "calendar-1",
+    label: "Calendar 1",
+    tags: ["calendar", "custom", "time"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8 5.75C7.59 5.75 7.25 5.41 7.25 5V2C7.25 1.59 7.59 1.25 8 1.25C8.41 1.25 8.75 1.59 8.75 2V5C8.75 5.41 8.41 5.75 8 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M16 5.75C15.59 5.75 15.25 5.41 15.25 5V2C15.25 1.59 15.59 1.25 16 1.25C16.41 1.25 16.75 1.59 16.75 2V5C16.75 5.41 16.41 5.75 16 5.75Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 14.5001C8.37 14.5001 8.24 14.4701 8.12 14.4201C7.99 14.3701 7.89 14.3001 7.79 14.2101C7.61 14.0201 7.5 13.7701 7.5 13.5001C7.5 13.3701 7.53 13.2401 7.58 13.1201C7.63 13.0001 7.7 12.8901 7.79 12.7901C7.89 12.7001 7.99 12.6301 8.12 12.5801C8.48 12.4301 8.93 12.5101 9.21 12.7901C9.39 12.9801 9.5 13.2401 9.5 13.5001C9.5 13.5601 9.49 13.6301 9.48 13.7001C9.47 13.7601 9.45 13.8201 9.42 13.8801C9.4 13.9401 9.37 14.0001 9.33 14.0601C9.3 14.1101 9.25 14.1601 9.21 14.2101C9.02 14.3901 8.76 14.5001 8.5 14.5001Z" fill="var(--color-icon-primary)"/>\n<path d="M12 14.5C11.87 14.5 11.74 14.47 11.62 14.42C11.49 14.37 11.39 14.3 11.29 14.21C11.11 14.02 11 13.77 11 13.5C11 13.37 11.03 13.24 11.08 13.12C11.13 13 11.2 12.89 11.29 12.79C11.39 12.7 11.49 12.63 11.62 12.58C11.98 12.42 12.43 12.51 12.71 12.79C12.89 12.98 13 13.24 13 13.5C13 13.56 12.99 13.63 12.98 13.7C12.97 13.76 12.95 13.82 12.92 13.88C12.9 13.94 12.87 14 12.83 14.06C12.8 14.11 12.75 14.16 12.71 14.21C12.52 14.39 12.26 14.5 12 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 14.5C15.37 14.5 15.24 14.47 15.12 14.42C14.99 14.37 14.89 14.3 14.79 14.21C14.75 14.16 14.71 14.11 14.67 14.06C14.63 14 14.6 13.94 14.58 13.88C14.55 13.82 14.53 13.76 14.52 13.7C14.51 13.63 14.5 13.56 14.5 13.5C14.5 13.24 14.61 12.98 14.79 12.79C14.89 12.7 14.99 12.63 15.12 12.58C15.49 12.42 15.93 12.51 16.21 12.79C16.39 12.98 16.5 13.24 16.5 13.5C16.5 13.56 16.49 13.63 16.48 13.7C16.47 13.76 16.45 13.82 16.42 13.88C16.4 13.94 16.37 14 16.33 14.06C16.3 14.11 16.25 14.16 16.21 14.21C16.02 14.39 15.76 14.5 15.5 14.5Z" fill="var(--color-icon-primary)"/>\n<path d="M8.5 17.9999C8.37 17.9999 8.24 17.97 8.12 17.92C8 17.87 7.89 17.7999 7.79 17.7099C7.61 17.5199 7.5 17.2599 7.5 16.9999C7.5 16.8699 7.53 16.7399 7.58 16.6199C7.63 16.4899 7.7 16.38 7.79 16.29C8.16 15.92 8.84 15.92 9.21 16.29C9.39 16.48 9.5 16.7399 9.5 16.9999C9.5 17.2599 9.39 17.5199 9.21 17.7099C9.02 17.8899 8.76 17.9999 8.5 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M12 17.9999C11.74 17.9999 11.48 17.8899 11.29 17.7099C11.11 17.5199 11 17.2599 11 16.9999C11 16.8699 11.03 16.7399 11.08 16.6199C11.13 16.4899 11.2 16.38 11.29 16.29C11.66 15.92 12.34 15.92 12.71 16.29C12.8 16.38 12.87 16.4899 12.92 16.6199C12.97 16.7399 13 16.8699 13 16.9999C13 17.2599 12.89 17.5199 12.71 17.7099C12.52 17.8899 12.26 17.9999 12 17.9999Z" fill="var(--color-icon-primary)"/>\n<path d="M15.5 18C15.24 18 14.98 17.89 14.79 17.71C14.7 17.62 14.63 17.51 14.58 17.38C14.53 17.26 14.5 17.13 14.5 17C14.5 16.87 14.53 16.74 14.58 16.62C14.63 16.49 14.7 16.38 14.79 16.29C15.02 16.06 15.37 15.95 15.69 16.02C15.76 16.03 15.82 16.05 15.88 16.08C15.94 16.1 16 16.13 16.06 16.17C16.11 16.2 16.16 16.25 16.21 16.29C16.39 16.48 16.5 16.74 16.5 17C16.5 17.26 16.39 17.52 16.21 17.71C16.02 17.89 15.76 18 15.5 18Z" fill="var(--color-icon-primary)"/>\n<path d="M20.5 9.83997H3.5C3.09 9.83997 2.75 9.49997 2.75 9.08997C2.75 8.67997 3.09 8.33997 3.5 8.33997H20.5C20.91 8.33997 21.25 8.67997 21.25 9.08997C21.25 9.49997 20.91 9.83997 20.5 9.83997Z" fill="var(--color-icon-primary)"/>\n<path d="M16 22.75H8C4.35 22.75 2.25 20.65 2.25 17V8.5C2.25 4.85 4.35 2.75 8 2.75H16C19.65 2.75 21.75 4.85 21.75 8.5V17C21.75 20.65 19.65 22.75 16 22.75ZM8 4.25C5.14 4.25 3.75 5.64 3.75 8.5V17C3.75 19.86 5.14 21.25 8 21.25H16C18.86 21.25 20.25 19.86 20.25 17V8.5C20.25 5.64 18.86 4.25 16 4.25H8Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const TIME_ICON = {
+  kind: "icon",
+  data: {
+    id: "clock",
+    label: "Clock",
+    tags: ["clock", "custom", "directional", "time"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z" fill="var(--color-icon-primary)"/>\n<path d="M15.7096 15.93C15.5796 15.93 15.4496 15.9 15.3296 15.82L12.2296 13.97C11.4596 13.51 10.8896 12.5 10.8896 11.61V7.51001C10.8896 7.10001 11.2296 6.76001 11.6396 6.76001C12.0496 6.76001 12.3896 7.10001 12.3896 7.51001V11.61C12.3896 11.97 12.6896 12.5 12.9996 12.68L16.0996 14.53C16.4596 14.74 16.5696 15.2 16.3596 15.56C16.2096 15.8 15.9596 15.93 15.7096 15.93Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
 const DEFAULT_CONTENT = {
   layout: null,
   container: null,
@@ -33,13 +55,13 @@ const DEFAULT_CONTENT = {
   title: "Annual Technology Summit 2024",
   "event-info": null,
   "start-date-wrapper": null,
-  "date-icon": DUMMY_IMAGE,
+  "date-icon": CALENDAR_ICON,
   "start-date": "March 15, 2024",
   "end-date-wrapper": null,
-  "end-date-icon": DUMMY_IMAGE,
+  "end-date-icon": CALENDAR_ICON,
   "end-date": "March 15, 2024",
   "time-wrapper": null,
-  "time-icon": DUMMY_IMAGE,
+  "time-icon": TIME_ICON,
   "time-range": "09:00 AM - 05:00 PM",
   "kind-wrapper": null,
   "kind-icon": DUMMY_IMAGE,