Commit 94872f23 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat(ui): create ViewComponents library to enable building class and view files components

- replace some helper components and forms with class components in the ui
- create viewcomponents
service and load the component function to be used in views
parent fcecbe1c
......@@ -46,6 +46,7 @@ class Autoload extends AutoloadConfig
'Config' => APPPATH . 'Config',
'ActivityPub' => APPPATH . 'Libraries/ActivityPub',
'Analytics' => APPPATH . 'Libraries/Analytics',
'ViewComponents' => APPPATH . 'Libraries/ViewComponents',
];
/**
......@@ -84,5 +85,5 @@ class Autoload extends AutoloadConfig
* ```
* @var array<int, string>
*/
public $files = [];
public $files = [APPPATH . 'Libraries/ViewComponents/Helpers/view_components_helper.php'];
}
......@@ -110,7 +110,9 @@ if (! function_exists('button')) {
CODE_SAMPLE;
}
}
// ------------------------------------------------------------------------
if (! function_exists('icon_button')) {
/**
* Icon Button component
......@@ -145,6 +147,7 @@ if (! function_exists('icon_button')) {
}
}
// ------------------------------------------------------------------------
if (! function_exists('hint_tooltip')) {
/**
* Hint component
......@@ -167,7 +170,9 @@ if (! function_exists('hint_tooltip')) {
return $tooltip . '">' . icon('question') . '</span>';
}
}
// ------------------------------------------------------------------------
if (! function_exists('data_table')) {
/**
* Data table component
......@@ -223,7 +228,9 @@ if (! function_exists('data_table')) {
'</div>';
}
}
// ------------------------------------------------------------------------
if (! function_exists('publication_pill')) {
/**
* Publication pill component
......@@ -250,7 +257,9 @@ if (! function_exists('publication_pill')) {
'</span>';
}
}
// ------------------------------------------------------------------------
if (! function_exists('publication_button')) {
/**
* Publication button component
......@@ -508,27 +517,5 @@ if (! function_exists('relative_time')) {
CODE_SAMPLE;
}
}
// ------------------------------------------------------------------------
if (! function_exists('xml_editor')) {
/**
* XML Editor field
*
* @param array<string, mixed> $customData
* @param array<string, mixed> $extra
*/
function xml_editor(array $customData = [], string $value = '', array $extra = []): string
{
$defaultData = [
'slot' => 'textarea',
'rows' => 5,
];
$data = array_merge($defaultData, $customData);
$textarea = form_textarea($data, $value, $extra);
return <<<CODE_SAMPLE
<xml-editor>{$textarea}</time-ago>
CODE_SAMPLE;
}
}
// ------------------------------------------------------------------------
......@@ -141,38 +141,12 @@ if (! function_exists('form_label')) {
//--------------------------------------------------------------------
if (! function_exists('form_multiselect')) {
/**
* Multi-select menu
*
* @param array<string, string> $options
* @param string[] $selected
* @param array<string, string> $customExtra
*/
function form_multiselect(
string $name = '',
array $options = [],
array $selected = [],
array $customExtra = []
): string {
$defaultExtra = [
'data-class' => $customExtra['class'],
'multiple' => 'multiple',
];
$extra = array_merge($defaultExtra, $customExtra);
return form_dropdown($name, $options, $selected, $extra);
}
}
//--------------------------------------------------------------------
if (! function_exists('form_dropdown')) {
/**
* Drop-down Menu (based on html select tag)
*
* @param array<string, mixed> $options
* @param string[] $selected
* @param array<string|int> $selected
* @param array<string, mixed> $customExtra
*/
function form_dropdown(
......@@ -236,81 +210,3 @@ if (! function_exists('form_dropdown')) {
return $form . "</select>\n";
}
}
//--------------------------------------------------------------------
if (! function_exists('form_editor')) {
/**
* Markdown editor
*
* @param array<string, mixed> $data
* @param array<string, mixed>|string $extra
*/
function form_markdown_editor(array $data = [], string $value = '', string | array $extra = ''): string
{
$editorClass = 'w-full flex flex-col bg-white border border-gray-500 focus-within:ring-1 focus-within:ring-blue-600';
if (array_key_exists('class', $data) && $data['class'] !== '') {
$editorClass .= ' ' . $data['class'];
unset($data['class']);
}
$data['class'] = 'border-none outline-none focus:border-none focus:outline-none w-full h-full';
return '<div class="' . $editorClass . '">' .
'<header class="sticky top-0 z-20 flex flex-wrap justify-between bg-white border-b border-gray-500">' .
'<markdown-write-preview for="' . $data['id'] . '" class="relative inline-flex h-8">' .
'<button type="button" slot="write" class="px-2 font-semibold focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">' . lang(
'Common.forms.editor.write'
) . '</button>' .
'<button type="button" slot="preview" class="px-2 focus:outline-none focus:ring-inset focus:ring-2 focus:ring-pine-600">' . lang(
'Common.forms.editor.preview'
) . '</button>' .
'</markdown-write-preview>' .
'<markdown-toolbar for="' . $data['id'] . '" class="flex gap-4 px-2 py-1">' .
'<div class="inline-flex text-2xl gap-x-1">' .
'<md-header class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'heading'
) . '</md-header>' .
'<md-bold class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'bold'
) . '</md-bold>' .
'<md-italic class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'italic'
) . '</md-italic>' .
'</div>' .
'<div class="inline-flex text-2xl gap-x-1">' .
'<md-unordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'list-unordered'
) . '</md-unordered-list>' .
'<md-ordered-list class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'list-ordered'
) . '</md-ordered-list>' .
'</div>' .
'<div class="inline-flex text-2xl gap-x-1">' .
'<md-quote class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'quote'
) . '</md-quote>' .
'<md-link class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'link'
) . '</md-link>' .
'<md-image class="opacity-50 hover:opacity-100 focus:outline-none focus:ring-2 focus:opacity-100 focus:ring-pine-600">' . icon(
'image-add'
) . '</md-image>' .
'</div>' .
'</markdown-toolbar>' .
'</header>' .
'<div class="relative">' .
form_textarea($data, $value, $extra) .
'<markdown-preview for="' . $data['id'] . '" class="absolute top-0 left-0 hidden w-full h-full p-2 overflow-y-auto prose bg-gray-50" showClass="bg-white"></markdown-preview>' .
'</div>' .
'<footer class="flex px-2 py-1 bg-gray-100 border-t">' .
'<a href="https://commonmark.org/help/" class="inline-flex items-center text-xs font-semibold text-gray-500 hover:text-gray-700" target="_blank" rel="noopener noreferrer">' . icon(
'markdown',
'mr-1 text-lg text-gray-400'
) . lang('Common.forms.editor.help') . '</a>' .
'</footer>' .
'</div>';
}
}
// ------------------------------------------------------------------------
<?php
declare(strict_types=1);
namespace ViewComponents;
class Component implements ComponentInterface
{
/**
* @var array<string, string>
*/
protected array $attributes = [
'class' => '',
];
/**
* @param array<string, mixed> $properties
* @param array<string, string> $attributes
*/
public function __construct(
protected array $properties,
array $attributes
) {
// overwrite default properties if set
foreach ($properties as $key => $value) {
$this->{$key} = $value;
}
$this->attributes = array_merge($this->attributes, $attributes);
}
public function render(): string
{
return static::class . ': RENDER METHOD NOT IMPLEMENTED';
}
}
<?php
declare(strict_types=1);
namespace ViewComponents;
interface ComponentInterface
{
public function render(): string;
}
<?php
declare(strict_types=1);
namespace ViewComponents;
use ViewComponents\Config\ViewComponents;
use ViewComponents\Exceptions\ComponentNotFoundException;
class ComponentLoader
{
protected ViewComponents $config;
protected string $name;
/**
* @var array<string, mixed>
*/
protected array $properties = [];
/**
* @var array<string, string>
*/
protected array $attributes = [];
public function __construct()
{
$this->config = config('ViewComponents');
}
public function __get(string $property): mixed
{
if (property_exists($this, $property)) {
return $this->{$property};
}
}
// @phpstan-ignore-next-line
public function __set(string $property, mixed $value)
{
if (property_exists($this, $property)) {
$this->{$property} = $value;
}
return $this;
}
/**
* @throws ComponentNotFoundException
*/
public function load(): string
{
// first, check if there exists a component class to load in class components path
if (file_exists("{$this->config->classComponentsPath}/{$this->name}.php")) {
return $this->loadComponentClass();
}
// check for the existence of a view file if no component class has been found
// component view files are camel case
$camelCaseName = strtolower(preg_replace('~(?<!^)(?<!\/)[A-Z]~', '_$0', $this->name) ?? '');
if (file_exists("{$this->config->componentsViewPath}/{$camelCaseName}.php")) {
return $this->loadComponentView($camelCaseName);
}
throw new ComponentNotFoundException("Could not find component \"{$this->name}\"");
}
private function loadComponentClass(): string
{
$classComponentsNamespace = $this->config->classComponentsNamespace;
$namespacedName = str_replace('/', '\\', $this->name);
$componentClassNamespace = "{$classComponentsNamespace}\\{$namespacedName}";
$component = new $componentClassNamespace($this->properties, $this->attributes);
return $component->render();
}
private function loadComponentView(string $name): string
{
$viewData = [...$this->properties, ...$this->attributes];
return view("components/{$name}", $viewData);
}
}
<?php
declare(strict_types=1);
namespace ViewComponents\Config;
use CodeIgniter\Config\BaseService;
use ViewComponents\ComponentLoader;
/**
* Services Configuration file.
*
* Services are simply other classes/libraries that the system uses to do its job. This is used by CodeIgniter to allow
* the core of the framework to be swapped out easily without affecting the usage within the rest of your application.
*
* This file holds any application-specific services, or service overrides that you might need. An example has been
* included with the general method format you should use for your service methods. For more examples, see the core
* Services file at system/Config/Services.php.
*/
class Services extends BaseService
{
public static function viewcomponents(bool $getShared = true): ComponentLoader
{
if ($getShared) {
return self::getSharedInstance('viewcomponents');
}
return new ComponentLoader();
}
}
<?php
declare(strict_types=1);
namespace ViewComponents\Config;
use CodeIgniter\Config\BaseConfig;
class ViewComponents extends BaseConfig
{
public string $classComponentsNamespace = APP_NAMESPACE . '\View\Components';
public string $classComponentsPath = APPPATH . 'View/Components';
public string $componentsViewPath = APPPATH . 'Views/components';
}
<?php
declare(strict_types=1);
namespace ViewComponents\Exceptions;
use CodeIgniter\Exceptions\ExceptionInterface;
use RuntimeException;
class ComponentNotFoundException extends RuntimeException implements ExceptionInterface
{
}
<?php
declare(strict_types=1);
/**
* @copyright 2020 Podlibre
* @license https://www.gnu.org/licenses/agpl-3.0.en.html AGPL3
* @link https://castopod.org/
*/
if (! function_exists('component')) {
/**
* Loads the specified class or view file component in the parameters
*
* @param array<string, array<string, mixed>> $properties
* @param array<string, array<string, mixed>> $attributes
*/
function component(string $name, array $properties = [], array $attributes = []): string
{
$componentLoader = service('viewcomponents');
$componentLoader->name = $name;
$componentLoader->properties = $properties;
$componentLoader->attributes = $attributes;
return $componentLoader->load();
}
}
......@@ -60,6 +60,10 @@ export class XMLEditor extends LitElement {
border: 1px solid #6b7280;
background-color: #ffffff;
}
.cm-editor.cm-focused {
outline: 2px solid transparent;
box-shadow: 0 0 0 1px #2563eb;
}
`;
render(): TemplateResult<1> {
......
<?php
declare(strict_types=1);
namespace App\View\Components;
use ViewComponents\Component;
class Button extends Component
{
protected string $label = '';
protected string $uri = '';
protected string $variant = 'default';
protected string $size = 'base';
protected string $iconLeft = '';
protected string $iconRight = '';
protected bool $isSquared = false;
public function render(): string
{
$baseClass =
'inline-flex items-center font-semibold shadow-xs rounded-full focus:outline-none focus:ring';
$variantClass = [
'default' => 'text-black bg-gray-300 hover:bg-gray-400',
'primary' => 'text-white bg-pine-700 hover:bg-pine-800',
'secondary' => 'text-white bg-gray-700 hover:bg-gray-800',
'accent' => 'text-white bg-rose-600 hover:bg-rose-800',
'success' => 'text-white bg-green-600 hover:bg-green-700',
'danger' => 'text-white bg-red-600 hover:bg-red-700',
'warning' => 'text-black bg-yellow-500 hover:bg-yellow-600',
'info' => 'text-white bg-blue-500 hover:bg-blue-600',
];
$sizeClass = [
'small' => 'text-xs md:text-sm',
'base' => 'text-sm md:text-base',
'large' => 'text-lg md:text-xl',
];
$basePaddings = [
'small' => 'px-2 md:px-3 md:py-1',
'base' => 'px-3 py-1 md:px-4 md:py-2',
'large' => 'px-3 py-2 md:px-5',
];
$squaredPaddings = [
'small' => 'p-1',
'base' => 'p-2',
'large' => 'p-3',
];
$buttonClass =
$baseClass .
' ' .
($this->isSquared
? $squaredPaddings[$this->size]
: $basePaddings[$this->size]) .
' ' .
$sizeClass[$this->size] .
' ' .
$variantClass[$this->variant];
if (array_key_exists('class', $this->attributes)) {
$buttonClass .= ' ' . $this->attributes['class'];
unset($this->attributes['class']);
}
if ($this->iconLeft !== '') {
$this->label = icon($this->iconLeft, 'mr-2') . $this->label;
}
if ($this->iconRight !== '') {
$this->label .= icon($this->iconRight, 'ml-2');
}
if ($this->uri !== '') {
return anchor($this->uri, $this->label, array_merge([
'class' => $buttonClass,
], $this->attributes));
}
$defaultButtonAttributes = [
'type' => 'button',
];
$attributes = stringify_attributes(array_merge($defaultButtonAttributes, $this->attributes));
return <<<CODE_SAMPLE
<button class="{$buttonClass}" {$attributes}>{$this->label}</button>
CODE_SAMPLE;
}
}
<?php
declare(strict_types=1);
namespace App\View\Components\Forms;
use ViewComponents\Component;
class Input extends Component
{
public function render(): string
{
return '';
}
}
<?php
declare(strict_types=1);
namespace App\View\Components\Forms;
use ViewComponents\Component;
class Label extends Component
{
/**
* @var array<string, string>
*/
protected array $attributes = [
'for' => '',
'name' => '',
'value' => '',
'class' => '',
];
protected string $text = '';
protected string $hint = '';
protected bool $isOptional = false;
public function render(): string
{
$labelClass = $this->attributes['class'];
unset($this->attributes['class']);
$attributes = stringify_attributes($this->attributes);
$optionalText = $this->isOptional ? '<small class="ml-1 lowercase">(' .
lang('Common.optional') .
')</small>' : '';
$hint = $this->hint !== '' ? hint_tooltip($this->hint, 'ml-1') : '';
return <<<CODE_SAMPLE
<label class="{$labelClass}" {$attributes}>{$this->text}{$optionalText}{$hint}</label>
CODE_SAMPLE;
}
}