@levo-so/blocks 0.1.1 → 0.1.52

package/src/blocks/blogs/blog-listing-1.schema.ts

@@ -0,0 +1,473 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "archive-minus",
+    label: "Archive Minus",
+    tags: ["archive", "custom", "directional", "minus"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M14.5 11.4H9.5C9.09 11.4 8.75 11.06 8.75 10.65C8.75 10.24 9.09 9.90002 9.5 9.90002H14.5C14.91 9.90002 15.25 10.24 15.25 10.65C15.25 11.06 14.91 11.4 14.5 11.4Z" fill="var(--color-icon-primary)"/>\n<path d="M4.92957 22.75C4.50957 22.75 4.11957 22.65 3.76957 22.45C2.99957 22 2.55957 21.09 2.55957 19.96V5.86C2.55957 3.32 4.62957 1.25 7.16957 1.25H16.8196C19.3596 1.25 21.4296 3.32 21.4296 5.86V19.95C21.4296 21.08 20.9896 21.99 20.2196 22.44C19.4496 22.89 18.4396 22.84 17.4496 22.29L12.5696 19.58C12.2796 19.42 11.7096 19.42 11.4196 19.58L6.53957 22.29C5.99957 22.59 5.44957 22.75 4.92957 22.75ZM7.17957 2.75C5.46957 2.75 4.06957 4.15 4.06957 5.86V19.95C4.06957 20.54 4.23957 20.98 4.53957 21.15C4.83957 21.33 5.30957 21.27 5.81957 20.98L10.6996 18.27C11.4396 17.86 12.5596 17.86 13.2996 18.27L18.1796 20.98C18.6896 21.27 19.1596 21.33 19.4596 21.15C19.7596 20.97 19.9296 20.53 19.9296 19.95V5.86C19.9296 4.15 18.5296 2.75 16.8196 2.75H7.17957Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const BLOG_CONTENT = {
+  blog: null,
+  cover_image: {
+    id: "7141014160938075687",
+    location: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+    kind: "image",
+    mimetype: "image/png",
+    srcset: {
+      "1080w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+      "1200w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+      "1920w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+      "320w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+      "640w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+      "750w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+      "828w":
+        "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+      path: "https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://space.levo.so/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+    },
+  },
+  blog_content_wrapper: null,
+  text_content_wrapper: null,
+  timestamp_wrapper: null,
+  timestamp_icon: DUMMY_ICON,
+  timestamp: "Today, 12:00",
+  title:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  author_wrapper: null,
+  author_image: DUMMY_ICON,
+  author_name: "John Doe",
+  author_description: "Marketing Coordinator",
+  cta: "Read more",
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  text_wrapper: null,
+  title: "Building Wealth Together",
+  description:
+    "Our comprehensive financial services help you achieve your goals through expert guidance and innovative solutions.",
+  blogs: Array(3)
+    ?.fill(0)
+    ?.map((_) => BLOG_CONTENT),
+  "pagination-wrapper": null,
+  "pagination-left": "Back",
+  "pagination-text": "",
+  "pagination-right": "Next",
+};
+
+const BLOG_STYLE = {
+  blog: {
+    display: "flex",
+    "column-gap": "lg",
+    "border-radius": "base",
+    "border-width": "1.5px",
+    "border-style": "solid",
+    "border-color": "border",
+    "padding-left": "xl",
+    "padding-right": "xl",
+    "padding-top": "lg",
+    "padding-bottom": "lg",
+    "box-shadow": "md",
+  },
+  cover_image: {
+    height: "184px",
+    width: "64",
+    "border-radius": "base",
+    "object-fit": "cover",
+  },
+  blog_content_wrapper: {
+    display: "flex",
+    width: "100%",
+    flex: "1",
+    "align-items": "center",
+    "column-gap": "lg",
+  },
+  text_content_wrapper: {
+    display: "flex",
+    flex: "1",
+    "flex-direction": "column",
+    "row-gap": "xs",
+  },
+  timestamp_icon: {},
+  timestamp_wrapper: {
+    display: "flex",
+    width: "fit-content",
+    "align-items": "center",
+    "column-gap": "2xs",
+    "border-radius": "xl",
+    "background-color": "#e9e9eb",
+    "padding-left": "xs",
+    "padding-right": "xs",
+    "padding-top": "5xs",
+    "padding-bottom": "5xs",
+  },
+  timestamp: {
+    "font-size": "sm",
+    "font-weight": "semibold",
+    color: "text-2",
+  },
+  blog_info_wrapper: {
+    display: "flex",
+    width: "100%",
+    "flex-direction": "column",
+    "row-gap": "3xs",
+  },
+  title: {
+    color: "text-1",
+  },
+  description: {
+    "font-size": "base",
+    color: "text-2",
+  },
+  author_wrapper: {
+    display: "flex",
+    "align-items": "center",
+    "column-gap": "base",
+  },
+  author_image: {
+    height: "36px",
+    width: "36px",
+    "border-radius": "100%",
+    "object-fit": "cover",
+  },
+  author_name: {
+    color: "text-1",
+  },
+  author_description: {
+    "font-size": "sm",
+    color: "text-2",
+  },
+  cta: {},
+};
+
+const BLOGS_STYLES = Array(3)
+  ?.fill(0)
+  ?.map((_) => BLOG_STYLE);
+
+export type IBlogListing1Content = typeof DEFAULT_CONTENT;
+
+export const BlogListing1: IBlock = {
+  category_id: "blogs",
+  title: "Blog Listing 1",
+  key: "blog-listing-1",
+  version: "v1",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      // No hint needed: acts as high-level layout wrapper
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      // No hint needed: visual/container only
+    },
+    {
+      key: "text_wrapper",
+      label: "Text Wrapper",
+      field_interface: "BoxWidget",
+      // No hint needed: layout grouping only
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Primary headline for the blog/news section. Should be concise, attention-grabbing, and indicate trending or popular content for this month. Use a confident, informative, energetic tone.",
+        min_characters: 20,
+        max_characters: 35,
+      },
+    },
+    {
+      key: "description",
+      label: "Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Short supporting introduction for the section, summarizing the purpose or value of the featured content. Should be informative, aspirational, and encourage browsing. 1-2 lines.",
+        min_characters: 60,
+        max_characters: 140,
+      },
+    },
+    {
+      key: "blogs",
+      label: "Blogs",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A repeating grid of featured blog article cards for the month. Each card highlights a blog with image, headline, excerpt, author, and meta info. Should feel lively and inviting.",
+        min_items: 6, // as per screenshot; six visible cards in a 3x2 grid
+        max_items: 9, // allow pagination flexibility
+      },
+      fields: [
+        {
+          key: "blog",
+          label: "Blog",
+          field_interface: "BoxWidget",
+          // No hint needed: just a per-card container
+        },
+        {
+          key: "cover_image",
+          label: "Cover Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Blog post main thumbnail image. Should clearly represent the article or theme, visually engaging, and high quality. Prefer landscape orientation to fit card.",
+            orientation: "landscape",
+            size: "large",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "blog_content_wrapper",
+          label: "Blog Content Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "text_content_wrapper",
+          label: "Text Content Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "timestamp_wrapper",
+          label: "Timestamp Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "timestamp_icon",
+          label: "Timestamp Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small icon representing time or date, displayed next to the timestamp. Should be simple, clear, and easily recognizable at small sizes.",
+            size: "icon",
+            orientation: "square",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "timestamp",
+          label: "Timestamp",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Publish time information for the blog post. Should be brief (e.g. 'Today', '6 minutes ago', or 'June 5'). Neutral, clear style.",
+            min_characters: 8,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "blog_info_wrapper",
+          label: "Blog Info Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "title",
+          label: "Title",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Blog article headline. Clear, bold, and appealing. Should entice users to read. Ideally not more than one line in the card, use a friendly, magazine-like tone.",
+            min_characters: 35,
+            max_characters: 60,
+          },
+        },
+        {
+          key: "description",
+          label: "Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short excerpt or summary of the blog post content. Should be 1-2 sentences, informative, and prompt curiosity. Keep it concise and editorial.",
+            min_characters: 60,
+            max_characters: 130,
+          },
+        },
+        {
+          key: "author_wrapper",
+          label: "Author Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "author_image",
+          label: "Author Image",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Circular avatar image of the article author. Use an easily recognizable headshot.",
+            orientation: "square",
+            size: "icon",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author_info_wrapper",
+          label: "Author Info Wrapper",
+          field_interface: "BoxWidget",
+          // No hint needed: layout only
+        },
+        {
+          key: "author_name",
+          label: "Author Name",
+          field_interface: "HeadingWidget",
+          hint: {
+            prompt_description:
+              "Author's full name, as displayed in byline. Preferably real or realistic names.",
+            min_characters: 5,
+            max_characters: 25,
+          },
+        },
+        {
+          key: "author_description",
+          label: "Author Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short description or job title of the author, e.g., 'Content Strategist', 'Lifestyle Editor'. Keep it short and professional.",
+            min_characters: 10,
+            max_characters: 30,
+          },
+        },
+        {
+          key: "cta",
+          label: "CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Primary action button label for each article card. Should prompt the user to read or learn more, concise (1-3 words), action-oriented.",
+            min_characters: 6,
+            max_characters: 16,
+          },
+        },
+      ],
+    },
+
+    {
+      key: "pagination-wrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+      // Layout grouping only – no hint needed
+    },
+    {
+      key: "pagination-left",
+      label: "Pagination Left",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the previous page of blog cards. Keep the label brief, such as 'Previous' or a left arrow. Tone should be neutral and functional.",
+        min_characters: 5,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-text",
+      label: "Pagination text",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Displays current and total page number in the paginator, e.g. '1/3' or 'Page 2 of 4'. Should be minimal, clear, and unambiguous.",
+        min_characters: 3,
+        max_characters: 12,
+      },
+    },
+    {
+      key: "pagination-right",
+      label: "Pagination Right",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Pagination control button to navigate to the next page of blog cards. Should be concise, such as 'Next' or a right arrow. Neutral tone.",
+        min_characters: 4,
+        max_characters: 8,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+          gap: "xl",
+          "border-radius": "base",
+          "background-color": "white",
+          "padding-left": "8xl",
+          "padding-right": "8xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "box-shadow": "lg",
+        },
+        container: {
+          display: "flex",
+          width: "100%",
+          "max-width": "screen-lg",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        text_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+        },
+        title: {
+          color: "text-1",
+        },
+        description: {
+          "font-size": "base",
+          color: "text-2",
+        },
+        blogs_levoGroup: {
+          display: "flex",
+          width: "100%",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        blogs: BLOGS_STYLES,
+        "pagination-wrapper": {
+          display: "flex",
+          width: "full",
+          "justify-content": "center",
+          "align-items": "center",
+          "column-gap": "md",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/blogs/blog-listing-1.tsx

@@ -0,0 +1,102 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+  Icon,
+  useContentEngine,
+} from "@levo-so/studio";
+import dayjs from "dayjs";
+
+import type { IBlogListing1Content } from "./blog-listing-1.schema";
+
+const BlogListing1: React.FC<ILevoBlockBaseProps<IBlogListing1Content>> = ({
+  content,
+}) => {
+  const { data, query, setQuery, meta } = useContentEngine("blogs");
+
+  const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
+  const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
+
+  return (
+    <Section elementKey="layout">
+      <Container elementKey="container">
+        <Box elementKey="text_wrapper">
+          <Heading elementKey="title" />
+          <Typography elementKey="description" />
+        </Box>
+        <Box elementKey="blogs_levoGroup" data-levo_group>
+          {data &&
+            Array.isArray(data) &&
+            data?.map((_, index) => {
+              return (
+                <Box
+                  data-levo_group_item
+                  key={index}
+                  elementKey={`blogs.${index}.blog`}
+                >
+                  <Image
+                    alt="cover_image"
+                    elementKey={`blogs.${index}.cover_image`}
+                    width={256}
+                    height={184}
+                  />
+                  <Box elementKey={`blogs.${index}.blog_content_wrapper`}>
+                    <Box elementKey={`blogs.${index}.text_content_wrapper`}>
+                      <Box elementKey={`blogs.${index}.timestamp_wrapper`}>
+                        <Icon elementKey={`blogs.${index}.timestamp_icon`} />
+                        <Typography elementKey={`blogs.${index}.timestamp`}>
+                          {data?.[index]?.timestamp &&
+                          dayjs(data?.[index]?.timestamp).isValid()
+                            ? dayjs(data?.[index]?.timestamp).format(
+                                "DD MMM, YYYY",
+                              )
+                            : " "}
+                        </Typography>
+                      </Box>
+
+                      <Box elementKey={`blogs.${index}.blog_info_wrapper`}>
+                        <Heading elementKey={`blogs.${index}.title`} />
+                        <Typography elementKey={`blogs.${index}.description`} />
+                      </Box>
+                      <Box elementKey={`blogs.${index}.author_wrapper`}>
+                        <Icon elementKey={`blogs.${index}.author_image`} />
+                        <Box elementKey={`blogs.${index}.author_info_wrapper`}>
+                          <Heading elementKey={`blogs.${index}.author_name`} />
+                          <Typography
+                            elementKey={`blogs.${index}.author_description`}
+                          />
+                        </Box>
+                      </Box>
+                    </Box>
+                    <Button elementKey={`blogs.${index}.cta`} />
+                  </Box>
+                </Box>
+              );
+            })}
+        </Box>
+        <Box elementKey="pagination-wrapper">
+          <Button
+            elementKey="pagination-left"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          />
+          <Typography elementKey="pagination-text">
+            {`${query?.page || 0}/${meta?.pages || 0}`}
+          </Typography>
+          <Button
+            elementKey="pagination-right"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          />
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default BlogListing1;