Minor improvements

README.md

@@ -11,22 +11,21 @@ Clone this repo and install the bundle in your project.
 Install Storybook in your project:
 
 ```shell
-yarn add @storybook/cli 
-yarn run sb init -t server
+yarn add -D @storybook/cli @storybook/addon-essentials @storybook/addon-links @storybook/blocks react react-dom 
 ```
 
 Add the bundled NPM package for Symfony integration:
 
 ```shell
-yarn add link:vendor/sensiolabs/storybook-bundle/storybook
+yarn add -D @sensiolabs/storybook-symfony-webpack5@file:vendor/sensiolabs/storybook-bundle/storybook
 ```
 
-Remove the auto generated `src/stories` directory, and replace the content of `.storybook/main.js|ts` with: 
+Create storybook configuration in `.storybook/`: 
 
 ```ts
 // .storybook/main.ts
 
-import type { StorybookConfig } from "@storybook/symfony-webpack5";
+import type { StorybookConfig } from "@sensiolabs/storybook-symfony-webpack5";
 
 const config: StorybookConfig = {
     stories: ["../stories/**/*.stories.[tj]s"],
@@ -37,7 +36,7 @@ const config: StorybookConfig = {
     ],
     framework: {
         // 👇 Here tell storybook to use the Symfony framework  
-        name: "@storybook/symfony-webpack5",
+        name: "@sensiolabs/storybook-symfony-webpack5",
         options: {
           builder: {
               useSWC: true
@@ -58,9 +57,50 @@ const config: StorybookConfig = {
 export default config;
 ```
 
+```ts
+// .storybook/preset.ts
+
+import { Preview } from '@storybook/server';
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;
+
+```
+
+Register the route for Storybook in your symfony project:
+
+```yaml
+# config/routes/storybook.yaml
+
+storybook:
+  resource: '@StorybookBundle/config/routes.php'
+```
+
 Run Storybook with:
 ```shell
-yarn run storybook
+yarn run sb dev -p 6006
+```
+
+Additionally, you can add custom scripts to your `package.json` file: 
+
+```json
+{
+    "scripts": {
+        "storybook": "sb dev -p 6006",
+        "build-storybook": "sb build"
+    }
+}
 ```
 
 ## Symfony configuration
@@ -69,17 +109,17 @@ yarn run storybook
 
 As the Symfony integration relies on the Storybook's server renderer, it makes requests to your Symfony server to render Twig components. These requests are cross origins, so you have to configure Symfony to accept them from your Storybook instance.
 
