Minor improvements

Author: squrious

README.md

@@ -11,17 +11,16 @@ 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 link: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
@@ -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: 
@@ -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 renamed to 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()));
+        }
     }
 }

tests/Fixtures/Kernel.php

@@ -78,7 +78,6 @@ protected function configureContainer(ContainerConfigurator $container): void
 
     protected function configureRoutes(RoutingConfigurator $routes): void
     {
-        $routes->import('@StorybookBundle/config/routes.php')
-            ->prefix('_storybook');
+        $routes->import('@StorybookBundle/config/routes.php');
     }
 }