README

A simple pattern library package to document and display blade components.

Installation

Install via Composer:

composer require jamesyps/laravel-myriad

Publish assets:

php artisan vendor:publish --tag myriad-assets

You can then visit the pattern library at https://your-app.xxx/myriad/components

Components

The primary purpose of this package is to document the components within a Laravel project. For more information on how components can be used, see the Laravel documentation.

To get started create a new component in the configured components directory, in this case let's start with a button:

<button class="btn btn-{{ $type ?? 'default'}}">
	{{ $slot }}
</button>

Now it needs some documentation to show others how it can be used, what slots are available and what attributes can be passed through. This can be done with a blade comment and yaml front matter:

{{--

---
slots:
    - default: My Button
variables:
    - type: primary
---

--}}

<button class="btn btn-{{ $type ?? 'default'}}">
	{{ $slot }}
</button>

Within the preview view two buttons will now appear, one with the class btn-default and another with a class of btn-primary. Each one will have the text of My Button.

The front matter supports custom properties too which will be visible on the preview screen, for example if you wanted to show the current status or browser support.

You can also provide further information by adding text below the last ---. There is full markdown support within this section so you can provide nicely formatted documentation like so:

{{--

---
slots:
    - default: My Button
variables:
    - type: primary
---

# Instructions

This is a button and should be used when an interaction is required. 
**Do not** use this for navigation, instead use an `<a>` tag for this.

--}}

<button class="btn btn-{{ $type ?? 'default'}}">
	{{ $slot }}
</button>

Customisation

Myriad has been developed to be full configurable to the needs of your application and workflow.

Config

Basic customisation can be made through the config file. Use the following command to publish it:

php artisan vendor:publish --tag myriad-config

To see what options are available you can view the source code here.

Templates

To modify the default templates publish them with the following command:

php artisan vendor:publish --tag myriad-views

You can then find them in resources/views/vendor/myriad.

Contracts

If you need to add or modify functionality for your app, you can swap out the default Component Repository and Component Model classes with your own.

[
    'model' => \App\Components\Models\Component::class,
    'repository' => \App\Components\Repositories\ComponentRepository::class,
]

If you are not extending the original classes, you must ensure that any new code adheres to the following contracts:

Jamesyps\Myriad\Contracts\ComponentRepositoryInterface
Jamesyps\Myriad\Contracts\ComponentInterface

These can be found in the Contracts namespace.

jamesyps / laravel-myriad

Maintainers

Details