MDC Component Library

Complete reference for all available MDC components, their properties, and usage examples

🧩 MDC Component Library

The MDC Component Library provides a comprehensive set of interactive components for creating rich, engaging documentation. This reference covers all available components, their properties, and usage examples.

📋 Component Categories

Core Components

Code Display: Syntax highlighting and code editing
Interactive Demos: Live component demonstrations
Diagrams: Visual representations and flowcharts
Content: AI-generated and dynamic content

Advanced Components

Data Integration: Live data and API integration
Conditional Rendering: Role-based and conditional content
Widgets: Integration with existing widget system
Templates: Reusable content templates

🎨 Core Components

Code Block (`mdc:code-block`)

Display syntax-highlighted code with optional interactive features.

Basic Usage

<mdc:code-block language="typescript"> export class ExampleComponent { @Input() title = 'Hello World'; }

Properties

Property	Type	Default	Description
`language`	string	`text`	Programming language for syntax highlighting
`interactive`	boolean	`false`	Enable interactive features
`ai-generated`	boolean	`false`	Mark as AI-generated content
`theme`	string	`default`	Code editor theme
`showLineNumbers`	boolean	`true`	Display line numbers
`height`	string	`auto`	Container height
`readonly`	boolean	`false`	Make code read-only

Live Example

<mdc:code-block language="typescript" interactive="true" theme="vs-dark" showLineNumbers="true">

export class InteractiveComponent { title = signal('Interactive Demo');

updateTitle() { this.title.set('Updated!'); } }

Interactive Demo (`mdc:interactive-demo`)

Embed live Angular components for hands-on demonstrations.

Basic Usage

<mdc:interactive-demo component="ButtonComponent" :props='{"variant": "primary", "size": "large"}'>

This button demonstrates our design system.

Properties

Property	Type	Default	Description
`component`	string	-	Angular component selector
`props`	object	`{}`	Component properties (JSON)
`sandbox`	boolean	`false`	Enable sandbox mode
`height`	string	`auto`	Container height
`width`	string	`100%`	Container width
`theme`	string	`default`	Component theme

Advanced Usage

<mdc:interactive-demo component="FormComponent" :props='{ "fields": [ {"name": "email", "type": "email", "required": true}, {"name": "password", "type": "password", "required": true} ], "validation": true, "theme": "modern" }' sandbox="true" height="400px">

Try filling out this interactive form!

Diagram (`mdc:diagram`)

Create visual diagrams and flowcharts with AI assistance.

Basic Usage

<mdc:diagram type="flowchart" data='{ "nodes": [ {"id": "start", "label": "Start"}, {"id": "process", "label": "Process"}, {"id": "end", "label": "End"} ], "edges": [ {"from": "start", "to": "process"}, {"from": "process", "to": "end"} ] }'>

Properties

Property	Type	Default	Description
`type`	string	`flowchart`	Diagram type (flowchart, sequence, etc.)
`data`	object	`{}`	Diagram data structure
`ai-prompt`	string	-	AI prompt for diagram generation
`auto-update`	boolean	`false`	Enable automatic updates
`theme`	string	`modern`	Diagram theme
`interactive`	boolean	`false`	Enable interactive features

AI-Generated Diagrams

<mdc:diagram type="architecture" ai-prompt="Create a system architecture diagram for a microservices application" auto-update="true" theme="modern" interactive="true">

AI Content (`mdc:ai-content`)

Display AI-generated content with confidence scoring and review status.

Basic Usage

<mdc:ai-content prompt="Explain the benefits of component-based architecture" confidence="0.95">

AI-generated content appears here.

Properties

Property	Type	Default	Description
`prompt`	string	-	AI prompt used for generation
`confidence`	number	`1.0`	AI confidence score (0-1)
`generated-at`	string	-	Generation timestamp
`model`	string	-	AI model used
`review-status`	string	`pending`	Review status
`show-metadata`	boolean	`true`	Show AI metadata

