jplhomer / blade-library
Develop your Blade components in-browser.
Requires
- php: ^7.4
- illuminate/filesystem: ^7.18
- livewire/livewire: ^1.2
Requires (Dev)
- friendsofphp/php-cs-fixer: ^2.16
- orchestra/testbench: ^5.0
- phpunit/phpunit: ^9.0
- psalm/plugin-laravel: ^1.2
- vimeo/psalm: ^3.11
- dev-master
- v0.0.2
- v0.0.1
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.7
- dev-dependabot/npm_and_yarn/url-parse-1.5.3
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/ws-6.2.2
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/browserslist-4.16.6
- dev-dependabot/npm_and_yarn/lodash-4.17.21
- dev-dependabot/npm_and_yarn/ssri-6.0.2
- dev-dependabot/npm_and_yarn/elliptic-6.5.4
- dev-dependabot/npm_and_yarn/ini-1.3.8
This package is auto-updated.
Last update: 2022-02-14 16:01:11 UTC
README
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.