@levo-so/blocks 0.1.52 → 0.1.58

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

@@ -0,0 +1,125 @@
+import {
+  type ILevoBlockBaseProps,
+  Button,
+  Heading,
+  Image,
+  Typography,
+  Container,
+  Section,
+  Box,
+} from "@levo-so/studio";
+
+import type { IProductsListing3Content } from "./products-listing-3.schema";
+
+const ProductsListing3: React.FC<
+  ILevoBlockBaseProps<IProductsListing3Content>
+> = ({ content }) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="header_container">
+        <Heading elementKey="title" />
+        <Button elementKey="header_cta" />
+      </Box>
+      <Box data-levo_group elementKey="product_groups_levoGroup">
+        {(content?.product_groups ?? []).map((_, groupIndex) => (
+          <Box
+            key={groupIndex}
+            elementKey={`product_groups.${groupIndex}.groups_container`}
+          >
+            <Box
+              data-levo_group
+              elementKey={`product_groups.${groupIndex}.products_with_images_levoGroup`}
+            >
+              {(
+                content.product_groups?.[groupIndex]?.products_with_images ?? []
+              ).map((_, index) => (
+                <Box
+                  data-levo_group_item
+                  elementKey={`product_groups.${groupIndex}.products_with_images.${index}.card`}
+                  key={index}
+                >
+                  <Image
+                    alt="product image"
+                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.image`}
+                    width={400}
+                    height={400}
+                  />
+                  <Box
+                    elementKey={`product_groups.${groupIndex}.products_with_images.${index}.content_wrapper`}
+                  >
+                    <Heading
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.title`}
+                    />
+                    <Typography
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.description`}
+                    />
+                    <Box
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.price_container`}
+                    >
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.actual_price`}
+                      />
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.discount_price`}
+                      />
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_with_images.${index}.off_percent`}
+                      />
+                    </Box>
+                    <Button
+                      elementKey={`product_groups.${groupIndex}.products_with_images.${index}.cta`}
+                    />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+            <Box
+              data-levo_group
+              elementKey={`product_groups.${groupIndex}.products_without_images_levoGroup`}
+            >
+              {(
+                content.product_groups?.[groupIndex]?.products_without_images ??
+                []
+              ).map((_, index) => (
+                <Box
+                  data-levo_group_item
+                  elementKey={`product_groups.${groupIndex}.products_without_images.${index}.card`}
+                  key={index}
+                >
+                  <Box
+                    elementKey={`product_groups.${groupIndex}.products_without_images.${index}.content_wrapper`}
+                  >
+                    <Heading
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.title`}
+                    />
+                    <Typography
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.description`}
+                    />
+                    <Box
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.price_container`}
+                    >
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.actual_price`}
+                      />
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.discount_price`}
+                      />
+                      <Typography
+                        elementKey={`product_groups.${groupIndex}.products_without_images.${index}.off_percent`}
+                      />
+                    </Box>
+                    <Button
+                      elementKey={`product_groups.${groupIndex}.products_without_images.${index}.cta`}
+                    />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default ProductsListing3;

package/src/blocks/profile/profile-2.schema.ts