Advanced Usage

<mdc:ai-content prompt="Create a comprehensive guide for Angular best practices" confidence="0.92" generated-at="2025-01-25T10:30:00Z" model="claude-3.5-sonnet" review-status="approved" show-metadata="true">

This content was generated by AI and has been reviewed for accuracy.

🚀 Advanced Components

Live Data (`mdc:live-data`)

Display real-time data from APIs with automatic refresh.

Basic Usage

<mdc:live-data source="/api/stats" refresh="30s" template="stats-card">

Properties

Property	Type	Default	Description
`source`	string	-	API endpoint URL
`refresh`	string	`60s`	Refresh interval
`template`	string	-	Display template
`fallback`	string	`Loading...`	Fallback content
`error-message`	string	`Error loading data`	Error message
`timeout`	number	`5000`	Request timeout (ms)

Advanced Usage

<mdc:live-data source="/api/user-activity" refresh="10s" template="activity-feed" fallback="Loading user activity..." error-message="Unable to load activity data" timeout="3000">

Conditional (`mdc:conditional`)

Show content based on conditions like user role or feature flags.

Basic Usage

<mdc:conditional condition="user.role === 'admin'" fallback="Admin access required">

Admin-only content here.

Properties

Property	Type	Default	Description
`condition`	string	-	JavaScript condition expression
`fallback`	string	-	Content to show when condition is false
`evaluate-once`	boolean	`false`	Evaluate condition only once
`debug`	boolean	`false`	Show debug information

Advanced Usage

<mdc:conditional condition="user.role === 'developer' && featureFlags.advancedDocs" fallback="Advanced documentation requires developer role and feature flag" evaluate-once="false" debug="true">

Advanced developer documentation with live examples.

Widget (`mdc:widget`)

Integrate with existing widget system for complex functionality.

Basic Usage

<mdc:widget type="theme-preview" :config='{"theme": "dark", "components": ["button", "card"]}'>

Properties

Property	Type	Default	Description
`type`	string	-	Widget type identifier
`config`	object	`{}`	Widget configuration
`props`	object	`{}`	Widget properties
`height`	string	`auto`	Widget height
`width`	string	`100%`	Widget width

Available Widget Types

theme-preview: Theme system preview
component-showcase: Component library showcase
code-playground: Interactive code editor
data-visualization: Charts and graphs
form-builder: Dynamic form builder

Template (`mdc:template`)

Create reusable content templates with dynamic data.

Basic Usage

<mdc:template name="user-card" :context='{"user": {"name": "John Doe", "role": "Developer"}}'>

Role: {{ user.role }}

Properties

Property	Type	Default	Description
`name`	string	-	Template name
`context`	object	`{}`	Template context data
`partial`	boolean	`false`	Render as partial template
`cache`	boolean	`true`	Cache template

🎨 Styling and Theming

CSS Classes

All MDC components receive automatic CSS classes:

/* Base component class */
.mdc-component {
  /* Base styles */
}

/* Component-specific classes */
.mdc-code-block { }
.mdc-interactive-demo { }
.mdc-diagram { }
.mdc-ai-content { }

/* State classes */
.mdc-loading { }
.mdc-error { }
.mdc-success { }

/* Interactive classes */
.mdc-interactive { }
.mdc-hover { }
.mdc-focus { }

Theme Integration

Components automatically inherit theme variables:

.mdc-component {
  background: var(--ux-surface);
  color: var(--ux-on-surface);
  border: 1px solid var(--ux-outline);
  border-radius: var(--ux-border-radius);
  padding: var(--ux-spacing-md);
}

Custom Styling

Override component styles with custom CSS:

.mdc-code-block {
  --mdc-code-bg: #1e1e1e;
  --mdc-code-text: #d4d4d4;
  --mdc-code-border: #3e3e3e;
}

🔧 Configuration

Global Configuration

