@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -2,19 +2,41 @@ import { Type } from "@sinclair/typebox";
 import { RxButton } from "react-icons/rx";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { string, urlOrPageIdRef } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { borderRef, roundingRef } from "../props/border";
-import { fontSizeRef } from "../props/text";
-import { colorPresetRef } from "../props/color-preset";
+import { urlOrPageId } from "../props/string";
+import { rounding } from "../props/border";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { fontSize } from "../props/text";
+import { colorPreset } from "../props/color-preset";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "button",
   name: "Button",
   category: "basic",
   description: "A button",
-  aiInstructions:
-    "A clickable button that can link to a URL or a page within the site. It can be styled with different colors, font sizes, and border radii. Don't use it in forms since forms have their own submit button.",
+  aiInstructions: `Use this button component for navigation and call-to-action elements throughout the site.
+
+WHEN TO USE:
+- Navigation links (Learn More, About Us, Contact)
+- Call-to-action buttons (Sign Up, Get Started, Buy Now)
+- External links (Download, Visit Website, Social Media)
+- Internal page navigation (Go to Services, View Portfolio)
+
+STYLING GUIDELINES:
+- colorPreset: Use "primary-500" for main CTAs, "secondary-500" for secondary actions, "neutral-500" for low-priority actions, "accent-500" for highlight actions
+- fontSize: "text-sm" for compact buttons, "text-base" for standard, "text-lg" for emphasis, "text-xl" for hero buttons
+- rounding: "rounded-none" for sharp/modern, "rounded-md" for standard, "rounded-lg" for friendly, "rounded-full" for pills
+- fill: Use "solid" for primary actions with background color, "outline" for secondary actions with transparent background and border
+- link: Use full URLs for external (https://example.com), relative paths for internal (/about), or page IDs for site pages (about-us)
+
+DYNAMIC CONTENT:
+- Support template variables: "Buy {{product.name}}" or "Contact {{employee.name}}"
+- Link to dynamic pages: "/products/{{product.id}}" or "/team/{{employee.slug}}"
+
+AVOID:
+- Using in forms (forms have dedicated submit buttons)
+- Empty or unclear labels (use descriptive action words)
+- Mixing multiple high-emphasis colors on same page`,
   resizable: "horizontal",
   icon: RxButton,
   minWidth: {
@@ -27,15 +49,15 @@ export const manifest = defineBrickManifest({
   props: defineProps(
     {
       colorPreset: Type.Optional(
-        colorPresetRef({
+        colorPreset({
           default: { color: "primary-500" },
           title: "Color",
           "ui:default-gradient-direction": "bg-gradient-to-b",
         }),
       ),
-      label: string("Label", { default: "My button", metadata: { category: "content" } }),
+      label: Type.String({ title: "Label", default: "My button", metadata: { category: "content" } }),
       fontSize: Type.Optional(
-        fontSizeRef({
+        fontSize({
           title: "Font size",
           description: "The font size of the button text.",
           default: "text-base",
@@ -44,12 +66,21 @@ export const manifest = defineBrickManifest({
         }),
       ),
       rounding: Type.Optional(
-        roundingRef({
+        rounding({
           default: "rounded-md",
         }),
       ),
-      border: Type.Optional(borderRef({ default: { width: "border-0" }, "ui:responsive": "desktop" })),
-      link: urlOrPageIdRef({
+      fill: Type.Optional(
+        StringEnum(["solid", "outline"], {
+          title: "Fill",
+          description: "Button appearance style - solid background or outlined.",
+          default: "solid",
+          enumNames: ["Solid", "Outline"],
+          "ui:field": "enum",
+          "ui:display": "select",
+        }),
+      ),
+      link: urlOrPageId({
         title: "Link",
         "ui:placeholder": "https://example.com",
         metadata: { category: "content" },
@@ -61,148 +92,242 @@ export const manifest = defineBrickManifest({
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
+  // BASIC BUTTON TYPES
   {
-    description: "Primary button, full width, linking to an external URL",
+    description: "Primary call-to-action button - Use for main actions users should take",
     type: "button",
     props: {
-      label: "Click me",
-      link: "https://example.com",
+      label: "Get Started",
+      link: "/signup",
       colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "solid",
     },
   },
   {
-    description: "Secondary button, block width, linking to a page id",
+    description: "Secondary button - Use for supporting actions or alternatives",
     type: "button",
     props: {
-      label: "Go to page",
-      link: "page-id-123",
+      label: "Learn More",
+      link: "/about",
       colorPreset: { color: "secondary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "outline",
     },
   },
   {
-    description: "Neutral colored button with large text and rounded corners and external link",
+    description: "Neutral button - Use for low-priority actions or navigation",
     type: "button",
     props: {
-      label: "Submit",
-      fontSize: "text-lg",
-      rounding: "rounded-full",
-      link: "https://example.com",
+      label: "View Details",
+      link: "/details",
       colorPreset: { color: "neutral-500" },
+      fontSize: "text-sm",
+      rounding: "rounded-md",
     },
   },
   {
-    description: "Dynamic label from a page query alias named 'employee'",
+    description: "Accent button - Use for special promotions or highlighted actions",
     type: "button",
     props: {
-      label: "Go to profile of {{employee.name}}",
-      link: "/employees/{{employee.$slug}}",
+      label: "Special Offer",
+      link: "/promo",
+      colorPreset: { color: "accent-500" },
       fontSize: "text-lg",
-      rounding: "rounded-full",
+      rounding: "rounded-lg",
+    },
+  },
+
+  // EXTERNAL LINK EXAMPLES
+  {
+    description: "External website link - Full URL for outside navigation",
+    type: "button",
+    props: {
+      label: "Visit Our Store",
+      link: "https://store.example.com",
+      colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+    },
+  },
+  {
+    description: "Download button - Direct file download link",
+    type: "button",
+    props: {
+      label: "Download PDF",
+      link: "https://example.com/brochure.pdf",
+      colorPreset: { color: "secondary-600" },
+      fontSize: "text-base",
+      rounding: "rounded-lg",
+      fill: "outline",
+    },
+  },
+
+  // INTERNAL NAVIGATION EXAMPLES
+  {
+    description: "Internal page navigation using page ID reference",
+    type: "button",
+    props: {
+      label: "Contact Us",
+      link: "contact",
+      colorPreset: { color: "neutral-600" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+    },
+  },
+  {
+    description: "Internal relative URL navigation",
+    type: "button",
+    props: {
+      label: "Our Services",
+      link: "/services",
+      colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+    },
+  },
+
+  // DYNAMIC CONTENT EXAMPLES
+  {
+    description: "Dynamic product purchase button using product query data",
+    type: "button",
+    props: {
+      label: "Buy {{product.name}} - ${{product.price}}",
+      link: "/checkout/{{product.id}}",
+      colorPreset: { color: "primary-600" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "outline",
+    },
+  },
+  {
+    description: "Dynamic employee contact button using team member data",
+    type: "button",
+    props: {
+      label: "Contact {{employee.name}}",
+      link: "mailto:{{employee.email}}",
       colorPreset: { color: "neutral-500" },
+      fontSize: "text-sm",
+      rounding: "rounded-md",
     },
   },
   {
-    description: "Accent colored call-to-action button with medium text and subtle border",
+    description: "Dynamic event registration using event query data",
     type: "button",
     props: {
-      label: "Get Started",
-      link: "/signup",
+      label: "Register for {{event.title}}",
+      link: "/events/{{event.slug}}/register",
+      colorPreset: { color: "accent-500" },
       fontSize: "text-base",
       rounding: "rounded-lg",
-      colorPreset: { color: "accent-600" },
-      border: { width: "border", color: "border-accent-700" },
     },
   },
+
+  // STYLING VARIATIONS
   {
-    description: "Small text button with sharp corners for minimal design",
+    description: "Small compact button - Use in tight spaces or secondary contexts",
     type: "button",
     props: {
-      label: "Learn More",
-      link: "/about",
+      label: "Edit",
+      link: "/edit",
+      colorPreset: { color: "neutral-400" },
       fontSize: "text-sm",
-      rounding: "rounded-none",
-      colorPreset: { color: "primary-400" },
+      rounding: "rounded-sm",
     },
   },
   {
-    description: "Large download button with thick border and rounded corners",
+    description: "Large hero button - Use for prominent call-to-actions",
     type: "button",
     props: {
-      label: "Download Now",
-      link: "https://download.example.com/file.zip",
+      label: "Start Free Trial",
+      link: "/trial",
+      colorPreset: { color: "primary-600" },
       fontSize: "text-xl",
       rounding: "rounded-xl",
-      colorPreset: { color: "secondary-600" },
-      border: { width: "border-2", color: "border-secondary-800" },
+      fill: "outline",
     },
   },
   {
-    description: "Contact button with neutral colors and medium border radius",
+    description: "Pill-shaped button - Modern rounded design",
     type: "button",
     props: {
-      label: "Contact Us",
-      link: "/contact",
+      label: "Subscribe",
+      link: "/newsletter",
+      colorPreset: { color: "accent-500" },
       fontSize: "text-base",
-      rounding: "rounded-md",
-      colorPreset: { color: "neutral-600" },
-      border: { width: "border", color: "border-neutral-400" },
+      rounding: "rounded-full",
     },
   },
   {
-    description: "Newsletter signup button with gradient background and full rounding",
+    description: "Sharp modern button - Angular design with no rounding",
     type: "button",
     props: {
-      label: "Subscribe to Newsletter",
-      link: "/newsletter",
-      fontSize: "text-lg",
-      rounding: "rounded-full",
+      label: "Join Now",
+      link: "/join",
+      colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-none",
+      fill: "outline",
+    },
+  },
+
+  // GRADIENT EXAMPLES
+  {
+    description: "Gradient button - Eye-catching with color transitions",
+    type: "button",
+    props: {
+      label: "Premium Upgrade",
+      link: "/upgrade",
       colorPreset: {
         color: "primary-500",
         gradientDirection: "bg-gradient-to-r",
       },
+      fontSize: "text-lg",
+      rounding: "rounded-lg",
     },
   },
   {
-    description: "Shop now button with accent colors and extra large text",
+    description: "Diagonal gradient button - Unique visual appeal",
     type: "button",
     props: {
-      label: "Shop Now",
-      link: "/shop",
-      fontSize: "text-xl",
-      rounding: "rounded-lg",
-      colorPreset: { color: "accent-500" },
+      label: "Launch Campaign",
+      link: "/campaigns/new",
+      colorPreset: {
+        color: "accent-600",
+        gradientDirection: "bg-gradient-to-br",
+      },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "outline",
     },
   },
+
+  // FILL STYLE COMPARISON EXAMPLES
   {
-    description: "Dynamic product button using product query data",
+    description: "Solid fill button - Traditional filled background style",
     type: "button",
     props: {
-      label: "Buy {{product.name}} - ${{product.price}}",
-      link: "/products/{{product.id}}/purchase",
+      label: "Solid Button",
+      link: "/solid",
+      colorPreset: { color: "primary-500" },
       fontSize: "text-base",
       rounding: "rounded-md",
-      colorPreset: { color: "primary-600" },
-      border: { width: "border", color: "border-primary-800" },
+      fill: "solid",
     },
   },
   {
-    description: "Event registration button with secondary gradient and medium text",
+    description: "Outline fill button - Transparent background with border",
     type: "button",
     props: {
-      label: "Register for Event",
-      link: "/events/register",
+      label: "Outline Button",
+      link: "/outline",
+      colorPreset: { color: "primary-500" },
       fontSize: "text-base",
-      rounding: "rounded-lg",
-      colorPreset: {
-        color: "secondary-500",
-        gradientDirection: "bg-gradient-to-br",
-      },
-      border: { width: "border", color: "border-secondary-300" },
+      rounding: "rounded-md",
+      fill: "outline",
     },
   },
 ];