TallStackUI, Environment

# Concept

Many modern applications need to have different environments for different purposes, such as: local - for local development environment, staging - for general testing environment and production - for the actual application. The environment component consists of the current environment of the application in a summarized form to serve as a warning.

# Basic Usage

Environment: Production (Branch: 2.x)

<x-environment />

# Beyond Basic, EnvBar

With the example above you should realize that the environment is a basic component. With the release of version 2.x of TallStackUI a new helper was introduced: EnvBar. Unlike the environment component, the EnvBar is a fixed bar at the top of the screen that serves to display several other information about the current environment - not just the environment name and branch. If you want to go further and use the EnvBar click here.

# Round Variation

Environment: Production (Branch: 2.x)

<x-environment round />

# Square Variation

Environment: Production (Branch: 2.x)

<x-environment square />

# Size Variations

Environment: Production (Branch: 2.x) Environment: Production (Branch: 2.x) Environment: Production (Branch: 2.x) Environment: Production (Branch: 2.x)

<x-environment xs /> <!-- Default -->
<x-environment sm />
<x-environment md />
<x-environment lg />

# Without Branch

Environment: Production

<x-environment without-branch />

# Branch Detection Algorithm

Internally TallStackUI uses a simple algorithm to get the current branch name based on the .git folder and its content. However, you can create your own algorithm to be used for branch detection.

This is the current original algorithm:

use Illuminate\Support\Facades\File;
 
private function branch(): ?string
{
    // ...
 
    if (($branch = rescue(fn () => File::get(base_path('.git/HEAD')), report: false)) === null) {
        return null;
    }
 
    $string = str($branch);
 
    if (! $string->contains('ref: refs/heads/')) {
        return null;
    }
 
    return $string->replace('ref: refs/heads/', '')->trim()->value();
}

If you want to create your own algorithm, just define it through a service provider:

use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        // ...
 
        $this->app->bind('tallstackui::environment::branch', function () {
            return 'logic goes here';
        });
    }
}

# Color Scheme

You may have noticed that there is no way to define component colors. Internally TallStackUI defines default colors by environment name, however you can customize all colors, as well as create new ones by environment name.

local - shades of green colors
stating - shades of yellow colors
sandbox - shades of orange colors
production - shades of red colors
Others - shades of primary colors

You can personalize or create new colors per room by following TallStackUI color personalization.