Merge pull request #452 from objectstack-ai/copilot/design-demo-effects-for-components

Author: hotlong

content/docs/blocks/block-schema.mdx

@@ -3,6 +3,8 @@ title: "Block Schema (BlockSchema)"
 description: "Reusable component blocks with variables, slots, and marketplace support"
 ---
 
+import { InteractiveDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
 # Block Schema
 
 The `BlockSchema` defines reusable component blocks that can be configured with variables, support content injection through slots, and shared via a marketplace.
@@ -17,6 +19,143 @@ BlockSchema enables:
 - **Marketplace support** - Share and discover blocks
 - **Version control** - Track block versions
 
+## Interactive Examples
+
+### Feature Card Block
+
+<InteractiveDemo
+  title="Feature Card Block"
+  description="A reusable block with configurable icon, title, description, and CTA button"
+  schema={{
+    type: "card",
+    className: "max-w-sm mx-auto",
+    children: [
+      {
+        type: "stack",
+        spacing: 4,
+        className: "items-center text-center p-4",
+        children: [
+          {
+            type: "div",
+            className: "w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center",
+            children: [{ type: "icon", name: "zap", className: "h-6 w-6 text-primary" }]
+          },
+          { type: "text", content: "Fast Performance", className: "text-lg font-semibold" },
+          { type: "text", content: "Lightning-fast response times with optimized bundle sizes and edge caching support.", className: "text-sm text-muted-foreground" },
+          { type: "button", label: "Learn More", variant: "outline", size: "sm" }
+        ]
+      }
+    ]
+  }}
+/>
+
+### Block Variations
+
+<InteractiveDemo
+  title="Block with Variable Overrides"
+  description="The same block template rendered with different variable values"
+  examples={[
+    {
+      label: "Security Feature",
+      schema: {
+        type: "card",
+        className: "max-w-sm",
+        children: [
+          {
+            type: "stack",
+            spacing: 3,
+            className: "items-center text-center p-4",
+            children: [
+              { type: "div", className: "w-12 h-12 rounded-lg bg-green-500/10 flex items-center justify-center", children: [{ type: "icon", name: "shield", className: "h-6 w-6 text-green-600" }] },
+              { type: "text", content: "Enterprise Security", className: "text-lg font-semibold" },
+              { type: "text", content: "Bank-grade encryption and SOC 2 compliance built in.", className: "text-sm text-muted-foreground" },
+              { type: "button", label: "See Certifications", variant: "outline", size: "sm" }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      label: "Analytics Feature",
+      schema: {
+        type: "card",
+        className: "max-w-sm",
+        children: [
+          {
+            type: "stack",
+            spacing: 3,
+            className: "items-center text-center p-4",
+            children: [
+              { type: "div", className: "w-12 h-12 rounded-lg bg-purple-500/10 flex items-center justify-center", children: [{ type: "icon", name: "chart-column", className: "h-6 w-6 text-purple-600" }] },
+              { type: "text", content: "Advanced Analytics", className: "text-lg font-semibold" },
+              { type: "text", content: "Real-time dashboards and custom report builder included.", className: "text-sm text-muted-foreground" },
+              { type: "button", label: "View Demo", variant: "outline", size: "sm" }
+            ]
+          }
+        ]
+      }
+    }
+  ]}
+/>
+
+### Block Marketplace Card
+
+<InteractiveDemo
+  title="Block Marketplace Listing"
+  description="How blocks appear in the marketplace with metadata and ratings"
+  schema={{
+    type: "card",
+    className: "max-w-md mx-auto",
+    children: [
+      {
+        type: "div",
+        className: "h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-t-lg flex items-center justify-center",
+        children: [{ type: "icon", name: "layout-template", className: "h-12 w-12 text-primary/60" }]
+      },
+      {
+        type: "stack",
+        spacing: 3,
+        className: "p-4",
+        children: [
+          {
+            type: "flex",
+            className: "items-start justify-between",
+            children: [
+              {
+                type: "stack",
+                spacing: 1,
+                children: [
+                  { type: "text", content: "Pricing Table Pro", className: "font-semibold" },
+                  { type: "text", content: "by ObjectUI Team", className: "text-xs text-muted-foreground" }
+                ]
+              },
+              { type: "badge", label: "v2.1.0", variant: "secondary" }
+            ]
+          },
+          { type: "text", content: "Professional pricing comparison table with toggle for monthly/yearly billing.", className: "text-sm text-muted-foreground" },
+          {
+            type: "flex",
+            className: "gap-2 flex-wrap",
+            children: [
+              { type: "badge", label: "Marketing", variant: "outline" },
+              { type: "badge", label: "SaaS", variant: "outline" },
+              { type: "badge", label: "Pricing", variant: "outline" }
+            ]
+          },
+          {
+            type: "flex",
+            className: "items-center justify-between pt-2 border-t",
+            children: [
+              { type: "text", content: "★ 4.9 (234 ratings) · 5.4k installs", className: "text-xs text-muted-foreground" },
+              { type: "button", label: "Install", variant: "default", size: "sm" }
+            ]
+          }
+        ]
+      }
+    ]
+  }}
+/>
+
 ## Basic Usage
 
 ```plaintext
@@ -127,7 +266,7 @@ const cardBlock: BlockSchema = {
     label: 'Feature Card',
     description: 'A card component for highlighting product features',
     category: 'Marketing',
-    icon: 'Box',
+    icon: 'box',
     tags: ['card', 'feature', 'marketing', 'product'],
     author: 'ObjectUI Team',
     version: '1.0.0',
@@ -157,9 +296,9 @@ const cardBlock: BlockSchema = {
       name: 'icon',
       label: 'Icon',
       type: 'string',
-      defaultValue: 'Star',
+      defaultValue: 'star',
       description: 'Lucide icon name',
-      enum: ['Star', 'Heart', 'Check', 'Zap', 'Shield']
+      enum: ['star', 'heart', 'check', 'zap', 'shield']
     },
     {
       name: 'variant',
@@ -269,7 +408,7 @@ const instance: BlockInstanceSchema = {
   values: {
     title: 'Fast Performance',
     description: 'Lightning-fast response times',
-    icon: 'Zap',
+    icon: 'zap',
     variant: 'filled',
     showButton: true,
     buttonText: 'See Benchmarks'
@@ -364,7 +503,7 @@ const marketplace: BlockLibrarySchema = {
         label: 'Pricing Table Pro',
         description: 'Professional pricing comparison table',
         category: 'Marketing',
-        icon: 'DollarSign',
+        icon: 'dollar-sign',
         tags: ['pricing', 'saas', 'comparison'],
         author: 'ObjectUI Team',
         version: '2.1.0',

content/docs/blocks/index.mdx

@@ -3,6 +3,8 @@ title: "Building Blocks"
 description: "Clean, modern building blocks. Copy and paste into your apps. Open Source. Free forever."
 ---
 
+import { InteractiveDemo, DemoGrid } from '@/app/components/ComponentDemo';
+
 # Building Blocks for the Web
 
 Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven architecture. Copy the JSON, paste into your application, and ship faster.
@@ -11,6 +13,89 @@ Pre-built, production-ready UI blocks powered by ObjectUI's schema-driven archit
 
 Blocks are complete, ready-to-use UI patterns built with ObjectUI components. Unlike individual components, blocks are composed sections like login forms, pricing tables, dashboard cards, and more—ready to be dropped into your application.
 
+### Quick Preview
+
+<InteractiveDemo
+  title="Block Gallery"
+  description="A selection of ready-to-use blocks for rapid development"
+  examples={[
+    {
+      label: "Stats Card",
+      schema: {
+        type: "card",
+        className: "max-w-xs",
+        children: [
+          {
+            type: "stack",
+            spacing: 2,
+            className: "p-4",
+            children: [
+              {
+                type: "flex",
+                className: "items-center justify-between",
+                children: [
+                  { type: "text", content: "Total Revenue", className: "text-sm font-medium text-muted-foreground" },
+                  { type: "icon", name: "dollar-sign", className: "h-4 w-4 text-muted-foreground" }
+                ]
+              },
+              { type: "text", content: "$45,231.89", className: "text-2xl font-bold" },
+              { type: "text", content: "+20.1% from last month", className: "text-xs text-muted-foreground" }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      label: "Login Card",
+      schema: {
+        type: "card",
+        className: "max-w-sm mx-auto",
+        header: [
+          {
+            type: "stack",
+            spacing: 1,
+            className: "text-center",
+            children: [
+              { type: "text", content: "Sign In", className: "text-xl font-bold" },
+              { type: "text", content: "Enter your credentials", className: "text-sm text-muted-foreground" }
+            ]
+          }
+        ],
+        children: [
+          {
+            type: "stack",
+            spacing: 3,
+            children: [
+              { type: "stack", spacing: 2, children: [{ type: "label", label: "Email" }, { type: "input", inputType: "email", placeholder: "you@example.com" }] },
+              { type: "stack", spacing: 2, children: [{ type: "label", label: "Password" }, { type: "input", inputType: "password", placeholder: "••••••••" }] },
+              { type: "button", label: "Sign In", variant: "default", className: "w-full" }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      label: "Notification Item",
+      schema: {
+        type: "flex",
+        className: "items-start gap-3 p-4 border rounded-lg max-w-md",
+        children: [
+          { type: "avatar", fallback: "JD", className: "h-10 w-10" },
+          {
+            type: "stack",
+            spacing: 1,
+            children: [
+              { type: "text", content: "John Doe commented on your post", className: "text-sm font-medium" },
+              { type: "text", content: "Great work on the new design! The color scheme looks amazing.", className: "text-sm text-muted-foreground" },
+              { type: "text", content: "2 minutes ago", className: "text-xs text-muted-foreground" }
+            ]
+          }
+        ]
+      }
+    }
+  ]}
+/>
+
 ### Why Use Blocks?
 
 - 🚀 **Ship Faster** - Start with working examples instead of building from scratch