feat: add complex examples for kanban board and data display components

- Introduced a new complex example for a kanban board with tasks and statuses.
- Added multiple data display examples including an enterprise data table, a simple data table, and a calendar view.
- Implemented forms examples showcasing a user registration form and an Airtable-style form with validation and conditional fields.
- Created layouts examples featuring a responsive grid layout and a dashboard with various metrics.
- Added primitives examples demonstrating button variants and input states.

Author: hotlong

apps/playground/src/data/examples.ts

@@ -0,0 +1,5 @@
+import kanbanBoard from './complex/kanban-board.json';
+
+export const complex = {
+  'kanban-board': JSON.stringify(kanbanBoard, null, 2)
+};

apps/playground/src/data/examples/complex.ts

@@ -0,0 +1,82 @@
+{
+  "type": "div",
+  "className": "space-y-4",
+  "body": [
+    {
+      "type": "div",
+      "className": "space-y-2",
+      "body": [
+        {
+          "type": "text",
+          "content": "Kanban Board",
+          "className": "text-2xl font-bold"
+        },
+        {
+          "type": "text",
+          "content": "Drag and drop kanban board for project management - similar to Trello",
+          "className": "text-muted-foreground"
+        }
+      ]
+    },
+    {
+      "type": "kanban",
+      "className": "h-[600px]",
+      "columns": [
+        { "id": "todo", "title": "To Do", "color": "bg-slate-100" },
+        { "id": "in-progress", "title": "In Progress", "color": "bg-blue-50" },
+        { "id": "review", "title": "Review", "color": "bg-orange-50" },
+        { "id": "done", "title": "Done", "color": "bg-green-50" }
+      ],
+      "data": [
+        { 
+          "id": 1, 
+          "title": "Research Competitors", 
+          "description": "Analyze top 3 competitors features and pricing",
+          "status": "todo",
+          "priority": "high",
+          "assignee": "John Doe"
+        },
+        { 
+          "id": 2, 
+          "title": "Design System Draft", 
+          "description": "Create initial tokens and core components",
+          "status": "in-progress",
+          "priority": "critical",
+          "assignee": "Jane Smith"
+        },
+        { 
+          "id": 3, 
+          "title": "Setup CI/CD Pipeline", 
+          "description": "Configure GitHub Actions for automated testing",
+          "status": "review",
+          "priority": "medium",
+          "assignee": "Bob Johnson"
+        },
+        { 
+          "id": 4, 
+          "title": "User Interview Script", 
+          "description": "Prepare questions for user research phase",
+          "status": "todo",
+          "priority": "low",
+          "assignee": "Alice Williams"
+        },
+        { 
+          "id": 5, 
+          "title": "Database Schema", 
+          "description": "Finalize database relationships and indexing strategy",
+          "status": "done",
+          "priority": "critical",
+          "assignee": "Charlie Brown"
+        },
+        { 
+          "id": 6, 
+          "title": "API Documentation", 
+          "description": "Document all endpoints using OpenAPI spec",
+          "status": "in-progress",
+          "priority": "high",
+          "assignee": "Diana Prince"
+        }
+      ]
+    }
+  ]
+}

apps/playground/src/data/examples/complex/kanban-board.json

@@ -0,0 +1,9 @@
+import enterpriseTable from './data-display/enterprise-table.json';
+import dataTableSimple from './data-display/data-table-simple.json';
+import calendarView from './data-display/calendar-view.json';
+
+export const dataDisplay = {
+  'enterprise-table': JSON.stringify(enterpriseTable, null, 2),
+  'data-table-simple': JSON.stringify(dataTableSimple, null, 2),
+  'calendar-view': JSON.stringify(calendarView, null, 2)
+};

apps/playground/src/data/examples/data-display.ts

@@ -0,0 +1,85 @@
+{
+  "type": "div",
+  "className": "space-y-4",
+  "body": [
+    {
+      "type": "div",
+      "className": "space-y-2",
+      "body": [
+        {
+          "type": "text",
+          "content": "Calendar View",
+          "className": "text-2xl font-bold"
+        },
+        {
+          "type": "text",
+          "content": "Airtable-style calendar for displaying records as events",
+          "className": "text-muted-foreground"
+        }
+      ]
+    },
+    {
+      "type": "calendar-view",
+      "className": "h-[600px] border rounded-lg",
+      "view": "month",
+      "titleField": "title",
+      "startDateField": "start",
+      "endDateField": "end",
+      "colorField": "type",
+      "colorMapping": {
+        "meeting": "#3b82f6",
+        "deadline": "#ef4444",
+        "event": "#10b981",
+        "holiday": "#8b5cf6"
+      },
+      "data": [
+        {
+          "id": 1,
+          "title": "Team Standup",
+          "start": "2024-01-01T09:00:00.000Z",
+          "end": "2024-01-01T09:30:00.000Z",
+          "type": "meeting",
+          "allDay": false
+        },
+        {
+          "id": 2,
+          "title": "Project Launch",
+          "start": "2024-01-03T00:00:00.000Z",
+          "type": "deadline",
+          "allDay": true
+        },
+        {
+          "id": 3,
+          "title": "Client Meeting",
+          "start": "2024-01-05T09:00:00.000Z",
+          "end": "2024-01-05T14:00:00.000Z",
+          "type": "meeting",
+          "allDay": false
+        },
+        {
+          "id": 4,
+          "title": "Team Building Event",
+          "start": "2024-01-07T00:00:00.000Z",
+          "end": "2024-01-09T00:00:00.000Z",
+          "type": "event",
+          "allDay": true
+        },
+        {
+          "id": 5,
+          "title": "Code Review",
+          "start": "2024-01-02T00:00:00.000Z",
+          "end": "2024-01-02T15:00:00.000Z",
+          "type": "meeting",
+          "allDay": false
+        },
+        {
+          "id": 6,
+          "title": "National Holiday",
+          "start": "2024-01-10T00:00:00.000Z",
+          "type": "holiday",
+          "allDay": true
+        }
+      ]
+    }
+  ]
+}

apps/playground/src/data/examples/data-display/calendar-view.json

@@ -0,0 +1,44 @@
+{
+  "type": "div",
+  "className": "space-y-6",
+  "body": [
+    {
+      "type": "div",
+      "className": "space-y-2",
+      "body": [
+        {
+          "type": "text",
+          "content": "Simple Data Table",
+          "className": "text-2xl font-bold"
+        },
+        {
+          "type": "text",
+          "content": "Minimal configuration with essential features only",
+          "className": "text-muted-foreground"
+        }
+      ]
+    },
+    {
+      "type": "data-table",
+      "pagination": false,
+      "searchable": false,
+      "selectable": false,
+      "sortable": true,
+      "exportable": false,
+      "rowActions": false,
+      "columns": [
+        { "header": "Product", "accessorKey": "product" },
+        { "header": "Price", "accessorKey": "price" },
+        { "header": "Stock", "accessorKey": "stock" },
+        { "header": "Category", "accessorKey": "category" }
+      ],
+      "data": [
+        { "product": "Laptop", "price": "$999", "stock": "45", "category": "Electronics" },
+        { "product": "Mouse", "price": "$29", "stock": "150", "category": "Accessories" },
+        { "product": "Keyboard", "price": "$79", "stock": "89", "category": "Accessories" },
+        { "product": "Monitor", "price": "$299", "stock": "32", "category": "Electronics" },
+        { "product": "Desk Chair", "price": "$199", "stock": "18", "category": "Furniture" }
+      ]
+    }
+  ]
+}