PHPackages                             impulsephp/ui - 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. [Utility & Helpers](/categories/utility)
4. /
5. impulsephp/ui

ActiveLibrary[Utility & Helpers](/categories/utility)

impulsephp/ui
=============

A comprehensive UI component provider for ImpulsePHP, offering pre-built components to rapidly design and develop modern web application interfaces

v1.0.0-beta(11mo ago)012MITPHPPHP >=8.2

Since Aug 3Pushed 2mo agoCompare

[ Source](https://github.com/ImpulsePHP/ui)[ Packagist](https://packagist.org/packages/impulsephp/ui)[ RSS](/packages/impulsephp-ui/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (2)Versions (2)Used By (0)

ImpulsePHP UI
=============

[](#impulsephp-ui)

`impulsephp/ui` fournit une bibliothèque de composants d’interface réutilisables pour ImpulsePHP, avec des stories de démonstration intégrées et des helpers pour accélérer le prototypage d’interfaces.

Fonctionnalités principales
---------------------------

[](#fonctionnalités-principales)

- Composants UI pour formulaires, navigation, notifications et widgets d'interface.
- Stories intégrées (dossier `src/Story`) pour parcourir et tester visuellement les composants.
- Intégration avec `impulsephp/translation` et `impulsephp/validator`.
- Assets CSS fournis dans `public/css/ui.css`.

Nouveautés récentes
-------------------

[](#nouveautés-récentes)

- `UIHeatmapComponent` : possibilité de choisir une couleur principale (Tailwind) ou de fournir une palette hex; les stories proposent désormais un contrôle `color`.
- `UIBreadcrumbComponent` : les items peuvent contenir du `html` brut ou un `{ component, props, slot }` pour insérer, par exemple, un `` dans un segment de breadcrumb.
- `UITooltipComponent` : support d'un soulignement en tirets configurable (`underline`, `underlineColor`) et améliorations pour hover/click/focus.
- `UIDataTableComponent` : chevrons de tri affichés pour la colonne triée et rendu SVG côté serveur pour fiabilité visuelle.
- `UITreeViewComponent` : meilleure alignement des labels enfants sous le label parent.
- Certaines stories ont été enrichies pour faciliter les tests (variants, contrôles de couleur/position etc.).

Prérequis
---------

[](#prérequis)

- PHP 8.2 ou supérieur
- `impulsephp/core`
- (optionnel) `impulsephp/translation` et `impulsephp/validator` pour fonctionnalités additionnelles

Installation
------------

[](#installation)

```
composer require impulsephp/ui
```

Si votre application n’utilise pas l’auto-découverte de composer, enregistrez manuellement le provider `Impulse\\UI\\UIProvider`.

Provider
--------

[](#provider)

Au démarrage, `UIProvider` :

- enregistre l’espace de noms `Impulse\\UI\\Component\\` ;
- ajoute `src/Story` aux chemins scannés par `impulsephp/story` ;
- ajoute `public/css/ui.css` à la configuration CSS ;
- enregistre le namespace de traduction `ui` ;
- vérifie la présence du validateur et du traducteur dans le conteneur.

Composants et organisation
--------------------------

[](#composants-et-organisation)

Les composants sont rangés sous `src/Component/` par famille : `Form/`, `Navigation/`, `Notification/`, `Interface/`.

Exemples notables : `UIInputComponent`, `UIButtonComponent`, `UISelectComponent`, `UIModalComponent`, `UIDataTableComponent`, `UIDrawerComponent`, `UITooltipComponent`, `UIPopoverComponent`, `UIHeatmapComponent`, `UIBreadcrumbComponent`, `UITreeViewComponent`, `UISidebarComponent`, etc.

Stories et contrôles
--------------------

[](#stories-et-contrôles)

Les stories fournissent des arguments de base (`getBaseArgs`) et des `variants()` pour tester les variantes visuelles. Pour faciliter l'ajout de contrôles (dropdowns) dans les stories, la convention suivante est autorisée dans les stories :

- fournir un argument sous la forme `[defaultValue, allowedValuesArray]` pour indiquer au UI explorer qu'il y a un contrôle avec des options. Exemple : `['side' => ['right', ['left','right']]]`.

Le loader de story ne transmettra que la `defaultValue` au composant lors du rendu, évitant d'envoyer le tableau `allowedValues` en tant que valeur d'état côté serveur.

Exemples d'utilisation
----------------------

[](#exemples-dutilisation)

Rendre un composant dans une story :

```
use Impulse\\UI\\Component\\Interface\\UIDataTableComponent;

$component = UIDataTableComponent::class;
$args = [
    'columns' => [['key' => 'name', 'label' => 'Name']],
    'rows' => [['name' => 'Alice']],
    'sortBy' => 'name',
];
```

Assets JS (engine)
------------------

[](#assets-js-engine)

Le répertoire `js/` contient l'engine JS du package. Pour construire l'artefact :

```
cd js
npm install
npm run build
```

Le `package.json` inclut des scripts utiles : `build`, `watch` et `test`.

Tests
-----

[](#tests)

Tests unitaires et smoke tests se trouvent dans `tests/`. Pour exécuter les smoke tests du package UI :

```
cd ui
./vendor/bin/phpunit tests/smoke
```

Traductions
-----------

[](#traductions)

Les fichiers de traduction sont disponibles dans `translations/en` et `translations/fr` et chargés sous le namespace `ui`. Exemple :

```
$translator->trans('ui::ui.select.search_placeholder');
```

Contribution et développement
-----------------------------

[](#contribution-et-développement)

Pour contribuer :

1. Ouvrez une branche dédiée.
2. Ajoutez des tests pour les comportements modifiés.
3. Vérifiez les styles Tailwind si vous ajoutez des classes dynamiques (pré-déclarez les classes utilisées pour éviter leur purge).

Licence
-------

[](#licence)

MIT

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance70

Regular maintenance activity

Popularity5

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 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

Unknown

Total

1

Last Release

334d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/39504941?v=4)[Pixelee](/maintainers/Pixelee)[@Pixelee](https://github.com/Pixelee)

---

Top Contributors

[![PixeleeCode](https://avatars.githubusercontent.com/u/56721751?v=4)](https://github.com/PixeleeCode "PixeleeCode (21 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/impulsephp-ui/health.svg)

```
[![Health](https://phpackages.com/badges/impulsephp-ui/health.svg)](https://phpackages.com/packages/impulsephp-ui)
```

###  Alternatives

[leapt/core-bundle

Symfony LeaptCoreBundle

2530.5k4](/packages/leapt-core-bundle)

PHPackages © 2026

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