IxDF Developer Docs

Appearance

UI kit module overview ​

UI kit created has few goals:

  • development: provide documents and usage examples for developers
  • testing: a place to test component (manual testing)
  • design: a way to communicate between design and development teams
  • hiring: it works as a showcase that we believe help us to impress developer and designer candidates on hiring

On local server, we don't use subdomains to keep the local config simple. You can access it by the /ui-kit URL.

How to add a new component ​

  1. Create a new folder in resources/views/uiKit/categories/components/{yourComponentName}
  2. Create show.blade.php file inside this dir. Use resources/views/uiKit/categories/components/.stub/show.blade.php as a template.
  3. Add a new item to the configs/ixdf_ui_kit.php (e.g. categories.components.children.{your-component-name})
  4. Optional (if you need to add some data to view): Create a new Story class in app/Modules/UiKit/Stories/{YourComponentName}Story.php

Story classes ​

Stories are classes that provide some data for UI Kit component pages. E.g. Article card requires Article instances, so \App\Modules\UiKit\Stories\ArticleCardStory provides them.

Story classes are simple classes that extend \App\Modules\UiKit\Stories\BasicStory and requires to implement a single method:

php
protected function prepareViewData(): array

If you need to use any dependencies inside Story classes, you can use contractor injection.

Example:

php
final class MemberStory extends \App\Modules\UiKit\Stories\BasicStory
{
    public function __construct(private readonly \Illuminate\Http\Request $request)
    {
    }

    protected function prepareViewData(): array
    {
        return [
            'members' => \App\Modules\Member\Models\Member::query()
                ->latest('id')
                ->limit($this->request->integer('limit', 4))
                ->get(),
        ];
    }
}