@levo-so/blocks 0.1.0 → 0.1.2

package/src/blocks/event/event-details.schema.ts

@@ -0,0 +1,737 @@
+import type { IBlock } from "@levo-so/studio";
+
+const DUMMY_IMAGE = {
+  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 DEFAULT_CONTENT = {
+  layout: null,
+  container: null,
+  "main-wrapper": null,
+  "hero-card": null,
+  "hero-image": {
+    id: "event-hero-image",
+    location:
+      "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop",
+    kind: "image",
+    mimetype: "image/jpeg",
+    srcset: {
+      "320w":
+        "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=320&h=200&fit=crop",
+      "640w":
+        "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=640&h=320&fit=crop",
+      "800w":
+        "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop",
+      "1200w":
+        "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&h=600&fit=crop",
+      path: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=320&h=200&fit=crop 320w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=640&h=320&fit=crop 640w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop 800w, https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&h=600&fit=crop 1200w",
+    },
+  },
+  "hero-content": null,
+  title: "Annual Technology Summit 2024",
+  "event-info": null,
+  "start-date-wrapper": null,
+  "date-icon": DUMMY_IMAGE,
+  "start-date": "March 15, 2024",
+  "end-date-wrapper": null,
+  "end-date-icon": DUMMY_IMAGE,
+  "end-date": "March 15, 2024",
+  "time-wrapper": null,
+  "time-icon": DUMMY_IMAGE,
+  "time-range": "09:00 AM - 05:00 PM",
+  "kind-wrapper": null,
+  "kind-icon": DUMMY_IMAGE,
+  kind: "Conference",
+  "timing-wrapper": null,
+  "timing-icon": DUMMY_IMAGE,
+  timing: "Full Day",
+  "content-section": null,
+  "main-content": null,
+  "register-button": "Register Now",
+  "registration-ended": "The registration for this event has ended.",
+  event: null,
+  description:
+    "Join us for an exciting day of technology insights, networking opportunities, and industry expertise. Our annual summit brings together thought leaders, innovators, and professionals to explore the latest trends in digital transformation, artificial intelligence, and emerging technologies. Experience keynote presentations, interactive workshops, and valuable networking sessions designed to accelerate your professional growth.",
+  "contact-sidebar": null,
+  "contact-card": null,
+  "contact-title": "Event Contact",
+  "contact-details": null,
+  "name-field": null,
+  "name-label": "Name:",
+  "name-value": "Sarah Johnson",
+  "email-field": null,
+  "email-label": "Email:",
+  "email-value": "events@techsummit.com",
+  "phone-field": null,
+  "phone-label": "Phone:",
+  "phone-value": "+1 (555) 123-4567",
+  starts_at: "2024-03-15T09:00:00Z",
+  ends_at: "2024-03-15T17:00:00Z",
+};
+
+export type IEventDetailsContent = typeof DEFAULT_CONTENT & {
+  event?: {
+    ends_at?: string;
+    [key: string]: unknown;
+  } | null;
+  starts_at?: string;
+  ends_at?: string;
+  kind?: string;
+  timing?: string;
+};
+
+export const EventDetails: IBlock = {
+  category_id: "event",
+  title: "Event Details",
+  key: "event-details",
+  version: "v1",
+  prompt_description:
+    "Detailed event page featuring hero image, event information, registration button, event description, and contact details sidebar",
+  content_schema: [
+    {
+      key: "layout",
+      label: "Layout",
+      field_interface: "LayoutWidget",
+      hint: {
+        prompt_description:
+          "Defines the overall structure and layout of the Event Details block. No content generation required.",
+      },
+    },
+    {
+      key: "container",
+      label: "Container",
+      field_interface: "ContainerWidget",
+      hint: {
+        prompt_description:
+          "Contains the whole Event Details section, providing spacing and alignment. No content generation required.",
+      },
+    },
+    {
+      key: "main-wrapper",
+      label: "Main Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main container wrapping all event details content. No content generation required.",
+      },
+    },
+    {
+      key: "hero-card",
+      label: "Hero Card",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Card container for the hero section with image and basic event info. No content generation required.",
+      },
+    },
+    {
+      key: "hero-image",
+      label: "Hero Image",
+      field_interface: "ImageWidget",
+      hint: {
+        prompt_description:
+          "Main event cover image showcasing the event theme or venue.",
+      },
+    },
+    {
+      key: "hero-content",
+      label: "Hero Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for hero text content including title and event info. No content generation required.",
+      },
+    },
+    {
+      key: "title",
+      label: "Event Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Main event title that clearly describes the event name and purpose.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "event-info",
+      label: "Event Info Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for event metadata like date, time, type. No content generation required.",
+      },
+    },
+    {
+      key: "start-date-wrapper",
+      label: "Start Date Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for start date information. No content generation required.",
+      },
+    },
+    {
+      key: "date-icon",
+      label: "Date Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing date/calendar information.",
+      },
+    },
+    {
+      key: "starts_at",
+      label: "Start Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event start date in readable format.",
+      },
+    },
+    {
+      key: "end-date-wrapper",
+      label: "End Date Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for end date information. No content generation required.",
+      },
+    },
+    {
+      key: "end-date-icon",
+      label: "End Date Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing end date/calendar information.",
+      },
+    },
+    {
+      key: "ends_at",
+      label: "End Date",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event end date in readable format.",
+      },
+    },
+    {
+      key: "time-wrapper",
+      label: "Time Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for time range information. No content generation required.",
+      },
+    },
+    {
+      key: "time-icon",
+      label: "Time Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing time/clock information.",
+      },
+    },
+    {
+      key: "time-range",
+      label: "Time Range",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Event time range from start to end time.",
+      },
+    },
+    {
+      key: "kind-wrapper",
+      label: "Kind Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for event kind information. No content generation required.",
+      },
+    },
+    {
+      key: "kind-icon",
+      label: "Kind Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing event type/kind.",
+      },
+    },
+    {
+      key: "kind",
+      label: "Event Kind",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Type or category of the event (e.g., Conference, Workshop).",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "timing-wrapper",
+      label: "Timing Wrapper",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for event timing information. No content generation required.",
+      },
+    },
+    {
+      key: "timing-icon",
+      label: "Timing Icon",
+      field_interface: "IconWidget",
+      hint: {
+        prompt_description: "Icon representing event duration/timing.",
+      },
+    },
+    {
+      key: "timing",
+      label: "Event Timing",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Duration or timing description of the event (e.g., Full Day, Half Day).",
+        min_characters: 5,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "content-section",
+      label: "Content Section",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Main content area containing description and contact sidebar. No content generation required.",
+      },
+    },
+    {
+      key: "main-content",
+      label: "Main Content",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Primary content area with registration button and description. No content generation required.",
+      },
+    },
+    {
+      key: "register-button",
+      label: "Registration Button",
+      field_interface: "ButtonWidget",
+      hint: {
+        prompt_description:
+          "Call-to-action button for event registration. Should be compelling and action-oriented.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "registration-ended",
+      label: "Registration Ended Message",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Message shown when event registration has ended.",
+        min_characters: 20,
+        max_characters: 60,
+      },
+    },
+    {
+      key: "event",
+      label: "Event Object",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Event data object for registration logic. No content generation required.",
+      },
+    },
+    {
+      key: "description",
+      label: "Event Description",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Detailed event description explaining what attendees can expect, key highlights, and benefits of attending.",
+        min_characters: 150,
+        max_characters: 400,
+      },
+    },
+    {
+      key: "contact-sidebar",
+      label: "Contact Sidebar",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Sidebar container for contact information. No content generation required.",
+      },
+    },
+    {
+      key: "contact-card",
+      label: "Contact Card",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Card containing contact details for the event. No content generation required.",
+      },
+    },
+    {
+      key: "contact-title",
+      label: "Contact Title",
+      field_interface: "HeadingWidget",
+      hint: {
+        prompt_description:
+          "Title for the contact section, typically 'Contact Us' or 'Event Contact'.",
+        min_characters: 8,
+        max_characters: 20,
+      },
+    },
+    {
+      key: "contact-details",
+      label: "Contact Details Container",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for all contact detail fields. No content generation required.",
+      },
+    },
+    {
+      key: "name-field",
+      label: "Name Field",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for contact person name field. No content generation required.",
+      },
+    },
+    {
+      key: "name-label",
+      label: "Name Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Label for contact person name, typically 'Name:'.",
+      },
+    },
+    {
+      key: "name-value",
+      label: "Contact Name",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Name of the event contact person or organizer.",
+        min_characters: 10,
+        max_characters: 30,
+      },
+    },
+    {
+      key: "email-field",
+      label: "Email Field",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for email contact field. No content generation required.",
+      },
+    },
+    {
+      key: "email-label",
+      label: "Email Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Label for email contact, typically 'Email:'.",
+      },
+    },
+    {
+      key: "email-value",
+      label: "Contact Email",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Professional email address for event inquiries and contact.",
+        min_characters: 15,
+        max_characters: 40,
+      },
+    },
+    {
+      key: "phone-field",
+      label: "Phone Field",
+      field_interface: "BoxWidget",
+      hint: {
+        prompt_description:
+          "Container for phone contact field. No content generation required.",
+      },
+    },
+    {
+      key: "phone-label",
+      label: "Phone Label",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description: "Label for phone contact, typically 'Phone:'.",
+      },
+    },
+    {
+      key: "phone-value",
+      label: "Contact Phone",
+      field_interface: "TypographyWidget",
+      hint: {
+        prompt_description:
+          "Professional phone number for event inquiries and contact.",
+        min_characters: 12,
+        max_characters: 20,
+      },
+    },
+  ],
+  layouts: [
+    {
+      key: "default",
+      title: "Default",
+      styles: {
+        layout: {
+          "padding-top": "3xl",
+          "padding-bottom": "3xl",
+          "padding-left": "base",
+          "padding-right": "base",
+        },
+        container: {
+          "max-width": "1280px",
+          "margin-left": "auto",
+          "margin-right": "auto",
+        },
+        "main-wrapper": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+        },
+        "hero-card": {
+          display: "flex",
+          "flex-direction": "column",
+          "border-radius": "16px",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          overflow: "hidden",
+        },
+        "hero-image": {
+          width: "100%",
+          height: "400px",
+          "object-fit": "cover",
+          mobile: {
+            height: "250px",
+          },
+        },
+        "hero-content": {
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        title: {
+          "font-size": "2xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "base",
+          mobile: {
+            "font-size": "xl",
+          },
+        },
+        "event-info": {
+          display: "flex",
+          "flex-wrap": "wrap",
+          "column-gap": "base",
+          "row-gap": "sm",
+        },
+        "start-date-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "date-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "start-date": {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        starts_at: {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "end-date-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "end-date-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "end-date": {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        ends_at: {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "time-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "time-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        "time-range": {
+          "font-size": "sm",
+          color: "text-2",
+        },
+        "kind-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "kind-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        kind: {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "timing-wrapper": {
+          display: "flex",
+          "align-items": "center",
+          "column-gap": "xs",
+        },
+        "timing-icon": {
+          width: "16px",
+          height: "16px",
+        },
+        timing: {
+          "font-size": "sm",
+          color: "text-2",
+          "text-transform": "capitalize",
+        },
+        "content-section": {
+          display: "flex",
+          "column-gap": "2xl",
+          mobile: {
+            "flex-direction": "column",
+            "row-gap": "xl",
+          },
+        },
+        "main-content": {
+          "flex-basis": "66.67%",
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xl",
+          "border-radius": "16px",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+          mobile: {
+            "flex-basis": "100%",
+          },
+        },
+        "register-button": {
+          "background-color": "background-1",
+          color: "text-1",
+          "padding-top": "base",
+          "padding-bottom": "base",
+          "padding-left": "xl",
+          "padding-right": "xl",
+          "border-radius": "8px",
+          "font-weight": "600",
+          "align-self": "flex-start",
+        },
+        "registration-ended": {
+          "font-size": "base",
+          color: "text-2",
+          "padding-top": "base",
+          "padding-bottom": "base",
+        },
+        description: {
+          "font-size": "base",
+          color: "text-2",
+          "line-height": "1.6",
+        },
+        "contact-sidebar": {
+          "flex-basis": "33.33%",
+          mobile: {
+            "flex-basis": "100%",
+          },
+        },
+        "contact-card": {
+          "border-radius": "16px",
+          "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+          "padding-top": "lg",
+          "padding-bottom": "lg",
+          "padding-left": "lg",
+          "padding-right": "lg",
+        },
+        "contact-title": {
+          "font-size": "xl",
+          "font-weight": "700",
+          color: "text-1",
+          "margin-bottom": "base",
+        },
+        "contact-details": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "sm",
+        },
+        "name-field": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "name-label": {
+          "font-size": "base",
+          color: "text-2",
+        },
+        "name-value": {
+          "font-size": "base",
+          "font-weight": "500",
+          color: "text-1",
+        },
+        "email-field": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "email-label": {
+          "font-size": "base",
+          color: "text-2",
+        },
+        "email-value": {
+          "font-size": "base",
+          "font-weight": "500",
+          color: "text-1",
+        },
+        "phone-field": {
+          display: "flex",
+          "flex-direction": "column",
+          "row-gap": "xs",
+        },
+        "phone-label": {
+          "font-size": "base",
+          color: "text-2",
+        },
+        "phone-value": {
+          "font-size": "base",
+          "font-weight": "500",
+          color: "text-1",
+        },
+      },
+      content: DEFAULT_CONTENT,
+      config: {},
+    },
+  ],
+};