@levo-so/blocks 0.1.102 → 0.1.103

package/package.json

@@ -1,47 +1,47 @@
 {
   "name": "@levo-so/blocks",
-  "version": "0.1.102",
-  "author": "Levo Engineering <devs@theinternetfolks.com>",
   "description": "Set of blocks for Levo studio",
-  "type": "module",
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src/**/*",
-    "package.json"
-  ],
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@levo-so/react": "0.1.86",
-    "@levo-so/studio": "0.1.102",
-    "@levo-so/core": "0.1.82"
-  },
+  "version": "0.1.103",
+  "author": "Levo Engineering <devs@theinternetfolks.com>",
   "dependencies": {
     "dayjs": "1.11.13",
     "embla-carousel-auto-scroll": "8.6.0",
     "embla-carousel-react": "8.6.0",
-    "lucide-react": "0.424.0",
+    "lucide-react": "0.575.0",
     "use-debounce": "10.0.2"
   },
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "typescript": "5.9.3",
+    "@levo-so/core": "0.1.82",
     "@levo/ts-config": "0.0.0",
-    "@levo-so/studio": "0.1.102",
     "@levo-so/react": "0.1.86",
-    "@levo-so/core": "0.1.82"
+    "@levo-so/studio": "0.1.103"
   },
-  "main": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts"
   },
+  "files": [
+    "src/**/*",
+    "package.json"
+  ],
+  "main": "./src/index.ts",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@levo-so/core": "0.1.82",
+    "@levo-so/studio": "0.1.103",
+    "@levo-so/react": "0.1.86"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "type": "module",
   "scripts": {
-    "clean": "rimraf dist node_modules .turbo",
     "check-types": "tsc --noEmit",
+    "clean": "npx rimraf dist node_modules .turbo",
     "lint": "biome lint ."
   }
 }

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

@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Container,
+  convertHtmlToJSON,
   Heading,
   Icon,
   Image,
