Skip to content

Conversation

Kocal
Copy link
Member

@Kocal Kocal commented Sep 10, 2025

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

With this new AlertDialog recipe, the following code:

<twig:AlertDialog>
    <twig:AlertDialog:Trigger>
        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
    </twig:AlertDialog:Trigger>
    <twig:AlertDialog:Content>
        <twig:AlertDialog:Header>
            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
            <twig:AlertDialog:Description>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </twig:AlertDialog:Description>
        </twig:AlertDialog:Header>
        <twig:AlertDialog:Footer>
            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
        </twig:AlertDialog:Footer>
    </twig:AlertDialog:Content>
</twig:AlertDialog>

renders:

Enregistrement.de.l.ecran.2025-09-10.a.10.56.33.mov

This pull request introduces the new AlertDialog component to the Shadcn UI kit in the Symfony UX Toolkit, including its templates, JavaScript controller, documentation, and manifest. It also updates the toolkit infrastructure to support the new component, refines asset mapping, and improves component context handling. Additionally, some minor documentation and test updates are included.

New AlertDialog Component:

  • Added the complete AlertDialog component, including Twig templates for all subcomponents (Content, Header, Footer, Title, Description, Trigger, Action, Cancel), a Stimulus controller for open/close behavior with transitions, and detailed usage examples in EXAMPLES.md. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

  • Added a manifest for the AlertDialog component specifying dependencies and recipe details.

Toolkit Infrastructure and Asset Handling:

  • Refined the KitContextRunner to better separate Twig and component factory contextualization, improving reliability and maintainability when running code for specific kits. [1] [2]

  • Updated asset mapping to expose kit assets under a namespaced path and to exclude kit templates, documentation, and manifests from asset mapping. [1] [2]

  • Registered the alert-dialog Stimulus controller in the app's JavaScript entrypoint and importmap, and added the el-transition dependency. [1] [2]

Documentation and Test Updates:

  • Updated kit and component documentation to reference the new homepage URL and include AlertDialog in suggestions and tests. [1] [2] [3]

  • Minor fix to use self::generateTabs in the toolkit service for consistency.

@Kocal Kocal self-assigned this Sep 10, 2025
@carsonbot carsonbot added Feature New Feature Toolkit Status: Needs Review Needs to be reviewed labels Sep 10, 2025
Copy link
Member Author

Choose a reason for hiding this comment

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

Minor refactoring, not really related to this PR

@Kocal Kocal force-pushed the toolkit-shadcn-alertdialog branch 2 times, most recently from a8b6523 to 1454430 Compare September 10, 2025 08:58
Comment on lines +12 to +16
data-transition-enter-start="transform opacity-0"
data-transition-enter-end="transform opacity-100"
data-transition-leave="transition ease-in duration-75"
data-transition-leave-start="transform opacity-100"
data-transition-leave-end="transform opacity-0"
Copy link
Member Author

Choose a reason for hiding this comment

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

This data-transition-* syntax from Vue/Alpine.js is do-able thanks to https://github.com/mmccall10/el-transition

FYI it's not possible to use https://stimulus-use.github.io/stimulus-use/#/use-transition because it supports only one target, but we need to transition the overlay and content targets.

@Kocal Kocal requested review from kbond and smnandre September 10, 2025 09:02
Comment on lines +9 to +35
"dependencies": [
{
"type": "php",
"name": "twig/extra-bundle"
},
{
"type": "php",
"name": "twig/html-extra",
"version": "^3.12.0"
},
{
"type": "php",
"name": "tales-from-a-dev/twig-tailwind-extra"
},
{
"type": "npm",
"name": "el-transition"
},
{
"type": "importmap",
"package": "el-transition"
},
{
"type": "recipe",
"name": "Button"
}
]
Copy link
Member Author

Choose a reason for hiding this comment

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

I don't like this schema structure anymore, I will refactor it in another PR

