Contributing

[oxytoxin]

Hello All! Great work on this project.

I would like to contribute and would very much appreciate if someone can point a direction to me, like what is your high level thought process when porting a specific component from the shadcn/ui lib.

I also noticed the dashboards on the homepage are fully functional as livewire components. Very dope!

[anotherfrontendguy]

Hey, thank you for your kind words! And great to hear you want to contribute 🥳

The current process of porting a component looks something like this:

Step 0:
You need a 'consumer' app where you can test the component you're developing. You can do this in a fresh Laravel installation. We use the Luvi website repo for this (because it already has Luvi installed). An example commit illustrating this method can be found here: luvi-ui/website@b978a50

A good starting point is to pick a component from the shadcn/ui lib and copy the code from the code tab in the docs. Then we try to come as close to this implementation as possible. For example for the Accordion it would start out like this:

// original
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

{{-- becomes --}}
<x-accordion>
  <x-accordion.item value="item-1">
    <x-accordion.trigger>Is it accessible?</x-accordion.Trigger>
    <x-accordion.content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </x-accordion.content>
  </x-accordion.item>
</x-accordion>

With this we know which components we need to build. The tailwind classes needed to achieve the same visuals can be found in the shadcn source (e.g. Accordion). Please note: For now we only support the New-York variant, that's important when copying the classes.

Once you have replicated the behavior it's time to move the files into the laravel-luvi package. An example commit for this would be b91c4fa. After that you can submit a PR and we'll have a look 🚀

If you have any questions, feel free to ask.

[thoresuenert]

We have an unreleased command in the website repo to generate all boilerplate files for a new component, we have plans to release it shortly.

[oxytoxin]

Thank you for such a detailed response @anotherfrontendguy ! Looking forward to the boilerplate generator @thoresuenert !