Configure MDC components globally in your app:

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: MDC_CONFIG,
      useValue: {
        enableInteraction: true,
        sandboxComponents: false,
        maxRenderTime: 10000,
        componentTimeout: 5000,
        theme: 'modern'
      }
    }
  ]
};

Component-Specific Configuration

Configure individual components:

<mdc:code-block language="typescript" :config='{ "theme": "vs-dark", "fontSize": 14, "tabSize": 2, "wordWrap": true }'>

// Your code here

🚨 Error Handling

Common Errors

Component Not Found: Component doesn't exist
Invalid Properties: Invalid property values
Rendering Timeout: Component takes too long to render
Dependency Missing: Required dependencies not available

Error Display

<mdc:error-boundary fallback="Something went wrong" show-details="true">

<mdc:interactive-demo component="UnknownComponent">

Debug Mode

Enable debug mode for detailed error information:

# In frontmatter
ui:
  showDebugInfo: true

📊 Performance Optimization

Lazy Loading

Components are automatically lazy-loaded:

<mdc:interactive-demo component="HeavyComponent" lazy="true" placeholder="Loading component...">

Caching

Enable caching for better performance:

# In frontmatter
performance:
  cacheStrategy: aggressive
  maxCacheSize: 100

Bundle Optimization

Tree-shaking removes unused components
Code splitting for large components
Compression for production builds

🔗 Integration Examples

With Angular Components

@Component({
  selector: 'app-demo',
  template: `
    <mdc:interactive-demo
      component="ButtonComponent"
      :props='{"variant": "primary"}'>
    </mdc:interactive-demo>
  `
})
export class DemoComponent { }

With Services

@Injectable()
export class DataService {
  getLiveData() {
    return this.http.get('/api/data');
  }
}

<mdc:live-data source="dataService.getLiveData()" refresh="30s">

🎯 Best Practices

Component Selection

Choose the right component for your use case
Use simple components for basic needs
Reserve advanced components for complex interactions

Performance

Enable lazy loading for heavy components
Use appropriate caching strategies
Monitor component performance

Accessibility

Ensure components are keyboard accessible
Provide appropriate ARIA labels
Test with screen readers

Maintenance

Keep components up to date
Document custom configurations
Test across different devices and browsers

🔗 Related Resources

This component library is maintained by the GoGrab Development Team and is regularly updated with new components and features.

🧩 MDC Component Library

📋 Component Categories

Core Components

Advanced Components

🎨 Core Components

Code Block (mdc:code-block)

Basic Usage

Properties

Live Example

Interactive Demo (mdc:interactive-demo)

Basic Usage

Properties

Advanced Usage

Diagram (mdc:diagram)

Basic Usage

Properties

AI-Generated Diagrams

AI Content (mdc:ai-content)

Basic Usage

Properties

Advanced Usage

🚀 Advanced Components

Live Data (mdc:live-data)

Basic Usage

Properties

Advanced Usage

Conditional (mdc:conditional)

Basic Usage

Properties

Advanced Usage

Widget (mdc:widget)

Basic Usage

Properties

Available Widget Types

Template (mdc:template)

Basic Usage

{{ user.name }}

Properties

🎨 Styling and Theming

CSS Classes

Theme Integration

Custom Styling

🔧 Configuration

Global Configuration

Component-Specific Configuration

🚨 Error Handling

Common Errors

Error Display

Debug Mode

📊 Performance Optimization

Lazy Loading

Caching

Bundle Optimization

🔗 Integration Examples

With Angular Components

With Services

🎯 Best Practices

Component Selection

Performance

Accessibility

Maintenance

🔗 Related Resources

Code Block (`mdc:code-block`)

Interactive Demo (`mdc:interactive-demo`)

Diagram (`mdc:diagram`)

AI Content (`mdc:ai-content`)

Live Data (`mdc:live-data`)

Conditional (`mdc:conditional`)

Widget (`mdc:widget`)

Template (`mdc:template`)