@@ -48,7 +49,12 @@ interface IContent {
 }
 
 const extractHeadingsFromContent = (content: IContent): ITocItem[] => {
-  if (!content?.json?.content) return [];
+  if (!content?.json?.content) {
+    // Fallback: convert HTML to JSON when content.json is absent
+    if (!content?.html) return [];
+    const parsed = convertHtmlToJSON(content.html);
+    return extractHeadingsFromContent({ json: parsed } as IContent);
+  }
 
   const headings: ITocItem[] = [];
 
@@ -109,7 +115,7 @@ const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
     const element = document.getElementById(id);
     if (element) {
       const offset = 100;
-      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
       window.scrollTo({
         top: elementPosition - offset,
         behavior: "smooth",
@@ -123,7 +129,7 @@ const TableOfContents: React.FC<{ headings: ITocItem[] }> = ({ headings }) => {
     <Box elementKey="toc-container">
       <Heading elementKey="toc-title" />
       <Box elementKey="toc-list">
-        {headings.map((heading) => (
+        {headings?.map((heading) => (
           <Box elementKey="toc-item-container" key={heading.id}>
             <Icon elementKey="toc-item-icon" />
             <Typography
@@ -219,14 +225,17 @@ const BlogPost1: React.FC<ILevoBlockBaseProps<IBlogPost1Content>> = () => {
   useEffect(() => {
     if (!data.content?.html || headings.length === 0) return;
 
-    const contentElement = document.querySelector('[data-element-key="content"]');
+    const contentElement = document.querySelector('[data-levo_element_key="content"]');
     if (!contentElement) return;
 
-    const headingElements = contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    const headingElements = Array.from(
+      contentElement.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+    ).filter((el) => el.textContent?.trim().length > 0);
 
-    headingElements.forEach((el) => {
+    headingElements.forEach((el, index) => {
       const dataId = el.getAttribute("data-id");
-      const match = headings.find((h) => h.id === dataId);
+      const match = dataId ? headings.find((h) => h.id === dataId) : headings[index];
+
       if (match) {
         el.id = match.id;
         (el as HTMLElement).style.scrollMarginTop = "100px";

package/src/blocks/cards/cards-21.tsx

@@ -24,11 +24,11 @@ const Cards21: React.FC<ILevoBlockBaseProps<ICards21Content>> = () => {
   const [search, setSearch] = useState("");
   const setDebouncedSearchKey = useDebouncedCallback((v: string) => {
     if (v) {
-      setQuery({ search: v, page: 1 });
+      setQuery({ related: v, page: 1 });
       return;
     }
     setQuery({
-      search: undefined,
+      related: undefined,
       page: 1,
     });
   }, 1000);
@@ -62,14 +62,14 @@ const Cards21: React.FC<ILevoBlockBaseProps<ICards21Content>> = () => {
                   fontSize: "1.125rem",
                   color: "var(--color-text-1)",
                   borderColor: "var(--color-border)",
-                  borderRadius: "99px"
-                }
+                  borderRadius: "99px",
+                },
               }}
               leftIconBoxProps={{
                 style: {
                   width: "unset",
-                  paddingLeft: "1.25rem"
-                }
+                  paddingLeft: "1.25rem",
+                },
               }}
             />
           </Box>

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

@@ -26,7 +26,7 @@ const Carousel1: React.FC<ILevoBlockBaseProps<ICarousel1Content>> = ({ content }
         elementKey="carousel_1_levoGroup"
         data-levo_group
         opts={{
-          watchDrag: false,
+          watchDrag: true,
           watchResize: true,
           watchSlides: true,
         }}
@@ -52,7 +52,7 @@ const Carousel1: React.FC<ILevoBlockBaseProps<ICarousel1Content>> = ({ content }
         elementKey="carousel_2_levoGroup"
         data-levo_group
         opts={{
-          watchDrag: false,
+          watchDrag: true,
           watchResize: true,
           watchSlides: true,
         }}

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

@@ -0,0 +1,477 @@
+import type { IBlock } from "@levo-so/studio";
+
+const CALENDAR_ICON_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><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)"/><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)"/><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)"/><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)"/></svg>';
+
+const TAG_ICON_SVG =
+  '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 12.75L12 20.25L21 11.25V3.75H13.5L4.5 12.75Z" stroke="var(--color-icon-primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.25 8.25C17.6642 8.25 18 7.91421 18 7.5C18 7.08579 17.6642 6.75 17.25 6.75C16.8358 6.75 16.5 7.08579 16.5 7.5C16.5 7.91421 16.8358 8.25 17.25 8.25Z" fill="var(--color-icon-primary)"/></svg>';
+
+const DEFAULT_ITEM = (id: string, overrides: Record<string, any> = {}) => ({
+  id,
+  eventWrapper: null,
+  image: {
+    id: "ecom1_placeholder",
+    kind: "image",
+    location: "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg",
+    mimetype: "image/jpeg",
+    srcset: {
+      "320w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=320",
+      "640w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640",
+      "750w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=750",
+      "828w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=828",
+      "1080w":
+        "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=1080",
+      path: "https://images.pexels.com/photos/3938022/pexels-photo-3938022.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&w=640 640w",
+    },
+  },
+  "text-wrapper": null,
+  "text-container": null,
+  "caption-text": "Health Package",
+  "date-wrapper": null,
+  "date-icon": {
+    kind: "icon",
+    data: {
+      id: "tag-1",
+      label: "Tag",
+      svgCode: TAG_ICON_SVG,
+    },
+  },
+  "publishedAt-header": "₹4,000",
+  "author-wrapper": null,
+  "author-image": {
+    kind: "icon",
+    data: {
+      id: "calendar-1",
+      label: "Calendar 1",
+      svgCode: CALENDAR_ICON_SVG,
+    },
+  },
+  "author-info-wrapper": null,
+  "author-name": "Newborns 24-72 hours",
+  title: "New Born Screening Extended",
+  description:
+    "Comprehensive heel-prick blood spot test for 50+ treatable conditions including thyroid issues, metabolic disorders, and more.",
+  publishedAt: "",
+  cta: "Add to cart",
+  ...overrides,
+});
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "header-container": null,
+  title: "Available Tests & Packages",
+  "cta-button": "View all",
+  events: [DEFAULT_ITEM("test-item-1"), DEFAULT_ITEM("test-item-2"), DEFAULT_ITEM("test-item-3")],
+  paginationWrapper: null,
+  paginationLeftButton: "Previous",
+  paginationText: "",
+  paginationRightButton: "Next",
+  cart_key: "levo_cart_collectiona",
+};
+
+export type IEcommerce1Content = typeof DEFAULT_CONTENT;
+
+export const Ecommerce1: IBlock = {
+  category_id: "ecommerce",
+  title: "Ecommerce 1",
+  key: "ecommerce-1",
+  version: "v1",
+  prompt_description:
+    "Product/test listing with price, add-to-cart functionality, and search. Items are stored in localStorage cart.",
+  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: "Section headline for the product/test listing.",
+        min_characters: 5,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "cta-button",
+      label: "Header CTA Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description: "Secondary action button next to the heading.",
+        min_characters: 4,
+        max_characters: 20,
+      },
+    },
+    { key: "search-container", label: "Search Container", field_interface: "BoxWidget" },
+    { key: "search-input-box", label: "Search Input Box", field_interface: "BoxWidget" },
+    {
+      key: "events",
+      label: "Products",
+      kind: "group",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Grid of product/test cards each with image, price, name, and add-to-cart button.",
+        min_items: 3,
+        max_items: 6,
+      },
+      fields: [
+        { key: "id", label: "Item ID (Internal)", field_interface: "TypographyWidget" },
+        { key: "eventWrapper", label: "Card Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "image",
+          label: "Product Image",
+          field_interface: "ImageWidget",
+          hint: {
+            prompt_description: "Product or test cover image.",
+            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: "Price Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "date-icon",
+          label: "Price Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description: "Icon next to the price.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+
+        {
+          key: "publishedAt-header",
+          label: "Price",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description: "Product price displayed prominently.",
+            min_characters: 2,
+            max_characters: 20,
+          },
+        },
+        { key: "author-wrapper", label: "Meta Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "author-image",
+          label: "Meta Icon",
+          field_interface: "IconWidget",
+          hint: {
+            prompt_description: "Small icon for meta info.",
+            orientation: "square",
+            size: "icon",
+            usecase: "icon",
+          },
+        },
+        { key: "author-info-wrapper", label: "Meta Info Wrapper", field_interface: "BoxWidget" },
+        {
+          key: "author-name",
+          label: "Age Group / Meta",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description: "Age group or other meta text about the product.",
+            min_characters: 3,
+            max_characters: 60,
+          },
+        },
+        { key: "content-container", label: "Content Container", field_interface: "BoxWidget" },
+        {
+          key: "title",
+          label: "Product Name",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description: "Product or test name.",
+            min_characters: 5,
+            max_characters: 80,
+          },
+        },
+        {
+          key: "description",
+          label: "Product Description",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description: "Short description of the product.",
+            min_characters: 20,
+            max_characters: 160,
+          },
+        },
+        {
+          key: "publishedAt",
+          label: "Additional Info",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description: "Extra info (hidden by default).",
+            min_characters: 0,
+            max_characters: 40,
+          },
+        },
+        {
+          key: "cta_wrapper",
+          label: "CTA Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description: "Wrapper for CTA and View Details button.",
+          },
+        },
+
+        {
+          key: "cta",
+          label: "Add to Cart CTA",
+          field_interface: "ButtonWidget",
+          hint: {
+            prompt_description: "Button to  add product to cart. Default: 'Add to cart'.",
+            min_characters: 5,
+            max_characters: 20,
+          },
+        },
+        {
+          key: "view_details",
+          label: "View Details Button",
+          field_interface: "ButtonWidget",
+        },
+      ],
+    },
+    { key: "paginationWrapper", label: "Pagination Wrapper", field_interface: "BoxWidget" },
+    {
+      key: "paginationLeftButton",
+      label: "Pagination Left Button",
+      field_interface: "ButtonWidget",
+      hint: { min_characters: 4, max_characters: 12 },
+    },
+    { key: "paginationText", label: "Pagination Text", field_interface: "TypographyWidget" },
+    {
+      key: "paginationRightButton",
+      label: "Pagination Right Button",
+      field_interface: "ButtonWidget",
+      hint: { min_characters: 4, max_characters: 12 },
+    },
+    {
+      key: "cart_key",
+      label: "Cart Storage Key",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Unique key for local storage to separate different carts.",
+        min_characters: 3,
+        max_characters: 50,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-left": "5xl",
+          "padding-right": "5xl",
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          tablet: {
+            "padding-left": "3xl",
+            "padding-right": "3xl",
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+          },
+          mobile: {
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+          },
+        },
+        container: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "2xl",
+        },
+        "header-container": {
+          display: "flex",
+          width: "100%",
+          "justify-content": "space-between",
+          "align-items": "center",
+          "margin-bottom": "xl",
+          "column-gap": "xl",
+          mobile: {
+            "flex-direction": "column",
+            "align-items": "flex-start",
+            "row-gap": "md",
+          },
+        },
+        title: {
+          color: "var(--color-text-1)",
+          margin: "0",
+        },
+        "cta-button": {
+          "text-decoration": "none",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+          "font-weight": 500,
+        },
+        "search-container": {
+          "max-width": "80%",
+          "margin-right": "auto",
+          "margin-left": "auto",
+          width: "100%",
+          tablet: {
+            "max-width": "none",
+          },
+        },
+        events_levoGroup: {
+          display: "grid",
+          width: "100%",
+          "grid-template-columns": "repeat(3, minmax(0, 1fr))",
+          "row-gap": "xl",
+          "column-gap": "xl",
+          tablet: {
+            "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+            "column-gap": "lg",
+          },
+          mobile: {
+            "grid-template-columns": "repeat(1, 1fr)",
+            "row-gap": "lg",
+          },
+        },
+        events_levoGroupItem: {
+          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",
+            display: "flex",
+            "flex-direction": "column",
+            height: "100%",
+            "background-color": "var(--color-card, var(--color-background))",
+          },
+          image: {
+            width: "100%",
+            "aspect-ratio": "3 / 2",
+            "object-fit": "cover",
+          },
+          "text-wrapper": {
+            "padding-left": "none",
+            "padding-top": "none",
+            "padding-right": "none",
+            "padding-bottom": "xl",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "lg",
+            flex: "1",
+          },
+          "text-container": {
+            display: "none",
+            "flex-direction": "column",
+            "justify-content": "space-between",
+            "column-gap": "md",
+            "padding-top": "md",
+            "padding-bottom": "md",
+            "padding-left": "xl",
+            "padding-right": "xl",
+            "border-bottom": "1px solid var(--color-border)",
+            gap: "base",
+          },
+          "caption-text": {
+            display: "none",
+          },
+          "date-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+          },
+          "date-icon": {
+            width: "20px",
+            height: "20px",
+            "flex-shrink": "0",
+          },
+          "publishedAt-header": {
+            "font-size": "sm",
+            color: "var(--color-brand)",
+            "font-weight": 700,
+          },
+          "author-wrapper": {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+          },
+          "author-image": {
+            width: "20px",
+            height: "20px",
+            "flex-shrink": "0",
+          },
+          "author-name": {
+            "font-size": "sm",
+            "font-weight": 500,
+            color: "var(--color-text-2)",
+          },
+          title: {
+            "font-weight": 600,
+            "font-size": "base",
+            color: "var(--color-text-1)",
+            "line-height": "1.35",
+          },
+          description: {
+            overflow: "hidden",
+            display: "-webkit-box",
+            "-webkit-box-orient": "vertical",
+            "-webkit-line-clamp": "2",
+            color: "var(--color-text-2)",
+            "line-height": 1.5,
+          },
+          publishedAt: {
+            color: "var(--color-text-1)",
+            "font-size": "xl",
+            "font-weight": 700,
+          },
+          cta: {},
+          "content-container": {
+            "padding-left": "xl",
+            "padding-right": "xl",
+            display: "flex",
+            "flex-direction": "column",
+            "row-gap": "md",
+            flex: "1",
+            "padding-top": "3xl",
+          },
+        },
+        events: [],
+        paginationWrapper: {
+          width: "100%",
+          display: "flex",
+          "justify-content": "center",
+          "column-gap": "lg",
+          "align-items": "center",
+        },
+        paginationLeftButton: {},
+        paginationText: {
+          color: "var(--color-text-1)",
+        },
+        paginationRightButton: {},
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          selectedVariants: { Heading_Level: "H2" },
+          heading: { level: 2 },
+        },
+        "cta-button": {
+          selectedVariants: { Button_Variants: "Secondary" },
+        },
+        events_levoGroupItem: {
+          cta: {
+            selectedVariants: { Button_Variants: "Primary" },
+          },
+        },
+      },
+    },
+  ],
+};