Examples & Components

This section provides practical examples, demos, and implementation guides for our components, widgets, and systems. All examples are based on real implementations from our monorepo.

🎯 Live Examples

Component Showcase

• UX Test Application - Interactive component gallery (Port 5300)
• Space Map Application - Real-world application example (Port 4600+)
• Editor Web Application - Complete editor implementation (Port 5200)

🧩 Widget Examples

Widget Examples

Comprehensive examples of our widget system in action.

• Rich Text Editor Widgets - Text editing and formatting
• Media Widgets - Image, video, and file handling
• Layout Widgets - Grid systems and containers
• Interactive Widgets - Forms, buttons, and controls
• Data Widgets - Charts, tables, and data visualization

Key Features Demonstrated:

• Widget composition and nesting
• Responsive behavior across devices
• Theme integration and customization
• Data binding and state management
• Performance optimization techniques

🎨 Component Examples

Component Examples

Examples of individual UI components and their usage patterns.

• UX Framework Components - Multi-select, menus, panels
• Form Components - Inputs, selectors, validation
• Layout Components - Containers, grids, flexbox
• Navigation Components - Menus, breadcrumbs, tabs
• Feedback Components - Alerts, modals, tooltips

Implementation Patterns:

• Standalone component architecture
• OnPush change detection
• Angular signals integration
• Type-safe component APIs
• Accessibility best practices

🎨 Theme Examples

Theme Examples

Demonstrations of our theme system capabilities.

• CSS Variables - Dynamic theming with custom properties
• Utility Classes - ux- prefixed utility classes
• SCSS Integration - Mixins, functions, and variables
• Dark/Light Modes - Theme switching implementations
• Custom Themes - Creating and applying custom themes

Theme Features:

// CSS Variables
.my-component {
  background-color: var(--ux-primary);
  color: var(--ux-on-primary);
  border: 1px solid var(--ux-outline);
}

// Utility Classes
<div class="ux-bg-primary ux-text-on-primary ux-rounded-lg ux-shadow-md">
  Themed content
</div>

📱 Responsive System

Responsive System

Complete responsive design system with breakpoints, utilities, and adaptive components.

• Breakpoint System - Mobile-first responsive design
• Responsive Utilities - Classes for different screen sizes
• Adaptive Components - Components that adjust to screen size
• Grid System - Flexible grid layouts
• Typography - Responsive text scaling

Responsive Features:

• Mobile-first approach
• Flexible grid systems
• Adaptive typography
• Touch-friendly interactions
• Performance optimization for mobile

🔧 Implementation Examples

Database Integration

Example from Space Map application showing Dexie.js integration:

// Database service example
@Injectable({
  providedIn: 'root'
})
export class SpaceMapDbService {
  private db: SpaceMapDatabase;
  
  async savePages(pages: PageNode[]): Promise<void> {
    const flatPages = this.flattenPageTree(pages);
    await this.db.flatPages.bulkPut(flatPages);
    this.pagesSubject.next(pages);
  }
}

Component Usage

Example from UX Framework showing multi-select component:

@Component({
  selector: 'app-galaxy-selector',
  standalone: true,
  imports: [UxMultiSelectComponent],
  template: `
    <ux-multi-select
      [options]="galaxyOptions"
      [(ngModel)]="selectedGalaxies"
      placeholder="Select Galaxies"
      (selectionChange)="onSelectionChange($event)">
    </ux-multi-select>
  `
})
export class GalaxySelectorComponent {
  galaxyOptions: SelectOption[] = [
    { value: 'galaxy1', label: 'Main Navigation' },
    { value: 'galaxy2', label: 'Features' }
  ];
}

Theme Integration

Example showing theme system integration:

// Theme service usage
@Component({
  selector: 'app-themed-component',
  template: `
    <div class="themed-container ux-bg-surface ux-text-on-surface">
      <h1 class="ux-text-primary">Themed Content</h1>
    </div>
  `,
  styles: [`
    .themed-container {
      padding: var(--ux-spacing-md);
      border-radius: var(--ux-border-radius);
      box-shadow: var(--ux-shadow-sm);
    }
  `]
})
export class ThemedComponent {}

🚀 Getting Started with Examples

Running Examples Locally

1. Start applications:

# UX Test (Component showcase)
npx nx serve ux-test         # Port 5300

# Space Map (Real application)
npx nx serve space-map       # Port 4600+

# Editor Web (Complete editor)
npx nx serve editor-web      # Port 5200

2. Explore components:
   • Navigate to UX Test for interactive component gallery
   • Check Space Map for real-world implementation
   • Review Editor Web for complex application patterns

Code Examples Location

All examples are available in our repository:

apps/
├── ux-test/src/           # Component showcase examples
├── space-map/src/         # Real application examples
└── editor-web/src/        # Editor implementation examples

libs/
├── ux-framework/src/      # Component source code
├── theme-system/src/      # Theme system examples
└── widgets/src/           # Widget implementation examples

📚 Example Categories

Basic Examples

• Simple component usage
• Basic theming
• Standard layouts
• Common patterns

Intermediate Examples

• Component composition
• Complex state management
• Custom theming
• Responsive layouts

Advanced Examples

• Complex widgets
• Database integration
• Performance optimization
• Accessibility implementation

Real-World Examples

• Complete applications
• Production patterns
• Best practices
• Architecture examples

🎯 Learning Path

For Beginners

1. Start with Component Examples
2. Learn Theme Examples
3. Explore Widget Examples
4. Try the UX Test Application (Port 5300)

For Intermediate Developers

1. Study Responsive System
2. Analyze Space Map implementation (Port 4600+)
3. Review database integration patterns
4. Implement custom components

For Advanced Developers

1. Examine Editor Web architecture (Port 5200)
2. Study performance optimization techniques
3. Implement complex widgets
4. Contribute to framework libraries

🔗 Related Resources

• Applications - Complete application documentation
• Libraries - Library-specific documentation
• Development Guides - How to build and extend
• AI Instructions - Context for AI development

💡 Contributing Examples

We welcome contributions of new examples! To add an example:

1. Create the example in the appropriate application
2. Document the implementation with clear comments
3. Add to this documentation with proper linking
4. Test thoroughly across different scenarios
5. Submit a pull request with your example

All examples should follow our established patterns and demonstrate best practices for the Editor platform.