[Toolkit] Improve InstallComponentCommand by asking/guessing which Kit to use, remove ux_toolkit.kit parameter, remove DependencyInjection configuration

Kocal · Kocal · commit ebbf19318f3d · 2025-05-03T09:35:55.000+02:00
diff --git a/src/Toolkit/config/services.php b/src/Toolkit/config/services.php
@@ -35,7 +35,6 @@
 
         ->set('.ux_toolkit.command.install', InstallComponentCommand::class)
             ->args([
-                param('ux_toolkit.kit'),
                 service('.ux_toolkit.registry.registry_factory'),
                 service('filesystem'),
             ])
@@ -55,7 +54,6 @@
             ->args([
                 service('.ux_toolkit.kit.kit_factory'),
                 service('filesystem'),
-                param('kernel.project_dir'),
             ])
 
         ->set('.ux_toolkit.registry.github', GitHubRegistry::class)
diff --git a/src/Toolkit/doc/index.rst b/src/Toolkit/doc/index.rst
@@ -17,8 +17,8 @@ It uses the same approach than the popular `Shadcn UI`_,
 and a similar approach than `Tailwind Plus`_.
 
 After installing the UX Toolkit, you can start pulling the components you need
-from the `UX Components page`_, and use them in your project.
-They become your own components, and you can customize them as you want.
+from `UX Toolkit Kits`_, and use them in your project.
+They become **your own components**, and **you can customize them as you want**.
 
 Additionally, some `Twig components`_ use ``html_cva`` and ``tailwind_merge``,
 you can either remove them from your project or install ``twig/html-extra``
@@ -40,27 +40,16 @@ Install the UX Toolkit using Composer and Symfony Flex:
     # If you want to keep `html_cva` and `tailwind_merge` in your Twig components:
     $ composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra
 
-Configuration
--------------
-
-Configuration is done in your ``config/packages/ux_toolkit.yaml`` file:
-
-.. code-block:: yaml
-
-    # config/packages/ux_toolkit.yaml
-    ux_toolkit:
-        kit: 'shadcn'
-
 Usage
 -----
 
 You may find a list of components in the `UX Components page`_, with the installation instructions for each of them.
 
-For example, if you want to install the `Button` component, you will find the following instruction:
+For example, if you want to install a `Button` component, you will find the following instruction:
 
 .. code-block:: terminal
 
-    $ php bin/console ux:toolkit:install-component Button
+    $ php bin/console ux:toolkit:install-component Button --kit=<kitName>
 
 It will create the ``templates/components/Button.html.twig`` file, and you will be able to use the `Button` component like this:
 
@@ -121,24 +110,17 @@ A kit is composed of:
 - A ``templates/components`` directory, that contains the Twig components,
 - A ``docs/components`` directory, optional, that contains the documentation for each "root" Twig component.
 
-Use your kit in a Symfony application
--------------------------------------
+Using your kit
+~~~~~~~~~~~~~~
 
-You can globally configure the kit to use in your application by setting the ``ux_toolkit.kit`` configuration:
-
-.. code-block:: yaml
-
-    # config/packages/ux_toolkit.yaml
-    ux_toolkit:
-        kit: 'github.com/my-username/my-ux-kits'
-        # or for a specific version
-        kit: 'github.com/my-username/my-ux-kits:1.0.0'
-
-If you do not want to globally configure the kit, you can pass the ``--kit`` option to the ``ux:toolkit:install-component`` command:
+Once your kit is published on GitHub, you can use it by specifying the ``--kit`` option when installing a component:
 
 .. code-block:: terminal
 
-    $ php bin/console ux:toolkit:install-component Button --kit=github.com/my-username/my-ux-kits
+    $ php bin/console ux:toolkit:install-component Button --kit=github.com/my-username/my-ux-toolkit-kit
+
+    # or for a specific version
+    $ php bin/console ux:toolkit:install-component Button --kit=github.com/my-username/my-ux-toolkit-kit:1.0.0
 
 Backward Compatibility promise
 ------------------------------
@@ -153,6 +135,6 @@ We may break them in patch or minor release, but you won't get impacted unless y
 
 .. _`the Symfony UX initiative`: https://ux.symfony.com/
 .. _`Twig components`: https://symfony.com/bundles/ux-twig-component/current/index.html
