Add comprehensive UI showcase examples with FormView, PageSchema, and enhanced component properties

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

examples/ui-showcase/README.md

@@ -0,0 +1,86 @@
+# UI Showcase Examples
+
+This example demonstrates the comprehensive UI capabilities of ObjectStack, including:
+
+## 📋 FormView Examples
+
+Demonstrates all 6 form layout types with advanced features:
+
+- **Simple**: Basic sectioned forms with collapsible sections and 1-4 column layouts
+- **Tabbed**: Multi-tab forms for organizing complex data
+- **Wizard**: Step-by-step guided processes
+- **Split**: Master-detail split view
+- **Drawer**: Side panel forms
+- **Modal**: Dialog-based forms
+
+### Form Features Showcased
+
+- **Section Configuration**: Collapsible sections with 1-4 column layouts
+- **Field-Level Controls**:
+  - `readonly` - Read-only fields
+  - `required` - Required field validation
+  - `hidden` - Conditionally hide fields
+  - `colSpan` - Multi-column spanning (1-4)
+  - `visibleOn` - Conditional visibility expressions
+  - `dependsOn` - Cascading field dependencies
+  - Custom `widget` - Custom field renderers
+- **Multiple Named Views**: Switch between different form layouts per scenario
+
+## 📄 PageSchema Examples
+
+Demonstrates component-based page layouts similar to Salesforce Lightning:
+
+- **Record Pages**: Detail pages for individual records
+- **Home Pages**: Dashboard-style landing pages
+- **App Pages**: Application launcher pages
+- **Utility Pages**: Utility bar components
+
+### Page Features Showcased
+
+- **Template-Based Layouts**: Regions-based component composition
+- **Rich Component Types**:
+  - `record:details` - Record detail view with 1-4 columns
+  - `record:highlights` - Key field highlights (1-7 fields)
+  - `record:related_list` - Related records list
+  - `page:tabs` - Tabbed content areas
+  - `page:accordion` - Collapsible panels
+  - `ai:chat_window` - AI assistant integration
+- **Visibility Rules**: Component-level conditional visibility
+- **Profile Assignment**: Assign pages to specific user profiles
+
+## 🧩 Component Properties
+
+Comprehensive component property schemas:
+
+- `RecordDetailsProps`: 1-4 columns, auto/custom layout modes
+- `RecordHighlightsProps`: 1-7 key fields highlighted
+- `RecordRelatedListProps`: Related object, columns, sorting, limits
+
+## 📁 Structure
+
+```
+ui-showcase/
+├── README.md (this file)
+└── src/
+    ├── objects/
+    │   └── lead.object.ts (sample object for UI examples)
+    ├── views/
+    │   └── lead.view.ts (all 6 form types + multiple list views)
+    └── pages/
+        ├── lead_detail.page.ts (record page)
+        ├── home.page.ts (home page)
+        ├── app_launcher.page.ts (app page)
+        └── utility_bar.page.ts (utility page)
+```
+
+## 🚀 Usage
+
+These examples serve as reference implementations demonstrating best practices for:
+
+1. **Salesforce Developers**: Familiar patterns like Page Layouts and FlexiPages
+2. **Low-Code Builders**: Visual form and page composition
+3. **AI Agents**: Structured metadata for code generation
+
+All examples follow ObjectStack naming conventions:
+- Configuration properties: `camelCase`
+- Machine names/identifiers: `snake_case`

examples/ui-showcase/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@objectstack/example-ui-showcase",
+  "version": "3.0.0",
+  "private": true,
+  "description": "Comprehensive UI examples showcasing FormView, PageSchema, and component capabilities",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "objectstack",
+    "ui",
+    "examples",
+    "formview",
+    "page",
+    "components"
+  ],
+  "author": "ObjectStack",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@objectstack/spec": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.0"
+  }
+}

examples/ui-showcase/src/index.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * UI Showcase Examples
+ * 
+ * Comprehensive examples demonstrating ObjectStack UI capabilities:
+ * - FormView: All 6 layout types (simple, tabbed, wizard, split, drawer, modal)
+ * - PageSchema: Component-based page layouts (record, home, app, utility)
+ * - Component Properties: Rich component configuration
+ */
+
+export * from './objects';
+export * from './views';
+export * from './pages';

examples/ui-showcase/src/objects/index.ts

@@ -0,0 +1,3 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+export { Lead } from './lead.object';

examples/ui-showcase/src/objects/lead.object.ts

