PHPackages                             betocampoy/champs-frontend - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. betocampoy/champs-frontend

ActiveLibrary[Templating & Views](/categories/templating)

betocampoy/champs-frontend
==========================

Templates Twig compartilhados e champs-core-js para projetos legados e Symfony.

v1.0.12(1w ago)025MITJavaScriptPHP >=8.1

Since Apr 22Pushed 1w agoCompare

[ Source](https://github.com/betocampoy/champs-frontend)[ Packagist](https://packagist.org/packages/betocampoy/champs-frontend)[ RSS](/packages/betocampoy-champs-frontend/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependencies (1)Versions (14)Used By (0)

betocampoy/champs-frontend
==========================

[](#betocampoychamps-frontend)

Pacote para centralizar duas coisas que trabalham juntas:

- templates Twig compartilhados
- `champs-core-js` e seus assets

Ele foi pensado para uso tanto em projetos **Symfony** quanto em projetos **legados com Twig**.

O que o pacote entrega
----------------------

[](#o-que-o-pacote-entrega)

- componentes Twig compartilháveis, acessados via namespace `@ChampsFrontend`
- bootstrap simples para legado com `LegacyBootstrap::createRenderer(...)`
- pasta `assets/champs-core-js` pronta para ser copiada para o projeto consumidor
- script de publicação de assets

Dependências
------------

[](#dependências)

No mínimo:

```
composer require twig/twig
```

Em geral o projeto também precisa de:

- Bootstrap 5
- opcionalmente Bootstrap Icons

O pacote **não instala Bootstrap 5** para você. O projeto consumidor continua responsável por isso.

Instalação
----------

[](#instalação)

```
composer require betocampoy/champs-frontend
```

---

Como os templates funcionam
---------------------------

[](#como-os-templates-funcionam)

Os templates do pacote **ficam na `vendor`**. Eles **não precisam ser copiados** para a pasta `templates` do seu projeto.

Você acessa os templates usando o namespace Twig:

```
@ChampsFrontend
```

Exemplos:

```
{% include '@ChampsFrontend/components/ui/_card.html.twig' %}
```

```
{% import '@ChampsFrontend/components/ui/_form.html.twig' as ui %}
```

```
{% import '@ChampsFrontend/components/ui/_modal.html.twig' as modal %}
```

---

Publicação dos assets
---------------------

[](#publicação-dos-assets)

O navegador não consegue ler arquivos dentro de `vendor`, então os assets do `champs-core-js` precisam ser copiados para o projeto consumidor.

### Opção recomendada para Symfony

[](#opção-recomendada-para-symfony)

Copiar para `assets/vendor/champs-frontend`:

```
php vendor/bin/champs-frontend-publish-assets assets/vendor/champs-frontend
```

Ou pelo script do Composer:

```
composer run champs-frontend-publish-assets
```

Esse script do Composer copia para:

```
assets/vendor/champs-frontend

```

### Opção recomendada para legado

[](#opção-recomendada-para-legado)

Copiar para `public/vendor/champs-frontend`:

```
php vendor/bin/champs-frontend-publish-assets public/vendor/champs-frontend
```

---

Uso no Symfony
--------------

[](#uso-no-symfony)

### 1. Registrar os templates do pacote no Twig

[](#1-registrar-os-templates-do-pacote-no-twig)

Abra `config/packages/twig.yaml` e adicione:

```
twig:
    default_path: '%kernel.project_dir%/templates'
    paths:
        '%kernel.project_dir%/vendor/betocampoy/champs-frontend/templates': ChampsFrontend
```

Depois disso, seus templates do projeto já podem usar o namespace `@ChampsFrontend`.

### 2. Publicar os assets para `assets/`

[](#2-publicar-os-assets-para-assets)

```
php vendor/bin/champs-frontend-publish-assets assets/vendor/champs-frontend
```

### 3. Incluir o CSS do `champs-core-js`

[](#3-incluir-o-css-do-champs-core-js)

No template base do projeto:

```

```

### 4. Criar ou ajustar o `assets/app.js`

[](#4-criar-ou-ajustar-o-assetsappjs)

Exemplo recomendado:

```
import { initCore } from './vendor/champs-frontend/champs-core-js/src/init.js';
import Loader from './vendor/champs-frontend/champs-core-js/src/modules/Loader.js';

document.addEventListener('DOMContentLoaded', () => {
    initCore(document);

    // Escolha o template que fizer sentido no projeto
    Loader.useTemplate('minimal');
});
```

### 5. Usar os componentes Twig no projeto

[](#5-usar-os-componentes-twig-no-projeto)

Exemplo simples de uso de macros de formulário:

```
{% import '@ChampsFrontend/components/ui/_form.html.twig' as ui %}

    {{ ui.input({
        col: 'col-12 col-md-6',
        label: 'Nome',
        name: 'name',
        value: user.name|default('')
    }) }}

    {{ ui.button({
        classes: 'btn btn-primary',
        icon: 'bi-check2',
        label: 'Salvar'
    }) }}

```

Exemplo com botão AJAX:

```
{% import '@ChampsFrontend/components/ui/_form.html.twig' as ui %}

{{ ui.ajaxButton({
    classes: 'btn btn-primary btn-sm',
    icon: 'bi-check2',
    label: 'Gravar',
    route: path('users_save'),
    withInputs: true,
    fields: {
        action: 'save'
    }
}) }}
```

Exemplo com modal:

```
{% import '@ChampsFrontend/components/ui/_form.html.twig' as ui %}
{% import '@ChampsFrontend/components/ui/_modal.html.twig' as modal %}

{% set body %}

        {{ ui.input({
            col: 'col-12',
            label: 'Descrição',
            name: 'description'
        }) }}

{% endset %}

{% set footer %}
    {{ ui.button({
        classes: 'btn btn-primary',
        label: 'Salvar'
    }) }}
{% endset %}

{{ modal.formModal({
    title: 'Novo registro',
    body: body,
    footer: footer,
    dialogClasses: 'modal-lg'
}) }}
```

Exemplo com card:

```
{% include '@ChampsFrontend/components/ui/_card.html.twig' with {
    header: 'Resumo',
    body: 'Conteúdo do card.'
} only %}
```

Exemplo com listagem:

```
{% include '@ChampsFrontend/components/list/_page_header.html.twig' with {
    title: 'Usuários',
    subtitle: 'Lista cadastrada no sistema'
} only %}
```

---

Uso no legado
-------------

[](#uso-no-legado)

No legado, o caminho recomendado é usar a classe `LegacyBootstrap`. Ela já:

- cria o renderer Twig
- registra a pasta de templates do projeto
- registra os templates do pacote como `@ChampsFrontend`
- adiciona a extension com `path()` e `asset()`
- permite passar rotas, globals e configuração básica

### Exemplo de bootstrap

[](#exemplo-de-bootstrap)

```
use BetoCampoy\Champs\Frontend\LegacyBootstrap;

$renderer = LegacyBootstrap::createRenderer(
    projectTemplatesPath: __DIR__ . '/templates',
    routes: [
        'home' => '/index.php',
        'users_list' => '/users/list.php',
    ],
    cachePath: __DIR__ . '/var/cache/twig',
    debug: true,
    basePath: '',
    assetsBase: '/vendor/champs-frontend',
    globals: [
        'app_name' => 'Minha Encomenda',
    ]
);

echo $renderer->render('pages/teste.html.twig', [
    'title' => 'Exemplo',
]);
```

### Exemplo de template no legado

[](#exemplo-de-template-no-legado)

```
{% import '@ChampsFrontend/components/ui/_form.html.twig' as ui %}

{{ title }}

    {{ ui.input({
        col: 'col-12 col-md-6',
        label: 'Nome',
        name: 'name'
    }) }}

```

### Assets no legado

[](#assets-no-legado)

Publique para `public/`:

```
php vendor/bin/champs-frontend-publish-assets public/vendor/champs-frontend
```

Depois inclua os arquivos no HTML/layout do legado:

```

```

Se o projeto tiver um `app.js` próprio, você também pode seguir a mesma ideia do Symfony e importar os módulos a partir dele.

---

Estrutura de templates disponível
---------------------------------

[](#estrutura-de-templates-disponível)

### UI

[](#ui)

- `@ChampsFrontend/components/ui/_form.html.twig`
- `@ChampsFrontend/components/ui/_modal.html.twig`
- `@ChampsFrontend/components/ui/_card.html.twig`

### Lista

[](#lista)

- `@ChampsFrontend/components/list/_empty.html.twig`
- `@ChampsFrontend/components/list/_list_content.html.twig`
- `@ChampsFrontend/components/list/_page_header.html.twig`
- `@ChampsFrontend/components/list/_pager.html.twig`
- `@ChampsFrontend/components/list/_search_collapse.html.twig`
- `@ChampsFrontend/components/list/table/_table.html.twig`
- `@ChampsFrontend/components/list/grid/_grid.html.twig`

---

Observações importantes
-----------------------

[](#observações-importantes)

### 1. O pacote não impõe template base

[](#1-o-pacote-não-impõe-template-base)

Você **não precisa** estender um layout do pacote.

O uso esperado é:

- `include` para componentes
- `import` para macros
- integração no layout já existente do seu projeto

### 2. Symfony e legado podem usar caminhos diferentes para assets

[](#2-symfony-e-legado-podem-usar-caminhos-diferentes-para-assets)

Isso é intencional:

- Symfony: `assets/vendor/champs-frontend`
- legado: `public/vendor/champs-frontend`

### 3. Se alterar `twig.yaml` no Symfony

[](#3-se-alterar-twigyaml-no-symfony)

Limpe o cache:

```
php bin/console cache:clear
```

### 4. Se der erro de namespace Twig

[](#4-se-der-erro-de-namespace-twig)

Mensagem comum:

```
There are no registered paths for namespace "ChampsFrontend"

```

Isso significa que o namespace ainda não foi registrado no Twig.

---

Licença
-------

[](#licença)

MIT

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance98

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

13

Last Release

13d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f716b40e59d9e04a7a6ce607fb14866a53a5160e31456676ec379f25e324e58b?d=identicon)[betocampoy](/maintainers/betocampoy)

---

Top Contributors

[![betocampoy](https://avatars.githubusercontent.com/u/85419774?v=4)](https://github.com/betocampoy "betocampoy (18 commits)")

### Embed Badge

![Health badge](/badges/betocampoy-champs-frontend/health.svg)

```
[![Health](https://phpackages.com/badges/betocampoy-champs-frontend/health.svg)](https://phpackages.com/packages/betocampoy-champs-frontend)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.6M2.9k](/packages/craftcms-cms)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)