@@ -0,0 +1,505 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DEFAULT_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",
+  },
+};
+
+const DUMMY_ICON = {
+  kind: "icon",
+  data: {
+    id: "star",
+    label: "Star",
+    tags: ["custom", "directional", "star", "support-like-question"],
+    svgCode:
+      '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M17.6601 22.6701C17.1301 22.6701 16.4501 22.5001 15.6001 22.0001L12.6101 20.2301C12.3001 20.0501 11.7001 20.0501 11.4001 20.2301L8.40012 22.0001C6.63012 23.0501 5.59012 22.6301 5.12012 22.2901C4.66012 21.9501 3.94012 21.0801 4.41012 19.0801L5.12012 16.0101C5.20012 15.6901 5.04012 15.1401 4.80012 14.9001L2.32012 12.4201C1.08012 11.1801 1.18012 10.1201 1.35012 9.60007C1.52012 9.08007 2.06012 8.16007 3.78012 7.87007L6.97012 7.34007C7.27012 7.29007 7.70012 6.97007 7.83012 6.70007L9.60012 3.17007C10.4001 1.56007 11.4501 1.32007 12.0001 1.32007C12.5501 1.32007 13.6001 1.56007 14.4001 3.17007L16.1601 6.69007C16.3001 6.96007 16.7301 7.28007 17.0301 7.33007L20.2201 7.86007C21.9501 8.15007 22.4901 9.07007 22.6501 9.59007C22.8101 10.1101 22.9101 11.1701 21.6801 12.4101L19.2001 14.9001C18.9601 15.1401 18.8101 15.6801 18.8801 16.0101L19.5901 19.0801C20.0501 21.0801 19.3401 21.9501 18.8801 22.2901C18.6301 22.4701 18.2301 22.6701 17.6601 22.6701ZM12.0001 18.5901C12.4901 18.5901 12.9801 18.7101 13.3701 18.9401L16.3601 20.7101C17.2301 21.2301 17.7801 21.2301 17.9901 21.0801C18.2001 20.9301 18.3501 20.4001 18.1301 19.4201L17.4201 16.3501C17.2301 15.5201 17.5401 14.4501 18.1401 13.8401L20.6201 11.3601C21.1101 10.8701 21.3301 10.3901 21.2301 10.0601C21.1201 9.73007 20.6601 9.46007 19.9801 9.35007L16.7901 8.82007C16.0201 8.69007 15.1801 8.07007 14.8301 7.37007L13.0701 3.85007C12.7501 3.21007 12.3501 2.83007 12.0001 2.83007C11.6501 2.83007 11.2501 3.21007 10.9401 3.85007L9.17012 7.37007C8.82012 8.07007 7.98012 8.69007 7.21012 8.82007L4.03012 9.35007C3.35012 9.46007 2.89012 9.73007 2.78012 10.0601C2.67012 10.3901 2.90012 10.8801 3.39012 11.3601L5.87012 13.8401C6.47012 14.4401 6.78012 15.5201 6.59012 16.3501L5.88012 19.4201C5.65012 20.4101 5.81012 20.9301 6.02012 21.0801C6.23012 21.2301 6.77012 21.2201 7.65012 20.7101L10.6401 18.9401C11.0201 18.7101 11.5101 18.5901 12.0001 18.5901Z" fill="var(--color-icon-primary)"/>\n</svg>',
+  },
+};
+
+const DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  main_wrapper: null,
+  left_container: null,
+  profile_image: DEFAULT_IMAGE,
+  right_container: null,
+  content_wrapper: null,
+  title: "Well Women Health checkup",
+  stats: [
+    {
+      stat_wrapper: null,
+      icon: DUMMY_ICON,
+      label: "<p>4.5 (236 reviews on Google)</p>",
+    },
+    {
+      stat_wrapper: null,
+      icon: DUMMY_ICON,
+      label: "<p>4.5 (236 reviews on Google)</p>",
+    },
+    {
+      stat_wrapper: null,
+      icon: DUMMY_ICON,
+      label: "<p>4.5 (236 reviews on Google)</p>",
+    },
+    {
+      stat_wrapper: null,
+      icon: DUMMY_ICON,
+      label: "<p>4.5 (236 reviews on Google)</p>",
+    },
+  ],
+  price_container: null,
+  actual_price: "$499",
+  discount_price: "$999",
+  off_percent: "50% OFF",
+  breadcrumbs: [
+    {
+      label: "<p>Home</p>",
+      icon: {
+        kind: "icon",
+        data: {
+          id: "arrow-right-3",
+          label: "Arrow Right 3",
+          tags: ["arrow", "custom", "directional", "right"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.90961 20.67C8.71961 20.67 8.52961 20.6 8.37961 20.45C8.08961 20.16 8.08961 19.68 8.37961 19.39L14.8996 12.87C15.3796 12.39 15.3796 11.61 14.8996 11.13L8.37961 4.61002C8.08961 4.32002 8.08961 3.84002 8.37961 3.55002C8.66961 3.26002 9.14961 3.26002 9.43961 3.55002L15.9596 10.07C16.4696 10.58 16.7596 11.27 16.7596 12C16.7596 12.73 16.4796 13.42 15.9596 13.93L9.43961 20.45C9.28961 20.59 9.09961 20.67 8.90961 20.67Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+    {
+      label: "<p>Test</p>",
+      icon: {
+        kind: "icon",
+        data: {
+          id: "arrow-right-3",
+          label: "Arrow Right 3",
+          tags: ["arrow", "custom", "directional", "right"],
+          svgCode:
+            '<svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.90961 20.67C8.71961 20.67 8.52961 20.6 8.37961 20.45C8.08961 20.16 8.08961 19.68 8.37961 19.39L14.8996 12.87C15.3796 12.39 15.3796 11.61 14.8996 11.13L8.37961 4.61002C8.08961 4.32002 8.08961 3.84002 8.37961 3.55002C8.66961 3.26002 9.14961 3.26002 9.43961 3.55002L15.9596 10.07C16.4696 10.58 16.7596 11.27 16.7596 12C16.7596 12.73 16.4796 13.42 15.9596 13.93L9.43961 20.45C9.28961 20.59 9.09961 20.67 8.90961 20.67Z" fill="var(--color-icon-primary)"/>\n</svg>',
+        },
+      },
+    },
+    {
+      label: "<p>Wellness</p>",
+      icon: null,
+    },
+  ],
+};
+
+export type IProfile2Content = typeof DEFAULT_CONTENT;
+
+export const Profile2: IBlock = {
+  category_id: "profile",
+  title: "Profile 2",
+  key: "profile-2",
+  version: "v1",
+  prompt_description:
+    "Two-column profile layout with left side image and right side content including title, expertise badges with icons, and pricing information.",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Overall profile section layout controlling spacing, background, and structure for the two-column layout.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Main container for centering and constraining the profile section content width.",
+      },
+    },
+    {
+      key: "breadcrumbs",
+      label: "Breadcrumbs",
+      field_interface: "BoxWidget",
+      kind: "group",
+      fields: [
+        {
+          key: "wrapper",
+          label: " Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual badge container with proper alignment for icon and label.",
+          },
+        },
+        {
+          key: "label",
+          label: "Label",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Descriptive text explaining the expertise area or specialization (e.g., 'Strategic Planning Expert').",
+            min_characters: 10,
+            max_characters: 40,
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+      ],
+    },
+    {
+      key: "main_wrapper",
+      label: "Main Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Primary wrapper containing both left image and right content sections in a flex row layout.",
+      },
+    },
+    {
+      key: "left_container",
+      label: "Left Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Left side container holding the profile image with appropriate sizing and positioning.",
+      },
+    },
+    {
+      key: "profile_image",
+      label: "Profile Image",
+      field_interface: "ImageWidget",
+      hint: {
+        prompt_description:
+          "Professional profile or business image that represents the individual or service being showcased.",
+      },
+    },
+    {
+      key: "right_container",
+      label: "Right Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Right side container holding the main content including title, expertise badges, and pricing information.",
+      },
+    },
+    {
+      key: "content_wrapper",
+      label: "Content Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Wrapper for the main content elements (title, stats, pricing) with proper vertical spacing.",
+      },
+    },
+    {
+      key: "title",
+      label: "Profile Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main profile headline that communicates the primary service or expertise. Should be professional and clear.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "stats",
+      label: "Expertise Badges",
+      field_interface: "BoxWidget",
+      kind: "group",
+      hint: {
+        prompt_description:
+          "Collection of expertise areas or specializations with icons that build credibility and showcase capabilities.",
+        min_items: 2,
+        max_items: 4,
+      },
+      fields: [
+        {
+          key: "stat_wrapper",
+          label: "Badge Wrapper",
+          field_interface: "BoxWidget",
+          hint: {
+            prompt_description:
+              "Individual badge container with proper alignment for icon and label.",
+          },
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          field_interface: "IconWidget",
+        },
+        {
+          key: "label",
+          label: "Badge Label",
+          field_interface: "TypographyWidget",
+          hint: {
+            prompt_description:
+              "Descriptive text explaining the expertise area or specialization (e.g., 'Strategic Planning Expert').",
+            min_characters: 10,
+            max_characters: 40,
+          },
+        },
+      ],
+    },
+    {
+      key: "price_container",
+      label: "Price Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for pricing information displaying actual price, discount price, and savings percentage.",
+      },
+    },
+    {
+      key: "actual_price",
+      label: "Actual Price",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Current promotional price that customers will pay (e.g., '$499').",
+      },
+    },
+    {
+      key: "discount_price",
+      label: "Discount Price",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Original price before discount to show value (e.g., '$999').",
+      },
+    },
+    {
+      key: "off_percent",
+      label: "Off Percent",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Discount percentage highlighting the savings (e.g., '50% OFF').",
+      },
+    },
+  ],
+  layouts: [
+    {
+      title: "Default",
+      key: "default",
+      styles: {
+        layout: {
+          "padding-top": "5xl",
+          "padding-bottom": "5xl",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          tablet: {
+            "padding-top": "4xl",
+            "padding-bottom": "4xl",
+            "padding-left": "lg",
+            "padding-right": "lg",
+          },
+          mobile: {
+            "padding-top": "3xl",
+            "padding-bottom": "3xl",
+            "padding-left": "base",
+            "padding-right": "base",
+          },
+          "background-color": "oklch(0.9413 0.0138 46.228)",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        main_wrapper: {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "4xl",
+          tablet: {
+            "column-gap": "3xl",
+          },
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "3xl",
+          },
+        },
+        left_container: {
+          flex: "1",
+          "max-width": "250px",
+        },
+        profile_image: {
+          "aspect-ratio": "1/1",
+          "object-fit": "cover",
+          "border-radius": "base",
+        },
+        right_container: {
+          flex: "1",
+          display: "flex",
+          "flex-direction": "column",
+          "justify-content": "center",
+        },
+        content_wrapper: {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "lg",
+        },
+        title: {
+          "margin-bottom": "lg",
+          "font-size": "4xl",
+          tablet: {
+            "font-size": "2xl",
+          },
+        },
+        stats_levoGroup: {
+          display: "grid",
+          "flex-direction": "column",
+          "row-gap": "2xs",
+          "margin-bottom": "lg",
+          "grid-template-columns": "repeat(2, minmax(0, 1fr))",
+          "column-gap": "none",
+          width: "60%",
+          tablet: {
+            width: "100%",
+          },
+        },
+        price_container: {
+          display: "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "row-gap": "2xs",
+          "column-gap": "base",
+        },
+        actual_price: {
+          "font-size": "xl",
+          "font-weight": "700",
+          color: "text-1",
+        },
+        discount_price: {
+          "font-size": "sm",
+          color: "text-3",
+          "text-decoration": "line-through",
+        },
+        off_percent: {
+          "font-size": "sm",
+          "font-weight": "600",
+          color: "success",
+        },
+        stats: [
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+          {
+            stat_wrapper: {
+              display: "flex",
+              "align-items": "center",
+              "column-gap": "sm",
+            },
+            label: {
+              color: "text-2",
+            },
+          },
+        ],
+        breadcrumbs: [
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              "column-gap": "5xs",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              "column-gap": "5xs",
+            },
+          },
+          {
+            wrapper: {
+              display: "flex",
+              "justify-content": "start",
+              "align-items": "center",
+              "column-gap": "5xs",
+            },
+          },
+        ],
+        breadcrumbs_levoGroup: {
+          display: "flex",
+          "column-gap": "xs",
+          "margin-bottom": "base",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {
+        title: {
+          heading: {
+            level: 2,
+          },
+          selectedVariants: {
+            Heading_Level: "H2",
+          },
+        },
+      },
+    },
+  ],
+};