-.. _`UX Components page`: https://ux.symfony.com/components
+.. _`UX Toolkit Kits`: https://ux.symfony.com/toolkit#kits
 .. _`Shadcn UI`: https://ui.shadcn.com/
 .. _`Tailwind Plus`: https://tailwindcss.com/plus
diff --git a/src/Toolkit/src/Command/InstallComponentCommand.php b/src/Toolkit/src/Command/InstallComponentCommand.php
@@ -24,6 +24,7 @@
 use Symfony\UX\Toolkit\File\File;
 use Symfony\UX\Toolkit\Installer\Installer;
 use Symfony\UX\Toolkit\Kit\Kit;
+use Symfony\UX\Toolkit\Registry\LocalRegistry;
 use Symfony\UX\Toolkit\Registry\RegistryFactory;
 
 /**
@@ -42,7 +43,6 @@ class InstallComponentCommand extends Command
     private bool $isInteractive;
 
     public function __construct(
-        private readonly string $kitName,
         private readonly RegistryFactory $registryFactory,
         private readonly Filesystem $filesystem,
     ) {
@@ -53,6 +53,7 @@ protected function configure(): void
     {
         $this
             ->addArgument('component', InputArgument::OPTIONAL, 'The component name (Ex: Button)')
+            ->addOption('kit', 'k', InputOption::VALUE_OPTIONAL, 'The kit name (Ex: shadcn, or github.com/user/my-ux-toolkit-kit)')
             ->addOption(
                 'destination',
                 'd',
@@ -61,7 +62,6 @@ protected function configure(): void
                 Path::join('templates', 'components')
             )
             ->addOption('force', 'f', InputOption::VALUE_NONE, 'Force the component installation, even if the component already exists')
-            ->addOption('kit', 'k', InputOption::VALUE_OPTIONAL, 'Override the kit name', $this->kitName)
             ->setHelp(
                 <<<EOF
 The <info>%command.name%</info> command will install a new UX Component in your project.
@@ -92,10 +92,48 @@ protected function execute(InputInterface $input, OutputInterface $output): int
         $io = new SymfonyStyle($input, $output);
 
         $kitName = $input->getOption('kit');
-        $registry = $this->registryFactory->getForKit($kitName);
-        $kit = $registry->getKit($kitName);
+        $componentName = $input->getArgument('component');
+
+        // If the kit name is not explicitly provided, we need to suggest one
+        if (null === $kitName) {
+            /** @var list<Kit> $availableKits */
+            $availableKits = [];
+            $availableKitNames = LocalRegistry::getAvailableKitsName();
+            foreach ($availableKitNames as $availableKitName) {
+                $kit = $this->registryFactory->getForKit($availableKitName)->getKit($availableKitName);
+
+                if (null === $componentName) {
+                    $availableKits[] = $kit;
+                } elseif (null !== $kit->getComponent($componentName)) {
+                    $availableKits[] = $kit;
+                }
+            }
+            // If more than one kit is available, we ask the user which one to use
+            if (($availableKitsCount = \count($availableKits)) > 1) {
+                $kitName = $io->choice(null === $componentName ? 'Which kit do you want to use?' : \sprintf('The component "%s" exists in multiple kits. Which one do you want to use?', $componentName), array_map(fn (Kit $kit) => $kit->name, $availableKits));
+
+                foreach ($availableKits as $availableKit) {
+                    if ($availableKit->name === $kitName) {
+                        $kit = $availableKit;
+                        break;
+                    }
+                }
+            } elseif (1 === $availableKitsCount) {
+                $kit = $availableKits[0];
+            } else {
+                $io->error(null === $componentName
+                    ? 'It seems that no local kits are available and it should not happens. Please open an issue on https://github.com/symfony/ux to report this.'
+                    : sprintf("The component \"%s\" does not exist in any local kits.\n\nYou can try to run one of the following commands to interactively install components:\n%s\n\nOr you can try one of the community kits https://github.com/search?q=topic:ux-toolkit&type=repositories", $componentName, implode("\n", array_map(fn (string $availableKitName) => sprintf('$ bin/console %s --kit %s', $this->getName(), $availableKitName), $availableKitNames)))
+                );
+
+                return Command::FAILURE;
+            }
+        } else {
+            $registry = $this->registryFactory->getForKit($kitName);
+            $kit = $registry->getKit($kitName);
+        }
 
-        if (null === $componentName = $input->getArgument('component')) {
+        if (null === $componentName) {
             // Ask for the component name if not provided
             $componentName = $io->choice('Which component do you want to install?', array_map(fn (Component $component) => $component->name, $this->getAvailableComponents($kit)));
             $component = $kit->getComponent($componentName);
@@ -124,7 +162,7 @@ protected function execute(InputInterface $input, OutputInterface $output): int
             }
         }
 
-        $io->writeln(\sprintf('Installing component <info>%s</> from the <info>%s</> kit...', $component->name, $kitName));
+        $io->writeln(\sprintf('Installing component <info>%s</> from the <info>%s</> kit...', $component->name, $kit->name));
 
         $installer = new Installer($this->filesystem, fn (string $question) => $this->io->confirm($question, $input->isInteractive()));
         $installationReport = $installer->installComponent($kit, $component, $destinationPath = $input->getOption('destination'), $input->getOption('force'));
diff --git a/src/Toolkit/src/Registry/LocalRegistry.php b/src/Toolkit/src/Registry/LocalRegistry.php
@@ -13,6 +13,7 @@
 
 use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Filesystem\Path;
+use Symfony\Component\Finder\Finder;
 use Symfony\UX\Toolkit\Kit\Kit;
 use Symfony\UX\Toolkit\Kit\KitFactory;
 
@@ -24,6 +25,8 @@
  */
 final class LocalRegistry implements Registry
 {
+    private static string $kitsDir = __DIR__.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'..'.\DIRECTORY_SEPARATOR.'kits';
+
     public static function supports(string $kitName): bool
     {
         return 1 === preg_match('/^[a-zA-Z0-9_-]+$/', $kitName);
@@ -32,25 +35,34 @@ public static function supports(string $kitName): bool
     public function __construct(
         private readonly KitFactory $kitFactory,
         private readonly Filesystem $filesystem,
-        private readonly string $projectDir,
     ) {
     }
 
     public function getKit(string $kitName): Kit
     {
-        $possibleKitDirs = [
-            // Local kit
-            Path::join($this->projectDir, 'kits', $kitName),
-            // From vendor
-            Path::join($this->projectDir, 'vendor', 'symfony', 'ux-toolkit', 'kits', $kitName),
-        ];
-
-        foreach ($possibleKitDirs as $kitDir) {
-            if ($this->filesystem->exists($kitDir)) {
-                return $this->kitFactory->createKitFromAbsolutePath($kitDir);
-            }
+        $kitDir = Path::join(self::$kitsDir, $kitName);
+        if ($this->filesystem->exists($kitDir)) {
+            return $this->kitFactory->createKitFromAbsolutePath($kitDir);
         }
 
         throw new \RuntimeException(\sprintf('Unable to find the kit "%s" in the following directories: "%s"', $kitName, implode('", "', $possibleKitDirs)));
     }
+
+    /**
+     * @return array<string>
+     */
+    public static function getAvailableKitsName(): array
+    {
+        $availableKitsName = [];
+        $finder = (new Finder())->directories()->in(self::$kitsDir)->depth(0);
+
+        foreach ($finder as $directory) {
+            $kitName = $directory->getRelativePathname();
+            if (self::supports($kitName)) {
+                $availableKitsName[] = $kitName;
+            }
+        }
+
+        return $availableKitsName;
+    }
 }
diff --git a/src/Toolkit/src/UXToolkitBundle.php b/src/Toolkit/src/UXToolkitBundle.php
@@ -11,7 +11,6 @@
 
 namespace Symfony\UX\Toolkit;
 
-use Symfony\Component\Config\Definition\Configurator\DefinitionConfigurator;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 use Symfony\Component\HttpKernel\Bundle\AbstractBundle;
@@ -24,30 +23,8 @@ class UXToolkitBundle extends AbstractBundle
 {
     protected string $extensionAlias = 'ux_toolkit';
 
-    public function configure(DefinitionConfigurator $definition): void
-    {
-        $rootNode = $definition->rootNode();
-        $rootNode
-            ->children()
-                ->scalarNode('kit')
-                    ->info('The kit to use, it can be from the official UX Toolkit repository, or an external GitHub repository')
-                    ->defaultValue('shadcn')
-                    ->example([
-                        'shadcn',
-                        'github.com/user/repository@my-kit',
-                        'github.com/user/repository@my-kit:main',
-                        'https://github.com/user/repository@my-kit',
-                    ])
-                ->end()
-            ->end();
-    }
-
     public function loadExtension(array $config, ContainerConfigurator $container, ContainerBuilder $builder): void
     {
-        $container->parameters()
-            ->set('ux_toolkit.kit', $config['kit'])
-        ;
-
         $container->import('../config/services.php');
     }
 }
diff --git a/src/Toolkit/tests/Command/InstallComponentCommandTest.php b/src/Toolkit/tests/Command/InstallComponentCommandTest.php
@@ -53,7 +53,7 @@ public function testShouldAbleToInstallComponentTableAndItsDependencies(): void
         $testCommand = $this->consoleCommand('ux:toolkit:install-component Table --destination='.$this->tmpDir)
             ->execute()
             ->assertSuccessful()
-            ->assertOutputContains('Installing component Table from the shadcn kit...')
+            ->assertOutputContains('Installing component Table from the Shadcn UI kit...')
             ->assertOutputContains('[OK] The component has been installed.')
         ;
 
@@ -65,16 +65,16 @@ public function testShouldAbleToInstallComponentTableAndItsDependencies(): void
         }
     }
 
