Skip to content

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

Merged
Kocal merged 1 commit into
symfony:2.xfrom
Kocal:toolkit-rework-component-for-recipe
Aug 11, 2025
Merged

Kocal merged 1 commit into
symfony:2.xfrom
Kocal:toolkit-rework-component-for-recipe

Conversation

@Kocal

@Kocal Kocal commented Aug 10, 2025 •

Copy link
Copy Markdown
Member
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
Comment thread src/Toolkit/kits/shadcn/INSTALL.md Outdated
Comment thread src/Toolkit/doc/index.rst
.. code-block:: terminal

$ php bin/console ux:toolkit:install-component Button --kit=<kitName>
$ php bin/console ux:install Button --kit=<kitName>

Copy link
Copy Markdown
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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants