TallStackUI, Deep Personalization

# Concept

The deep personalization is a way to personalize components more deeply by overriding the component's original class. This form of personalization requires more work and more technical knowledge. We strongly suggest that you prefer soft personalization, which does not require as much technical knowledge from you.

# Publishing Configuration File

To start deep personalization you must publish the TallStackUI configuration file.

# Override Component Class

As deep personalization consists of having absolute control over the component, the idea behind this form of personalization is to overwrite the original TallStackUI component, which is why more technical knowledge is necessary. Let's take look at an example:

1. Create a Blade component:

php artisan make:component Input

2. Edit the TallStackUI configuration file pointing the original component class to your component:

/*
|--------------------------------------------------------------------------
| Components List
|--------------------------------------------------------------------------
|
| List of all TallStackUi components.
*/
'components' => [
    'input' => \App\View\Components\Input::class, 
    'textarea' => Components\Form\Textarea::class,
    'password' => Components\Form\Password::class,
    'toggle' => Components\Form\Toggle::class,
    'radio' => Components\Form\Radio::class,
 
    // ...
],

3. In your component, extends the original TallStackUI component:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input 
{
    public function __construct()
    {
        parent::__construct(); 
    }
}

4. In your component, override the personalization method:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class Input extends \TallStackUi\View\Components\Form\Input
{
    public function __construct()
    {
        parent::__construct();
    }
 
    public function personalization(): array 
    {
        return [/* ... */];
    }
}

Every customizable component has a method called personalization , which is where the classes come from. This method must return an array with the name of the personalizable blocks and their respective values which must be the CSS classes to be applied. To learn about customizable blocks, visit the documentation for the component you are personalizing.

Even if you prefer to use deep personalization, soft personalization can still be applied to components.

# Override Component Colors

One of the great advantages of deep personalization is being able to touch the current color classes by replacing their content. This can be done in all components that have color definitions. Let's take look at an example:

Assuming you want to change the button colors, then this will be the approach to take:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button 
{
    public function backgroundColor(): array 
    {
        return [
            'solid' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
            'outline' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
            'light' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
        ];
    }
 
    public function iconColor(): array 
    {
        return [
            'solid' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
            'outline' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
            'light' => [
                'primary' => '...',
 
                // all other colors goes here: 'red' => '...'
            ],
        ];
    }
}

Note that in the example above the methods are defined with the term Color at the end. Also note that these methods must return an array containing an array of arrays, where the button type opens a new array containing the list of the colors you want to personalize. This will cause TallStackUI to use these color classes instead of the default color classes. See below a list of components that have color personalization and their respective information:

Component	Methods	Styles
Alert	backgroundColor textColor	solid outline light
Avatar	backgroundColor	N/A
Badge	backgroundColor textColor iconColor	solid outline light
Banner	backgroundColor textColor	solid light
Button\Button	backgroundColor iconColor	solid outline light
Button\Circle	backgroundColor iconColor	solid outline light
Dialog	cancelColor confirmColor iconColor	N/A
Errors	backgroundColor textColor borderColor	N/A
Form\Radio	backgroundColor	No styles.
Form\Checkbox	backgroundColor	N/A
Form\Toggle	backgroundColor	N/A
Form\Range	thumbColor	N/A
Link	textColor	N/A
Progress	backgroundColor	solid light
Stats	backgroundColor	solid light outline
Toast	iconColor	N/A
Tooltip	backgroundColor	N/A

You could define only what you want to personalize. For example:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button 
{
    public function backgroundColor(): array
    {
        return [
            'solid' => [
                'primary' => 'bg-primary-500 border-primary-500',
            ],
        ];
    }
}

In this case the color personalization will only be applied for buttons solid with the color primary .

# Create Custom Colors

Since the name of colors used is not validated in favor of controlling which colors you can use in TallStackUI, you can easily create custom colors using deep personalization. Here is a complete example of how to do this:

1. Create the color in the TailwindCSS configuration file:

theme: {
    extend: {
        // ...
 
        colors: {
            'ocean': { // this will be the name of the color 
                '50': '#f1f8fe',
                '100': '#e3effb',
                '200': '#c0e0f7',
                '300': '#88c7f1',
                '400': '#49aae7',
                '500': '#2292d8',
                '600': '#1472b5',
                '700': '#115b93',
                '800': '#124e7a',
                '900': '#154265',
                '950': '#0e2a43',
            },
        }
    },
},

2. Create new indexes of your custom color name:

namespace App\View\Components;
 
use Illuminate\Contracts\View\View;
 
class CustomButton extends \TallStackUi\View\Components\Button\Button
{
    public function backgroundColor(): array
    {
        return [
            'solid' => [
                // other indexes goes here ...
 
                'ocean' => 'bg-ocean-500 border-ocean-500 ...', 
            ],
            'outline' => [
                // other indexes goes here ...
 
                'ocean' => 'bg-transparent border-ocean-500 ...', 
            ],
            'light' =>
                // other indexes goes here ...
 
                'ocean' => 'bg-ocean-300 border-ocean-300 ...', 
            ],
        ];
    }
}

3. Use the component with the name of your custom color:

<x-button icon="users"
          color="ocean" 
          outline
          position="right">
    Users
</x-button>

Make sure to build your assets to see your new custom color.

# Publish Blade Files

You can edit the Blade files of the TallStackUI components. Use this command to publish the files:

php artisan vendor:publish --tag=tallstackui.views

# Tracing TailwindCSS Classes

If you are personalizing your components using deep personalization, make sure you track your component classes so that TailwindCSS generates all the classes that come out of the files. Your tailwind.config.js needs to receive the following content:

content: [
    // ...
 
    './app/View/Components/**/*.php', 
],