@Kocal Kocal force-pushed the toolkit-shadcn-alertdialog branch 2 times, most recently from d1f78b0 to e80fc60 Compare September 10, 2025 19:53
@Kocal Kocal force-pushed the toolkit-shadcn-alertdialog branch from e80fc60 to bc9accc Compare September 10, 2025 19:53
@Kocal Kocal merged commit 441aede into symfony:2.x Sep 10, 2025
28 of 29 checks passed
@Kocal Kocal deleted the toolkit-shadcn-alertdialog branch September 10, 2025 20:33
Kocal added a commit that referenced this pull request Sep 11, 2025
…(Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

[Toolkit] Rework the "dependencies" Recipe JSON schema

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | no <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Update/add documentation as required (we can help!)
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Following #3073 (comment)

**before:**
```json
    "dependencies": [
        {
            "type": "php",
            "name": "twig/extra-bundle"
        },
        {
            "type": "php",
            "name": "twig/html-extra",
            "version": "^3.12.0"
        },
        {
            "type": "php",
            "name": "tales-from-a-dev/twig-tailwind-extra"
        },
        {
            "type": "npm",
            "name": "el-transition"
        },
        {
            "type": "importmap",
            "package": "el-transition"
        },
        {
            "type": "recipe",
            "name": "Button"
        }
    ]
```

**after:**
```json
    "dependencies": {
        "recipe": [
            "Button"
        ],
        "composer": [
            "twig/extra-bundle",
            "twig/html-extra:^3.12.0",
            "tales-from-a-dev/twig-tailwind-extra"
        ],
        "npm": [
            "el-transition"
        ],
        "importmap": [
            "el-transition"
        ]
    }
```

---

This pull request refactors the dependency structure for all `shadcn` kit manifest files and updates the `schema-kit-recipe-v1.json` schema to match. The main goal is to simplify and standardize how dependencies are declared, moving from an array of objects to a categorized object of arrays. This makes dependencies easier to read, maintain, and process programmatically.

**Manifest dependency refactor:**

* All `manifest.json` files under `src/Toolkit/kits/shadcn/` now declare dependencies as an object with keys like `composer`, `npm`, `importmap`, and `recipe`, each mapping to an array of package names. This replaces the previous verbose array-of-objects format. [[1]](diffhunk://#diff-24cc9d048e1ea32ab7acf1fb7b8efc19f740892833fa58111f4ebd5681fb85a0L9-L23) [[2]](diffhunk://#diff-e33739dc172c7637e10a76c726932dbf21859cf7d330396a6c8c74e74a3764a9L9-L35) [[3]](diffhunk://#diff-b88f95cca40ccb21517ed364d1ae64aeb88625bda8ee3da66111c2977bb52803L9-L14) [[4]](diffhunk://#diff-22812152398ca59e604a70fa497e5dd421c73d4f857cf9606f3d027629b1e646L9-L14) [[5]](diffhunk://#diff-23649306253ca91b727e2ba788da884362b816613e06e421c63ed6ff3e9376e7L9-L23) [[6]](diffhunk://#diff-58e4e9e27cd161c6c739e6266b1d8ed70d392dcb94735fe8ada7ef1bfb3cf153L9-L14) [[7]](diffhunk://#diff-ff8180c4acd43b8012cf5790f0319ea396f585cd44c2a0f9a12ce7a48b2e26ecL9-L23) [[8]](diffhunk://#diff-eebe4e88402ef66554bcf3cf7f4493f792cb0b256260244f45c06f4f66324676L9-L14) [[9]](diffhunk://#diff-dc966598cc48b9fafca139520d6c4c8bcb01e15f9dcd1b21eeab3e44480f6953L9-L14) [[10]](diffhunk://#diff-b28127a845fc2217410a6f1102e2f3b16e2e9fb7b28feadf2900bcd006f8186bL9-L14) [[11]](diffhunk://#diff-f400467d5964388d2cbffbd607263fb117cefb551274af8d88fb6e7633458570L9-L14) [[12]](diffhunk://#diff-ab4aa0c78bcfd808215b9af335558a2722e7041b5be90e8c727ea1608382dbe2L9-L14) [[13]](diffhunk://#diff-8374d2d2da8dd79902987f5913ec25d1589e32ba375c1190b14636075bae911fL9-L14) [[14]](diffhunk://#diff-93608b7d5d7d64f6828df2efea3c92051aba82d16d5f9dcd56e77a51200918c7L9-L14) [[15]](diffhunk://#diff-a69e9e15bbfdafddae62b804ce99f760a6d10eef61089edd8b2f0acab801e8f5L9-L23) [[16]](diffhunk://#diff-40e38b9daaeb10efbd842b74917b8f40ad64e912e575608ac226a4851fb37a33L9-L14) [[17]](diffhunk://#diff-8b5e2a122852d850f2fb8e600e44359b85463e3e1b846a56c09c61b3dfaa27f6L9-L14) [[18]](diffhunk://#diff-594246d37d7eb85f199937add11bc90acb9afaa22ba2024ed890fab8dc826e49L9-L14) [[19]](diffhunk://#diff-e4302dc4e8a19f84ad686273ec8ba2d13bbf9861a92dbfa79d92b7f46c8d712bL9-L14)

**Schema update:**

* The `src/Toolkit/schema-kit-recipe-v1.json` schema is updated to reflect the new dependency format. The `dependencies` property is now an object with keys for each dependency type, each containing an array of strings. The schema also removes the `type` property and the `examples-dir` property, and updates descriptions for clarity.

These changes ensure consistency across all kit manifests and make the schema and manifests easier to extend and validate in the future.

Commits
-------

df8bd64 [Toolkit] Rework the "dependencies" Recipe JSON schema
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature New Feature Status: Needs Review Needs to be reviewed Toolkit
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants