@upstart.gg/sdk 0.0.137 → 0.0.138

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

@@ -12,16 +12,18 @@ import { loop } from "../props/dynamic";
 import { border } from "../props/border";
 import { shadow } from "../props/effects";
 import type { BrickExample } from "./_types";
+import { grow } from "../props/grow";
 
 export const manifest = defineBrickManifest({
   type: "testimonials",
   name: "Testimonials",
-  description: "Display testimonials from users",
+  description: "Display a list of testimonials from users",
   defaultWidth: { desktop: "100%" },
   icon: HiOutlineChatBubbleBottomCenter,
   consumesMultipleQueryRows: true,
-  aiInstructions: `This brick displays user testimonials with optional avatars and social icons.
+  aiInstructions: `This brick displays a list of testimonials with optional avatars and social icons.
 It is typically used to showcase customer feedback or endorsements.
+It can directly consume data from a page query to populate the testimonials dynamically.
 Optionally either use an avatar or a social icon but not both at the same time.`,
   props: defineProps(
     {
@@ -77,17 +79,32 @@ Optionally either use an avatar or a social icon but not both at the same time.`
           "ui:placeholder": "Not specified (static)",
         }),
       ),
+      grow: Type.Optional(
+        grow({
+          default: true,
+        }),
+      ),
       testimonials: Type.Optional(
         Type.Array(
           Type.Object({
             text: Type.String({
               title: "Text",
               default: "Amazing product!",
+              description: "The testimonial text",
               "ui:multiline": true,
               "ui:textarea-class": "h-20",
             }),
-            author: Type.String({ title: "Author", default: "John Doe" }),
-            company: Type.Optional(Type.String({ title: "Company" })),
+            author: Type.String({
+              title: "Author",
+              description: "Name of the person giving the testimonial",
+              default: "John Doe",
+            }),
+            subtitle: Type.Optional(
+              Type.String({
+                title: "Subtitle",
+                description: "Subtitle, can be a company, social handle, job title, etc",
+              }),
+            ),
             avatar: Type.Optional(
               image({
                 title: "Avatar",
@@ -138,13 +155,13 @@ export type Manifest = typeof manifest;
 
 export const examples: BrickExample<Manifest>[] = [
   {
-    description: "SaaS platform testimonials with avatars",
+    description: "SaaS platform testimonials with avatars (static content)",
     type: "testimonials",
     props: {
       testimonials: [
         {
           author: "Sarah Johnson",
-          company: "TechCorp Solutions",
+          subtitle: "TechCorp Solutions",
           text: "This platform has completely transformed how we manage our projects. The intuitive interface and powerful automation features have saved us countless hours.",
           avatar: {
             src: "https://via.placeholder.com/80x80.png?text=SJ",
@@ -154,7 +171,7 @@ export const examples: BrickExample<Manifest>[] = [
         },
         {
           author: "Mike Chen",
-          company: "StartupFlow",
+          subtitle: "StartupFlow",
           text: "Outstanding customer support and regular feature updates. We've been using this for over a year and it keeps getting better. Highly recommend!",
           avatar: {
             src: "https://via.placeholder.com/80x80.png?text=MC",
@@ -164,7 +181,7 @@ export const examples: BrickExample<Manifest>[] = [
         },
         {
           author: "Emily Rodriguez",
-          company: "Digital Agency Pro",
+          subtitle: "Digital Agency Pro",
           text: "The automation capabilities are game-changing. What used to take us days now happens automatically. It's like having an extra team member.",
           avatar: {
             src: "https://via.placeholder.com/80x80.png?text=ER",
@@ -176,135 +193,7 @@ export const examples: BrickExample<Manifest>[] = [
     },
   },
   {
-    description: "E-commerce customer reviews",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Jessica Williams",
-          company: "Happy Customer",
-          text: "Amazing product quality and fast shipping! The item exceeded my expectations and the customer service was excellent when I had questions.",
-          avatar: {
-            src: "https://via.placeholder.com/60x60.png?text=JW",
-            alt: "Jessica Williams customer photo",
-          },
-          socialIcon: "mdi:star",
-        },
-        {
-          author: "David Park",
-          text: "Five stars! Been using this product for 6 months and it's still going strong. Definitely worth the investment and I've already recommended it to friends.",
-          avatar: {
-            src: "https://via.placeholder.com/60x60.png?text=DP",
-            alt: "David Park customer photo",
-          },
-          socialIcon: "mdi:thumbs-up",
-        },
-      ],
-    },
-  },
-  {
-    description: "Agency client testimonials with company info",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Rachel Thompson",
-          company: "Global Enterprises",
-          text: "The team delivered exceptional results on time and within budget. Their creative approach and attention to detail made all the difference for our brand.",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=RT",
-            alt: "Rachel Thompson headshot",
-          },
-          socialIcon: "mdi:briefcase",
-        },
-        {
-          author: "Alex Kumar",
-          company: "Innovation Labs",
-          text: "Working with this agency was a game-changer for our digital presence. They understood our vision and brought it to life beautifully.",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=AK",
-            alt: "Alex Kumar profile",
-          },
-          socialIcon: "mdi:lightbulb",
-        },
-        {
-          author: "Maria Santos",
-          company: "Retail Plus",
-          text: "Professional, creative, and results-driven. Our website traffic increased by 200% after their redesign. Couldn't be happier!",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=MS",
-            alt: "Maria Santos photo",
-          },
-          socialIcon: "mdi:chart-line",
-        },
-      ],
-    },
-  },
-  {
-    description: "App user feedback",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Tom Wilson",
-          text: "This app has made my daily routine so much easier. Love the clean interface and how everything just works seamlessly across all my devices.",
-          avatar: {
-            src: "https://via.placeholder.com/65x65.png?text=TW",
-            alt: "Tom Wilson user photo",
-          },
-          socialIcon: "mdi:cellphone",
-        },
-        {
-          author: "Lisa Chang",
-          text: "Been using this app for months and it's become essential to my workflow. The latest update with AI features is incredibly impressive.",
-          avatar: {
-            src: "https://via.placeholder.com/65x65.png?text=LC",
-            alt: "Lisa Chang profile picture",
-          },
-          socialIcon: "mdi:robot",
-        },
-        {
-          author: "James Miller",
-          text: "Simple, powerful, and reliable. Exactly what I was looking for. The customer support team is also very responsive and helpful.",
-          avatar: {
-            src: "https://via.placeholder.com/65x65.png?text=JM",
-            alt: "James Miller avatar",
-          },
-          socialIcon: "mdi:heart",
-        },
-      ],
-    },
-  },
-  {
-    description: "Course/education testimonials with social icons",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Amanda Foster",
-          company: "UX Designer",
-          text: "This course completely changed my career trajectory. The practical projects and expert feedback helped me land my dream job in just 3 months.",
-          avatar: {
-            src: "https://via.placeholder.com/75x75.png?text=AF",
-            alt: "Amanda Foster student photo",
-          },
-          socialIcon: "mdi:school",
-        },
-        {
-          author: "Carlos Rodriguez",
-          company: "Software Engineer",
-          text: "The instructors are industry experts and the content is always up-to-date. I've taken three courses here and each one exceeded my expectations.",
-          avatar: {
-            src: "https://via.placeholder.com/75x75.png?text=CR",
-            alt: "Carlos Rodriguez profile",
-          },
-          socialIcon: "mdi:code-tags",
-        },
-      ],
-    },
-  },
-  {
-    description: "Simple testimonials without avatars",
+    description: "Simple testimonials without avatars (static content)",
     type: "testimonials",
     props: {
       testimonials: [
@@ -326,72 +215,6 @@ export const examples: BrickExample<Manifest>[] = [
       ],
     },
   },
-  {
-    description: "Consultant testimonials with professional focus",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Dr. Patricia Lee",
-          company: "Medical Practice Solutions",
-          text: "The consulting services provided were invaluable to our practice. Revenue increased by 40% and patient satisfaction scores improved significantly.",
-          avatar: {
-            src: "https://via.placeholder.com/80x80.png?text=PL",
-            alt: "Dr. Patricia Lee headshot",
-          },
-          socialIcon: "mdi:medical-bag",
-        },
-        {
-          author: "Robert Kim",
-          company: "Manufacturing Inc.",
-          text: "Their strategic insights helped us streamline operations and reduce costs by 25%. The ROI was evident within the first quarter.",
-          avatar: {
-            src: "https://via.placeholder.com/80x80.png?text=RK",
-            alt: "Robert Kim executive photo",
-          },
-          socialIcon: "mdi:factory",
-        },
-      ],
-    },
-  },
-  {
-    description: "Event testimonials with social media icons",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "Jennifer Adams",
-          company: "Marketing Director",
-          text: "Best conference I've attended in years! The networking opportunities were incredible and the speakers were top-notch industry leaders.",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=JA",
-            alt: "Jennifer Adams conference attendee",
-          },
-          socialIcon: "mdi:twitter",
-        },
-        {
-          author: "Michael Brown",
-          company: "Tech Startup Founder",
-          text: "The workshops were incredibly practical and I left with actionable strategies I could implement immediately. Already planning to attend next year!",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=MB",
-            alt: "Michael Brown participant photo",
-          },
-          socialIcon: "mdi:linkedin",
-        },
-        {
-          author: "Sophie Chen",
-          company: "Product Manager",
-          text: "Amazing organization and valuable content. Met so many like-minded professionals and learned cutting-edge techniques I'm excited to try.",
-          avatar: {
-            src: "https://via.placeholder.com/70x70.png?text=SC",
-            alt: "Sophie Chen attendee photo",
-          },
-          socialIcon: "mdi:instagram",
-        },
-      ],
-    },
-  },
   {
     description: "Dynamic customer testimonials using customerReviews query",
     type: "testimonials",
@@ -399,7 +222,7 @@ export const examples: BrickExample<Manifest>[] = [
       testimonials: [
         {
           author: "{{customerReviews.customerName}}",
-          company: "{{customerReviews.company}}",
+          subtitle: "{{customerReviews.company}}",
           text: "{{customerReviews.reviewText}}",
           avatar: {
             src: "{{customerReviews.customerPhoto}}",
@@ -420,7 +243,7 @@ export const examples: BrickExample<Manifest>[] = [
       testimonials: [
         {
           author: "{{clientFeedback.clientName}}",
-          company: "{{clientFeedback.companyName}} - {{clientFeedback.position}}",
+          subtitle: "{{clientFeedback.companyName}} - {{clientFeedback.position}}",
           text: "{{clientFeedback.testimonial}}",
           avatar: {
             src: "{{clientFeedback.headshot}}",
@@ -454,25 +277,4 @@ export const examples: BrickExample<Manifest>[] = [
       },
     },
   },
-  {
-    description: "Dynamic employee testimonials using teamTestimonials query",
-    type: "testimonials",
-    props: {
-      testimonials: [
-        {
-          author: "{{teamTestimonials.employeeName}}",
-          company: "{{teamTestimonials.department}} - {{teamTestimonials.jobTitle}}",
-          text: "{{teamTestimonials.testimonial}}",
-          avatar: {
-            src: "{{teamTestimonials.profilePhoto}}",
-            alt: "{{teamTestimonials.employeeName}} profile photo",
-          },
-          socialIcon: "{{teamTestimonials.socialIcon}}",
-        },
-      ],
-      loop: {
-        over: "teamTestimonials",
-      },
-    },
-  },
 ];

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

@@ -6,10 +6,10 @@ import { RxTextAlignLeft } from "react-icons/rx";
 import { Type } from "@sinclair/typebox";
 import { alignItems } from "../props/align";
 import { shadow } from "../props/effects";
-import { colorPreset } from "../props/color-preset";
-import { loop } from "../props/dynamic";
 import { cssLength } from "../props/css-length";
 import type { BrickExample } from "./_types";
+import { backgroundColor } from "../props/background";
+import { color } from "../props/color";
 
 export const manifest = defineBrickManifest({
   type: "text",
@@ -26,25 +26,23 @@ CONTENT FORMATTING:
 - Lists: <ul><li>Item 1</li><li>Item 2</li></ul>
 
 STYLING OPTIONS:
-- colorPreset: Leave empty to inherit parent colors, or use "primary-100", "secondary-200", "neutral-50", "accent-100" for backgrounds
-- padding: Use CSS values like "1rem", "2rem", "24px" for internal spacing
-- rounding: "rounded-none" (sharp), "rounded-md" (standard), "rounded-lg" (friendly), "rounded-xl" (soft)
-- border: Add borders with width ("border", "border-2") and color ("border-gray-300", "border-primary-500")
-- shadow: Add depth with "shadow-sm", "shadow-md", "shadow-lg"
+- "color": Leave empty to inherit parent text color, which is the recommended setting when the brick is a direct child of a section or box with background color.
+- "backgroundColor": Only use when the text brick is a direct child of a section.Leave empty for transparent background, or set to a color like "bg-xxx-nnn" for emphasis.
+- "padding": Use CSS values like "1rem", "2rem", "24px" for internal spacing
 
 WHEN TO USE:
+- All text content that requires formatting
 - Rich content sections (About Us, Service descriptions)
 - Announcements and notices
 - Product descriptions with formatting
 - Quotes and testimonials
 - FAQ content and detailed explanations
-- Footer information and legal text
 
 BEST PRACTICES:
 - Keep HTML minimal - complex layouts should use multiple components
 - Use semantic headings (h2, h3, h4) for proper hierarchy
-- Center-align for quotes/testimonials, left-align for body text
-- Choose background colors that provide good contrast, or no background for inline text`,
+- Center-align for quotes/testimonials, left-align for body text`,
+
   defaultWidth: {
     mobile: "100%",
   },
@@ -55,9 +53,14 @@ BEST PRACTICES:
   staticClasses: "prose lg:prose-lg",
   icon: RxTextAlignLeft,
   props: defineProps({
-    colorPreset: Type.Optional(
-      colorPreset({
-        title: "Color",
+    backgroundColor: Type.Optional(
+      backgroundColor({
+        title: "Background color",
+      }),
+    ),
+    color: Type.Optional(
+      color({
+        title: "Text color",
       }),
     ),
     content: textContent({
@@ -66,12 +69,6 @@ BEST PRACTICES:
       //   category: "content",
       // },
     }),
-    verticalAlign: Type.Optional(
-      alignItems({
-        default: "items-center",
-        title: "Align",
-      }),
-    ),
     padding: Type.Optional(
       cssLength({
         default: "2rem",
@@ -127,9 +124,6 @@ export const examples: BrickExample<Manifest>[] = [
     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",
-      },
     },
   },
   {
@@ -148,9 +142,6 @@ export const examples: BrickExample<Manifest>[] = [
       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",
@@ -172,13 +163,9 @@ export const examples: BrickExample<Manifest>[] = [
     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",
     },
   },
   {
@@ -187,9 +174,6 @@ export const examples: BrickExample<Manifest>[] = [
     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: {
@@ -204,13 +188,9 @@ export const examples: BrickExample<Manifest>[] = [
     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",
     },
   },
   {
@@ -219,11 +199,7 @@ export const examples: BrickExample<Manifest>[] = [
     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",
     },
   },
   {
@@ -247,9 +223,6 @@ export const examples: BrickExample<Manifest>[] = [
     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: {
@@ -257,7 +230,6 @@ export const examples: BrickExample<Manifest>[] = [
         color: "border-accent-600",
       },
       shadow: "shadow-xl",
-      verticalAlign: "items-center",
     },
   },
 ];

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

@@ -53,7 +53,8 @@ export function backgroundColor(options: SchemaOptions = {}) {
     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.",
+      "Must be formated like `bg-<variant>-<shade>`, variants being primary, secondary, accent and neutral, or base and shades between 100 and 900, except the base with takes shades betwen 100 and 300 only.",
+    pattern: "^bg-(primary|secondary|accent|neutral|base)-?(50|100|200|300|400|500|600|700|800|900)?$",
     "ui:field": "color",
     "ui:color-type": "background",
     // "ui:advanced": true,

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

@@ -4,7 +4,9 @@ export function color(options: StringOptions = {}) {
   return Type.String({
     title: "Text color",
     "ai:instructions":
-      "hex/rgb/rgba color or classes like `text-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+      "Format is `text-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+    pattern:
+      "^text-(primary|secondary|accent|neutral|base|inherit)-?(50|100|200|300|400|500|600|700|800|900)?$",
     "ui:styleId": "styles:color",
     "ui:field": "color",
     "ui:color-type": "text",
@@ -18,7 +20,8 @@ export function borderColor(options: StringOptions = {}) {
   return Type.String({
     title: "Border color",
     "ai:instructions":
-      "hex/rgb/rgba color or classes like `border-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+      "Format is `border-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
+    pattern: "^border-(primary|secondary|accent|neutral|base)-?(50|100|200|300|400|500|600|700|800|900)?$",
     "ui:styleId": "styles:borderColor",
     "ui:field": "color",
     "ui:color-type": "border",

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

@@ -1,6 +1,7 @@
 import { type Static, type TString, Type } from "@sinclair/typebox";
 import { cssLength } from "./css-length";
 import { alignSelf } from "./align";
+import { grow } from "./grow";
 
 export function hidden() {
   return Type.Object(
@@ -48,14 +49,7 @@ export const commonProps = {
       "ui:field": "hidden",
     }),
   ),
-  grow: Type.Optional(
-    Type.Boolean({
-      title: "Auto expand",
-      description: "If set, the brick will grow to fill the available space of its parent section or box.",
-      "ui:styleId": "styles:grow",
-      "ui:responsive": true,
-    }),
-  ),
+  grow: Type.Optional(grow()),
   alignSelf: Type.Optional(alignSelf()),
 };
 

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

@@ -0,0 +1,11 @@
+import { Type, type SchemaOptions } from "@sinclair/typebox";
+
+export function grow(options: SchemaOptions = {}) {
+  return Type.Boolean({
+    title: "Auto expand",
+    description: "If set, the brick will grow to fill the available space of its parent section or box.",
+    "ui:styleId": "styles:grow",
+    "ui:responsive": true,
+    ...options,
+  });
+}

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

@@ -22,6 +22,46 @@ export function image(options: PropImageOptions = {}) {
           "ui:placeholder": "Your image description",
         }),
       ),
+      aspectRatio: Type.Optional(
+        StringEnum(
+          [
+            "auto",
+            "1:1",
+            "4:3",
+            "3:4",
+            "16:9",
+            "9:16",
+            "2:3",
+            "3:2",
+            "5:4",
+            "4:5",
+            "21:9",
+            "9:21",
+            "original",
+          ],
+          {
+            enumNames: [
+              "Auto",
+              "1:1 (Square)",
+              "4:3 (Standard landscape)",
+              "3:4 (Standard portrait)",
+              "16:9 (Widescreen)",
+              "9:16 (Vertical video)",
+              "2:3 (Portrait)",
+              "3:2 (Landscape)",
+              "5:4 (Classic photo)",
+              "4:5 (Instagram post)",
+              "21:9 (Cinema widescreen)",
+              "9:21 (Tall vertical)",
+              "Original",
+            ],
+            title: "Aspect Ratio",
+            description: "The aspect ratio of the image",
+            "ui:field": "enum",
+            "ui:styleId": "styles:aspectRatio",
+          },
+        ),
+      ),
       fit: Type.Optional(
         StringEnum(["object-none", "object-contain", "object-cover", "object-fill", "object-scale-down"], {
           enumNames: ["None", "Contain", "Cover", "Fill", "Scale down"],

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

@@ -30,6 +30,7 @@ export function urlOrPageId(options: StringOptions = {}) {
     {
       // $id: "content:urlOrPageId",
       title: "URL",
+      description: "A URL or a page ID",
       metadata: {
         category: "content",
       },
@@ -48,6 +49,7 @@ type IconOptions = StrFieldOptions & { "ui:default-icon-collection"?: string };
 export function icon(options: IconOptions = {}) {
   return Type.String({
     title: "Icon",
+    description: "An icon from the Iconify collection",
     "ai:instructions": "Use a iconify reference like 'mdi:heart' or 'fa-solid:coffee'.",
     "ui:field": "iconify",
     // $id: "assets:icon",