-There is two options to achieve this. You can either configure the Storybook host in the bundle, or use the popular NelmioCORS bundle. 
+There is two options to achieve this. You can either configure the Storybook host in the bundle, or use the popular [NelmioCorsBundle](https://symfony.com/bundles/NelmioCorsBundle/current/index.html). 
 
-In the bundle: 
+In the StorybookBundle: 
 
 ```yaml
 # config/storybook.yaml
 storybook: 
   server: http://localhost:6006
 ```
 
-With NelmioCORS:
+With NelmioCorsBundle:
 ```yaml
 # config/storybook.yaml
 storybook: 
@@ -105,7 +145,7 @@ To use Storybook with a project that uses the [AssetMapper component](https://sy
 
 const config: StorybookConfig = {
     framework: {
-        name: "@storybook/symfony-webpack5",
+        name: "@sensiolabs/storybook-symfony-webpack5",
         options: {
             symfony: {
                 // 👇 Here enable AssetMapper integration
@@ -136,7 +176,7 @@ Example:
 ```js
 // stories/Button.stories.js
 
-import { twig } from '@storybook/symfony-webpack5';
+import { twig } from '@sensiolabs/storybook-symfony-webpack5';
 
 const Button = twig`<twig:Button btnType="{{ args.primary ? 'primary' : 'secondary' }}">{{ args.label }}</twig:Button>`;
 
@@ -160,6 +200,40 @@ export const Secondary = {
     template: Button, // You can pass a specific template for a story
 };
 
+```
+# Troubleshooting
+
+## Conflicting `string-width` module
+
+When you install storybook, you might encounter the following warnings:
+
+```
+warning Pattern ["string-width-cjs@npm:string-width@^4.2.0"] is trying to unpack in the same destination "/home/john/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
+warning Pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"] is trying to unpack in the same destination "/home/john/.cache/yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi@^6.0.0"]. This could result in non-deterministic behavior, skipping.
+warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/home/john/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
+```
+
+
+When trying to run storybook, if you get the following error:
+```
+🔴 Error: It looks like you are having a known issue with package hoisting.
+Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
+
+
+/home/john/Projects/storybook/node_modules/cli-table3/src/utils.js:1
+const stringWidth = require('string-width');
+                    ^
+
+Error [ERR_REQUIRE_ESM]: require() of ES Module /home/john/Projects/storybook/node_modules/string-width/index.js from /home/john/Projects/storybook/node_modules/cli-table3/src/utils.js not supported.
+
+```
+
+Then you have to clean the yarn cache for the conflicting module and reinstall: 
+
+```
+yarn cache clean string-width-cjs@npm:string-width@^4.2.0
+rm -rf node_modules yarn.lock
+yarn install --force
 ```
 
 # License

config/routes.php

@@ -3,7 +3,7 @@
 use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator;
 
 return function (RoutingConfigurator $routes) {
-    $routes->add('storybook_render', '/render/{id}')
+    $routes->add('storybook_render', '/_storybook/render/{id}')
         ->requirements([
             'id' => '.+',
         ])

src/Command/DumpImportMapCommand.php → src/Command/DumpImportmapModuleCommand.php

@@ -8,11 +8,14 @@
 use Symfony\Component\Console\Input\InputInterface;
 use Symfony\Component\Console\Output\OutputInterface;
 
-#[AsCommand('storybook:dump-importmap', hidden: true)]
 /**
+ * Dump a JavaScript module that imports assets declared in the importmap.
+ * Note this command is hidden and only intended to be run by the Storybook builder, not the user.
+ *
  * @author Nicolas Rigaud <[email protected]>
  */
-class DumpImportMapCommand extends Command
+#[AsCommand('storybook:dump-importmap', hidden: true)]
+class DumpImportmapModuleCommand extends Command
 {
     public function __construct(private readonly ImportMapConfigReader $importMapConfigReader)
     {

src/DependencyInjection/StorybookExtension.php

@@ -3,7 +3,7 @@
 namespace Storybook\DependencyInjection;
 
 use Storybook\Attributes\AsStorybookLoader;
-use Storybook\Command\DumpImportMapCommand;
+use Storybook\Command\DumpImportmapModuleCommand;
 use Storybook\Controller\StorybookController;
 use Storybook\EventListener\CorsListener;
 use Storybook\EventListener\ExceptionListener;
@@ -57,7 +57,7 @@ static function (ChildDefinition $definition, AsStorybookLoader $attributeInstan
             ->addTag('twig.loader');
 
         if (class_exists(AssetMapper::class)) {
-            $container->register('storybook.dump_importmap_command', DumpImportMapCommand::class)
+            $container->register('storybook.dump_importmap_command', DumpImportmapModuleCommand::class)
                 ->setArgument(0, new Reference('asset_mapper.importmap.config_reader'))
                 ->addTag('console.command', ['name' => 'storybook:dump-importmap'])
             ;

src/EventListener/ExceptionListener.php

@@ -15,14 +15,8 @@ public function __invoke(ExceptionEvent $event): void
     {
         $th = $event->getThrowable();
 
-        match (true) {
-            $th instanceof TemplateNotFoundException => $this->onTemplateNotFound($event),
-            default => null,
-        };
-    }
-
-    private function onTemplateNotFound(ExceptionEvent $event): void
-    {
-        $event->setThrowable(new NotFoundHttpException($event->getThrowable()->getMessage(), $event->getThrowable()));
+        if ($th instanceof TemplateNotFoundException) {
+            $event->setThrowable(new NotFoundHttpException($event->getThrowable()->getMessage(), $event->getThrowable()));
+        }
     }
 }

storybook/.gitignore

@@ -4,4 +4,5 @@ build-storybook.log
 .DS_Store
 .env
 yarn.lock
-yarn-error.log
+yarn-error.log
+.yarn

storybook/dist/index.d.mts

@@ -39,7 +39,7 @@ type StorybookConfig$1<TWebpackConfiguration = WebpackConfiguration> = Storybook
     webpackFinal?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
 };
 
-type FrameworkName = '@storybook/symfony-webpack5';
+type FrameworkName = '@sensiolabs/storybook-symfony-webpack5';
 type BuilderName = '@storybook/builder-webpack5';
 type ProxyPaths = string[] | string;
 type SymfonyOptions = {
@@ -62,7 +62,7 @@ type SymfonyOptions = {
 };
 type FrameworkOptions = {
     builder?: BuilderOptions;
-    symfony?: SymfonyOptions;
+    symfony: SymfonyOptions;
 };
 type StorybookConfigFramework = {
     framework: FrameworkName | {

storybook/dist/index.d.ts

@@ -39,7 +39,7 @@ type StorybookConfig$1<TWebpackConfiguration = WebpackConfiguration> = Storybook
     webpackFinal?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
 };
 
-type FrameworkName = '@storybook/symfony-webpack5';
+type FrameworkName = '@sensiolabs/storybook-symfony-webpack5';
 type BuilderName = '@storybook/builder-webpack5';
 type ProxyPaths = string[] | string;
 type SymfonyOptions = {
@@ -62,7 +62,7 @@ type SymfonyOptions = {
 };
 type FrameworkOptions = {
     builder?: BuilderOptions;
-    symfony?: SymfonyOptions;
+    symfony: SymfonyOptions;
 };
 type StorybookConfigFramework = {
     framework: FrameworkName | {