README

A Laravel package for React component discovery, registration, and showcase functionality. Easily browse and explore React components in your Laravel application with a beautiful, shadcn/ui-based interface.

Features

🔍 Automatic Component Discovery - Recursively scans configured directories for React components
🎨 Beautiful UI - Clean, responsive interface built with shadcn/ui components
⚙️ Highly Configurable - Customize routes, directories, templates, and more
🗃️ Smart Caching - Performance-optimized with configurable caching
📝 Todo Tracking - Extract and display TODO comments for component development tracking
🔧 Props Documentation - Automatically extract TypeScript prop definitions
🌍 Environment Aware - Disable in production environments automatically
🎯 Laravel 12 Ready - Built specifically for Laravel 12 with Inertia.js integration

Installation

Install the package via Composer:

composer require stephenr85/laravel-react-component-registry

Publish the configuration file:

php artisan vendor:publish --tag=config --provider="StephenR85\LaravelReactComponentRegistry\ComponentRegistryServiceProvider"

Optionally publish the views for customization:

php artisan vendor:publish --tag=views --provider="StephenR85\LaravelReactComponentRegistry\ComponentRegistryServiceProvider"

Configuration

Enable the component registry in your .env file:

COMPONENT_REGISTRY_ENABLED=true

Configure the package in config/component-registry.php:

return [
    'enabled' => env('COMPONENT_REGISTRY_ENABLED', false),
    'excluded_environments' => ['production'],
    'routes' => [
        'prefix' => 'dev/components',
        'middleware' => ['web'],
        'name_prefix' => 'component-registry.',
    ],
    'directories' => [
        'resources/js/components',
        'resources/js/pages',
    ],
    // ... more configuration options
];

Usage

Once configured, visit /dev/components (or your configured route prefix) to browse your React components.

Component Discovery

The package will automatically discover React components (.tsx and .jsx files) in your configured directories. It extracts:

Component names and descriptions
TypeScript prop definitions
TODO/FIXME comments for development tracking
File metadata and organization

Todo Tracking

Add TODO comments in your components to track development progress:

// TODO: Add loading state handling
// TODO: Implement error boundaries
// FIXME: Performance optimization needed

export default function MyComponent() {
  // Component code
}

These will be automatically extracted and displayed in the component registry with a progress tracker.

Facade Usage

You can also interact with the component registry programmatically:

use StephenR85\LaravelReactComponentRegistry\Facades\ComponentRegistry;

// Discover all components
$components = ComponentRegistry::discover();

// Find a specific component
$component = ComponentRegistry::findComponent('my-component');

// Clear the discovery cache
ComponentRegistry::clearCache();

Development Status

✅ Task 1 Complete - Package scaffolding and Laravel integration
🚧 Task 2 In Progress - Core component discovery service
⏳ Task 3 Planned - Route and controller implementation
⏳ Task 4 Planned - Template and view system
⏳ Task 5 Planned - Configuration and documentation

Requirements

PHP 8.2+
Laravel 12.0+
Inertia.js 2.0+

Testing

Run the package tests:

composer test

License

The MIT License (MIT). Please see License File for more information.

rushing / laravel-react-component-registry

Maintainers

Details