Component views

Component Views

The Component Views module provides comprehensive Views integration for the Component Field module, transforming how you display, filter, and manage Single Directory Components (SDC) in Drupal. This powerful module leverages the Component Field module's auto-discovery system to create dynamic, filterable component galleries and advanced content displays.

Key Features

🎯 Advanced Views Integration

Component Views extends Drupal's Views system with specialized plugins designed specifically for component content:

• Dedicated Field Plugin: Optimized component rendering with multiple display modes
• Component Type Filter: Advanced filtering with live search and usage statistics
• Component Type Argument: URL-based filtering for dynamic component galleries
• Performance Optimization: Intelligent caching and component definition preloading

📊 Multiple Display Modes

Choose the perfect display mode for your content strategy:

• Full Mode: Complete component rendering with all properties and metadata
• Summary Mode: Key information display with usage statistics and primary properties
• List Mode: Minimal display showing component names and property counts
• Compact Mode: Ultra-condensed inline display for space-constrained layouts

🔍 Powerful Filtering & Discovery

The module integrates seamlessly with the Component Field module's auto-discovery functionality to provide:

• Automatic Component Detection: Leverages component_field.discovery service for real-time component availability
• Multi-Select Filtering: Filter by multiple component types simultaneously
• Live Search: Search within component filter options with instant results
• Usage Analytics: Display component popularity and usage statistics
• Exposed Filters: Allow site visitors to filter component galleries interactively

Integration with Component Field Auto-Discovery

Component Views builds upon the robust auto-discovery system provided by the Component Field module:

Automatic Component Recognition

The module automatically recognizes components discovered by the Component Field module's scanning system, which searches for:

• MUI Components: Material UI components with proper imports from @mui/material
• SDC Components: Single Directory Components following Drupal standards
• Theme Components: Components in active theme directories
• Custom Components: User-defined components with proper prop definitions

Component discovery is cached for performance and automatically refreshes when components change.

Real-Time Component Updates

When you add or modify components in your theme, the Component Views system automatically:

• Updates available filter options
• Refreshes component statistics
• Maintains view functionality without manual intervention

Quick Start Guide

Prerequisites

Ensure the Component Field module is installed and functional:

drush en component_field
drush en component_views
drush cr

Creating Your First Component Gallery

Step 1: Navigate to /admin/structure/views/add and create a new view based on "Content"

Step 2: Add your component field with the following configuration:

• Select your component field (e.g., "field_component_field")
• Choose display mode: Full, Summary, List, or Compact
• Enable responsive design and animations as needed

Step 3: Add component type filtering:

• Add "Component Type" filter criteria
• Expose the filter to visitors
• Enable multiple selection and search functionality

Step 4: Configure display settings and save your view

Advanced Configuration

Performance Optimization

Component Views includes several performance features:

Automatic Preloading: Component definitions are preloaded to reduce discovery overhead during view rendering.

Example cache configuration:

// Enable aggressive caching for component views
$view->element['#cache'] = [
  'tags' => ['component_field', 'component_field.discovery'],
  'contexts' => ['user.permissions', 'url.query_args'],
  'max-age' => 3600, // 1 hour cache
];

Component Usage Analytics

Access comprehensive component usage data through the helper service:

// Get the helper service<br>
$helper = \Drupal::service('component_views.helper');

// Get usage statistics across the site
$stats = $helper->getComponentUsageStats();
// Returns: ['button' => 45, 'card' => 23, 'modal' => 12]

// Find entities using specific components
$entities = $helper->getEntitiesUsingComponent('button', 'node', 50);

// Get most popular components
$popular = $helper->getPopularComponents(10);

Theming and Customisation

Template Structure

Component Views provides comprehensive theming support with multiple template files:

• component-views-field.html.twig - Main field display template
• component-views-summary.html.twig - Summary mode template
• component-views-list-item.html.twig - List mode template
• component-views-compact.html.twig - Compact mode template

CSS Classes

Extensive CSS classes are provided for styling flexibility:

/* Field wrapper classes */
.component-views-field
.component-views-mode-{full|summary|list|compact}
.component-views-count-{number}

/* Individual component classes */
.component-views-item
.component-views-{component-type}
.component-views-delta-{number}

JavaScript Enhancement

The module provides several Drupal behaviours for enhanced interactivity:

• componentViewsField: Enhances component display with interactive features
• componentViewsFilter: Adds live search and filtering capabilities
• componentViewsAdmin: Improves admin interface usability

Integration Examples

Search API Integration

Make component content searchable:

function mymodule_search_api_alter_callback(&$value, $type) {
  if ($type === 'component_field') {
    $searchable_text = '';
    foreach ($value as $component) {
      $searchable_text .= ' ' . $component['type'];
      if (isset($component['config']['label'])) {
        $searchable_text .= ' ' . $component['config']['label'];
      }
    }
    $value = $searchable_text;
  }
}

REST API Exposure

Expose component views via REST API:

function mymodule_rest_resource_alter(&$resources) {
  $resources['component_views'] = [
    'class' => 'Drupal\mymodule\Plugin\rest\resource\ComponentViewsResource',
    'methods' => ['GET'],
    'formats' => ['json'],
  ];
}

Requirements and Compatibility

Dependencies

• Component Field Module: Required for component discovery and field functionality
• Drupal Core Views: Version 10.4+ or 11.x
• Field API: Core Drupal field system

Component Compatibility

Component Views works with any components discovered by the Component Field module, including:

• Material UI (MUI) components
• Custom Single Directory Components
• Theme-specific components
• Third-party component libraries

Performance and Scalability

The module is designed for high-performance scenarios:

Intelligent Caching: Leverages Drupal's cache system with component-specific cache tags and contexts for optimal performance.

• Component Definition Preloading: Reduces discovery overhead during view rendering
• Lazy Loading: Deferred loading for large component lists
• Batch Processing: Handles large datasets efficiently
• Query Optimization: Database queries optimized for component filtering

Use Cases

Component Design Systems

Create comprehensive component galleries showcasing your design system components with usage examples and documentation.

Content Management

Provide content editors with powerful tools to find and manage content based on the components used.

Analytics and Reporting

Generate reports on component usage across your site to inform design system decisions and identify popular patterns.

Component Marketplaces

Build internal or external component marketplaces where teams can discover and reuse components.

Support and Documentation

For comprehensive documentation, examples, and troubleshooting:

• Module README: Detailed technical documentation and API reference
• Issue Queue: Report bugs and request features
• Community Support: Drupal Slack #components channel

The Component Views module represents a powerful evolution in component-based content management, providing the tools needed to build sophisticated, component-driven websites with ease.