@@ -0,0 +1,165 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { ObjectSchema, Field } from '@objectstack/spec/data';
+
+/**
+ * Lead Object Definition
+ * 
+ * A simplified Lead object used to demonstrate UI capabilities.
+ * This object serves as the foundation for view and page examples.
+ */
+export const Lead = ObjectSchema.create({
+  name: 'lead',
+  label: 'Lead',
+  pluralLabel: 'Leads',
+  icon: 'user-plus',
+  description: 'Potential customers not yet qualified',
+  
+  fields: {
+    // Basic Information
+    salutation: Field.select(['Mr.', 'Ms.', 'Mrs.', 'Dr.'], {
+      label: 'Salutation',
+    }),
+    
+    first_name: Field.text({
+      label: 'First Name',
+      required: true,
+      searchable: true,
+    }),
+    
+    last_name: Field.text({
+      label: 'Last Name',
+      required: true,
+      searchable: true,
+    }),
+    
+    company: Field.text({
+      label: 'Company',
+      required: true,
+      searchable: true,
+    }),
+    
+    title: Field.text({
+      label: 'Job Title',
+    }),
+    
+    // Contact Information
+    email: Field.email({
+      label: 'Email',
+      required: true,
+      unique: true,
+    }),
+    
+    phone: Field.text({
+      label: 'Phone',
+      format: 'phone',
+    }),
+    
+    mobile: Field.text({
+      label: 'Mobile',
+      format: 'phone',
+    }),
+    
+    website: Field.url({
+      label: 'Website',
+    }),
+    
+    // Lead Classification
+    status: Field.select({
+      label: 'Lead Status',
+      required: true,
+      options: [
+        { label: 'New', value: 'new', color: '#808080', default: true },
+        { label: 'Contacted', value: 'contacted', color: '#FFA500' },
+        { label: 'Qualified', value: 'qualified', color: '#4169E1' },
+        { label: 'Unqualified', value: 'unqualified', color: '#FF0000' },
+      ]
+    }),
+    
+    rating: Field.rating(5, {
+      label: 'Lead Score',
+      description: 'Lead quality score (1-5 stars)',
+      allowHalf: true,
+    }),
+    
+    lead_source: Field.select(['Web', 'Referral', 'Event', 'Partner', 'Advertisement'], {
+      label: 'Lead Source',
+    }),
+    
+    industry: Field.select(['Technology', 'Finance', 'Healthcare', 'Retail', 'Manufacturing'], {
+      label: 'Industry',
+    }),
+    
+    // Financial
+    annual_revenue: Field.currency({
+      label: 'Annual Revenue',
+      scale: 2,
+    }),
+    
+    number_of_employees: Field.number({
+      label: 'Number of Employees',
+    }),
+    
+    // Address
+    street: Field.text({
+      label: 'Street',
+    }),
+    
+    city: Field.text({
+      label: 'City',
+    }),
+    
+    state: Field.text({
+      label: 'State/Province',
+    }),
+    
+    postal_code: Field.text({
+      label: 'Postal Code',
+    }),
+    
+    country: Field.select(['United States', 'Canada', 'United Kingdom', 'Germany', 'France', 'China', 'Japan'], {
+      label: 'Country',
+    }),
+    
+    // Additional Information
+    description: Field.markdown({
+      label: 'Description',
+    }),
+    
+    notes: Field.richtext({
+      label: 'Notes',
+      description: 'Rich text notes with formatting',
+    }),
+    
+    // Assignment
+    owner: Field.lookup('user', {
+      label: 'Lead Owner',
+      required: true,
+    }),
+    
+    // Privacy
+    do_not_call: Field.boolean({
+      label: 'Do Not Call',
+      defaultValue: false,
+    }),
+    
+    email_opt_out: Field.boolean({
+      label: 'Email Opt Out',
+      defaultValue: false,
+    }),
+  },
+  
+  enable: {
+    trackHistory: true,
+    searchable: true,
+    apiEnabled: true,
+    files: true,
+    feeds: true,
+    activities: true,
+    trash: true,
+    mru: true,
+  },
+  
+  titleFormat: '{first_name} {last_name} - {company}',
+  compactLayout: ['first_name', 'last_name', 'company', 'email', 'status', 'owner'],
+});

examples/ui-showcase/src/pages/app_launcher.page.ts

@@ -0,0 +1,70 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { Page } from '@objectstack/spec/ui';
+
+/**
+ * App Launcher Page
+ * 
+ * Demonstrates an application launcher page similar to Salesforce App Launcher.
+ * 
+ * Features:
+ * - Grid-based app icon layout
+ * - Global search
+ * - Quick access to all apps
+ */
+export const AppLauncherPage: Page = {
+  name: 'app_launcher_page',
+  label: 'App Launcher',
+  description: 'Central hub for accessing all applications',
+  
+  type: 'app',
+  
+  template: 'centered',
+  
+  regions: [
+    {
+      name: 'header',
+      width: 'full',
+      components: [
+        {
+          type: 'global:search',
+          id: 'app_search',
+          label: 'Search Apps',
+          properties: {},
+        },
+      ],
+    },
+    
+    {
+      name: 'main',
+      width: 'large',
+      components: [
+        {
+          type: 'page:header',
+          id: 'launcher_header',
+          label: 'App Launcher Header',
+          properties: {
+            title: 'App Launcher',
+            subtitle: 'Select an app to get started',
+            icon: 'th',
+            breadcrumb: false,
+          },
+        },
+        {
+          type: 'app:launcher',
+          id: 'app_grid',
+          label: 'Application Grid',
+          properties: {},
+        },
+      ],
+    },
+  ],
+  
+  isDefault: false,
+  assignedProfiles: ['sales_user', 'sales_manager', 'service_user', 'system_administrator'],
+  
+  aria: {
+    label: 'App Launcher Page',
+    description: 'Central application launcher for accessing all apps',
+  },
+};