It's like Tailwind CSS, but for the console.

This PR will add autocomplete feature for ask/Question

here's the resulting prompt:

https://user-images.githubusercontent.com/8792274/188404964-8d521a32-3a3d-4a7d-8e54-2e99d5c886da.mp4

render(<<<'HTML'
<table style="box-double">
    <thead title="Books" class="bg-red text-color-white px-10">
        <tr>
            <th align="right">ISBN</th>
            <th>Title</th>
            <th>Author</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th align="right">99921-58-10-7</th>
            <td>Divine Comedy</td>
            <td align="right">Dante Alighieri</td>
        </tr>
        <tr border="1">
            <th class="bg-blue text-color-red" align="right">9971-5-0210-0</th>
            <td>A Tale of Two Cities</td>
            <td align="right">Charles Dickens</td>
        </tr>
        <tr>
            <th align="right">960-425-059-0</th>
            <td>The Lord of the Rings</td>
            <td align="right">J. R. R. Tolkien</td>
        </tr>
        <tr>
            <th align="right">80-902734-1-6</th>
            <td>And Then There Were None</td>
            <td rowspan="2" align="right">Dante Alighieri\nspans multiple rows</td>
        </tr>
        <tr>
            <th align="right">978-052156781</th>
            <td>De Monarchia</td>
        </tr>
    </tbody>
    <tfoot title="Page 1/2" class="mx-5 bg-blue">
        <tr>
            <th colspan="3">This value spans 3 columns.</th>
        </tr>
    </tfoot>
</table>
HTML);

Will render

This PR adds the capability to overwrite existent colors or create new colors.

Usage:

use function Termwind\{render, setColors};

setColors([
    'blue-300' => '#0133dc',
    'badass' => '#bada55',
]);

render(<<<'HTML'
    <div class="my-1">
        <div class="bg-blue-300">
            Termwind now supports <b>`setColors()`</b>
        </div>
        <div class="mt-1 bg-badass text-black">
            Can be used like this: <b>`setColors(['badass' => '#bada55'])`</b>
        </div>
    </div>
HTML);

This pull request allows to make a particular section of the console dynamic. Here is an example:

use function Termwind\{live};

live(function () {
    static $counter = 0;

    $counter++;

    return '<div class="m-1">
        <span class="pl-1 pr-2 bg-blue-300">My counter</span>
        <span class="ml-1">' . $counter . '</span>
    </div>';
})->refreshEvery(seconds: 1);

Will render the following:

In addition, you may control when the refresh should stop, by calling the RefreshEvent::stop method.

live(function (RefreshEvent $event) {
    return $event->stop();
})->refreshEvery(seconds: 1);

Finally, if you wish to control, when to render, clear, or refresh, you may control the flow using these methods:

use function Termwind\{live};

$live = live(fn () => 'html');

$live->render(); // Re-runs the given closure, and renders its output.
$live->clear(); // Removes all previous rendered html.
$live->refresh(); // Refreshes the previous rendered html.
$live->refreshEvery($seconds); // Refreshes the previous rendered html, every X amount of seconds.

I decided not to use code from nunomaduro/collision package and copied Code Highlighter with some modifications.

1. I got rid of ConsoleColor class and used css classes for syntax highlighting
2. Replaced $linesBefore, $linesAfter with $startLine

<code line="20" start-line="14">
    &lt;?php

    /** @test */
    function sentryReport()
    {
        try {
            throw new \Exception('Something went wrong');
        } catch (\Throwable $e) {
            report($e);
        }
    }
</code>

!!! Users have to convert all applicable characters to HTML entities inside code element !!!

Will render

fixes #82

After checking on possible features to add, figured that would be awesome to have the capability to style multiple parts of the same span like its possible to do in HTML with multiple <span> inside of each other.

From this code:

use function Termwind\{span,a};

span([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
])->render();

Output

There is some edge cases still need to be handle. but want to know what do you think about this.

Default colors are not being applied to html element on windows terminal (using windows sub system for linux). Also the parser trying to parse special characters as html, in this case <== gives an warning.

require __DIR__ . '/vendor/autoload.php';

use function Termwind\{render};

// single line html...
render('<div class="p-1 bg-green-300">Termwind</div><span class="text-red-200"><== this was supposed to be green.<span>');

Output

Code:

render(<<<'HTML'
    <div class="my-1 ml-3 px-2 bg-green-300 text-black">
        🍃 Termwind now have the capability to <b>extend</b> colors!
    </div>
HTML);

Result:

Posible Solution:

• Change <bg> to and \e code
• Or, find if there is any way to only remove the escape code added from <b>.

One of the reason I decided to get rid of default tags is in this example

<div class="bg-red">Hello <strong>world></div>

When it parsed it looks like

<bg=red;options=>Hello <bg=default;options=bold>world</></>

As you noticed the word world has default background because of bg=default instead of red background.

There are a lot of unnecessary style tags in output :)

<br/> => <bg=default;options=></>\n
<a>link text</a> => <bg=default;options=>link text</>
<ol><li>list text 1</li></ol> => <bg=default;options=><bg=default;options=>1. list text 1</></>

This pull request will fix #58 and add a new display: block option to add to any component.

Also by default div, ul and li elements will have block as default.

This PR adds hidden method for text decoration. It will make the text invisible when applied.

span('i am invisible with blue background color', 'hidden bg-blue')->render();

I do not know if this will be useful or not, but it is part of ANSI Escape Codes. Also there are reverse, dim and blink which is not yet added to this package.

Feel free to drop or accept this, cheers :beers:

Apart from this PR, i also have some idea about this package:

1. What if there is helper function called console which return the current renderer of termwind. It will be useful when we need the symfony console output directly.

// print an error
console()->writeln('<error>An error occured</error>');

2. What if there is conditional rendering, using something like:

span('i am on linux machine')->renderWhen(PHP_OS_FAMILY  == 'Linux');
span('i am on macos machine')->renderWhen(PHP_OS_FAMILY  == 'Darwin');
span('i am on windows machine')->renderWhen(PHP_OS_FAMILY  == 'Windows');

3. Does this package going to achieve same goal as rich python package? link: https://github.com/willmcgugan/rich

What do you think @nunomaduro ?