PHPackages                             impulsephp/story - 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. impulsephp/story

ActiveLibrary

impulsephp/story
================

Interactive visual component explorer for ImpulsePHP

01↑2900%PHP

Since Jul 19Pushed 1mo agoCompare

[ Source](https://github.com/ImpulsePHP/story)[ Packagist](https://packagist.org/packages/impulsephp/story)[ RSS](/packages/impulsephp-story/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (2)Used By (0)

ImpulsePHP Story
================

[](#impulsephp-story)

`impulsephp/story` est l’explorateur visuel de composants d’ImpulsePHP. Le package permet de parcourir, prévisualiser et documenter les composants d’une application ou d’un package à partir de classes de story dédiées.

Ce que fait le package
----------------------

[](#ce-que-fait-le-package)

- scanne automatiquement les stories présentes dans l’application ;
- expose une interface visuelle de prévisualisation ;
- regroupe les stories par catégories ;
- prend en charge plusieurs variantes par composant ;
- charge les feuilles de style associées à l’explorateur.

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

[](#prérequis)

- PHP 8.2 ou supérieur ;
- une application ImpulsePHP avec `impulsephp/core` ;
- Node.js si vous souhaitez reconstruire les assets CSS du package.

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

[](#installation)

```
composer require impulsephp/story
```

Le provider est déclaré via `extra.impulse-provider`. Si l’auto-découverte n’est pas utilisée, ajoutez `Impulse\Story\StoryProvider` à votre configuration de providers.

Ce que fait le provider
-----------------------

[](#ce-que-fait-le-provider)

Le provider :

- enregistre `Impulse\Story\Loader\StoryScanner` dans le conteneur ;
- expose les routes de page du package ;
- déclare les espaces de noms de composants de story ;
- charge les chemins CSS définis dans la configuration `css`.

L’explorateur principal est exposé par défaut sur :

```
/impulse/story

```

Où placer vos stories
---------------------

[](#où-placer-vos-stories)

Le scanner ajoute automatiquement ces chemins :

- `src/Story`
- `tests/Stories`

Chaque fichier PHP rencontré dans ces répertoires est analysé. Si la classe implémente `Impulse\Story\Contracts\StoryInterface`, elle est chargée et ajoutée à l’explorateur.

Exemple d’usage complet
-----------------------

[](#exemple-dusage-complet)

Le package fournit une classe abstraite `Impulse\Story\Component\AbstractStory` qui simplifie la création d’une story.

```
use Impulse\Story\Component\AbstractStory;
use App\Component\ButtonComponent;

final class ButtonStory extends AbstractStory
{
    protected string $category = 'Actions';

    public function name(): string
    {
        return 'Button';
    }

    public function description(): string
    {
        return 'Variantes du bouton principal de l’application.';
    }

    public function componentClass(): string
    {
        return ButtonComponent::class;
    }

    protected function getBaseArgs(): array
    {
        return [
            'label' => 'Créer',
            'color' => 'indigo',
        ];
    }

    public function variants(): array
    {
        return [
            'primaire' => ['label' => 'Créer'],
            'danger' => ['label' => 'Supprimer', 'color' => 'red'],
        ];
    }
}
```

Une fois le provider chargé :

1. placez vos stories dans `src/Story` ou `tests/Stories` ;
2. démarrez votre application ;
3. ouvrez `/impulse/story` dans le navigateur.

Exploiter le scanner depuis le code
-----------------------------------

[](#exploiter-le-scanner-depuis-le-code)

```
use Impulse\Story\Loader\StoryScanner;

$scanner = $container->get(StoryScanner::class);

$menu = $scanner->getMenuStructure();
$stories = $scanner->getStoriesByCategory();
$story = $scanner->getStoryByName('Button');
```

Assets CSS
----------

[](#assets-css)

Le package contient des assets CSS et un script npm pour surveiller la compilation :

```
npm install
npm run watch:css
```

La commande compile `assets/css/main.css` vers `public/css/main.css`.

Aller plus loin
---------------

[](#aller-plus-loin)

`impulsephp/story` est particulièrement utile avec :

- `impulsephp/ui`, qui fournit déjà des stories prêtes à l’emploi ;
- vos composants applicatifs pour documenter variantes et états de rendu.

Tests
-----

[](#tests)

```
composer test
```

Licence
-------

[](#licence)

MIT

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance60

Regular maintenance activity

Popularity2

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity16

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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/2a253c4a30ec3da1739ef1ff0efa7ba46e3146df76dc690f334706244095f2ce?d=identicon)[Pixelee](/maintainers/Pixelee)

---

Top Contributors

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

### Embed Badge

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

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

PHPackages © 2026

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