kompo-cover
Fullstack Kompo
nents
nents
Rapid Application Development
‟ Standing on the shoulders of giants „
laravel   vuejs
HOW IT
WORKS

A Single Class, Back & Front-end ready

Write Forms, Queries & Menus in a matter of seconds as highly specialized Controllers. Plug-in an Eloquent model and your attributes and relationships will be automatically loaded on display and synced on submit!


class PostForm extends Form
{
   public $model = Post::class;

   public function komponents()
   {
      return [
         Input::form('Title'),

         MultiSelect::form('Tags')
            ->optionsFrom('id', 'name'),

         MultiImage::form('Images'),

         SubmitButton::form('Try me out!')
      ];
   }
}
class Post extends Model
{
   //Kompo infers everything from 
   //the model's relationship names

   public function tags() 
   {
      return $this->belongsToMany(Tag::class);
   }

   public function images()
   {
      return $this->hasMany(File::class);
   }
}
😲 So... 8 lines of code for the frontend display and backend handling with relationships and file uploads??
Yes, write 90% less code, 10x times faster...
and it's just the beginning!

Sortable, Filterable, Interactive Queries

Choose predefined cards or build your own. Multi-level deep relationship filtering and sorting. Automatic refresh after update, drag-and-drop reordering and more...
class PostsCatalog extends Query
{
    public $layout = 'Grid';
    public $card = ImageCard::class;

    public function query()
    {
       return Post::orderBy('published_at', 'DESC');
    }

    public function card(Post $post)
    {
       return [
          'image' => asset($post->image),
          'title' => $post->title,
          'text' => substr($post->text, 0, 100),
          'col' => 'col-6 col-sm-4',
          'class' => 'mb-6 shadow hover:shadow-xl',
          'buttons' => _Flex($this->buttons($post))
       ];
    }

    public function buttons(Post $post)
    {
       return [
          Link::icon('far fa-heart')
             ->post('article.like', ['id' => $post->id]),
          EditLink::icon('far fa-edit')
             ->post('article.edit', ['id' => $post->id]),
          DeleteLink::form($post)
       ];
    }
}
trait PostsFilters
{
   public function top()
   {
      return [
         FlexBetween::form(
            Title::form('My Posts'),
            AddButton::form('Add a new post')->icon('icon-plus')
               ->post('post.add') //AddButton opens a smart modal
         ),
         Columns::form(
            Input::form('Title')
               ->filter(), //debounced filtering on input
            Select::form('Author')
               ->optionsFrom('id', 'name')
               ->filter(), //relationship filter
            MultiSelect::form('Tags')
               ->optionsFrom('id', 'name')
               ->filter() //relationship filter
         )->id('filters'),
         Link::form('Filter')->icon('fas fa-cogs')
            ->toggleId('filters'), //Front-end action
      ];
   }
}

And Full-blown Editable Admin Tables

Ok now that we are here, let's clear up any potential misunderstanding.
Kompo is NOT just an Admin Panel builder, it can be used everywhere in your app. But as a nice side effect of it's modular komponents system, one can build an admin panel very easily with it ;)
class PostsTable extends Table
{  
    public function query()
    {
       return Post::orderBy('published_at', 'DESC');
    }

    public function card(Post $post)
    {
      return [
         Html::form($post->published_at),

         EditLink::form($post->title)
            ->post('post.edit', ['id' => $post->id]),

         Html::form(
            $post->tags->map(function($tag){
               return '<span class="label">'.$tag->name.'</span> ';
            })->implode('')
         ),

         DeleteLink::byKey($post)
      ];
    }
}
trait PostsFilters
{
   public function top()
   {
      //... same as above
   }

   public function columns()
   {
      return [
         Th::form('Published')->sort('published_at'),
         Th::form('Title')->sort('title'),
         Th::form('Tags'),
         Th::icon('icon-trash')
      ];
   }
}

Pick a theme or configure your styles

Use preconfigured themes or create your own. It's very straightforward, there are sass 40 variables you can control.
Boostrap
MD Filled
MD Outlined
Floating



View all styles & components

Menus, Blade Layouts and Direct Route calls

Kompo comes with pre-built layouts that you can extend:
You can load a Komposer with a direct route call in the Content section:
Route::layout('app')->group(function() {
   Route::kompo('posts', PostsTable::class);
   Route::kompo('users', UsersTable::class);
});
And Menus (Navbar, Sidebars, Footer) are defined in the layout app.blade.php:
@extends('kompo::app', [
  'Navbar' => new App\Menus\AdminNavbar(),
  'LeftSidebar' => new App\Menus\AdminSidebar()
])
And yes, everything works out-of-the-box:
Responsive navigation.
Shared layout.
Turbolinks-style navigation.

Single-expression AJAX requests

Now let's talk flexibility...
Component-based packages are usually rigid and unextendable. Kompo tries to offer JS & Vue capabilities and limitless customization from the comfort your PHP class.


For example, to load a backend Form in a Modal:
Button::form('Open form in modal')
  ->get('form-route')->inModal(),
To fetch a backend view from the server.
Button::form('Load ajax view')
   ->get('view-route')->inPanel1()
And load animations out-of-the-box with animate
Panel1::form()->animate('slideLeft')
To include additional form fields from the server.
Button::form('Load Komponents')
   ->getKomponents('newFields')->inPanel2()

public function newFields()
{
   return [
      Input::form('Title'),
      Trix::form('Content')
   ];
}
Or take full control of triggers and handlers with higher order interactions.
Button::form('Submit')->submit() //Action
   ->onSuccess->refresh()        //Success
   ->onError->alert('Oops...')   //Error
😲 Woah... It is all done with a single method specification!

A great balance between
flexibility and convention

Customizable and extendable: add your own components and reuse them in future projets.
Works extremely well with Tailwind CSS
14 available triggers in PHP to control your Front-end: onLoad, onClick, onBlur, onFocus, onKeyup, onKeydown, ...
Uses Laravel's validation system. Integrates well with Spatie's permission & backup packages.
Includes CSS transitions, animations & turbolinks-style page loads.
One method creates slugs on the fly, thumbnails of image uploads or optimizes large images for the web.
Integrated best practices & responsible accessibility design pattern.
CORE
VALUES
Documentation Driven

The core philosophy of Kompo is to bring you well documented code that makes sense as well as interactive GUIs to help you better understand its' capabilities. You can visualize the documentation in three different formats: traditional guide docs, an API with all the components' methods and a series of practical examples.

Open-Source

Kompo's code and its' dependencies are all open source. The components are eiher integraly built or picked from the best ones out there, then integrated into the codebase. They will also continue to improve over time thanks to the combined community effort. Check the code out and help if you can.

Donation-based

The base package has no monetary barriers to entry and will accept donations to continue evolving. We believe that community is more important than money for sustainable code. So let's build a huge library of curated komponents and cards for everyone to use and share freely in our projects.

Rapid Application Development

If you give this framework some time and get through the beginning's learning curve, you'll notice that it doesn't get much faster than this! Complex web components will now take a couple of seconds to write. No more repeating the same pieces of code over and over again.

Minimal invasive CSS

Styling pre-built components can be really frustrating. The goal was that all the styles be either configurable from the start in SASS or easily overridable by classes or CSS. It is nearly impossible to make versatile and functional forms, tables or catalogs with less CSS properties.

Light-weight

The base Kompo package is only 31KB gzipped. When including the heavy components: WYSIWYG editor, Date Picker and Maps, the total JS bundle is 125kb gzipped. In the future, the goal is to stay whithin these limits all the while adding new komponents that can be optionnally imported.