New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Contribution Guide

TallStackUI Contribuition Guide.

There are several ways to contribute to a library like TallStackUI, don't think it's just with code. Even if you're not an experienced developer, don't worry, there are other ways to help. Do you know how to write? Well, you can review the texts on both TallStackUI and our website and point out possible flaws. This is a way to contribute. Did you find something wrong with the website, documentation or any component of TallStackUI? Create an issue and report the problem. This is a way to contribute. Do you use and like TallStackUI? Why not share it with your friends? This is a way to contribute. Are you an experienced developer and want to join the team? Feel free to write components, test, bug fix, or other things. This is a way to contribute. Going further, do you like TallStackUI so much that you want to sponsor the project? Well, you can contribute with some financial donation. You have many ways to contribute. Choose one and go for it!

Before we really get into the guide on how to contribute with code, we want you to know a few things:

  • All codes need to follow the PSR12
  • All codes need to pass in Laravel Pint & PhpStan validations
  • All codes need to pass in Pest Type Coverage
  • All codes need to be tested with Pest

Let's prepare your environment for your first contribution:

1. Fork the repository

2. Clone the repository forked for your computer.

3. Create a basic Laravel project using Laravel Breeze with Livewire (V3) stack.

4. Prepare any authentication way to access the /dashboard

5. Create a folder in the root of the Laravel project called packages

6. Inside the packages folder create another folder called tallstackui

7. Inside the tallstackui folder create a symbolic link to the repository forked at your computer:

ln -s /Users/your-user/your-forked-project-path .

9. The expected folder structure should be: packages/tallstackui/tallstackui

10. Open the composer.json of the Laravel project and insert the following content:

// ...
 
"repositories": [
{
"type": "path",
"url": "./packages/tallstackui/tallstackui"
}
],

11. In the same composer.json file, change the minimum-stability to dev

12. After that, run the following command in the terminal:

composer require tallstackui/tallstackui:1.x-dev

13. Install the TallStackUI in the Laravel project following the guide (skip the step 1 of the tutorial)

14. You are ready to start the work!

Some of the TallStackUI tests are written using Laravel Dusk through the Orchestral Testbench Dusk. Although sometimes difficult, you can run the browser tests on your computer. To do this, it is essential to have Chrome installed. Use the commands below to prepare your environment.

Installing the appropriate Chrome driver according to your Chrome version:

./vendor/bin/dusk-updater detect

Alternatively, you can use:

./vendor/bin/dusk-updater detect --auto-update

1. Run all tests:

composer ci

2. Run only the Feature tests:

composer test:feature

3. Run only the Browser tests:

composer test:browser
 
# Use: composer test:browser:ci, to run the tests without UI.

4. Fixing Code Style:

composer format

5. Validate Type Coverage & PhpStan:

composer type && composer analyse

Sometimes you can make changes to components, but the change is not noticed, it is like a cache state in the Laravel project. If this is the case, use the instruction below to synchronize the changes:

composer update tallstackui/tallstackui && npm run build && php artisan optimize:clear

We suggest you to create an alias to facilitate the execution of this command.

Code highlighting provided by Torchlight