-    public function testShouldFailAndSuggestAlternativeComponents(): void
+    public function testShouldFailAndSuggestAlternativeComponentsWhenKitIsExplicit(): void
     {
         $destination = sys_get_temp_dir().\DIRECTORY_SEPARATOR.uniqid();
         mkdir($destination);
 
         $this->bootKernel();
-        $this->consoleCommand('ux:toolkit:install-component Table: --destination='.$destination)
+        $this->consoleCommand('ux:toolkit:install-component Table: --kit=shadcn --destination='.$destination)
             ->execute()
             ->assertFaulty()
-            ->assertOutputContains('[WARNING] The component "Table:" does not exist.')
+            ->assertOutputContains('[WARNING] The component "Table:" does not exist')
             ->assertOutputContains('Possible alternatives: ')
             ->assertOutputContains('"Table:Body"')
             ->assertOutputContains('"Table:Caption"')
@@ -95,7 +95,7 @@ public function testShouldFailWhenComponentDoesNotExist(): void
         $this->consoleCommand('ux:toolkit:install-component Unknown --destination='.$destination)
             ->execute()
             ->assertFaulty()
-            ->assertOutputContains('The component "Unknown" does not exist.');
+            ->assertOutputContains('The component "Unknown" does not exist');
     }
 
     public function testShouldWarnWhenComponentFileAlreadyExistsInNonInteractiveMode(): void
diff --git a/src/Toolkit/tests/UXToolkitBundleTest.php b/src/Toolkit/tests/UXToolkitBundleTest.php
@@ -22,6 +22,5 @@ public function testBundleBuildsSuccessfully(): void
         $container = self::$kernel->getContainer();
 
         $this->assertInstanceOf(UXToolkitBundle::class, $container->get('kernel')->getBundles()['UXToolkitBundle']);
-        $this->assertEquals('shadcn', $container->getParameter('ux_toolkit.kit'));
     }
 }
diff --git a/ux.symfony.com/config/packages/ux_toolkit.yaml b/ux.symfony.com/config/packages/ux_toolkit.yaml
diff --git a/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php b/ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php
@@ -55,12 +55,11 @@ private function formatContent(string $markdownContent): string
     private function insertInstallation(AbstractString $markdownContent): AbstractString
     {
         $installationCode = SourceCleaner::processTerminalLines(<<<SHELL
-symfony console ux:toolkit:install-component {$this->component->name}
-# or if you already use another kit
-symfony console ux:toolkit:install-component {$this->component->name} --kit {$this->kitId->value}
+bin/console ux:toolkit:install-component {$this->component->name} --kit {$this->kitId->value}
 SHELL
         );
 
+        // TODO: Provide tabs showing automatic and manual installation
         return $markdownContent->replace(
             '<!-- Placeholder: Installation -->',
             <<<HTML

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,5 @@ public function testBundleBuildsSuccessfully(): void`
`22`	`22`	`$container = self::$kernel->getContainer();`
`23`	`23`
`24`	`24`	`$this->assertInstanceOf(UXToolkitBundle::class, $container->get('kernel')->getBundles()['UXToolkitBundle']);`
`25`		`- $this->assertEquals('shadcn', $container->getParameter('ux_toolkit.kit'));`
`26`	`25`	`}`
`27`	`26`	`}`