package/src/blocks/profile/profile-2.tsx

@@ -0,0 +1,64 @@
+import {
+  Box,
+  Button,
+  Container,
+  Heading,
+  Image,
+  type ILevoBlockBaseProps,
+  Section,
+  Typography,
+  Icon,
+} from "@levo-so/studio";
+import React from "react";
+
+import type { IProfile2Content } from "./profile-2.schema";
+
+const Profile2: React.FC<ILevoBlockBaseProps<IProfile2Content>> = ({
+  content,
+}) => (
+  <Section elementKey="layout">
+    <Container elementKey="container">
+      <Box elementKey="breadcrumbs_levoGroup" data-levo_group>
+        {(content?.breadcrumbs ?? []).map((_: any, index: number) => (
+          <Box
+            key={`stat-${index}`}
+            data-levo_group_item
+            elementKey={`breadcrumbs.${index}.wrapper`}
+          >
+            <Typography elementKey={`breadcrumbs.${index}.label`} />
+            <Icon elementKey={`breadcrumbs.${index}.icon`} />
+          </Box>
+        ))}
+      </Box>
+      <Box elementKey="main_wrapper">
+        <Box elementKey="left_container">
+          <Image elementKey="profile_image" alt="Profile image" />
+        </Box>
+        <Box elementKey="right_container">
+          <Box elementKey="content_wrapper">
+            <Heading elementKey="title" />
+            <Box elementKey="stats_levoGroup" data-levo_group>
+              {(content?.stats ?? []).map((_, index: number) => (
+                <Box
+                  key={`stat-${index}`}
+                  data-levo_group_item
+                  elementKey={`stats.${index}.stat_wrapper`}
+                >
+                  <Icon elementKey={`stats.${index}.icon`} />
+                  <Typography elementKey={`stats.${index}.label`} />
+                </Box>
+              ))}
+            </Box>
+            <Box elementKey="price_container">
+              <Typography elementKey="actual_price" />
+              <Typography elementKey="discount_price" />
+              <Typography elementKey="off_percent" />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  </Section>
+);
+
+export default Profile2;