Skip to content

Conversation

@Kocal
Copy link
Member

@Kocal Kocal commented Aug 10, 2025

Q A
Bug fix? no
New feature? yes
Docs? no
Issues Fix #...
License MIT

This big PR modify the kits architecture from Toolkit, I get a lot of inspiration from Symfony Recipes and I think we are on something really really good.

The actual architecture was too coupled to a Symfony application structure, which made things easy for the website but not for working on "Recipes" (previously known as Components").

Before:

➜ Toolkit git:(2.x) tree kits/shadcn/ kits/shadcn/ ├── AspectRatio │   └── examples ├── docs │   └── components │   ├── Alert.md │   ├── AspectRatio.md │   ├── Avatar.md │   ├── Badge.md │   ├── Breadcrumb.md │   ├── Button.md │   ├── Card.md │   ├── Checkbox.md │   ├── Input.md │   ├── Label.md │   ├── Pagination.md │   ├── Progress.md │   ├── Select.md │   ├── Separator.md │   ├── Skeleton.md │   ├── Switch.md │   ├── Table.md │   └── Textarea.md ├── INSTALL.md ├── manifest.json └── templates └── components ├── Alert │   ├── Description.html.twig │   ├── Description.meta.json │   ├── Title.html.twig │   └── Title.meta.json ├── Alert.html.twig ├── Alert.meta.json ├── AspectRatio.html.twig ├── AspectRatio.meta.json ├── Avatar │   ├── Image.html.twig │   ├── Image.meta.json │   ├── Text.html.twig │   └── Text.meta.json ├── Avatar.html.twig ├── Avatar.meta.json ├── Badge.html.twig ├── Badge.meta.json ├── Breadcrumb │   ├── Ellipsis.html.twig │   ├── Ellipsis.meta.json │   ├── Item.html.twig │   ├── Item.meta.json │   ├── Link.html.twig │   ├── Link.meta.json │   ├── List.html.twig │   ├── List.meta.json │   ├── Page.html.twig │   ├── Page.meta.json │   ├── Separator.html.twig │   └── Separator.meta.json ├── Breadcrumb.html.twig ├── Breadcrumb.meta.json ├── Button.html.twig ├── Button.meta.json ├── Card │   ├── Content.html.twig │   ├── Content.meta.json │   ├── Description.html.twig │   ├── Description.meta.json │   ├── Footer.html.twig │   ├── Footer.meta.json │   ├── Header.html.twig │   ├── Header.meta.json │   ├── Title.html.twig │   └── Title.meta.json ├── Card.html.twig ├── Card.meta.json ├── Checkbox.html.twig ├── Checkbox.meta.json ├── Input.html.twig ├── Input.meta.json ├── Label.html.twig ├── Label.meta.json ├── Pagination │   ├── Content.html.twig │   ├── Content.meta.json │   ├── Ellipsis.html.twig │   ├── Ellipsis.meta.json │   ├── Item.html.twig │   ├── Item.meta.json │   ├── Link.html.twig │   ├── Link.meta.json │   ├── Next.html.twig │   ├── Next.meta.json │   ├── Previous.html.twig │   └── Previous.meta.json ├── Pagination.html.twig ├── Pagination.meta.json ├── Progress.html.twig ├── Progress.meta.json ├── Select.html.twig ├── Select.meta.json ├── Separator.html.twig ├── Separator.meta.json ├── Skeleton.html.twig ├── Skeleton.meta.json ├── Switch.html.twig ├── Switch.meta.json ├── Table │   ├── Body.html.twig │   ├── Body.meta.json │   ├── Caption.html.twig │   ├── Caption.meta.json │   ├── Cell.html.twig │   ├── Cell.meta.json │   ├── Footer.html.twig │   ├── Footer.meta.json │   ├── Head.html.twig │   ├── Head.meta.json │   ├── Header.html.twig │   ├── Header.meta.json │   ├── Row.html.twig │   └── Row.meta.json ├── Table.html.twig ├── Table.meta.json ├── Textarea.html.twig └── Textarea.meta.json 

after:

➜ Toolkit git:(toolkit-rework-component-for-recipe) tree kits/shadcn/ ├── Alert │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Alert │   │   ├── Description.html.twig │   │   └── Title.html.twig │   └── Alert.html.twig ├── AspectRatio │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── AspectRatio.html.twig ├── Avatar │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Avatar │   │   ├── Image.html.twig │   │   └── Text.html.twig │   └── Avatar.html.twig ├── Badge │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Badge.html.twig ├── Breadcrumb │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Breadcrumb │   │   ├── Ellipsis.html.twig │   │   ├── Item.html.twig │   │   ├── Link.html.twig │   │   ├── List.html.twig │   │   ├── Page.html.twig │   │   └── Separator.html.twig │   └── Breadcrumb.html.twig ├── Button │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Button.html.twig ├── Card │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Card │   │   ├── Content.html.twig │   │   ├── Description.html.twig │   │   ├── Footer.html.twig │   │   ├── Header.html.twig │   │   └── Title.html.twig │   └── Card.html.twig ├── Checkbox │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Checkbox.html.twig ├── Input │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Input.html.twig ├── INSTALL.md ├── Label │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Label.html.twig ├── manifest.json ├── Pagination │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Pagination │   │   ├── Content.html.twig │   │   ├── Ellipsis.html.twig │   │   ├── Item.html.twig │   │   ├── Link.html.twig │   │   ├── Next.html.twig │   │   └── Previous.html.twig │   └── Pagination.html.twig ├── Progress │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Progress.html.twig ├── Select │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Select.html.twig ├── Separator │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Separator.html.twig ├── Skeleton │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Skeleton.html.twig ├── Switch │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   └── Switch.html.twig ├── Table │   ├── EXAMPLES.md │   ├── manifest.json │   └── templates │   └── components │   ├── Table │   │   ├── Body.html.twig │   │   ├── Caption.html.twig │   │   ├── Cell.html.twig │   │   ├── Footer.html.twig │   │   ├── Head.html.twig │   │   ├── Header.html.twig │   │   └── Row.html.twig │   └── Table.html.twig └── Textarea ├── EXAMPLES.md ├── manifest.json └── templates └── components └── Textarea.html.twig 

Now, everything under kits/*/ is a recipe. There is no Asset\Component nor Asset\StimulusController anymore, everything was simplified a lot.

A Recipe:

  • requires more files, but the organization is really better and more extensible
  • has a manifest.json file, for describing its name, description, some dependencies (either PHP packages or other Recipes, which files to copy (and where), its type (either a component, or something else in the future), etc...
  • has a EXAMPLES.md file, it's mainly internal for the Website

The CLI still works as expected:

Enregistrement.de.l.ecran.2025-08-11.a.00.47.53.mov

The website too:

Enregistrement.de.l.ecran.2025-08-11.a.00.49.47.mov
@carsonbot carsonbot added Toolkit Status: Needs Review Needs to be reviewed labels Aug 10, 2025
@Kocal Kocal force-pushed the toolkit-rework-component-for-recipe branch from 2133dc4 to 522b813 Compare August 10, 2025 22:52
.. code-block:: terminal
$ php bin/console ux:toolkit:install-component Button --kit=<kitName>
$ php bin/console ux:install Button --kit=<kitName>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The command ux:toolkit:install-component has been renamed to ux:install, cc @smnandre

@Kocal Kocal force-pushed the toolkit-rework-component-for-recipe branch from 5451620 to 50d3079 Compare August 11, 2025 19:47
@Kocal Kocal force-pushed the toolkit-rework-component-for-recipe branch from d8728d8 to 39fb692 Compare August 11, 2025 20:18
@Kocal Kocal merged commit abc3d74 into symfony:2.x Aug 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2 participants