@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/event/event-listing-3.schema.ts

@@ -0,0 +1,605 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  id: "7141014160938075687",
+  location: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH.png",
+  kind: "image",
+  mimetype: "image/png",
+  srcset: {
+    "1080w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp",
+    "1200w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp",
+    "1920w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp",
+    "320w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp",
+    "640w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp",
+    "750w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp",
+    "828w":
+      "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp",
+    path: "https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-640w.webp 640w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1080w.webp 1080w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1200w.webp 1200w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-1920w.webp 1920w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-320w.webp 320w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-750w.webp 750w, https://static.levocdn.com/WLZ1TXTD/defaultblue-tryFJ012mgyH-828w.webp 828w",
+  },
+};
+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 ARROW_LEFT_IMAGE = {
+  id: "9GFRzqRPswl8h",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/arrow-left-PzNnrMeYWUyNg.svg",
+  srcset: {},
+};
+
+const ARROW_RIGHT_IMAGE = {
+  id: "9GFRzqRPswl8h",
+  kind: "image",
+  location: "https://static.levocdn.com/WLZ1TXTD/arrow-right-tryvMJ0Z2DosG.svg",
+  srcset: {},
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-container": null,
+  title: "Upcoming Events",
+  "cta-button": "View All Events",
+  events: [
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      "text-wrapper": null,
+      "text-container": null,
+      "caption-text": "Sponsor Event",
+      "date-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      "publishedAt-header": "25 July, 2025",
+      "author-wrapper": null,
+      "author-image": DUMMY_ICON,
+      "author-info-wrapper": null,
+      "author-name": "Sarah Johnson",
+      title: "Books, Brighter Futures: A Day for Change",
+      description:
+        "Over 400 children will receive new educational supplies during this Event.",
+      publishedAt: "25 July, 2025",
+      cta: "Register Now",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      "text-wrapper": null,
+      "text-container": null,
+      "caption-text": "Community Event",
+      "date-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      "publishedAt-header": "15 August, 2025",
+      "author-wrapper": null,
+      "author-image": DUMMY_ICON,
+      "author-info-wrapper": null,
+      "author-name": "Michael Chen",
+      title: "Stories of Impact: Volunteers Who Inspire",
+      description:
+        "Hear from passionate volunteers about their life-changing moments while working",
+      publishedAt: "15 August, 2025",
+      cta: "Learn More",
+    },
+    {
+      eventWrapper: null,
+      image: DUMMY_IMAGE,
+      "text-wrapper": null,
+      "text-container": null,
+      "caption-text": "Fundraiser Event",
+      "date-wrapper": null,
+      "date-icon": DUMMY_ICON,
+      "publishedAt-header": "3 December, 2025",
+      "author-wrapper": null,
+      "author-image": DUMMY_ICON,
+      "author-info-wrapper": null,
+      "author-name": "Emma Davis",
+      title: "Voices for a Cause: Music & Giving",
+      description:
+        "Experience an evening of soulful and delightful performances and storytelling.",
+      publishedAt: "3 December, 2025",
+      cta: "Get Tickets",
+    },
+  ],
+  paginationWrapper: null,
+  paginationLeftButton: "",
+  paginationLeftIcon: ARROW_LEFT_IMAGE,
+  paginationText: "",
+  paginationRightButton: "",
+  paginationRightIcon: ARROW_RIGHT_IMAGE,
+};
+
+export type IEventListing3 = typeof DEFAULT_CONTENT;
+
+export const EventListing3: IBlock = {
+  category_id: "event",
+  title: "Event Listing 3",
+  key: "event-listing-3",
+  version: "v1",
+  prompt_description:
+    "Event listing with enhanced metadata including date icon, author information, and CTA buttons for each event",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+    },
+    {
+      key: "header-container",
+      label: "Header Container",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "title",
+      label: "Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Block headline centered at the top of the Events section. Should clearly state the purpose of the section, such as 'Events' or a similarly concise title.",
+        min_characters: 5,
+        max_characters: 18,
+      },
+    },
+    {
+      key: "cta-button",
+      label: "Header CTA Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button displayed next to the main heading. Should encourage exploration, such as 'View all' or 'See more events'.",
+        min_characters: 6,
+        max_characters: 15,
+      },
+    },
+    {
+      key: "events",
+      label: "Events",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "A group representing a grid of event cards. Each card highlights an upcoming or featured event with enhanced metadata. Intended for listing multiple events at a glance.",
+        min_items: 3,
+        max_items: 6,
+      },
+      fields: [
+        {
+          key: "eventWrapper",
+          label: "Event Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "image",
+          label: "Event Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description:
+              "Visual banner or cover image for the event, displayed prominently at the top of each card. Should be inviting and relevant to the event content.",
+            orientation: "landscape",
+            size: "medium",
+            usecase: "hero",
+          },
+        },
+        {
+          key: "text-wrapper",
+          label: "Text Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "text-container",
+          label: "Text Container",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "date-wrapper",
+          label: "Date Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "date-icon",
+          label: "Date Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small calendar or date icon displayed next to the event date. Should be simple and clearly recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        {
+          key: "publishedAt-header",
+          label: "Event Date",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Displays the date and time of the event. Format as 'Month DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
+            min_characters: 16,
+            max_characters: 28,
+          },
+        },
+        {
+          key: "author-wrapper",
+          label: "Author Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "author-image",
+          label: "Organizer Image",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description:
+              "Small avatar image of the event organizer or host. Should be professional and recognizable.",
+            orientation: "square",
+            size: "icon",
+            usecase: "avatar",
+          },
+        },
+        {
+          key: "author-info-wrapper",
+          label: "Author Info Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "author-name",
+          label: "Organizer Name",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Name of the event organizer, host, or hosting organization. Should be credible and professional.",
+            min_characters: 5,
+            max_characters: 30,
+          },
+        },
+
+        {
+          key: "content-container",
+          label: "Content Container",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "A group representing a grid of event cards. Each card highlights an upcoming or featured event with enhanced metadata. Intended for listing multiple events at a glance.",
+          },
+        },
+        {
+          key: "title",
+          label: "Event Title",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Event card headline. Should be the name or title of the event, immediately catching the user's attention. Aim for clarity and engagement.",
+            min_characters: 8,
+            max_characters: 32,
+          },
+        },
+        {
+          key: "description",
+          label: "Event Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Short summary or description of the event, conveying value and enticing interest. Displayed in one or two lines under the event title. Keep concise yet informative.",
+            min_characters: 40,
+            max_characters: 120,
+          },
+        },
+        {
+          key: "publishedAt",
+          label: "Published Date",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Displays the date and time of the event. Format as 'Month DD, YYYY HH:MM AM/PM'. Keep it short, clear, and easily readable.",
+            min_characters: 16,
+            max_characters: 28,
+          },
+        },
+        {
+          key: "cta",
+          label: "Event CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description:
+              "Call-to-action button for the specific event (e.g., 'Register Now', 'Learn More', 'Get Tickets'). Should be action-oriented.",
+            min_characters: 6,
+            max_characters: 15,
+          },
+        },
+      ],
+    },
+    {
+      key: "paginationWrapper",
+      label: "Pagination Wrapper",
+      field_interface: "BoxWidget",
+    },
+    {
+      key: "paginationLeftButton",
+      label: "Previous Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "paginationText",
+      label: "Pagination Text",
+      field_interface: "TypographyWidget",
+    },
+    {
+      key: "paginationRightButton",
+      label: "Next Button",
+      field_interface: "ButtonWidget",
+    },
+    {
+      key: "paginationLeftIcon",
+      label: "Previous Icon",
+      field_interface: "ImageWidget",
+    },
+    {
+      key: "paginationRightIcon",
+      label: "Next Icon",
+      field_interface: "ImageWidget",
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "10xl",
+          "padding-right": "10xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          tablet: {
+            "padding-left": "8xl",
+            "padding-right": "8xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "6xl",
+            "padding-right": "6xl",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+          },
+          filter: "none",
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "row-gap": "2xl",
+          filter: "none",
+        },
+        "header-container": {
+          display: "flex",
+          width: "100%",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "3xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "lg",
+          },
+        },
+        title: {
+          "font-size": "5xl",
+          "font-weight": 600,
+          color: "var(--color-text-1)",
+          margin: "0",
+          mobile: {
+            "font-size": "3xl",
+          },
+        },
+        "cta-button": {
+          "background-color": "transparent",
+          color: "var(--color-brand)",
+          "font-size": "lg",
+          "font-weight": 500,
+          "text-decoration": "none",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        events_levoGroup: {
+          display: "grid",
+          width: "100%",
+          "grid-template-columns": "repeat(3, 1fr)",
+          "row-gap": "5xl",
+          "column-gap": "5xl",
+          tablet: {
+            "grid-template-columns": "repeat(1, minmax(0, 1fr))",
+            filter: "none",
+            "column-gap": "base",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, 1fr)",
+            "row-gap": "lg",
+            filter: "none",
+          },
+          filter: "none",
+        },
+        events: Array(3)
+          .fill(0)
+          ?.map((v) => {
+            return {
+              eventWrapper: {
+                "border-radius": "xl",
+                overflow: "hidden",
+                "box-shadow":
+                  "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+                position: "relative",
+              },
+              image: {
+                width: "100%",
+                height: "200px",
+                "object-fit": "cover",
+              },
+              "text-wrapper": {
+                "padding-left": "none",
+                "padding-top": "none",
+                "padding-right": "none",
+                "padding-bottom": "2xl",
+                display: "flex",
+                "flex-direction": "column",
+                "row-gap": "lg",
+                filter: "none",
+              },
+              "text-container": {
+                display: "flex",
+                "justify-content": "start",
+                "align-items": "center",
+                "column-gap": "lg",
+                "margin-bottom": "base",
+                filter: "none",
+                "border-bottom": "1px solid",
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "base",
+                "padding-right": "base",
+              },
+              "caption-text": {
+                color: "white",
+                "font-size": "xs",
+                "background-color": "var(--color-brand)",
+                "font-weight": 500,
+                "padding-left": "sm",
+                "padding-right": "sm",
+                "padding-top": "2xs",
+                "padding-bottom": "2xs",
+                "border-radius": "3xl",
+              },
+              "date-wrapper": {
+                display: "flex",
+                "align-items": "center",
+                "column-gap": "xs",
+              },
+              "date-icon": {
+                width: "16px",
+                height: "16px",
+              },
+              "publishedAt-header": {
+                "font-size": "sm",
+                color: "var(--color-text-2)",
+                "font-weight": 500,
+              },
+              "author-wrapper": {
+                display: "flex",
+                "align-items": "center",
+                "column-gap": "xs",
+              },
+              "author-image": {
+                height: "24px",
+                width: "24px",
+                "border-radius": "100%",
+                "object-fit": "cover",
+              },
+              "author-name": {
+                "font-size": "sm",
+                "font-weight": 500,
+                color: "var(--color-text-1)",
+              },
+              title: {
+                "font-weight": 600,
+                "font-size": "xl",
+                "margin-bottom": "xs",
+                color: "var(--color-text-1)",
+                filter: "none",
+              },
+              description: {
+                overflow: "hidden",
+                display: "-webkit-box",
+                "-webkit-box-orient": "vertical",
+                "-webkit-line-clamp": 3,
+                color: "var(--color-text-2)",
+                "line-height": 1.5,
+                "margin-bottom": "base",
+                filter: "none",
+              },
+              publishedAt: {
+                display: "none",
+              },
+              cta: {
+                "background-color": "var(--color-brand)",
+                color: "white",
+                "padding-top": "xs",
+                "padding-bottom": "xs",
+                "padding-left": "base",
+                "padding-right": "base",
+                "border-radius": "md",
+                "font-size": "sm",
+                "font-weight": 500,
+                border: "none",
+                cursor: "pointer",
+                "align-self": "flex-start",
+              },
+              "content-container": {
+                filter: "none",
+                "padding-left": "base",
+                "padding-right": "base",
+              },
+            };
+          }),
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        paginationLeftButton: {
+          "background-color": "transparent",
+          border: "1px solid var(--color-border)",
+          "border-radius": "md",
+          "padding-top": "xs",
+          "padding-bottom": "xs",
+          "padding-left": "base",
+          "padding-right": "base",
+          cursor: "pointer",
+        },
+        paginationText: {
+          "font-size": "base",
+          color: "var(--color-text-1)",
+        },
+        paginationRightButton: {
+          "background-color": "transparent",
+          border: "1px solid var(--color-border)",
+          "border-radius": "md",
+          "padding-top": "xs",
+          "padding-bottom": "xs",
+          "padding-left": "base",
+          "padding-right": "base",
+          cursor: "pointer",
+        },
+        paginationLeftIcon: {
+          height: "16px",
+          width: "16px",
+        },
+        paginationRightIcon: {
+          height: "16px",
+          width: "16px",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};

