@upstart.gg/sdk 0.0.137 → 0.0.138

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

@@ -6,6 +6,7 @@ import { shadow } from "../props/effects";
 import { Type } from "@sinclair/typebox";
 import { number } from "../props/number";
 import type { BrickExample } from "./_types";
+import { grow } from "../props/grow";
 
 export const DEFAULTS = {
   lat: 48.8566, // Default latitude (Paris)
@@ -74,6 +75,11 @@ export const manifest = defineBrickManifest({
       }),
     ),
     shadow: Type.Optional(shadow()),
+    grow: Type.Optional(
+      grow({
+        default: true,
+      }),
+    ),
   }),
 });
 
@@ -107,7 +113,8 @@ export const examples: BrickExample<Manifest>[] = [
     },
   },
   {
-    description: "Business location map with high zoom level and rounded corners",
+    description:
+      "Business location map with high zoom level and rounded corners, take the full width of its container",
     type: "map",
     props: {
       lat: "34.0522",
@@ -115,6 +122,7 @@ export const examples: BrickExample<Manifest>[] = [
       address: "Los Angeles, CA",
       tooltip: "Our Los Angeles Office",
       zoom: 18,
+      grow: true,
       rounding: "rounded-2xl",
       shadow: "shadow-xl",
     },
@@ -145,68 +153,4 @@ export const examples: BrickExample<Manifest>[] = [
       shadow: "shadow-md",
     },
   },
-  {
-    description: "Hotel location with low zoom for area overview",
-    type: "map",
-    props: {
-      lat: "36.1699",
-      lng: "-115.1398",
-      address: "Las Vegas, NV",
-      tooltip: "Downtown Las Vegas Hotel",
-      zoom: 13,
-      rounding: "rounded-xl",
-      shadow: "shadow-lg",
-    },
-  },
-  {
-    description: "Store location with maximum zoom for street view detail",
-    type: "map",
-    props: {
-      lat: "47.6062",
-      lng: "-122.3321",
-      address: "Seattle, WA",
-      tooltip: "Seattle Flagship Store",
-      zoom: 18,
-      rounding: "rounded-md",
-      shadow: "shadow-sm",
-    },
-  },
-  {
-    description: "Park location with moderate zoom and minimal styling",
-    type: "map",
-    props: {
-      lat: "39.7392",
-      lng: "-104.9903",
-      address: "Denver, CO",
-      tooltip: "City Park Recreation Area",
-      zoom: 14,
-      rounding: "rounded-sm",
-    },
-  },
-  {
-    description: "Dynamic business location using company query",
-    type: "map",
-    props: {
-      lat: "{{company.latitude}}",
-      lng: "{{company.longitude}}",
-      address: "{{company.address}}",
-      tooltip: "{{company.name}} - {{company.address}}",
-      zoom: 16,
-      rounding: "rounded-lg",
-      shadow: "shadow-md",
-    },
-  },
-  {
-    description: "Dynamic event venue using event query",
-    type: "map",
-    props: {
-      lat: "{{event.venueLatitude}}",
-      lng: "{{event.venueLongitude}}",
-      address: "{{event.venueAddress}}",
-      tooltip: "{{event.title}} - {{event.venueName}}",
-      zoom: 17,
-      rounding: "rounded-xl",
-      shadow: "shadow-lg",
-    },
-  },
 ];

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

@@ -6,7 +6,6 @@ import { urlOrPageId } from "../props/string";
 import { backgroundColor } from "../props/background";
 import { border } from "../props/border";
 import { fixedPositioned } from "../props/position";
-import type { BrickProps } from "../props/types";
 import { shadow } from "../props/effects";
 import type { BrickExample } from "./_types";
 

package/src/shared/bricks/manifests/social-links.manifest.ts

@@ -3,7 +3,6 @@ import { TiSocialFlickr } from "react-icons/ti";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import { icon } from "../props/string";
-import type { BrickProps } from "../props/types";
 import { fontSize } from "../props/text";
 import { direction } from "../props/direction";
 import { colorPreset } from "../props/color-preset";

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

