@upstart.gg/sdk 0.0.130 → 0.0.132

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

@@ -0,0 +1,245 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { textContentRef } from "../props/text";
+import { defineProps } from "../props/helpers";
+import { borderRef, roundingRef } from "../props/border";
+import { RxTextAlignLeft } from "react-icons/rx";
+import type { BrickProps } from "../props/types";
+import { Type } from "@sinclair/typebox";
+import { alignItemsRef } from "../props/align";
+import { shadowRef } from "../props/effects";
+import { colorPresetRef } from "../props/color-preset";
+import { loopRef } from "../props/dynamic";
+import { cssLengthRef } from "../props/css-length";
+
+export const manifest = defineBrickManifest({
+  type: "text",
+  category: "basic",
+  name: "Text",
+  description: "Text with formatting options",
+  aiInstructions: `Text "content" can contain minimal HTML tags like <strong>, <em>, <br> and <a> as well as <h1>, <h2>, <h3>, <h4>, <p> and <span> and lists.
+Only 'align' is supported as an inline style, so don't use other inline styles like 'font-size' or 'color' in the content prop.
+You may simply omit the "colorPreset" property so that the brick will inherit the default color from its parent container.
+`,
+  defaultWidth: {
+    mobile: "100%",
+  },
+  defaultHeight: {
+    desktop: "auto",
+    mobile: "auto",
+  },
+  staticClasses: "prose lg:prose-lg",
+  icon: RxTextAlignLeft,
+  props: defineProps({
+    colorPreset: Type.Optional(
+      colorPresetRef({
+        title: "Color",
+      }),
+    ),
+    content: textContentRef({
+      title: "Content",
+      // metadata: {
+      //   category: "content",
+      // },
+    }),
+    verticalAlign: Type.Optional(
+      alignItemsRef({
+        default: "items-center",
+        title: "Align",
+      }),
+    ),
+    padding: Type.Optional(
+      cssLengthRef({
+        default: "2rem",
+        description: "Padding inside the text.",
+        "ai:instructions": "Use only a single value like '1rem' or '10px'",
+        title: "Padding",
+        "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()),
+    loop: Type.Optional(loopRef()),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Welcome paragraph with emphasis and padding",
+    type: "text",
+    props: {
+      content:
+        "Welcome to our platform! We're <strong>excited</strong> to have you here. Our mission is to <em>transform</em> the way you work with cutting-edge technology and <a href='/features'>innovative features</a>.",
+      padding: "2rem",
+    },
+  },
+  {
+    description: "Feature list with HTML formatting and smaller padding",
+    type: "text",
+    props: {
+      content:
+        "<h3>Key Features</h3><ul><li><strong>Advanced Analytics</strong> - Real-time data insights</li><li><strong>Cloud Integration</strong> - Seamless connectivity</li><li><strong>24/7 Support</strong> - Always here to help</li></ul>",
+      padding: "1rem",
+    },
+  },
+  {
+    description: "Quote block with text styling but no background",
+    type: "text",
+    props: {
+      content:
+        "<p style='text-align: center'><em>\"Innovation distinguishes between a leader and a follower.\"</em><br><strong>- Steve Jobs</strong></p>",
+      padding: "3rem",
+    },
+  },
+  {
+    description: "Simple heading with subtle background",
+    type: "text",
+    props: {
+      content:
+        "<h2>About Our Company</h2><p>We've been serving customers since 2010, building trust through quality products and exceptional service.</p>",
+      colorPreset: {
+        color: "primary-100",
+      },
+    },
+  },
+  {
+    description: "Team introduction with formatting, no background color",
+    type: "text",
+    props: {
+      content:
+        "<p style='text-align: center'><strong>Meet Our Team</strong></p><p>Our diverse team of experts brings together decades of experience in technology, design, and business strategy. We're passionate about <em>creating solutions</em> that make a real difference.</p><p><a href='/team'>Learn more about our team</a> and the values that drive us forward.</p>",
+      padding: "2rem",
+    },
+  },
+  {
+    description: "Maintenance notice with neutral background and border",
+    type: "text",
+    props: {
+      content:
+        "<p>Scheduled maintenance will occur on <em>Sunday, March 15th</em> from 2:00 AM to 6:00 AM UTC.</p><p>During this time, some features may be temporarily unavailable. We apologize for any inconvenience.</p>",
+      padding: "1rem",
+      colorPreset: {
+        color: "neutral-700",
+      },
+      border: {
+        width: "border",
+        color: "border-neutral-400",
+      },
+      rounding: "rounded-lg",
+    },
+  },
+  {
+    description: "Minimal text with no padding or background",
+    type: "text",
+    props: {
+      content: "This is some minimal text.",
+      padding: "0rem",
+    },
+  },
+  {
+    description: "Call-to-action text with secondary background and shadow",
+    type: "text",
+    props: {
+      content:
+        "<h3 style='text-align: center'>Ready to Get Started?</h3><p style='text-align: center'>Join thousands of satisfied customers who trust our platform. <strong>Sign up today</strong> and experience the difference!</p><p style='text-align: center'><a href='/signup'>Create Your Free Account</a></p>",
+      colorPreset: {
+        color: "secondary-200",
+      },
+      padding: "2.5rem",
+      rounding: "rounded-xl",
+      shadow: "shadow-md",
+      verticalAlign: "items-center",
+    },
+  },
+  {
+    description: "Technical documentation with accent colors and code-like formatting",
+    type: "text",
+    props: {
+      content:
+        "<h4>API Authentication</h4><p>To authenticate your requests, include your API key in the header:</p><p><strong>Authorization: Bearer YOUR_API_KEY</strong></p><p>All API endpoints require authentication. You can find your API key in the <a href='/dashboard'>dashboard settings</a>.</p>",
+      colorPreset: {
+        color: "accent-100",
+      },
+      padding: "1.5rem",
+      rounding: "rounded-md",
+      border: {
+        width: "border-4",
+        color: "border-accent-500",
+      },
+    },
+  },
+  {
+    description: "Success message with primary background and top alignment",
+    type: "text",
+    props: {
+      content:
+        "<h3>✅ Payment Successful!</h3><p>Thank you for your purchase. Your order <strong>#12345</strong> has been confirmed.</p><p>You will receive an email confirmation shortly at your registered email address.</p>",
+      colorPreset: {
+        color: "primary-200",
+      },
+      padding: "2rem",
+      rounding: "rounded-lg",
+      shadow: "shadow-sm",
+      verticalAlign: "items-start",
+    },
+  },
+  {
+    description: "Footer information with neutral dark theme and multiple links",
+    type: "text",
+    props: {
+      content:
+        "<p style='text-align: center'>© 2024 Company Name. All rights reserved.</p><p style='text-align: center'><a href='/privacy'>Privacy Policy</a> | <a href='/terms'>Terms of Service</a> | <a href='/contact'>Contact Us</a></p><p style='text-align: center'><em>Follow us on social media for the latest updates</em></p>",
+      colorPreset: {
+        color: "neutral-800",
+      },
+      padding: "1.5rem",
+      verticalAlign: "items-end",
+    },
+  },
+  {
+    description: "Product description with large padding and rounded corners",
+    type: "text",
+    props: {
+      content:
+        "<h2>Premium Wireless Headphones</h2><p>Experience <strong>crystal-clear audio</strong> with our latest wireless headphones featuring:</p><ul><li>Active noise cancellation</li><li>30-hour battery life</li><li>Premium leather comfort</li><li>Hi-res audio certification</li></ul><p>Perfect for <em>music lovers</em> and <em>professionals</em> alike.</p>",
+      padding: "3rem",
+      rounding: "rounded-2xl",
+      shadow: "shadow-lg",
+      border: {
+        width: "border",
+        color: "border-neutral-300",
+      },
+    },
+  },
+  {
+    description: "Emergency alert with accent background and extra bold formatting",
+    type: "text",
+    props: {
+      content:
+        "<h3 style='text-align: center'>⚠️ URGENT NOTICE</h3><p style='text-align: center'><strong>System maintenance is currently in progress.</strong></p><p style='text-align: center'>Some services may be <em>temporarily unavailable</em>. We expect full restoration by 4:00 PM EST.</p><p style='text-align: center'>For urgent support, please <a href='/emergency-contact'>contact our emergency line</a>.</p>",
+      colorPreset: {
+        color: "accent-400",
+      },
+      padding: "2rem",
+      rounding: "rounded-md",
+      border: {
+        width: "border-2",
+        color: "border-accent-600",
+      },
+      shadow: "shadow-xl",
+      verticalAlign: "items-center",
+    },
+  },
+];

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

@@ -0,0 +1,115 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps } from "../props/helpers";
+import { RxVideo } from "react-icons/rx";
+import { string } from "../props/string";
+import type { BrickProps } from "../props/types";
+import { borderRef, roundingRef } from "../props/border";
+import { shadowRef } from "../props/effects";
+import { Type } from "@sinclair/typebox";
+import { cssLengthRef } from "../props/css-length";
+
+export const manifest = defineBrickManifest({
+  type: "video",
+  name: "Video",
+  category: "media",
+  description: "An embedded video player for YouTube / Vimeo / Wistia links",
+  icon: RxVideo,
+  defaultWidth: {
+    mobile: "auto",
+    desktop: `${(360 * 16) / 9}px`, // 16:9 aspect ratio
+  },
+  defaultHeight: {
+    mobile: "168px",
+    desktop: "360px", // 16:9 aspect ratio
+  },
+  minWidth: {
+    mobile: 300,
+    desktop: (360 * 16) / 9,
+  },
+  minHeight: {
+    mobile: 168,
+    desktop: 360, // 16:9 aspect ratio
+  },
+  props: defineProps({
+    url: string("Video URL", {
+      description:
+        "URL of the video to embed. It can be a YouTube link or an embed link. It also supports Vimeo and Wistia links.",
+      default: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      metadata: {
+        category: "content",
+        "ui:responsive": "desktop",
+      },
+    }),
+    padding: Type.Optional(
+      cssLengthRef({
+        description: "Padding inside the video player.",
+        "ai:instructions": "Use only a single value like '1rem' or '10px'",
+        title: "Padding",
+        "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()),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "A YouTube video",
+    type: "video",
+    props: {
+      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    },
+  },
+  {
+    description: "An embedded YouTube video",
+    type: "video",
+    props: {
+      url: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    },
+  },
+  {
+    description: "A Vimeo video",
+    type: "video",
+    props: {
+      url: "https://vimeo.com/123456789",
+    },
+  },
+  {
+    description: "Dynamic course video using course query",
+    type: "video",
+    props: {
+      url: "{{course.videoUrl}}",
+      padding: "1rem",
+      rounding: "rounded-lg",
+      shadow: "shadow-md",
+    },
+  },
+  {
+    description: "Dynamic product demo video using product query",
+    type: "video",
+    props: {
+      url: "{{product.demoVideoUrl}}",
+      padding: "0.5rem",
+      rounding: "rounded-xl",
+      shadow: "shadow-lg",
+      border: {
+        width: "border-2",
+        color: "border-primary-300",
+      },
+    },
+  },
+];

package/src/shared/bricks/props/align.ts

@@ -0,0 +1,63 @@
+import type { Static, StringOptions } from "@sinclair/typebox";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function justifyContent(options: StringOptions = {}) {
+  return StringEnum(
+    ["justify-start", "justify-center", "justify-end", "justify-between", "justify-around", "justify-evenly"],
+    {
+      enumNames: ["Start", "Center", "End", "Between", "Around", "Evenly"],
+      // $id: "styles:justifyContent",
+      title: "Justify bricks",
+      "ui:field": "justify-content",
+      "ui:responsive": true,
+      "ui:styleId": "styles:justifyContent",
+      examples: ["justify-center", "justify-evenly"],
+      ...options,
+    },
+  );
+}
+
+export type JustifyContentSettings = Static<ReturnType<typeof justifyContent>>;
+
+export function justifyContentRef(options: StringOptions = {}) {
+  return typedRef("styles:justifyContent", options);
+}
+
+export function alignItems(options: StringOptions = {}) {
+  return StringEnum(["items-start", "items-center", "items-end", "items-stretch"], {
+    enumNames: ["Start", "Center", "End", "Stretch"],
+    // $id: "styles:alignItems",
+    title: "Align bricks",
+    "ui:field": "align-items",
+    "ui:responsive": true,
+    "ui:styleId": "styles:alignItems",
+    examples: ["items-center", "items-stretch"],
+    ...options,
+  });
+}
+
+export type AlignItemsSettings = Static<ReturnType<typeof alignItems>>;
+
+export function alignItemsRef(options: StringOptions = {}) {
+  return typedRef("styles:alignItems", options);
+}
+
+export function alignSelf(options: StringOptions = {}) {
+  return StringEnum(["self-auto", "self-start", "self-center", "self-end", "self-stretch"], {
+    enumNames: ["Auto", "Start", "Center", "End", "Stretch"],
+    default: "self-auto",
+    // $id: "styles:alignSelf",
+    title: "Align self",
+    "ui:field": "align-self",
+    "ui:responsive": true,
+    "ui:styleId": "styles:alignSelf",
+    ...options,
+  });
+}
+
+export type AlignSelfSettings = Static<ReturnType<typeof alignSelf>>;
+
+export function alignSelfRef(options: StringOptions = {}) {
+  return typedRef("styles:alignSelf", options);
+}

package/src/shared/bricks/props/background.ts

@@ -0,0 +1,79 @@
+import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
+import type { ElementColorType } from "~/shared/themes/color-system";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type BackgroundOptions = {
+  title?: string;
+  default?: {
+    image?: string;
+    size?: string;
+    repeat?: string;
+  };
+  colorType?: ElementColorType;
+};
+
+export function background(opts: BackgroundOptions = {}) {
+  const { default: defValue, ...restOpts } = opts;
+  return Type.Object(
+    {
+      image: Type.String({
+        title: "Image",
+        description: "The background image. Can be a URL or a data URI",
+        format: "image",
+        examples: ["https://example.com/image.png"],
+      }),
+      size: Type.Optional(
+        StringEnum(["auto", "cover", "contain"], {
+          enumNames: ["Auto", "Cover", "Contain"],
+          default: defValue?.size ?? "auto",
+          "ai:instructions": "Only use this when the image is set.",
+        }),
+      ),
+      repeat: Type.Optional(
+        StringEnum(["no-repeat", "repeat", "repeat-x", "repeat-y", "space", "round"], {
+          enumNames: ["No repeat", "Repeat", "Repeat horizontally", "Repeat vertically", "Space", "Round"],
+          default: defValue?.repeat ?? "no-repeat",
+          "ai:instructions": "Only use this when the image is set.",
+        }),
+      ),
+    },
+    {
+      // $id: "styles:background",
+      "ui:styleId": "styles:background",
+      "ui:field": "background",
+      title: "Background image",
+      // disable for now
+      // "ui:show-img-search": true,
+      default: defValue,
+      ...restOpts,
+    },
+  );
+}
+
+export type BackgroundSettings = Static<ReturnType<typeof background>>;
+
+export function backgroundRef(options: SchemaOptions = {}) {
+  return typedRef("styles:background", options);
+}
+
+export function backgroundColor(options: SchemaOptions = {}) {
+  return Type.String({
+    title: "Background color",
+    // $id: "styles:backgroundColor",
+    "ai:instructions":
+      "Can be set to transparent, hex/rgb/rgba color, or classes like `bg-<variant>-<shade>`, variants being primary, secondary, accent and neutral, and shades between 100 and 900. Use bg-<variant>-<shade> classes as much as possible.",
+    "ui:field": "color",
+    "ui:color-type": "background",
+    // "ui:advanced": true,
+    "ui:styleId": "styles:backgroundColor",
+    "ui:responsive": "desktop",
+    ...options,
+  });
+}
+
+export type BackgroundColorSettings = Static<ReturnType<typeof backgroundColor>>;
+
+export function backgroundColorRef(options: SchemaOptions = {}) {
+  return typedRef("styles:backgroundColor", options);
+}

package/src/shared/bricks/props/boolean.ts

@@ -0,0 +1,7 @@
+import { Type } from "@sinclair/typebox";
+
+type BooleanOptions = Record<string, unknown>;
+
+export function boolean(title: string, defaultValue?: boolean, options: BooleanOptions = {}) {
+  return Type.Boolean({ title, default: defaultValue ?? false, ...options });
+}

package/src/shared/bricks/props/border.ts

@@ -0,0 +1,86 @@
+import { type ObjectOptions, Type, type Static, type StringOptions } from "@sinclair/typebox";
+import { typedRef } from "~/shared/utils/typed-ref";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { borderColorRef } from "./color";
+
+export function border(opts: ObjectOptions = {}) {
+  return Type.Object(
+    {
+      width: StringEnum(["border-0", "border", "border-2", "border-4", "border-8"], {
+        title: "Width",
+        enumNames: ["None", "Small", "Medium", "Large", "Extra large"],
+        "ai:instructions": "Don't specify width if you want no border.",
+        "ui:field": "enum",
+        "ui:display": "select",
+        "ui:placeholder": "None",
+        default: "border-0",
+      }),
+      color: borderColorRef({
+        title: "Color",
+        description: "The color of the border.",
+        default: "border-current",
+      }),
+    },
+    {
+      title: "Border",
+      "ui:styleId": "styles:border",
+      description: "Set the border width and color.",
+      "ui:field": "border",
+      "ui:responsive": true,
+      examples: [
+        {
+          width: "border-2",
+          color: "border-primary-200",
+        },
+        {
+          width: "border-4",
+          color: "border-accent-400",
+        },
+        {
+          width: "border",
+          color: "border-neutral-100",
+        },
+      ],
+      ...opts,
+    },
+  );
+}
+
+export type BorderSettings = Static<ReturnType<typeof border>>;
+
+export function borderRef(
+  options: Omit<ObjectOptions, "default"> & { default?: Partial<BorderSettings> } = {},
+) {
+  return typedRef("styles:border", options);
+}
+
+export function rounding(opts: StringOptions = {}) {
+  return Type.Optional(
+    StringEnum(
+      [
+        "rounded-auto",
+        "rounded-none",
+        "rounded-sm",
+        "rounded-md",
+        "rounded-lg",
+        "rounded-xl",
+        "rounded-2xl",
+        "rounded-full",
+      ],
+      {
+        title: "Corner rounding",
+        enumNames: ["Auto", "None", "Small", "Medium", "Large", "Extra large", "2xl", "Full"],
+        // $id: "styles:rounding",
+        "ui:styleId": "styles:rounding",
+        "ui:responsive": "desktop",
+        ...opts,
+      },
+    ),
+  );
+}
+
+export type RoundingSettings = Static<ReturnType<typeof rounding>>;
+
+export function roundingRef(options: StringOptions = {}) {
+  return typedRef("styles:rounding", options);
+}