Skip to content

[Toolkit] Rework kits architecture, change term for "recipe" #2986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 21 commits into
base: 2.x
Choose a base branch
from

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
@@ -49,7 +49,7 @@ For example, if you want to install a `Button` component, you will find the foll

.. 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants