jplhomer/blade-library

This package is abandoned and no longer maintained. No replacement package was suggested.

Develop your Blade components in-browser.


README

Latest Version on Packagist GitHub Tests Action Status Total Downloads

Blade Library screenshot

Installation

You can install the package via composer:

composer require jplhomer/blade-library

Then, publish assets, configuration, and views with:

php artisan blade-library:install

Next, you'll want to include your app's CSS stylesheet's in your component examples, or customize the logo used in Blade Library.

Edit the head.blade.php and logo.blade.php files published to your resources/views/vendor/library/partials directory.

<!-- resources/views/vendor/library/partials/head.blade.php -->

<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

Usage

Use the @story Blade partial to define stories in your components:

<!-- views/components/button.blade.php -->
<button>{{ $slot }}</button>

@story
<x-button>Example</x-button>
@endstory

Then, open up your app and view them at the /library route.

Named stories

You can assign stories names by passing them to the @story directive:

@story('My Story')
<x-button>Example</x-button>
@endstory

Story Books

In addition to defining stories inline in your components, you can also create a dedicated book to provide documentation and additional story examples for your components.

First, create a file matching the name of your component within your resources/views/books directory:

<!-- resources/views/books/button.blade.php -->

<p>Buttons are the foundation of our app:</p>

@story
<x-button>Click Me</x-button>
@endstory

When you provide a book of stories, it will be merged with any stories defined inline in your components.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email jplhomer@gmail.com instead of using the issue tracker.

Credits

License

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