@@ -1,6 +1,5 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import type { BrickProps } from "../props/types";
 import { CgSpaceBetween } from "react-icons/cg";
 import type { BrickExample } from "./_types";
 

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

@@ -9,6 +9,7 @@ import { cssLength } from "../props/css-length";
 import { fontSize } from "../props/text";
 import { StringEnum } from "~/shared/utils/string-enum";
 import type { BrickExample } from "./_types";
+import { grow } from "../props/grow";
 
 export const manifest = defineBrickManifest({
   type: "table",
@@ -151,6 +152,11 @@ export const manifest = defineBrickManifest({
         default: { width: "border", color: "border-gray-200" },
       }),
     ),
+    grow: Type.Optional(
+      grow({
+        default: true,
+      }),
+    ),
   }),
 });
 

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

@@ -3,13 +3,13 @@ import { defineProps } from "../props/helpers";
 import { Type } from "@sinclair/typebox";
 import { border, rounding } from "../props/border";
 import { shadow } from "../props/effects";
-import type { BrickProps } from "../props/types";
 import { cssLength } from "../props/css-length";
 import { HiOutlineViewColumns } from "react-icons/hi2";
 import { colorPreset } from "../props/color-preset";
 import { loop } from "../props/dynamic";
 import { StringEnum } from "~/shared/utils/string-enum";
 import type { BrickExample } from "./_types";
