@levo-so/blocks 0.1.101 → 0.1.103

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" },
+          },
+        },
+      },
+    },
+  ],
+};