@upstart.gg/sdk 0.0.130 → 0.0.131

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

@@ -0,0 +1,226 @@
+import { type Static, Type } from "@sinclair/typebox";
+import { FaWpforms } from "react-icons/fa6";
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { borderRef, roundingRef } from "../props/border";
+import { datarecord } from "../props/datarecord";
+import { defineProps, group } from "../props/helpers";
+import { string } from "../props/string";
+import type { BrickProps } from "../props/types";
+import { fontSizeRef } from "../props/text";
+import { colorPresetRef } from "../props/color-preset";
+import { directionRef } from "../props/direction";
+import { cssLengthRef } from "../props/css-length";
+
+export const manifest = defineBrickManifest({
+  type: "form",
+  name: "Form",
+  description: "A form element.",
+  aiInstructions: `The form brick automatically renders form fields based on the datarecord id provided in the props.
+There is no need to define the form fields manually and the form does not accept any children`,
+  isContainer: false,
+  icon: FaWpforms,
+  minWidth: {
+    desktop: 300,
+  },
+  props: defineProps({
+    datarecordId: datarecord("Datarecord ID", {
+      description: "The ID of the datarecord to use to generate the form fields. The datarecord must exist.",
+      "ui:responsive": "desktop",
+    }),
+    colorPreset: Type.Optional(
+      colorPresetRef({
+        title: "Color",
+        default: "base-200",
+      }),
+    ),
+    direction: Type.Optional(
+      directionRef({
+        title: "Direction",
+        description: "The direction of the form fields",
+        default: "flex-col",
+        "ui:responsive": "desktop",
+        "ui:desktop-only": true,
+      }),
+    ),
+    padding: Type.Optional(
+      cssLengthRef({
+        default: "2rem",
+        description: "Padding inside the form.",
+        title: "Padding",
+        "ui:responsive": true,
+        "ui:placeholder": "Not specified",
+        "ui:styleId": "styles:padding",
+      }),
+    ),
+    rounding: Type.Optional(
+      roundingRef({
+        default: "rounded-md",
+      }),
+    ),
+    border: Type.Optional(borderRef({})),
+    fontSize: Type.Optional(fontSizeRef({ default: "inherit", "ui:no-extra-large-sizes": true })),
+    button: group({
+      title: "Button",
+      children: {
+        color: Type.Optional(
+          StringEnum(["btn-neutral", "btn-primary", "btn-secondary", "btn-accent"], {
+            enumNames: ["Neutral", "Primary", "Secondary", "Accent"],
+            title: "Color",
+            default: "btn-primary",
+          }),
+        ),
+        size: Type.Optional(
+          StringEnum(["block", "wide"], {
+            title: "Size",
+            description: "Button sizes.",
+            enumNames: ["Block", "Wide"],
+            default: "block",
+            "ui:responsive": "desktop",
+          }),
+        ),
+        position: Type.Optional(
+          StringEnum(["justify-start", "justify-center", "justify-end"], {
+            title: "Button Position",
+            description: "The position of the button in the form",
+            enumNames: ["Left", "Center", "Right"],
+            default: "justify-end",
+            "ui:responsive": "desktop",
+            metadata: {
+              filter: (manifestProps: Manifest["props"], formData: Static<Manifest["props"]>) => {
+                return formData.button?.size !== "wide";
+              },
+            },
+          }),
+        ),
+        rounding: Type.Optional(roundingRef({ default: "rounded-md" })),
+      },
+    }),
+
+    title: Type.Optional(
+      Type.String({
+        title: "Form title",
+        default: "My form",
+        metadata: {
+          category: "content",
+        },
+      }),
+    ),
+    intro: Type.Optional(
+      Type.String({
+        title: "Intro",
+        description: "The intro text of the form",
+        "ui:multiline": true,
+        metadata: {
+          category: "content",
+        },
+      }),
+    ),
+    buttonLabel: Type.Optional(
+      string("Button Label", {
+        default: "Submit",
+        metadata: { category: "content" },
+      }),
+    ),
+    successMessage: Type.Optional(
+      Type.String({
+        title: "Success Message",
+        description: "The message to display when the form is successfully submitted",
+        default: "Thank you for your submission!",
+        metadata: {
+          category: "content",
+        },
+      }),
+    ),
+    errorMessage: Type.Optional(
+      Type.String({
+        title: "Error Message",
+        description: "The message to display when the form submission fails",
+        default: "There was an error submitting the form. Please try again later.",
+        metadata: {
+          category: "content",
+        },
+      }),
+    ),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Basic contact form",
+    type: "form",
+    props: {
+      title: "Contact Us",
+      intro: "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
+      direction: "flex-row",
+      datarecordId: "contacts",
+      buttonLabel: "Send Message",
+      button: {
+        size: "block",
+      },
+    },
+  },
+  {
+    description: "User registration form with large button",
+    type: "form",
+    props: {
+      title: "Create Account",
+      intro: "Join our platform and start your journey today.",
+      direction: "flex-row",
+      datarecordId: "user-registration",
+      buttonLabel: "Register",
+      button: {
+        size: "wide",
+      },
+    },
+  },
+  {
+    description: "Newsletter subscription form (horizontal) with large padding",
+    type: "form",
+    props: {
+      title: "Stay Updated",
+      intro: "Subscribe to our newsletter for the latest updates and exclusive content.",
+      direction: "flex-col",
+      datarecordId: "newsletter-subscription",
+      padding: "3rem",
+      buttonLabel: "Subscribe",
+      button: {
+        size: "block",
+      },
+    },
+  },
+  {
+    description: "Event registration form",
+    type: "form",
+    props: {
+      title: "Conference Registration",
+      intro: "Register for the Annual Tech Conference 2025. Early bird pricing ends soon!",
+      direction: "flex-col",
+      datarecordId: "event-registration",
+      buttonLabel: "Register Now",
+      button: {
+        size: "block",
+      },
+    },
+  },
+  {
+    description: "Job application form",
+    type: "form",
+    props: {
+      title: "Apply for Position",
+      intro: "We're excited to learn more about you! Please fill out this application form completely.",
+      direction: "flex-col",
+      datarecordId: "job-application",
+      buttonLabel: "Submit Application",
+      button: {
+        size: "block",
+      },
+    },
+  },
+];

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

@@ -0,0 +1,365 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps } from "../props/helpers";
+import { textContentRef } from "../props/text";
+import { BsAlphabetUppercase } from "react-icons/bs";
+import type { BrickProps } from "../props/types";
+import { Type } from "@sinclair/typebox";
+import { shadowRef, textShadowRef } from "../props/effects";
+import { borderRef, roundingRef } from "../props/border";
+import { colorPresetRef } from "../props/color-preset";
+import { alignItemsRef, justifyContentRef } from "../props/align";
+import { cssLengthRef } from "../props/css-length";
+
+export const manifest = defineBrickManifest({
+  type: "hero",
+  category: "basic",
+  name: "Hero",
+  description: "A big textual element for home pages.",
+  aiInstructions: `Displays a large text element that can be used to display a title and an optional tagline.
+Typically used on home pages to grab the user's attention. It's better NOT to provide the colorPreset prop so that the Hero inherits the background of its parent box or section.`,
+  icon: BsAlphabetUppercase,
+
+  defaultWidth: { desktop: "60dvw", mobile: "auto" },
+
+  // Force the wrapper direction to be the same as the text direction
+  staticClasses: "flex-col",
+
+  props: defineProps({
+    content: textContentRef({
+      title: "Hero title",
+      default: "<h1 style='text-align:center'>Lorem Ipsum<br />dolor sit amet</h1>",
+    }),
+    tagline: Type.Optional(
+      textContentRef({
+        title: "Hero tagline",
+        default: "<p style='text-align:center'>Use our platform to build your business with confidence.</p>",
+      }),
+    ),
+    colorPreset: Type.Optional(
+      colorPresetRef({
+        title: "Color",
+      }),
+    ),
+
+    textShadow: Type.Optional(
+      textShadowRef({
+        default: "text-shadow-sm",
+      }),
+    ),
+    padding: Type.Optional(
+      cssLengthRef({
+        default: "6rem",
+        description: "Padding inside the hero.",
+        "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()),
+    justifyContent: Type.Optional(
+      justifyContentRef({
+        default: "justify-center",
+      }),
+    ),
+    alignItems: Type.Optional(
+      alignItemsRef({
+        default: "items-center",
+      }),
+    ),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Simple welcome hero with primary background",
+    type: "hero",
+    props: {
+      content: "Welcome to Our Platform",
+      tagline: "The future of productivity starts here",
+      padding: "3rem",
+      colorPreset: {
+        color: "primary-400",
+      },
+    },
+  },
+  {
+    description: "Startup hero with primary gradient background to bottom-right",
+    type: "hero",
+    props: {
+      content: "Build Something Amazing",
+      tagline: "Turn your ideas into reality with our cutting-edge tools",
+      padding: "3rem",
+      colorPreset: {
+        color: "primary-500",
+        gradientDirection: "bg-gradient-to-br",
+      },
+    },
+  },
+  {
+    description: "Construction company hero with bold presence",
+    type: "hero",
+    props: {
+      content: "Building Tomorrow Today",
+      tagline: "Quality construction services for residential and commercial projects",
+      padding: "3rem",
+    },
+  },
+  {
+    description: "Fashion brand hero with modern appeal",
+    type: "hero",
+    props: {
+      content: "Express Your Style",
+      tagline: "Contemporary fashion that speaks to your individuality",
+      padding: "6rem",
+    },
+  },
+  {
+    description: "Law firm hero with authoritative tone",
+    type: "hero",
+    props: {
+      content: "Justice You Can Trust",
+      tagline: "Experienced legal representation for individuals and businesses",
+      padding: "6rem",
+      colorPreset: {
+        color: "neutral-800",
+      },
+    },
+  },
+  {
+    description: "Photography studio hero with artistic flair",
+    type: "hero",
+    props: {
+      content: "Capturing Life's Moments",
+      tagline: "Professional photography services for weddings, portraits, and events",
+    },
+  },
+  {
+    description: "Restaurant hero with warm colors and rounded design",
+    type: "hero",
+    props: {
+      content: "Authentic Italian Cuisine",
+      tagline: "Fresh ingredients, traditional recipes, unforgettable flavors",
+      padding: "4rem",
+      colorPreset: {
+        color: "orange-600",
+      },
+      rounding: "rounded-xl",
+      shadow: "shadow-lg",
+    },
+  },
+  {
+    description: "Tech company hero with success gradient and modern styling",
+    type: "hero",
+    props: {
+      content: "Innovation Redefined",
+      tagline: "Pushing the boundaries of what's possible with AI technology",
+      padding: "5rem",
+      colorPreset: {
+        color: "success-500",
+        gradientDirection: "bg-gradient-to-r",
+      },
+      textShadow: "text-shadow-lg",
+      border: {
+        width: "border-2",
+        color: "border-success-300",
+      },
+    },
+  },
+  {
+    description: "Medical practice hero with trust-inspiring design",
+    type: "hero",
+    props: {
+      content: "Your Health, Our Priority",
+      tagline: "Comprehensive healthcare services with compassionate care",
+      padding: "4rem",
+      colorPreset: {
+        color: "blue-500",
+      },
+      rounding: "rounded-lg",
+      justifyContent: "justify-start",
+      alignItems: "items-start",
+    },
+  },
+  {
+    description: "Creative agency hero with warning accent and diagonal gradient",
+    type: "hero",
+    props: {
+      content: "Creative Solutions",
+      tagline: "Bold designs that make your brand unforgettable",
+      padding: "3rem",
+      colorPreset: {
+        color: "warning-400",
+        gradientDirection: "bg-gradient-to-tl",
+      },
+      shadow: "shadow-xl",
+      border: {
+        width: "border",
+        color: "border-warning-200",
+      },
+    },
+  },
+  {
+    description: "Fitness studio hero with danger color and strong presence",
+    type: "hero",
+    props: {
+      content: "Transform Your Body",
+      tagline: "High-intensity training programs that deliver real results",
+      padding: "5rem",
+      colorPreset: {
+        color: "danger-600",
+      },
+      textShadow: "text-shadow-md",
+      rounding: "rounded-2xl",
+      justifyContent: "justify-center",
+      alignItems: "items-center",
+    },
+  },
+  {
+    description: "Minimalist hero with neutral tones and subtle effects",
+    type: "hero",
+    props: {
+      content: "Simplicity Perfected",
+      tagline: "Clean design solutions for modern businesses",
+      padding: "8rem",
+      colorPreset: {
+        color: "neutral-100",
+      },
+      shadow: "shadow-sm",
+      border: {
+        width: "border",
+        color: "border-neutral-300",
+      },
+      rounding: "rounded-md",
+    },
+  },
+  {
+    description: "Dynamic company hero using business query data",
+    type: "hero",
+    props: {
+      content: "Welcome to {{company.name}}",
+      tagline: "{{company.tagline}} - Serving {{company.location}} since {{company.foundedYear}}",
+      padding: "4rem",
+      colorPreset: {
+        color: "primary-500",
+      },
+    },
+  },
+  {
+    description: "Dynamic employee spotlight using employee query",
+    type: "hero",
+    props: {
+      content: "Meet {{employee.fullName}}",
+      tagline:
+        "{{employee.position}} at {{employee.department}} - {{employee.yearsExperience}} years of experience",
+      padding: "3rem",
+      colorPreset: {
+        color: "secondary-400",
+        gradientDirection: "bg-gradient-to-r",
+      },
+    },
+  },
+  {
+    description: "Dynamic product launch hero using product query",
+    type: "hero",
+    props: {
+      content: "Introducing {{product.name}}",
+      tagline: "{{product.description}} - Starting at ${{product.price}}",
+      padding: "5rem",
+      colorPreset: {
+        color: "accent-600",
+      },
+      shadow: "shadow-lg",
+      rounding: "rounded-xl",
+    },
+  },
+  {
+    description: "Dynamic event announcement using event query",
+    type: "hero",
+    props: {
+      content: "{{event.title}}",
+      tagline: "Join us on {{event.date}} at {{event.venue}} - {{event.city}}",
+      padding: "4rem",
+      colorPreset: {
+        color: "primary-400",
+        gradientDirection: "bg-gradient-to-br",
+      },
+      textShadow: "text-shadow-md",
+    },
+  },
+  {
+    description: "Dynamic blog post hero using article query",
+    type: "hero",
+    props: {
+      content: "{{article.title}}",
+      tagline: "By {{article.author}} • Published {{article.publishDate}} • {{article.readTime}} min read",
+      padding: "3rem",
+      colorPreset: {
+        color: "neutral-700",
+      },
+      justifyContent: "justify-start",
+      alignItems: "items-start",
+    },
+  },
+  {
+    description: "Dynamic service promotion using service query",
+    type: "hero",
+    props: {
+      content: "{{service.name}}",
+      tagline: "{{service.description}} - {{service.duration}} • Starting at ${{service.price}}",
+      padding: "6rem",
+      colorPreset: {
+        color: "secondary-500",
+        gradientDirection: "bg-gradient-to-tl",
+      },
+      border: {
+        width: "border-2",
+        color: "border-secondary-300",
+      },
+    },
+  },
+  {
+    description: "Dynamic property showcase using property query",
+    type: "hero",
+    props: {
+      content: "{{property.address}}",
+      tagline:
+        "${{property.price}} • {{property.bedrooms}} bed, {{property.bathrooms}} bath • {{property.squareFootage}} sq ft",
+      padding: "4rem",
+      colorPreset: {
+        color: "accent-500",
+      },
+      rounding: "rounded-lg",
+      shadow: "shadow-md",
+    },
+  },
+  {
+    description: "Dynamic course announcement using course query",
+    type: "hero",
+    props: {
+      content: "{{course.title}}",
+      tagline:
+        "Learn {{course.subject}} with {{course.instructor}} • {{course.duration}} • {{course.skillLevel}} level",
+      padding: "5rem",
+      colorPreset: {
+        color: "primary-600",
+      },
+      textShadow: "text-shadow-lg",
+      justifyContent: "justify-center",
+      alignItems: "items-center",
+    },
+  },
+];