-
-
Notifications
You must be signed in to change notification settings - Fork 383
[Toolkit][Shadcn] Add AlertDialog recipe #3073
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
Conversation
There was a problem hiding this comment.
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
a8b6523
to
1454430
Compare
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" |
There was a problem hiding this comment.
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.
"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" | ||
} | ||
] |
There was a problem hiding this comment.
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
d1f78b0
to
e80fc60
Compare
e80fc60
to
bc9accc
Compare
…(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
With this new AlertDialog recipe, the following code:
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 inEXAMPLES.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 theel-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.