@levo-so/blocks 0.1.74 → 0.1.76

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

@@ -1,3 +1,4 @@
+import type { IModuleStudioConfig, LevoEvent } from "@levo-so/core";
 import type { ILevoBlockBaseProps } from "@levo-so/studio";
 import {
   Box,
@@ -8,64 +9,97 @@ import {
   Image,
   Section,
   Typography,
-  useContentEngine,
+  useBlockContext,
+  useContextEngine,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
 
 import { ClientOnly } from "./ClientOnly";
 import type { IEventListing } from "./event-listing.schema";
 
-const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
-  const { data, query, setQuery, meta } = useContentEngine("events");
+/** */
+interface IEventMeta {
+  total: number;
+  pages: number;
+  series?: {
+    studio_config?: IModuleStudioConfig[];
+  };
+}
+
+const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = ({ content }) => {
+  const { response, query, setQuery } = useContextEngine<LevoEvent.Root, IEventMeta>("events");
+  const { isBuilder } = useBlockContext();
 
   const handleNext = () => setQuery({ page: (query?.page || 0) + 1 });
   const handlePrevious = () => setQuery({ page: (query?.page || 0) - 1 });
 
+  const studioConfig = response?.meta?.series?.studio_config?.find(
+    (item) => !item.block_instance_id,
+  );
+
   return (
     <Section elementKey="layout">
       <Container elementKey="container">
-        <Box elementKey="header-container">
-          <Heading elementKey="title" />
-          <Button elementKey="cta-button" />
+        <Box elementKey="header">
+          <Box elementKey="header-container">
+            <Heading elementKey="title" />
+            <Typography elementKey="description" />
+          </Box>
+          <Box elementKey="header-ctas_levoGroup" data-levo_group>
+            {content?.["header-ctas"]?.map((v, index: number) => (
+              <Button key={`header-ctas.${index}`} elementKey={`header-ctas.${index}.header-cta`} />
+            ))}
+          </Box>
         </Box>
-
         <Box elementKey="events_levoGroup" data-levo_group>
-          {(data || [])?.map((item: any, index: number) => (
+          {response?.data?.map((item, index: number) => (
             <Box
               key={`events-listing-element-${index}`}
               data-levo_group_item
               elementKey={`events.${index}.eventWrapper`}
+              config={
+                (isBuilder && studioConfig?.preview_url) || (!isBuilder && studioConfig?.live_url)
+                  ? {
+                      action: {
+                        type: "external_link",
+                        value:
+                          isBuilder && studioConfig.preview_url
+                            ? studioConfig.preview_url.replace(/\{[^}]+\}/g, item?.slug)
+                            : !isBuilder && studioConfig.live_url
+                              ? studioConfig.live_url.replace(/\{[^}]+\}/g, item?.slug)
+                              : "",
+                        options: {},
+                      },
+                    }
+                  : {}
+              }
             >
               <Image
                 height={200}
                 width={360}
                 elementKey={`events.${index}.image`}
                 alt="event poster"
+                image={item?.cover_image ?? undefined}
               />
               <Box elementKey={`events.${index}.text-wrapper`}>
-                <Box elementKey={`events.${index}.text-container`}>
-                  <Typography elementKey={`events.${index}.caption-text`} />
-
-                  <Box elementKey={`events.${index}.date-wrapper`}>
-                    <Icon elementKey={`events.${index}.date-icon`} />
-                    <Typography elementKey={`events.${index}.publishedAt-header`}>
-                      <ClientOnly>
-                        {dayjs(item?.["publishedAt-header"]).format("MMM D, YYYY")}
-                      </ClientOnly>
+                <Box elementKey={`events.${index}.date-wrapper`}>
+                  <Icon elementKey={`events.${index}.date-icon`} />
+                  <ClientOnly>
+                    <Typography elementKey={`events.${index}.startsAt`}>
+                      {dayjs(item?.starts_at).format("MMM D, YYYY")}
                     </Typography>
-                  </Box>
+                  </ClientOnly>
                 </Box>
 
-                <Typography elementKey={`events.${index}.title`} />
-                <Typography elementKey={`events.${index}.description`} />
-                <Typography elementKey={`events.${index}.publishedAt`}>
-                  <ClientOnly>{dayjs(item?.publishedAt).format("MMM D, YYYY")}</ClientOnly>
+                <Heading elementKey={`events.${index}.title`}>{item?.title}</Heading>
+                <Typography elementKey={`events.${index}.description`}>
+                  {item?.description}
                 </Typography>
               </Box>
             </Box>
           ))}
         </Box>
-        {(meta?.pages || 0) > 1 && (
+        {response?.meta && (
           <Box elementKey="paginationWrapper">
             <Button
               elementKey="paginationLeftButton"
@@ -74,12 +108,12 @@ const EventListing: React.FC<ILevoBlockBaseProps<IEventListing>> = () => {
             />
 
             <Typography elementKey="paginationText">
-              {`${query?.page || 0}/${meta?.pages || 0}`}
+              {`${query?.page || 0}/${response?.meta?.pages || 0}`}
             </Typography>
             <Button
               elementKey="paginationRightButton"
               onClick={handleNext}
-              disabled={query?.page === meta?.pages}
+              disabled={query?.page === response?.meta?.pages}
             />
           </Box>
         )}

package/src/blocks/features/features-1/variants/stylized-cards-v2.ts

@@ -35,7 +35,6 @@ export const stylizedCardsV2Features1Variant: IBlockLayouts = {
       "justify-content": "space-between",
       "align-items": "end",
       width: "100%",
-      filter: "none",
     },
     title: {
       "text-align": "left",

package/src/blocks/features/features-4.schema.ts

@@ -457,7 +457,6 @@ export const Features4: IBlock = {
           tablet: {
             "flex-direction": "column",
             "row-gap": "3xl",
-            filter: "none",
           },
         },
         header_section: {
@@ -475,12 +474,9 @@ export const Features4: IBlock = {
           tablet: {
             flex: "auto",
             "max-width": "100%",
-            filter: "none",
-          },
-          filter: "none",
-          mobile: {
-            filter: "none",
           },
+
+          mobile: {},
         },
         specifications_levoGroup: {
           display: "grid",
@@ -676,7 +672,6 @@ export const Features4: IBlock = {
           "border-radius": "base",
           "object-fit": "cover",
           tablet: {
-            filter: "none",
             width: "100%",
           },
         },
@@ -801,7 +796,6 @@ export const Features4: IBlock = {
           tablet: {
             "flex-direction": "column",
             "row-gap": "3xl",
-            filter: "none",
           },
           "flex-direction": "row-reverse",
         },
@@ -821,12 +815,9 @@ export const Features4: IBlock = {
           tablet: {
             flex: "auto",
             "max-width": "100%",
-            filter: "none",
-          },
-          filter: "none",
-          mobile: {
-            filter: "none",
           },
+
+          mobile: {},
         },
         specifications_levoGroup: {
           display: "none",
@@ -1014,7 +1005,6 @@ export const Features4: IBlock = {
           "border-radius": "base",
           "object-fit": "cover",
           tablet: {
-            filter: "none",
             width: "100%",
           },
         },

package/src/blocks/features/features-5.schema.ts

@@ -204,12 +204,11 @@ export const Features5: IBlock = {
           mobile: {
             "flex-direction": "column",
             "row-gap": "xl",
-            filter: "none",
+
             display: "flex",
           },
-          filter: "none",
+
           tablet: {
-            filter: "none",
             display: "grid",
             "column-gap": "none",
             "flex-direction": "row",
@@ -227,12 +226,10 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                filter: "none",
+
                 "border-bottom": "1px s",
               },
-              tablet: {
-                filter: "none",
-              },
+              tablet: {},
             },
             icon_content_wrapper: {
               display: "flex",
@@ -243,11 +240,11 @@ export const Features5: IBlock = {
                 "flex-direction": "row",
                 "row-gap": "sm",
                 "text-align": "center",
-                filter: "none",
+
                 "border-bottom": "1px solid",
                 "column-gap": "base",
               },
-              filter: "none",
+
               "justify-content": "start",
             },
             icon: {
@@ -256,7 +253,7 @@ export const Features5: IBlock = {
                 width: "40px",
                 height: "40px",
               },
-              filter: "none",
+
               height: "36px",
               width: "36px",
               "font-size": "36px",
@@ -265,11 +262,10 @@ export const Features5: IBlock = {
               display: "flex",
               "flex-direction": "column",
               "row-gap": "xs",
-              filter: "none",
+
               "justify-content": "start",
               "align-items": "start",
               mobile: {
-                filter: "none",
                 "justify-content": "start",
                 "align-items": "start",
               },
@@ -306,11 +302,9 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
-                filter: "none",
               },
-              filter: "none",
+
               tablet: {
-                filter: "none",
                 display: "none",
                 height: "80px",
                 "margin-left": "none",
@@ -326,12 +320,10 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                filter: "none",
+
                 "border-bottom": "1px s",
               },
-              tablet: {
-                filter: "none",
-              },
+              tablet: {},
             },
             icon_content_wrapper: {
               display: "flex",
@@ -342,11 +334,11 @@ export const Features5: IBlock = {
                 "flex-direction": "row",
                 "row-gap": "sm",
                 "text-align": "center",
-                filter: "none",
+
                 "border-bottom": "1px solid",
                 "column-gap": "base",
               },
-              filter: "none",
+
               "justify-content": "start",
             },
             icon: {
@@ -355,7 +347,7 @@ export const Features5: IBlock = {
                 width: "40px",
                 height: "40px",
               },
-              filter: "none",
+
               height: "36px",
               width: "36px",
               "font-size": "36px",
@@ -364,11 +356,10 @@ export const Features5: IBlock = {
               display: "flex",
               "flex-direction": "column",
               "row-gap": "xs",
-              filter: "none",
+
               "justify-content": "start",
               "align-items": "start",
               mobile: {
-                filter: "none",
                 "justify-content": "start",
                 "align-items": "start",
               },
@@ -405,11 +396,9 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
-                filter: "none",
               },
-              filter: "none",
+
               tablet: {
-                filter: "none",
                 display: "none",
                 height: "80px",
                 "margin-left": "none",
@@ -425,12 +414,10 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                filter: "none",
+
                 "border-bottom": "1px s",
               },
-              tablet: {
-                filter: "none",
-              },
+              tablet: {},
             },
             icon_content_wrapper: {
               display: "flex",
@@ -441,11 +428,11 @@ export const Features5: IBlock = {
                 "flex-direction": "row",
                 "row-gap": "sm",
                 "text-align": "center",
-                filter: "none",
+
                 "border-bottom": "1px solid",
                 "column-gap": "base",
               },
-              filter: "none",
+
               "justify-content": "start",
             },
             icon: {
@@ -454,7 +441,7 @@ export const Features5: IBlock = {
                 width: "40px",
                 height: "40px",
               },
-              filter: "none",
+
               height: "36px",
               width: "36px",
               "font-size": "36px",
@@ -463,11 +450,10 @@ export const Features5: IBlock = {
               display: "flex",
               "flex-direction": "column",
               "row-gap": "xs",
-              filter: "none",
+
               "justify-content": "start",
               "align-items": "start",
               mobile: {
-                filter: "none",
                 "justify-content": "start",
                 "align-items": "start",
               },
@@ -504,11 +490,9 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
-                filter: "none",
               },
-              filter: "none",
+
               tablet: {
-                filter: "none",
                 display: "none",
                 height: "80px",
                 "margin-left": "none",
@@ -524,12 +508,10 @@ export const Features5: IBlock = {
               mobile: {
                 "flex-direction": "column",
                 width: "100%",
-                filter: "none",
+
                 "border-bottom": "1px s",
               },
-              tablet: {
-                filter: "none",
-              },
+              tablet: {},
             },
             icon_content_wrapper: {
               display: "flex",
@@ -540,11 +522,11 @@ export const Features5: IBlock = {
                 "flex-direction": "row",
                 "row-gap": "sm",
                 "text-align": "center",
-                filter: "none",
+
                 "border-bottom": "1px solid",
                 "column-gap": "base",
               },
-              filter: "none",
+
               "justify-content": "start",
             },
             icon: {
@@ -553,7 +535,7 @@ export const Features5: IBlock = {
                 width: "40px",
                 height: "40px",
               },
-              filter: "none",
+
               height: "36px",
               width: "36px",
               "font-size": "36px",
@@ -562,11 +544,10 @@ export const Features5: IBlock = {
               display: "flex",
               "flex-direction": "column",
               "row-gap": "xs",
-              filter: "none",
+
               "justify-content": "start",
               "align-items": "start",
               mobile: {
-                filter: "none",
                 "justify-content": "start",
                 "align-items": "start",
               },
@@ -603,11 +584,9 @@ export const Features5: IBlock = {
               "margin-right": "xl",
               mobile: {
                 display: "none",
-                filter: "none",
               },
-              filter: "none",
+
               tablet: {
-                filter: "none",
                 display: "none",
                 height: "80px",
                 "margin-left": "none",

package/src/blocks/features/features-6.schema.ts

@@ -762,7 +762,6 @@ export const Features6: IBlock = {
           "&:hover": {
             "background-color": "var(--color-brand-secondary)",
           },
-          filter: "none",
         },
       },
       content: DEFAULT_CONTENT,

package/src/blocks/filter-listing/filter-listing-1.schema.ts

@@ -208,9 +208,7 @@ export const FilterListing1: IBlock = {
         min_items: 6, // 6 visible in grid at a time
         max_items: 9, // allows for paginated dataset
       },
-      options: {
-        supports_filters: true,
-      },
+      options: {},
       fields: [
         {
           key: "card",

package/src/blocks/footer/footer-3.schema.ts

@@ -458,14 +458,13 @@ export const Footer3: IBlock = {
           "border-color": "border",
           tablet: {
             "grid-template-columns": "repeat(2, minmax(0, 1fr))",
-            filter: "none",
           },
           mobile: {
             "grid-template-columns": "repeat(1, minmax(0, 1fr))",
-            filter: "none",
+
             "flex-direction": "column",
           },
-          filter: "none",
+
           width: "100%",
           "align-items": "start",
           "justify-content": "space-between",
@@ -475,18 +474,16 @@ export const Footer3: IBlock = {
           "column-gap": "2xl",
           "row-gap": "xl",
           tablet: {
-            filter: "none",
             "flex-direction": "column",
             display: "flex",
             "justify-content": "start",
             "align-items": "start",
           },
           mobile: {
-            filter: "none",
             "flex-direction": "column",
             width: "100%",
           },
-          filter: "none",
+
           "justify-content": "space-between",
           "align-items": "start",
           width: "100%",
@@ -634,16 +631,15 @@ export const Footer3: IBlock = {
           mobile: {
             "flex-direction": "column",
             "align-items": "center",
-            filter: "none",
+
             "justify-content": "center",
             display: "flex",
           },
-          filter: "none",
+
           "margin-top": "base",
           "margin-bottom": "none",
           "padding-bottom": "base",
           tablet: {
-            filter: "none",
             "flex-direction": "column",
           },
         },
@@ -654,15 +650,12 @@ export const Footer3: IBlock = {
           "column-gap": "base",
           "flex-wrap": "wrap",
           mobile: {
-            filter: "none",
             display: "flex",
             "justify-content": "center",
             "align-items": "center",
             "row-gap": "md",
           },
-          tablet: {
-            filter: "none",
-          },
+          tablet: {},
         },
         "bottomLinks.$.text": {
           color: "text-2",
@@ -676,7 +669,6 @@ export const Footer3: IBlock = {
           display: "flex",
           "align-items": "center",
           "column-gap": "xs",
-          filter: "none",
         },
         "socialIcons.$.icon": {
           "object-fit": "contain",