Skip to content

Commit bc9accc

Browse files
KocalKocal
committed
[Toolkit][Shadcn] Add AlertDialog recipe
1 parent 67993da commit bc9accc

24 files changed

+354
-28
lines changed

‎.github/workflows/unit-tests.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ jobs:
5757

5858
env:
5959
SYMFONY_REQUIRE: ${{ matrix.symfony-version || '>=5.4' }} # TODO: To change to '>=6.4' in 3.x
60+
# https://github.com/spatie/phpunit-snapshot-assertions#usage-in-ci
61+
CREATE_SNAPSHOTS: false
6062
steps:
6163
- uses: actions/checkout@v4
6264

‎src/Toolkit/kits/shadcn/AlertDialog/EXAMPLES.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true,"height":"500px"}
6+
<twig:AlertDialog id="delete_account">
7+
<twig:AlertDialog:Trigger>
8+
<twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
9+
</twig:AlertDialog:Trigger>
10+
<twig:AlertDialog:Content>
11+
<twig:AlertDialog:Header>
12+
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
13+
<twig:AlertDialog:Description>
14+
This action cannot be undone. This will permanently delete your account
15+
and remove your data from our servers.
16+
</twig:AlertDialog:Description>
17+
</twig:AlertDialog:Header>
18+
<twig:AlertDialog:Footer>
19+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
20+
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
21+
</twig:AlertDialog:Footer>
22+
</twig:AlertDialog:Content>
23+
</twig:AlertDialog>
24+
```
25+
26+
## Opened by default
27+
28+
```twig {"preview":true,"height":"500px"}
29+
<twig:AlertDialog id="delete_account" open>
30+
<twig:AlertDialog:Trigger>
31+
<twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
32+
</twig:AlertDialog:Trigger>
33+
<twig:AlertDialog:Content>
34+
<twig:AlertDialog:Header>
35+
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
36+
<twig:AlertDialog:Description>
37+
This action cannot be undone. This will permanently delete your account
38+
and remove your data from our servers.
39+
</twig:AlertDialog:Description>
40+
</twig:AlertDialog:Header>
41+
<twig:AlertDialog:Footer>
42+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
43+
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
44+
</twig:AlertDialog:Footer>
45+
</twig:AlertDialog:Content>
46+
</twig:AlertDialog>
47+
```

‎src/Toolkit/kits/shadcn/AlertDialog/assets/controllers/alert_dialog_controller.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
import { enter, leave } from 'el-transition';
3+
4+
export default class extends Controller {
5+
6+
static targets = ['trigger', 'overlay', 'dialog', 'content'];
7+
8+
async open() {
9+
this.dialogTarget.showModal();
10+
11+
await Promise.all([enter(this.overlayTarget), enter(this.contentTarget)]);
12+
13+
if (this.hasTriggerTarget) {
14+
this.triggerTarget.setAttribute('aria-expanded', 'true');
15+
}
16+
}
17+
18+
async close() {
19+
await Promise.all([leave(this.overlayTarget), leave(this.contentTarget)]);
20+
21+
this.dialogTarget.close();
22+
23+
if (this.hasTriggerTarget) {
24+
this.triggerTarget.setAttribute('aria-expanded', 'false');
25+
}
26+
}
27+
}

‎src/Toolkit/kits/shadcn/AlertDialog/manifest.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "AlertDialog",
5+
"description": "A modal dialog that interrupts the user with important content and expects a response.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": [
10+
{
11+
"type": "php",
12+
"name": "twig/extra-bundle"
13+
},
14+
{
15+
"type": "php",
16+
"name": "twig/html-extra",
17+
"version": "^3.12.0"
18+
},
19+
{
20+
"type": "php",
21+
"name": "tales-from-a-dev/twig-tailwind-extra"
22+
},
23+
{
24+
"type": "npm",
25+
"name": "el-transition"
26+
},
27+
{
28+
"type": "importmap",
29+
"package": "el-transition"
30+
},
31+
{
32+
"type": "recipe",
33+
"name": "Button"
34+
}
35+
]
36+
}

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog.html.twig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{%- props open = false, id -%}
2+
3+
{%- set _alert_dialog_open = open %}
4+
{%- set _alert_dialog_id = 'alert-dialog-' ~ id -%}
5+
{%- set _alert_dialog_title_id = _alert_dialog_id ~ '-title' -%}
6+
{%- set _alert_dialog_description_id = _alert_dialog_id ~ '-description' -%}
7+
<div {{ attributes.defaults({
8+
'data-controller': 'alert-dialog',
9+
'aria-labelledby': _alert_dialog_title_id,
10+
'aria-describedby': _alert_dialog_description_id,
11+
}) }}>
12+
{% block content %}{% endblock %}
13+
</div>

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog/Action.html.twig‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{% props variant = 'default' %}
2+
<twig:Button variant="{{ variant }}" {{ ...attributes }}>
3+
{{ block(outerBlocks.content) }}
4+
</twig:Button>

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog/Cancel.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Button
2+
variant="outline"
3+
data-action="click->alert-dialog#close"
4+
{{ ...attributes }}
5+
>
6+
{{- block(outerBlocks.content) -}}
7+
</twig:Button>

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog/Content.html.twig‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<dialog
2+
id="{{ _alert_dialog_id }}"
3+
{{ _alert_dialog_open ? 'open' }}
4+
class="{{ 'fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent ' ~ attributes.render('class')|tailwind_merge }}"
5+
data-alert-dialog-target="dialog"
6+
data-action="keydown.esc->alert-dialog#close:prevent"
7+
{{ attributes.without('id') }}
8+
>
9+
<div
10+
data-alert-dialog-target="overlay"
11+
data-transition-enter="transition ease-out duration-100"
12+
data-transition-enter-start="transform opacity-0"
13+
data-transition-enter-end="transform opacity-100"
14+
data-transition-leave="transition ease-in duration-75"
15+
data-transition-leave-start="transform opacity-100"
16+
data-transition-leave-end="transform opacity-0"
17+
class="{{ _alert_dialog_open ? '' : 'hidden' }} fixed inset-0 z-50 bg-black/50"
18+
></div>
19+
20+
<section
21+
tabindex="0"
22+
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
23+
>
24+
<div
25+
data-transition-enter="transition ease-out duration-200"
26+
data-transition-enter-start="transform opacity-0 scale-95"
27+
data-transition-enter-end="transform opacity-100 scale-100"
28+
data-transition-leave="transition ease-in duration-75"
29+
data-transition-leave-start="transform opacity-100 scale-100"
30+
data-transition-leave-end="transform opacity-0 scale-95"
31+
class="{{ _alert_dialog_open ? '' : 'hidden' }} bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg"
32+
data-alert-dialog-target="content"
33+
>
34+
{%- block content %}{% endblock -%}
35+
</div>
36+
</section>
37+
</dialog>

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog/Description.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<p
2+
id="{{ _alert_dialog_description_id }}"
3+
class="{{ 'text-muted-foreground text-sm ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes.without('id') }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</p>

‎src/Toolkit/kits/shadcn/AlertDialog/templates/components/AlertDialog/Footer.html.twig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<footer
2+
class="{{ 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class')|tailwind_merge }}"
3+
{{ attributes }}
4+
>
5+
{%- block content %}{% endblock -%}
6+
</footer>

0 commit comments

Comments
 (0)