@upstart.gg/sdk 0.0.130 → 0.0.132

package/src/shared/bricks/manifests/html.manifest.ts

@@ -0,0 +1,127 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps } from "../props/helpers";
+import type { BrickProps } from "../props/types";
+import { BsCodeSquare } from "react-icons/bs";
+
+import { Type } from "@sinclair/typebox";
+
+export const manifest = defineBrickManifest({
+  type: "html",
+  name: "Html",
+  category: "widgets",
+  description:
+    "A flexible brick that accepts HTML content. Useful for embeding custom HTML or third-party widgets.",
+  aiInstructions:
+    "Use only this brick type when integrating third party widgets or custom HTML content. Most of the time, you should use other bricks that are more secure and easier to use.",
+  staticClasses: "self-stretch",
+  defaultWidth: {
+    mobile: "auto",
+    desktop: "300px",
+  },
+  icon: BsCodeSquare,
+  props: defineProps({
+    html: Type.String({
+      title: "HTML Content",
+      description: "The HTML content to render. Use with caution, as it can introduce security risks.",
+      default: "<div>Your HTML content here</div>",
+      "ui:placeholder": "<div>Your HTML content here</div>",
+      "ui:multiline": true,
+      metadata: {
+        category: "content",
+      },
+    }),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "A tally form",
+    type: "html",
+    props: {
+      html: '<iframe data-tally-src="https://tally.so/embed/wQZpd8?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="282" frameborder="0" marginheight="0" marginwidth="0" title="test"></iframe>',
+    },
+  },
+  {
+    description: "YouTube video embed",
+    type: "html",
+    props: {
+      html: '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>',
+    },
+  },
+  {
+    description: "Google Maps embed",
+    type: "html",
+    props: {
+      html: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.309059887159!2d-74.00849368459473!3d40.71278097932847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a165bedccab%3A0xa2008c34c27bfb67!2sWall%20St%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sus!4v1620000000000" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>',
+    },
+  },
+  {
+    description: "Twitter tweet embed",
+    type: "html",
+    props: {
+      html: '<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Just setting up my twttr</p>&mdash; Jack Dorsey (@jack) <a href="https://twitter.com/jack/status/20?ref_src=twsrc%5Etfw">March 21, 2006</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>',
+    },
+  },
+  {
+    description: "CodePen embed for code showcase",
+    type: "html",
+    props: {
+      html: '<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Example" src="https://codepen.io/team/codepen/embed/PNaGbb?height=300&theme-id=light&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>',
+    },
+  },
+  {
+    description: "Calendly scheduling widget",
+    type: "html",
+    props: {
+      html: '<div class="calendly-inline-widget" data-url="https://calendly.com/your-name/30min" style="min-width:320px;height:630px;"></div><script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>',
+    },
+  },
+  {
+    description: "Custom pricing table with CSS styling",
+    type: "html",
+    props: {
+      html: '<div style="display: flex; gap: 20px; justify-content: center;"><div style="border: 2px solid #e2e8f0; border-radius: 12px; padding: 24px; text-align: center; background: white;"><h3 style="margin: 0 0 16px; color: #1e293b;">Basic</h3><div style="font-size: 32px; font-weight: bold; color: #0ea5e9;">$9</div><p style="color: #64748b; margin: 8px 0 20px;">per month</p><ul style="list-style: none; padding: 0; margin: 0;"><li style="padding: 8px 0;">✓ 5 Projects</li><li style="padding: 8px 0;">✓ 10GB Storage</li><li style="padding: 8px 0;">✓ Email Support</li></ul></div></div>',
+    },
+  },
+  {
+    description: "Mailchimp newsletter signup form",
+    type: "html",
+    props: {
+      html: '<div id="mc_embed_signup"><form action="https://your-domain.us1.list-manage.com/subscribe/post?u=123456789&amp;id=abcdefghij" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><div class="mc-field-group"><label for="mce-EMAIL">Email Address</label><input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px;"></div><div id="mce-responses" class="clear"><div class="response" id="mce-error-response" style="display:none"></div><div class="response" id="mce-success-response" style="display:none"></div></div><div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_123456789_abcdefghij" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background: #007cba; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;"></div></div></form></div>',
+    },
+  },
+  {
+    description: "Stripe payment button integration",
+    type: "html",
+    props: {
+      html: '<script async src="https://js.stripe.com/v3/buy-button.js"></script><stripe-buy-button buy-button-id="buy_btn_1234567890" publishable-key="pk_test_1234567890"></stripe-buy-button>',
+    },
+  },
+  {
+    description: "Instagram post embed",
+    type: "html",
+    props: {
+      html: '<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/ABC123/" data-instgrm-version="14" style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"></blockquote><script async src="//www.instagram.com/embed.js"></script>',
+    },
+  },
+  {
+    description: "Custom countdown timer widget",
+    type: "html",
+    props: {
+      html: '<div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;"><h3 style="margin: 0 0 20px; font-size: 24px;">Event Countdown</h3><div id="countdown" style="display: flex; justify-content: center; gap: 20px;"><div style="text-align: center;"><div style="font-size: 32px; font-weight: bold;">10</div><div style="font-size: 14px; opacity: 0.8;">DAYS</div></div><div style="text-align: center;"><div style="font-size: 32px; font-weight: bold;">15</div><div style="font-size: 14px; opacity: 0.8;">HOURS</div></div><div style="text-align: center;"><div style="font-size: 32px; font-weight: bold;">30</div><div style="font-size: 14px; opacity: 0.8;">MINUTES</div></div></div></div>',
+    },
+  },
+  {
+    description: "Interactive feedback widget with rating stars",
+    type: "html",
+    props: {
+      html: '<div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; background: #f8fafc;"><h4 style="margin: 0 0 16px; color: #1e293b;">How was your experience?</h4><div style="display: flex; gap: 8px; margin: 16px 0;"><span style="font-size: 24px; cursor: pointer; color: #fbbf24;">★</span><span style="font-size: 24px; cursor: pointer; color: #fbbf24;">★</span><span style="font-size: 24px; cursor: pointer; color: #fbbf24;">★</span><span style="font-size: 24px; cursor: pointer; color: #fbbf24;">★</span><span style="font-size: 24px; cursor: pointer; color: #d1d5db;">★</span></div><textarea placeholder="Tell us more about your experience..." style="width: 100%; height: 80px; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; font-family: inherit;"></textarea><button style="margin-top: 12px; background: #3b82f6; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer;">Submit Feedback</button></div>',
+    },
+  },
+];

package/src/shared/bricks/manifests/icon.manifest.ts

@@ -0,0 +1,164 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps } from "../props/helpers";
+import { PiConfetti } from "react-icons/pi";
+import { iconRef, urlOrPageIdRef } from "../props/string";
+import type { BrickProps } from "../props/types";
+import { Type } from "@sinclair/typebox";
+import { cssLengthRef } from "../props/css-length";
+import { colorRef } from "../props/color";
+import { loopRef } from "../props/dynamic";
+
+export const manifest = defineBrickManifest({
+  type: "icon",
+  name: "Icon",
+  category: "basic",
+  description: "An icon.",
+  aiInstructions: "Uses iconify references",
+  resizable: false,
+  staticClasses: "!grow-0",
+  icon: PiConfetti,
+  props: defineProps(
+    {
+      icon: iconRef({
+        default: "mdi:heart",
+      }),
+      size: Type.Optional(
+        cssLengthRef({
+          title: "Size",
+          description: "The size of the icon. Can be a CSS length value (e.g. '2em', '24px')",
+          default: "1em",
+          "ui:css-units": ["em", "rem", "px"],
+          "ai:instructions": "Use 'em', 'rem', or 'px' for units. Example: '2em', '24px'",
+        }),
+      ),
+      color: Type.Optional(
+        colorRef({
+          title: "Color",
+          default: "currentColor",
+          "ui:hide-color-label": true,
+        }),
+      ),
+      link: Type.Optional(urlOrPageIdRef({ title: "Link" })),
+      loop: Type.Optional(loopRef()),
+    },
+    { noGrow: true },
+  ),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Large heart icon with inherited color and size",
+    type: "icon",
+    props: {
+      icon: "mdi:heart",
+    },
+  },
+  {
+    description: "Shopping cart icon",
+    type: "icon",
+    props: {
+      icon: "mdi:cart",
+      size: "1.2em",
+    },
+  },
+  {
+    description: "Social media icon with blue color and link",
+    type: "icon",
+    props: {
+      icon: "mdi:facebook",
+      size: "1.5em",
+      color: "#1877f2",
+      link: "https://facebook.com/yourpage",
+    },
+  },
+  {
+    description: "Warning icon with orange color for alerts",
+    type: "icon",
+    props: {
+      icon: "mdi:alert-triangle",
+      size: "1.8em",
+      color: "#f59e0b",
+    },
+  },
+  {
+    description: "Email contact icon with link",
+    type: "icon",
+    props: {
+      icon: "mdi:email",
+      size: "1.3em",
+      color: "#4f46e5",
+      link: "mailto:contact@example.com",
+    },
+  },
+  {
+    description: "Phone icon with green color",
+    type: "icon",
+    props: {
+      icon: "mdi:phone",
+      size: "1.4em",
+      color: "#10b981",
+    },
+  },
+  {
+    description: "Location pin icon with red color",
+    type: "icon",
+    props: {
+      icon: "mdi:map-marker",
+      size: "2.2em",
+      color: "#ef4444",
+    },
+  },
+  {
+    description: "Twitter/X icon with custom color and link",
+    type: "icon",
+    props: {
+      icon: "mdi:twitter",
+      size: "1.6em",
+      color: "#000000",
+      link: "https://x.com/yourhandle",
+    },
+  },
+  {
+    description: "Star rating icon with gold color",
+    type: "icon",
+    props: {
+      icon: "mdi:star",
+      size: "1.2em",
+      color: "#fbbf24",
+    },
+  },
+  {
+    description: "Download icon with link and purple color",
+    type: "icon",
+    props: {
+      icon: "mdi:download",
+      size: "1.5em",
+      color: "#8b5cf6",
+      link: "/files/brochure.pdf",
+    },
+  },
+  {
+    description: "Menu hamburger icon for navigation",
+    type: "icon",
+    props: {
+      icon: "mdi:menu",
+      size: "1.8em",
+      color: "#374151",
+    },
+  },
+  {
+    description: "Search icon with dark color",
+    type: "icon",
+    props: {
+      icon: "mdi:magnify",
+      size: "1.1em",
+      color: "#1f2937",
+    },
+  },
+];

package/src/shared/bricks/manifests/image.manifest.ts

@@ -0,0 +1,378 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps } from "../props/helpers";
+import { imageRef } from "../props/image";
+import { shadowRef } from "../props/effects";
+import { RxImage } from "react-icons/rx";
+import { string } from "../props/string";
+import { Type } from "@sinclair/typebox";
+import type { BrickProps } from "../props/types";
+import { backgroundColorRef } from "../props/background";
+import { borderRef, roundingRef } from "../props/border";
+import { loopRef } from "../props/dynamic";
+import { colorPresetRef } from "../props/color-preset";
+import { cssLengthRef } from "../props/css-length";
+
+export const manifest = defineBrickManifest({
+  type: "image",
+  name: "Image",
+  category: "media",
+  description: "An image brick",
+  aiInstructions:
+    "An image brick that can display an image with optional styling such as padding, border radius, and shadow. It supports giving credit to the image author and specifying the image provider.",
+  defaultWidth: { desktop: "auto", mobile: "100%" },
+  icon: RxImage,
+  props: defineProps({
+    image: imageRef({
+      metadata: {
+        category: "content",
+      },
+    }),
+    colorPreset: Type.Optional(colorPresetRef()),
+    padding: Type.Optional(
+      cssLengthRef({
+        description: "Padding inside the image.",
+        title: "Padding",
+        "ai:instructions": "Use only a single value like '1rem' or '10px'",
+        "ui:responsive": true,
+        "ui:placeholder": "Not specified",
+        "ui:styleId": "styles:padding",
+      }),
+    ),
+    rounding: Type.Optional(
+      roundingRef({
+        default: "rounded-md",
+      }),
+    ),
+    border: Type.Optional(borderRef()),
+    shadow: Type.Optional(shadowRef()),
+    blurHash: Type.Optional(
+      string("Blur Hash", {
+        "ui:field": "hidden",
+        description: "A placeholder for the image while it is loading. Use a blur hash string.",
+      }),
+    ),
+    author: Type.Optional(
+      Type.Object(
+        {
+          name: string("Image Author", {
+            description: "Image author. Use this to give credit to the author",
+          }),
+          url: string("Image Author URL", {
+            description: "Image author URL. Use this to give credit to the author",
+          }),
+        },
+        {
+          "ui:field": "hidden",
+        },
+      ),
+    ),
+    provider: Type.Optional(
+      string("Image Provider", {
+        "ui:field": "hidden",
+        "ai:instructions": "The provider of the image, e.g. 'unsplash', 'pexels', etc.",
+      }),
+    ),
+    loop: Type.Optional(loopRef()),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Hero landscape image with large shadow",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/800x400.png?text=Hero+Landscape",
+        alt: "Beautiful landscape view for hero section",
+      },
+      shadow: "shadow-lg",
+    },
+  },
+  {
+    description: "Team member profile photo, full rounded",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/300x300.png?text=Profile+Photo",
+        alt: "Team member profile photo",
+      },
+      shadow: "shadow-md",
+      rounding: "rounded-full",
+    },
+  },
+  {
+    description: "Product showcase image",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/400x400.png?text=Product+Image",
+        alt: "Premium product showcase",
+      },
+      shadow: "shadow-sm",
+    },
+  },
+  {
+    description: "Blog article featured image with medium shadow and full author info",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/600x300.png?text=Article+Featured",
+        alt: "Featured image for blog article",
+      },
+      author: {
+        name: "John Photographer",
+        url: "https://example.com/john",
+      },
+      provider: "unsplash",
+      shadow: "shadow-md",
+    },
+  },
+
+  {
+    description: "Logo image with padding and small shadow",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/200x80.png?text=Company+Logo",
+        alt: "Company logo",
+      },
+      padding: "p-8",
+      shadow: "shadow-sm",
+    },
+  },
+  {
+    description: "Testimonial customer photo with large shadow and small padding",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/120x120.png?text=Customer",
+        alt: "Happy customer testimonial photo",
+      },
+      shadow: "shadow-lg",
+      padding: "p-2",
+    },
+  },
+  {
+    description: "Event banner image with neutral-500 background",
+    type: "image",
+    props: {
+      colorPreset: { color: "neutral-500" },
+      image: {
+        src: "https://via.placeholder.com/800x200.png?text=Event+Banner",
+        alt: "Annual conference event banner",
+      },
+      shadow: "shadow-xl",
+      author: {
+        name: "Event Photographer",
+        url: "https://example.com/photographer",
+      },
+      provider: "pexels",
+    },
+  },
+  {
+    description: "Illustration with background and padding",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/150x150.png?text=Blabla+Feature",
+        alt: "Feature illustration",
+      },
+      padding: "p-8",
+      shadow: "shadow-sm",
+    },
+  },
+  {
+    description: "Image with blurHash",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/300x200.png?text=Card+Image",
+        alt: "My image",
+      },
+      shadow: "shadow-md",
+      blurHash: "L6PZfSi_.AyE_3t7t7R**0o#DgR4",
+    },
+  },
+  {
+    description: "Dynamic employee photo using employee query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{employee.photo}}",
+        alt: "Photo of {{employee.fullName}}",
+      },
+      rounding: "rounded-full",
+      shadow: "shadow-lg",
+      padding: "1rem",
+    },
+  },
+  {
+    description: "Dynamic product image using product query with author attribution",
+    type: "image",
+    props: {
+      image: {
+        src: "{{product.featuredImage}}",
+        alt: "{{product.name}} - {{product.category}}",
+      },
+      author: {
+        name: "{{product.photographer}}",
+        url: "{{product.photographerUrl}}",
+      },
+      provider: "company-assets",
+      shadow: "shadow-md",
+      rounding: "rounded-lg",
+    },
+  },
+  {
+    description: "Dynamic company logo using company query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{company.logo}}",
+        alt: "{{company.name}} logo",
+      },
+      padding: "2rem",
+      shadow: "shadow-sm",
+      colorPreset: { color: "neutral-100" },
+    },
+  },
+  {
+    description: "Dynamic event banner using event query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{event.bannerImage}}",
+        alt: "{{event.title}} event banner",
+      },
+      shadow: "shadow-xl",
+      rounding: "rounded-xl",
+      author: {
+        name: "{{event.photographer}}",
+        url: "{{event.photographerProfile}}",
+      },
+      provider: "event-photography",
+    },
+  },
+  {
+    description: "Dynamic article featured image using article query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{article.featuredImage}}",
+        alt: "Featured image for {{article.title}}",
+      },
+      author: {
+        name: "{{article.imageCredit}}",
+        url: "{{article.imageCreditUrl}}",
+      },
+      provider: "{{article.imageProvider}}",
+      shadow: "shadow-md",
+      rounding: "rounded-lg",
+    },
+  },
+  {
+    description: "Dynamic property photo using property query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{property.mainPhoto}}",
+        alt: "{{property.address}} - {{property.propertyType}}",
+      },
+      shadow: "shadow-lg",
+      rounding: "rounded-xl",
+      colorPreset: { color: "primary-50" },
+      padding: "1rem",
+    },
+  },
+  {
+    description: "Dynamic portfolio piece using portfolio query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{portfolio.imageUrl}}",
+        alt: "{{portfolio.projectName}} for {{portfolio.clientName}}",
+      },
+      author: {
+        name: "{{portfolio.photographer}}",
+        url: "{{portfolio.photographerWebsite}}",
+      },
+      provider: "portfolio-assets",
+      shadow: "shadow-md",
+      rounding: "rounded-lg",
+      padding: "0.5rem",
+    },
+  },
+  {
+    description: "Dynamic service illustration using service query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{service.illustration}}",
+        alt: "{{service.name}} service illustration",
+      },
+      colorPreset: { color: "secondary-100" },
+      padding: "2rem",
+      shadow: "shadow-sm",
+      rounding: "rounded-full",
+    },
+  },
+  {
+    description: "Dynamic testimonial customer photo using testimonial query",
+    type: "image",
+    props: {
+      image: {
+        src: "{{testimonial.customerPhoto}}",
+        alt: "{{testimonial.customerName}} from {{testimonial.company}}",
+      },
+      rounding: "rounded-full",
+      shadow: "shadow-lg",
+      padding: "0.25rem",
+      colorPreset: { color: "accent-50" },
+    },
+  },
+  {
+    description: "Product gallery using products query with loop",
+    type: "image",
+    props: {
+      image: {
+        src: "{{products.mainImage}}",
+        alt: "{{products.name}} - {{products.category}}",
+      },
+      author: {
+        name: "{{products.photographer}}",
+        url: "{{products.photographerUrl}}",
+      },
+      provider: "product-catalog",
+      shadow: "shadow-md",
+      rounding: "rounded-lg",
+      padding: "0.5rem",
+      colorPreset: { color: "primary-50" },
+      loop: {
+        over: "products",
+      },
+    },
+  },
+  {
+    description: "Team member photos using teamMembers query with loop",
+    type: "image",
+    props: {
+      image: {
+        src: "{{teamMembers.profilePhoto}}",
+        alt: "{{teamMembers.fullName}} - {{teamMembers.position}}",
+      },
+      rounding: "rounded-full",
+      shadow: "shadow-lg",
+      padding: "0.75rem",
+      colorPreset: { color: "secondary-100" },
+      loop: {
+        over: "teamMembers",
+      },
+    },
+  },
+];