[Question] Priorities

[ghost]

Kevin do you have a roadmap or anything?

I know you're working on crud and auth.

Maybe a slack channel or should I just make issues for things I think would be improvements?

If I had some direction on things you have in mind I can start making those happen.

Thanks

[bastinald]

I'm finishing another package I've been working on first then I'll be finishing auth and crud for this one.

The only problem I'm having is trying to make everything as unopinionated as possible.

Normally I use modals for CRUD, but some people may prefer separate pages entirely.

For styling, I'm trying to use as few Tailwind classes as possible etc.

[ghost]

You mean for the default components?

I was thinking the opposite direction actually, creating some really fleshed out components from examples at TailwindUI ... I have a subscription to that package.

I suppose I could write my own package for that if you're not into it.

How bout I start on the service provider to publish stubs and a config file?

I can also start on full fledge documentation too if you want to set up a separate repo for it.

[bastinald]

I bought the Ui too.

If we could convert their ui components from vue to components for this package that would be enormous.

If all the ui components were as simple as a make, the value of this package would be astronomical.

I think they should be a part of this package and not a separate package if you're going to do it.

[ghost]

I'm not sure how many of them we can offer for free, but we could for sure add all the ones that are publicly available. I'll have to check the license.

But the main goal imo should be to provide at least as much as needed to flesh out a full basic starter like what you'd get with Laravel ... and then of course we could add options.

For instance give them an example sidebar menu component and a horizontal one, form examples like you've already started, cards, modals, alerts and especially making sure everything is mobile first.

As for the Vue components ... those are all built on headless/ui which is Vue 3 and all written in Typescript. I wouldn't even know where to start with that.

I use Vue 2 and until there's a push button solution to upgrade all my apps to 3 I won't even touch it.

I think a good deal of it can be done in Alpine anyway.

[bastinald]

I agree.

I was also considering a Bootstrap option. Since this package pretty much lets you use any CSS framework you want, there are times where I need to get something done faster than Tailwind allows.

So maybe on install there would be a "Tailwind or Bootstrap?" question.

Then we can have separate packages for components:

• malzahar-tailwind-ui
• malzahar-bootstrap-ui

And these packages just contain a bunch of premade components. Either this, or I make a separate Bootstrap package.

I also want to put a bunch of static methods inside of the Html class for standard HTML tags & attributes so there is some IDE autocompletion. It's starting to drive me bonkers.

Let me know what you think.

[ghost]

Yeah Bootstrap 5 looks pretty great to be honest, especially since there's no jQuery dependency anymore.

So you're thinking remove all the default components then have them pull in a ui package of their preference?

That seems doable and more elegant really, but probably more time consuming.

I'm going to create a component to recreate the Laravel welcome page too, that should be a fun exercise in component building.

I use either VSCode or Sublime 4 so I don't really have any IDE issues, you're using PhpStorm I take it?

[bastinald]

I might create another package with bootstrap built in so you can see what im thinking but it will be a lot of work.

I use phpstorm but even vscode intellephense would pickup the methods nicely.

I'll do it the lazy mans way and write a command that adds the methods via arrays of HTML tags and attributes I found.

The only issue would be collision. If a class has a property of an HTML attribute, a method would have to be added to it for the component.

[bastinald]

Check this out: https://bootstrap-vue.org/docs/components

Imagine we had access to all of these components with Malzahar.

For example, in BootstrapVue:

<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>

We could do something like this:

Bootstrap::dropdown(
    Bootstrap::dropdownItem('First Action'),
    Bootstrap::dropdownItem('Second Action'),
    Bootstrap::dropdownItem('Third Action'),
    Bootstrap::dropdownDivider(),
    Bootstrap::dropdownItem('Active Action')->active(),
    Bootstrap::dropdownItem('Disabled Action')->disabled(),
)->id('dropdown-1')->text('Dropdown Button')->class('m-md-2'),

I'm going to start working on this when I have more time from work.

I think this would allow for stupid fast development as opposed to writing out Tailwind classes all the time.

It would also provide a large set of components to use out of the box.

[ghost]

I was thinking about container bindings.

I'm wondering if we should bind all the component classes to the container with interfaces.

At this point I'm not sure I have a clear picture of all the different ways or places I might want to use these classes.

For instance within my applications I create a domain layer and each page component will have a constructor and a type hinted service class that is the entry point to the domain layer. That service would have a method for each traditional crud method. Like:

component: Components/Livewire/Companies/Index.php

public CompanyService $service;

public function __construct(CompanyServiceInterface $service)
{
    $this->service = $service;
}

I lied before LOL, index files have a handle method

class: Services/CompanyService.php

public function handle(): PayloadAction
{
    // usually I'll have a repository but for brevity:
    $companies = Company::all();

    // perhaps here I would want to build up a payload that includes some components
    return (new PayloadAction)->make($companies);
}

Then back in Index.php

public function template(): AuthLayout
{
    $payload = $this->service->handle();

    return AuthLayout::make($payload);
}

I don't know, maybe there's no need for it, but being able to type hint them off the container, or just pull them in from app() seems like Laravel best practices when you're building a package.

[ghost]

Bootstrap Vue is cool, I've used it before.

There is also Vue-Tailwind which is pretty slick.

I built a package to pull in all the components with their default settings.

Use it the same way as BS-Vue, but with the added benefit of adding additional utility classes right onto the component.

They're both very cool.

[ghost]

The one thing I would say is that it's never a good idea to start a new project with an old framework.

There's no path yet at all for BS-Vue to move to bootstrap 5. And I would never start something with a release that's not current. Just my two cents.

[bastinald]

I won't be using bootstrap vue. I'll be making my own bootstrap components via php 😄