[FEATURE]: Make default, color, error classes configurable in wireui.php

Classes Should Be Configurable

Much like most 3rd party packages that utilize TailwindCSS, classes that are hard-coded within the package are not able to be changed. Yes, we can override or extend the component class itself, but with the existing config already referencing the built-in component files, it would be trivial to add additional array keys to the config for defaultClasses, errorClasses, defaultColorClasses or any other Tailwind options that are needed.

Solution

Here is an example for the Input component.

Config:

'input' => [
  'class' => Components\Input::class,
  'alias' => 'input',
  'defaultClasses' => 'form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none',
  'shadowless' => ' shadow-sm',
  'borderless' => ' border-transparent focus:border-transparent focus:ring-transparent',
  'defaultColorClasses' => 'placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500',
  'borderlessColors' => ' border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600',
  'errorClasses' => 'text-negative-900 dark:text-negative-600 placeholder-negative-300 dark:placeholder-negative-500',
  'borderlessErrors' => ' border border-negative-300 focus:ring-negative-500 focus:border-negative-500 dark:bg-secondary-800 dark:border-negative-600'
],

Then in the PHP component class:

// register config per component: $this->config = config('wireui.components.input');

protected function getErrorClasses(): string
{
  return Str::of($this->config['errorClasses'])
      ->unless($this->borderless, function (Stringable $stringable) {
        return $stringable
            ->append($this->config['borderlessErrors']);
      });
}

protected function getDefaultColorClasses(): string
{
  return Str::of($this->config['defaultColorClasses'])
      ->unless($this->borderless, function (Stringable $stringable) {
        return $stringable
            ->append($this->config['borderlessColors']);
      });
}

protected function getDefaultClasses(): string
{
  return Str::of($this->config['defaultClasses'])
      ->unless($this->shadowless, fn (Stringable $stringable) => $stringable->append($this->config['shadowless']))
      ->when($this->borderless, function (Stringable $stringable) {
        return $stringable->append($this->config['borderless']);
      });
}

Additional Context

I have tried this locally by extending the Input component and applying the array keys to the input config and it works perfectly.

wireui / wireui