package/src/blocks/event/event-listing-3.tsx

@@ -0,0 +1,95 @@
+import dayjs from "dayjs";
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Section,
+  Container,
+  Typography,
+  Heading,
+  Box,
+  Icon,
+  Image,
+  useContentEngine,
+  Button,
+} from "@levo-so/studio";
+
+import type { IEventListing3 } from "./event-listing-3.schema";
+
+const EventListing3: React.FC<ILevoBlockBaseProps<IEventListing3>> = () => {
+  const { data, query, setQuery, meta } = useContentEngine("events");
+
+  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="header-container">
+          <Heading elementKey="title" />
+          <Button elementKey="cta-button" />
+        </Box>
+
+        <Box elementKey="events_levoGroup" data-levo_group>
+          {(data || [])?.map((item: any, index: number) => (
+            <Box
+              key={`events-listing-element-${index}`}
+              data-levo_group_item
+              elementKey={`events.${index}.eventWrapper`}
+            >
+              <Image elementKey={`events.${index}.image`} alt="event poster" />
+              <Box elementKey={`events.${index}.text-wrapper`}>
+                <Box elementKey={`events.${index}.text-container`}>
+                  <Box elementKey={`events.${index}.date-wrapper`}>
+                    <Icon elementKey={`events.${index}.date-icon`} />
+                    <Typography
+                      elementKey={`events.${index}.publishedAt-header`}
+                    >
+                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                    </Typography>
+                  </Box>
+
+                  <Box elementKey={`events.${index}.author-wrapper`}>
+                    <Icon elementKey={`events.${index}.author-image`} />
+                    <Typography elementKey={`events.${index}.author-name`} />
+                  </Box>
+                </Box>
+
+                <Box elementKey={`events.${index}.content-container`}>
+                  <Typography elementKey={`events.${index}.title`} />
+                  <Typography elementKey={`events.${index}.description`} />
+                  <Typography elementKey={`events.${index}.publishedAt`}>
+                    {dayjs(item?.starts_at).format("MMM D, YYYY")}
+                  </Typography>
+
+                  <Button elementKey={`events.${index}.cta`} />
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Box elementKey="paginationWrapper">
+          <Button
+            elementKey="paginationLeftButton"
+            disabled={query?.page === 1}
+            onClick={handlePrevious}
+          >
+            <Icon elementKey="paginationLeftIcon" />
+          </Button>
+          <Typography elementKey="paginationText">
+            {query?.page}
+            {"/"}
+            {meta?.pages}
+          </Typography>
+          <Button
+            elementKey="paginationRightButton"
+            onClick={handleNext}
+            disabled={query?.page === meta?.pages}
+          >
+            <Icon elementKey="paginationRightIcon" />
+          </Button>
+        </Box>
+      </Container>
+    </Section>
+  );
+};
+
+export default EventListing3;