+import { TfiLayoutTabWindow } from "react-icons/tfi";
 
 // Tab configuration schema
 const tabRef = Type.Object({
@@ -34,6 +34,7 @@ export const manifest = defineBrickManifest({
   aiInstructions:
     "Tabs are containers for organizing content into multiple panels. Each tab has a label and contains child bricks. Users can click tab buttons to switch between different content panels. Ideal for organizing related content, settings panels, or product information.",
   isContainer: true,
+  consumesMultipleQueryRows: true,
   defaultWidth: {
     desktop: "100%",
     mobile: "100%",
@@ -41,7 +42,7 @@ export const manifest = defineBrickManifest({
   defaultHeight: {
     desktop: "auto",
   },
-  icon: HiOutlineViewColumns,
+  icon: TfiLayoutTabWindow,
   props: defineProps({
     colorPreset: Type.Optional(
       colorPreset({
@@ -120,21 +121,19 @@ export const manifest = defineBrickManifest({
     border: Type.Optional(border()),
     shadow: Type.Optional(shadow()),
     loop: Type.Optional(loop()),
-    $children: Type.Array(Type.Array(Type.Any()), {
+    $children: Type.Array(Type.Any(), {
       "ui:field": "hidden",
-      description: "Array of child brick arrays - each sub-array represents the content for one tab",
-      default: [[], []],
+      description:
+        "Array of child bricks - each item represents the content for one tab. If you want multiple bricks in one tab, use a 'box' brick as the single child for that tab.",
       examples: [
         [
           // Tab 1 content
-          [
-            {
-              type: "text",
-              props: {
-                content: "<h3>Overview</h3><p>This is the overview tab content.</p>",
-              },
+          {
+            type: "text",
+            props: {
+              content: "<h3>Overview</h3><p>This is the overview tab content.</p>",
             },
-          ],
+          },
           // Tab 2 content
           [
             {
@@ -143,13 +142,6 @@ export const manifest = defineBrickManifest({
                 content: "<h3>Features</h3><p>Here are our key features.</p>",
               },
             },
-            {
-              type: "button",
-              props: {
-                text: "Learn More",
-                link: "/features",
-              },
-            },
           ],
         ],
       ],
@@ -159,413 +151,4 @@ export const manifest = defineBrickManifest({
 
 export type Manifest = typeof manifest;
 
-export const examples: BrickExample<Manifest>[] = [
-  {
-    description: "Simple tabs with basic content in each panel",
-    type: "tabs",
-    props: {
-      tabs: [{ label: "About" }, { label: "Services" }, { label: "Contact" }],
-      defaultTab: 0,
-      tabStyle: "underline",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>About Us</h3><p>We are a company focused on delivering exceptional results.</p>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>Our Services</h3><p>We offer a wide range of professional services.</p>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "View All Services",
-              link: "/services",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Contact Information</h3><p>Email: hello@company.com</p><p>Phone: (555) 123-4567</p>",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Product information tabs with pills style and custom styling",
-    type: "tabs",
-    props: {
-      tabs: [{ label: "Overview" }, { label: "Specifications" }, { label: "Reviews" }, { label: "Support" }],
-      defaultTab: 0,
-      tabStyle: "pills",
-      fullWidth: true,
-      colorPreset: {
-        color: "primary-50",
-      },
-      border: {
-        width: "border",
-        color: "border-primary-200",
-      },
-      rounding: "rounded-lg",
-      padding: "2rem",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>Product Overview</h3><p>This product revolutionizes the way you work.</p>",
-            },
-          },
-          {
-            type: "image",
-            props: {
-              src: "https://via.placeholder.com/400x200",
-              alt: "Product image",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                '<h3>Technical Specifications</h3><ul><li>Weight: 2.5 lbs</li><li>Dimensions: 12" x 8" x 2"</li><li>Battery: 8 hours</li></ul>',
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                '<h3>Customer Reviews</h3><p>★★★★★ "Amazing product, highly recommend!"</p><p>★★★★☆ "Great value for money."</p>',
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>Support</h3><p>Need help? Contact our support team.</p>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "Contact Support",
-              link: "/support",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Portfolio sections with bordered tabs",
-    type: "tabs",
-    props: {
-      tabs: [{ label: "Web Design" }, { label: "Mobile Apps" }, { label: "Branding" }],
-      defaultTab: 0,
-      tabStyle: "bordered",
-      shadow: "shadow-md",
-      rounding: "rounded-xl",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>Web Design Projects</h3><p>Beautiful, responsive websites that convert.</p>",
-            },
-          },
-          {
-            type: "image",
-            props: {
-              src: "https://via.placeholder.com/600x300",
-              alt: "Web design portfolio",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content: "<h3>Mobile Applications</h3><p>Native and cross-platform mobile solutions.</p>",
-            },
-          },
-          {
-            type: "image",
-            props: {
-              src: "https://via.placeholder.com/300x500",
-              alt: "Mobile app portfolio",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Brand Identity</h3><p>Comprehensive branding solutions for modern businesses.</p>",
-            },
-          },
-          {
-            type: "image",
-            props: {
-              src: "https://via.placeholder.com/500x400",
-              alt: "Branding portfolio",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "FAQ sections with bottom-positioned tabs",
-    type: "tabs",
-    props: {
-      tabs: [{ label: "General" }, { label: "Billing" }, { label: "Technical" }],
-      defaultTab: 0,
-      tabPosition: "bottom",
-      tabStyle: "underline",
-      padding: "1.5rem",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>General Questions</h3><p><strong>What is your company about?</strong></p><p>We provide excellent services to our customers.</p><p><strong>Where are you located?</strong></p><p>We have offices worldwide.</p>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Billing Questions</h3><p><strong>How does billing work?</strong></p><p>We bill monthly based on usage.</p><p><strong>Can I change my plan?</strong></p><p>Yes, you can upgrade or downgrade anytime.</p>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Technical Support</h3><p><strong>How do I reset my password?</strong></p><p>Use the forgot password link on the login page.</p><p><strong>Is there an API?</strong></p><p>Yes, we have a comprehensive REST API.</p>",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Team member profiles using teamMembers query with dynamic tabs",
-    type: "tabs",
-    props: {
-      loop: {
-        over: "teamMembers",
-      },
-      tabs: [{ label: "{{teamMembers.name}}" }],
-      tabStyle: "pills",
-      fullWidth: false,
-      colorPreset: {
-        color: "secondary-100",
-      },
-      padding: "2rem",
-      $children: [
-        [
-          {
-            type: "image",
-            props: {
-              src: "{{teamMembers.photo}}",
-              alt: "{{teamMembers.name}}",
-            },
-          },
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>{{teamMembers.name}}</h3><p><strong>{{teamMembers.position}}</strong></p><p>{{teamMembers.bio}}</p><p>Email: {{teamMembers.email}}</p>",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Product categories using productCategories query",
-    type: "tabs",
-    props: {
-      loop: {
-        over: "productCategories",
-      },
-      tabs: [{ label: "{{productCategories.categoryName}}" }],
-      tabStyle: "bordered",
-      fullWidth: true,
-      border: {
-        width: "border-2",
-        color: "border-primary-300",
-      },
-      rounding: "rounded-lg",
-      shadow: "shadow-lg",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>{{productCategories.categoryName}}</h3><p>{{productCategories.description}}</p><p>{{productCategories.productCount}} products available</p>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "Browse {{productCategories.categoryName}}",
-              link: "/products/{{productCategories.slug}}",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Service packages with pricing information",
-    type: "tabs",
-    props: {
-      tabs: [{ label: "Basic" }, { label: "Professional" }, { label: "Enterprise" }],
-      defaultTab: 1,
-      tabStyle: "pills",
-      fullWidth: true,
-      colorPreset: {
-        color: "accent-50",
-      },
-      border: {
-        width: "border",
-        color: "border-accent-200",
-      },
-      rounding: "rounded-xl",
-      shadow: "shadow-md",
-      padding: "2.5rem",
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Basic Package</h3><p><strong>$99/month</strong></p><ul><li>5 Projects</li><li>10GB Storage</li><li>Email Support</li></ul>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "Choose Basic",
-              link: "/pricing/basic",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Professional Package</h3><p><strong>$199/month</strong></p><ul><li>25 Projects</li><li>100GB Storage</li><li>Priority Support</li><li>Advanced Analytics</li></ul>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "Choose Professional",
-              link: "/pricing/professional",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Enterprise Package</h3><p><strong>$499/month</strong></p><ul><li>Unlimited Projects</li><li>1TB Storage</li><li>24/7 Phone Support</li><li>Custom Integrations</li><li>Dedicated Account Manager</li></ul>",
-            },
-          },
-          {
-            type: "button",
-            props: {
-              text: "Contact Sales",
-              link: "/contact/enterprise",
-            },
-          },
-        ],
-      ],
-    },
-  },
-  {
-    description: "Documentation sections with technical content",
-    type: "tabs",
-    props: {
-      tabs: [
-        { label: "Getting Started" },
-        { label: "API Reference" },
-        { label: "Examples" },
-        { label: "Troubleshooting" },
-      ],
-      defaultTab: 0,
-      tabStyle: "underline",
-      tabPosition: "top",
-      padding: "1.5rem",
-      colorPreset: {
-        color: "neutral-50",
-      },
-      $children: [
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Getting Started</h3><p>Welcome to our platform! Here's how to get started:</p><ol><li>Create an account</li><li>Set up your first project</li><li>Invite team members</li></ol>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>API Reference</h3><p>Our REST API provides programmatic access to all features:</p><pre>GET /api/v1/projects</pre><pre>POST /api/v1/projects</pre>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Code Examples</h3><p>Here are some common use cases:</p><pre>curl -X GET https://api.example.com/projects</pre>",
-            },
-          },
-        ],
-        [
-          {
-            type: "text",
-            props: {
-              content:
-                "<h3>Troubleshooting</h3><p><strong>Issue:</strong> Cannot connect to API</p><p><strong>Solution:</strong> Check your API key and network connection.</p>",
-            },
-          },
-        ],
-      ],
-    },
-  },
-];
+export const examples: BrickExample<Manifest>[] = [];