PHPackages neubau-kompass/storybook-bundle - 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. neubau-kompass/storybook-bundle ActiveLibrary[Utility & Helpers](/categories/utility) neubau-kompass/storybook-bundle =============================== Bundle to use Storybook with Symfony UX packages. v0.1.1(1mo ago)0460↑10.5%MITTypeScriptPHP >=8.2CI failing Since Dec 10Pushed 1mo agoCompare [ Source](https://github.com/neubau-kompass-AG/StorybookBundle)[ Packagist](https://packagist.org/packages/neubau-kompass/storybook-bundle)[ Docs](https://github.com/neubau-kompass-AG/StorybookBundle)[ RSS](/packages/neubau-kompass-storybook-bundle/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (19)Versions (6)Used By (0) Storybook For Symfony ===================== [](#storybook-for-symfony) [![Packagist Version](https://camo.githubusercontent.com/34f0b5c2a8353a94d80d4bfd12567c79d9e10cf2994ca5375dd4b65648f81f3a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6e65756261752d6b6f6d706173732f73746f7279626f6f6b2d62756e646c653f7374796c653d666c61742d737175617265)](https://packagist.org/packages/neubau-kompass/storybook-bundle)[![Packagist Downloads](https://camo.githubusercontent.com/7ca2c1a231e75241518a253975304c206325704c50e260ae5b6293fc53a01c1e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6e65756261752d6b6f6d706173732f73746f7279626f6f6b2d62756e646c653f7374796c653d666c61742d737175617265)](https://packagist.org/packages/neubau-kompass/storybook-bundle)[![Vite Package](https://camo.githubusercontent.com/fdcdb85da62d1d8b8c644669471cf45bcc991a6f2fd395d91ddb61614f3ea02a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406e65756261752d6b6f6d706173732f73746f7279626f6f6b2d73796d666f6e792d766974653f6c6162656c3d766974652532307061636b616765267374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@neubau-kompass/storybook-symfony-vite)[![Webpack Package](https://camo.githubusercontent.com/b0b0e279c7d170a21abfb1d8e258cd818d1418dee6d130cc3612a831051ae663/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406e65756261752d6b6f6d706173732f73746f7279626f6f6b2d73796d666f6e792d7765627061636b3f6c6162656c3d7765627061636b2532307061636b616765267374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@neubau-kompass/storybook-symfony-webpack)[![CI](https://github.com/neubau-kompass-AG/StorybookBundle/actions/workflows/ci.yaml/badge.svg?branch=main)](https://github.com/neubau-kompass-AG/StorybookBundle/actions/workflows/ci.yaml?query=branch%3Amain)[![PHP](https://camo.githubusercontent.com/d1b711495e2e9a44da6826f598f577b2c05e18ccc2fea00cfc3e688b7375fcde/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d253345253344382e342d3737376262343f7374796c653d666c61742d737175617265)](https://www.php.net/supported-versions.php)[![Symfony](https://camo.githubusercontent.com/d9711780296f2dc48389667da379910972a3a19fb26fe870341f3c2d9f33afbd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53796d666f6e792d253545382e302d3030303030303f7374796c653d666c61742d737175617265)](https://symfony.com/releases)[![Storybook](https://camo.githubusercontent.com/826989aead9d4e4c7089564cac661564132041a98665f00e90708b414bc4a215/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746f7279626f6f6b2d25354531302d6666343738353f7374796c653d666c61742d737175617265)](https://storybook.js.org/)[![Node](https://camo.githubusercontent.com/01eb548abd250b52b23441e28de99b7128c58266a20138e853c846fd5b3693f9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4e6f64652d25334525334432302e31392d3433383533643f7374796c653d666c61742d737175617265)](https://nodejs.org/)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE) Storybook for Symfony integrates Storybook 10 with Symfony and Twig Components. It renders Twig through Symfony, provides Storybook framework packages for Vite and Webpack, and includes sandbox and test workflows for maintaining the integration. Important This bundle is under active development. APIs and documented workflows may still change before a stable release. Quick Links ----------- [](#quick-links) I want to...Start hereInstall the bundle[Installation](#installation)Write the first story[Getting Started](docs/getting-started.md)Choose Vite or Webpack[Vite and Webpack Builders](docs/builders.md)Configure Symfony rendering[Configuration](docs/configuration.md)Understand the repo layout[Architecture](docs/architecture.md)Run checks or use the sandbox[Contributing](CONTRIBUTING.md)Publish a release[Release Process](docs/release.md)Migrate from an older version[Upgrade Guide](UPGRADE.md)Supported Stack --------------- [](#supported-stack) RuntimeSupported versionPHP8.4+Symfony8.xSymfony UX3.xStorybook10.xNode.js20.19+BuildersVite, Webpack 5Table of Contents ----------------- [](#table-of-contents) 1. [Installation](#installation) 2. [Composer and JavaScript Packages](#composer-and-javascript-packages) 3. [Builders](#builders) 4. [Package Managers and Lockfiles](#package-managers-and-lockfiles) 5. [Testing](#testing) 6. [Composer Performance](#composer-performance) 7. [Documentation](#documentation) 8. [Contributing and Support](#contributing-and-support) 9. [License](#license) 10. [References](#references) Installation ------------ [](#installation) Note This version targets PHP 8.4+, Symfony 8, Symfony UX 3, Node.js 20.19+, and Storybook 10. Warning Upgrading from an older version is a breaking migration. Read the [upgrade guide](UPGRADE.md) before changing an existing project. Install the Composer bundle: ``` composer require neubau-kompass/storybook-bundle ``` Initialize Storybook. Vite is the default builder. The command detects the package manager from an existing lockfile when possible and falls back to npm. ``` bin/console storybook:init ``` Choose a builder or package manager explicitly when needed: SetupCommandVite with npm`bin/console storybook:init --builder=vite --package-manager=npm`Vite with pnpm`bin/console storybook:init --builder=vite --package-manager=pnpm`Vite with Yarn`bin/console storybook:init --builder=vite --package-manager=yarn`Vite with Bun`bin/console storybook:init --builder=vite --package-manager=bun`Webpack with npm`bin/console storybook:init --builder=webpack --package-manager=npm`This creates the Storybook configuration files and adds required dependencies to `package.json`. Install the JavaScript dependencies: Package managerCommandnpm`npm install`pnpm`pnpm install`Yarn`yarn install`Bun`bun install`Start the Symfony server at the address configured in `.storybook/main.ts`, then run Storybook: Package managerCommandnpm`npm run storybook`pnpm`pnpm storybook`Yarn`yarn storybook`Bun`bun run storybook`Composer and JavaScript Packages -------------------------------- [](#composer-and-javascript-packages) The Composer package remains `neubau-kompass/storybook-bundle`. It provides the Symfony bundle, render endpoint, Twig sandboxing, component integration, and the `storybook:init` command. PathPackageAudienceResponsibility`src/``neubau-kompass/storybook-bundle`Symfony appsBundle services, render endpoint, Twig integration, mocks, and init command`packages/shared``@neubau-kompass/storybook-symfony-shared`InternalShared client renderer, Twig helpers, docs helpers, Symfony command helpers`packages/vite``@neubau-kompass/storybook-symfony-vite`ConsumersStorybook framework package for Vite`packages/webpack``@neubau-kompass/storybook-symfony-webpack`ConsumersStorybook framework package for Webpack 5`sandbox/`Local appContributorsIntegration and smoke-test applicationNote Consumers install only the selected public builder package. The public Vite and Webpack packages inline the shared runtime in their built `dist/` files. Generated projects use the public JavaScript framework packages: BuilderJavaScript packageVersionVite`@neubau-kompass/storybook-symfony-vite``^0.1.1`Webpack`@neubau-kompass/storybook-symfony-webpack``^0.1.1`Builders -------- [](#builders) `storybook:init` generates a Vite-based `.storybook/main.ts` using `@neubau-kompass/storybook-symfony-vite`. Symfony itself does not require Webpack for Storybook rendering; the bundle renders Twig through Symfony over HTTP and uses the Storybook builder only for the preview app, docs, story modules, and dev-server integration. BuilderUse when...ViteStarting a new project, using Storybook/Vitest browser tests, or using the generated defaultWebpackAn existing setup depends on Webpack loaders, plugins, aliases, or Webpack-specific behaviorTip Vite is the default because it is ESM-native, faster for development, and required by Storybook's Vitest addon. Generate a Webpack setup explicitly: ``` bin/console storybook:init --builder=webpack ``` Generated installs no longer include legacy empty or deprecated addon packages such as `@storybook/addon-essentials`, `@storybook/addon-links`, `@storybook/blocks`, or `@storybook/addon-interactions`. The old link addon sandbox stories were removed with that package set. See [Vite and Webpack Builders](docs/builders.md) for full configuration examples and [Architecture](docs/architecture.md) for how the Composer bundle and JavaScript packages fit together. Package Managers and Lockfiles ------------------------------ [](#package-managers-and-lockfiles) The repo supports npm, pnpm, Yarn, and Bun for contributor workflows. `package.json` is the shared dependency contract and direct JavaScript dependencies are pinned exactly for stability. Note Multiple lockfiles are committed on purpose. They verify that the same dependency contract installs cleanly with every supported package manager. LockfilePackage managerWhy it exists`package-lock.json`npmnpm workspace resolution`pnpm-lock.yaml`pnpmpnpm peer dependency and store layout`yarn.lock`YarnYarn lockfile resolution`bun.lock`BunBun lockfile resolutionEach package manager resolves peer dependencies, stores packages, and links workspaces differently. For day-to-day work, install with whichever supported manager you are using: ``` npm install pnpm install yarn install bun install ``` The root build, test, lint, and format scripts are manager-compatible: TasknpmpnpmYarnBunBuild`npm run build``pnpm build``yarn build``bun run build`Test`npm run test``pnpm test``yarn test``bun run test`Lint`npm run lint``pnpm lint``yarn lint``bun run lint`Format`npm run format:check``pnpm format:check``yarn format:check``bun run format:check`When JavaScript dependencies change, refresh all committed lockfiles before opening a pull request: ``` npm run lock:update ``` You can also refresh a single lockfile: ``` npm run lock:update:npm npm run lock:update:pnpm npm run lock:update:yarn npm run lock:update:bun ``` Note Yarn 1 does not have a lockfile-only install mode, so `lock:update:yarn` runs a normal install with package scripts disabled. Corepack is optional. It is a Node package-manager version shim for pnpm and Yarn, but CI installs package managers directly instead of requiring Corepack to be enabled. Testing ------- [](#testing) CheckCommandJavaScript package tests`npm run test`JavaScript lint`npm run lint`JavaScript formatting`npm run format:check`JavaScript build`npm run build`PHP package validation`composer validate --strict`PHP coding standards`vendor/bin/php-cs-fixer fix --dry-run --diff`PHP static analysis`vendor/bin/phpstan analyse --memory-limit=1G`PHP tests`vendor/bin/simple-phpunit`PHPactor diagnostics`vendor/bin/phpactor worse:analyse . --ignore-failure`Sandbox smoke test`./scripts/test-sandbox.sh`Generated Vite projects use Storybook/Vitest via `@storybook/addon-vitest`: ``` npm run test-storybook ``` The generated script name follows the selected package manager's normal run syntax, for example `pnpm test-storybook`, `yarn test-storybook`, or `bun run test-storybook`. Tip The integration test script also runs a static `storybook build` smoke check. Playwright is present as the browser provider for Vitest browser mode and may be used for small black-box smoke tests. The sandbox excludes stories tagged `will-fail` from Storybook/Vitest. Those stories are retained as upstream behavioral and error-case fixtures, not as passing smoke coverage. Composer Performance -------------------- [](#composer-performance) Composer can be slow for real reasons: dependency solving is CPU-heavy, downloads depend on network/cache state, archive extraction is I/O-bound, and Symfony Flex/scripts such as `cache:clear`, `assets:install`, and `importmap:install` boot real application code. This repo's standalone sandbox is slower by design because it behaves like a fresh external app and runs against latest constraints. Use lockfile-based `composer install` for fast local development, and reserve fresh `composer update` runs for compatibility checks. The sandbox uses npm in `sandbox/bin/setup-standalone`, so its Vitest config intentionally starts Storybook with `npm run storybook`. Generated project configs remain package-manager-aware through `storybook:init --package-manager=...`. Documentation ------------- [](#documentation) TopicPageUpgrade guide[UPGRADE.md](UPGRADE.md)Getting started[docs/getting-started.md](docs/getting-started.md)Architecture[docs/architecture.md](docs/architecture.md)Vite and Webpack builders[docs/builders.md](docs/builders.md)Configuration[docs/configuration.md](docs/configuration.md)Storybook feature support[docs/features.md](docs/features.md)Args processors[docs/args-processors.md](docs/args-processors.md)Component mocks[docs/component-mock.md](docs/component-mock.md)Static Storybook builds[docs/static-build.md](docs/static-build.md)Release process[docs/release.md](docs/release.md)Feature-specific pages: - Stories: [Writing Stories](docs/features/csf-stories.md), [Docs](docs/features/docs.md), [Play Function](docs/features/play-function.md) - Addons: [Actions](docs/addons/actions.md), [Interactions](docs/addons/interactions.md) Contributing and Support ------------------------ [](#contributing-and-support) NeedWhere to goContributor workflow[CONTRIBUTING.md](CONTRIBUTING.md)Security reporting[.github/SECURITY.md](.github/SECURITY.md)Support guidance[.github/SUPPORT.md](.github/SUPPORT.md)Code of Conduct[.github/CODE\_OF\_CONDUCT.md](.github/CODE_OF_CONDUCT.md)Issues and pull requests should use the templates in `.github/`. License ------- [](#license) MIT License (MIT): see [LICENSE](./LICENSE). References ---------- [](#references) - [Storybook](https://storybook.js.org/) - [TwigComponent](https://symfony.com/bundles/ux-twig-component/current/index.html) ### Health Score 44 — FairBetter than 90% of packages Maintenance92 Actively maintained with recent releases Popularity18 Limited adoption so far Community11 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 55.4% 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 ~0 days Total 2 Last Release 40d ago PHP version history (2 changes)v0.1.0PHP >=8.4 v0.1.1PHP >=8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/933f360a2a7a2dd222269e78a7ead9a95ef0d97e84ec20ceb6cf0e3b72ece483?d=identicon)[gabrielhamalwa](/maintainers/gabrielhamalwa) --- Top Contributors [![gabrielhamalwa](https://avatars.githubusercontent.com/u/75419495?v=4)](https://github.com/gabrielhamalwa "gabrielhamalwa (51 commits)")[![squrious](https://avatars.githubusercontent.com/u/7271091?v=4)](https://github.com/squrious "squrious (31 commits)")[![WebMamba](https://avatars.githubusercontent.com/u/32077734?v=4)](https://github.com/WebMamba "WebMamba (6 commits)")[![Jean-Beru](https://avatars.githubusercontent.com/u/6114779?v=4)](https://github.com/Jean-Beru "Jean-Beru (3 commits)")[![Taloud](https://avatars.githubusercontent.com/u/16608904?v=4)](https://github.com/Taloud "Taloud (1 commits)") ### Code Quality Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/neubau-kompass-storybook-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/neubau-kompass-storybook-bundle/health.svg)](https://phpackages.com/packages/neubau-kompass-storybook-bundle) ``` ### Alternatives [easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k17.5M370](/packages/easycorp-easyadmin-bundle)[sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.4M195](/packages/sulu-sulu)[symfony/framework-bundle Provides a tight integration between Symfony components and the Symfony full-stack framework 3.6k246.0M11.0k](/packages/symfony-framework-bundle)[sylius/sylius E-Commerce platform for PHP, based on Symfony framework. 8.5k5.8M710](/packages/sylius-sylius)[shopware/core Shopware platform is the core for all Shopware ecommerce products. 585.4M506](/packages/shopware-core)[prestashop/prestashop PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers. 9.1k16.8k](/packages/prestashop-prestashop) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)