Componentes de UI

Uma página por componente, com os exemplos renderizados de verdade — mesmo CSS e mesmo JavaScript de um site. As tabelas de props são lidas do código na hora, então não envelhecem.

instalação

composer require goognet/ui
php artisan goognet-ui:install
npm install swiper fslightbox

Por onde você começa

Agrupados pelo que você veio fazer, não pela ordem do alfabeto: quem está montando um cabeçalho quer os quatro componentes de cabeçalho um do lado do outro.

Navegação

Formulário

Conteúdo

Mídia

Sobreposição

Rodapé e conversão

Personalização

Cada site muda a aparência sem copiar componente nenhum, em três camadas. Nada disso se perde ao atualizar o pacote.

1. Tokens — a identidade inteira em poucas linhas

No @theme do site, depois do import do pacote. Todo controle acompanha. Cada página de componente lista os tokens que ele lê.

@theme {
    --color-primary-500: var(--color-blue-500);
    --radius-control: 0;
    --font-weight-control: 700;
    --spacing-control: 3rem;
}

2. Classe na chamada — sempre vence

Uma classe passada substitui a do componente para a mesma propriedade, em vez de brigar com ela.

<x-ui.button class="rounded-full uppercase">Enviar</x-ui.button>

3. Por projeto, em PHP — variantes, tamanhos e partes

No AppServiceProvider do site. A chamada ainda tem a última palavra sobre isto. Cada página lista as partes que o componente expõe.

use Goognet\Ui\Ui;

Ui::button()
    ->defaults(['variant' => 'primary', 'rounded' => 'full'])
    ->variant('inverted', 'bg-white text-neutral-900 hover:bg-neutral-100')
    ->size('xl', 'h-14 px-8 text-lg')
    ->part('base', 'uppercase tracking-wide');

Último recurso: php artisan vendor:publish --tag=goognet-ui-views copia as views para o site. A partir daí elas deixam de receber as atualizações do pacote.

Idiomas

Todo texto que um componente escreve sozinho — o botão de fechar, o aviso de cookies, o rodapé, a paginação — sai dos arquivos de idioma, e não do Blade. O pacote traz pt_BR, en e es. O que o visitante lê segue o app.locale do request, então um site multi-idioma só precisa chamar App::setLocale().

Trocar uma frase

Crie o arquivo com apenas as chaves que quiser mudar. As que faltarem continuam vindo do pacote, então não há o que manter em dia.

// lang/vendor/goognet-ui/pt_BR/ui.php
return [
    'cookie' => ['accept' => 'Tudo bem'],
];

Adicionar um idioma

Publique os três que existem, use um como molde e traduza. Um idioma sem tradução cai no fallback_locale da aplicação.

php artisan vendor:publish --tag=goognet-ui-lang

As frases com número ou termo no meio usam marcador — :first, :last, :total, :page, :essential — e não concatenação, para que a ordem das palavras possa mudar de um idioma para outro.