Skip to content

Commit 62dc055

Browse files
seb-jeanseb-jean
committed
[Toolkit][Shadcn] Add Dialog recipe
1 parent 9045a17 commit 62dc055

File tree

30 files changed

+377
-15
lines changed

30 files changed

+377
-15
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
2+
{# @prop id string Unique suffix identifier for generating AlertDialog internal IDs #}
23
{# @block content The default block #}
34
{%- props open = false, id -%}
45

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true,"height":"500px"}
6+
<twig:Dialog id="delete_account">
7+
<twig:Dialog:Trigger>
8+
<twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
9+
</twig:Dialog:Trigger>
10+
<twig:Dialog:Content>
11+
<twig:Dialog:Header>
12+
<twig:Dialog:Title>Are you absolutely sure?</twig:Dialog:Title>
13+
<twig:Dialog:Description>
14+
This action cannot be undone. This will permanently delete your account
15+
and remove your data from our servers.
16+
</twig:Dialog:Description>
17+
</twig:Dialog:Header>
18+
</twig:Dialog:Content>
19+
</twig:Dialog>
20+
```
21+
22+
## Custom close button
23+
24+
```twig {"preview":true,"height":"500px"}
25+
<twig:Dialog id="share_link">
26+
<twig:Dialog:Trigger>
27+
<twig:Button variant="outline" {{ ...trigger_attrs }}>Share</twig:Button>
28+
</twig:Dialog:Trigger>
29+
<twig:Dialog:Content class="sm:max-w-md">
30+
<twig:Dialog:Header>
31+
<twig:Dialog:Title>Share link</twig:Dialog:Title>
32+
<twig:Dialog:Description>
33+
Anyone who has this link will be able to view this.
34+
</twig:Dialog:Description>
35+
</twig:Dialog:Header>
36+
<div class="flex items-center gap-2">
37+
<div class="grid flex-1 gap-2">
38+
<twig:Label for="link" class="sr-only">Link</twig:Label>
39+
<twig:Input id="link" value="https://ui.shadcn.com/docs/installation" readonly />
40+
</div>
41+
</div>
42+
<twig:Dialog:Footer class="sm:justify-start">
43+
<twig:Dialog:Close>
44+
<twig:Button type="button" variant="secondary" {{ ...close_attrs }}>
45+
Close
46+
</twig:Button>
47+
</twig:Dialog:Close>
48+
</twig:Dialog:Footer>
49+
</twig:Dialog:Content>
50+
</twig:Dialog>
51+
```
52+
53+
## With form
54+
55+
```twig {"preview":true,"height":"500px"}
56+
<twig:Dialog id="edit_profile">
57+
<twig:Dialog:Trigger>
58+
<twig:Button {{ ...trigger_attrs }} variant="outline">Open Dialog</twig:Button>
59+
</twig:Dialog:Trigger>
60+
<twig:Dialog:Content class="sm:max-w-[425px]">
61+
<twig:Dialog:Header>
62+
<twig:Dialog:Title>Edit profile</twig:Dialog:Title>
63+
<twig:Dialog:Description>
64+
Make changes to your profile here. Click save when you&apos;re done.
65+
</twig:Dialog:Description>
66+
</twig:Dialog:Header>
67+
<div class="grid gap-4">
68+
<div class="grid gap-3">
69+
<twig:Label for="name">Name</twig:Label>
70+
<twig:Input id="name" name="name" value="Pedro Duarte" />
71+
</div>
72+
<div class="grid gap-3">
73+
<twig:Label for="username">Username</twig:Label>
74+
<twig:Input id="username" name="username" value="@peduarte" />
75+
</div>
76+
</div>
77+
<twig:Dialog:Footer>
78+
<twig:Dialog:Close>
79+
<twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
80+
</twig:Dialog:Close>
81+
<twig:Button type="submit">Save changes</twig:Button>
82+
</twig:Dialog:Footer>
83+
</twig:Dialog:Content>
84+
</twig:Dialog>
85+
```

‎src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js‎

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

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Dialog",
5+
"description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
6+
"copy-files": {
7+
"assets/": "assets/",
8+
"templates/": "templates/"
9+
},
10+
"dependencies": {
11+
"composer": ["symfony/ux-icons", "twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"]
12+
}
13+
}

‎src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{# @prop open boolean Open (or not) the Dialog at initial rendering, default to `false` #}
2+
{# @prop id string Unique suffix identifier for generating Dialog internal IDs #}
3+
{# @block content The default block #}
4+
{%- props open = false, id -%}
5+
6+
{%- set _dialog_open = open %}
7+
{%- set _dialog_id = 'dialog-' ~ id -%}
8+
{%- set _dialog_title_id = _dialog_id ~ '-title' -%}
9+
{%- set _dialog_description_id = _dialog_id ~ '-description' -%}
10+
<div {{ attributes.defaults({
11+
'data-controller': 'dialog',
12+
'aria-labelledby': _dialog_title_id,
13+
'aria-describedby': _dialog_description_id,
14+
}) }}>
15+
{% block content %}{% endblock %}
16+
</div>

‎src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{# @block content The default block #}
2+
{%- set close_attrs = {
3+
'data-action': 'click->dialog#close',
4+
} -%}
5+
{%- block content %}{% endblock -%}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{# @prop showCloseButton boolean Whether the close button is shown, default to `true` #}
2+
{# @block content The default block #}
3+
{%- props showCloseButton = true -%}
4+
5+
<dialog
6+
id="{{ _dialog_id }}"
7+
{{ _dialog_open ? 'open' }}
8+
class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] scale-95 gap-4 rounded-lg border p-6 opacity-0 shadow-lg transition-all transition-discrete duration-200 backdrop:transition-discrete backdrop:duration-150 open:grid open:scale-100 open:opacity-100 open:backdrop:bg-black/50 sm:max-w-lg starting:open:scale-95 starting:open:opacity-0 ' ~ attributes.render('class')|tailwind_merge }}"
9+
data-dialog-target="dialog"
10+
data-action="keydown.esc->dialog#close:prevent click->dialog#closeOnClickOutside"
11+
>
12+
{%- block content %}{% endblock -%}
13+
{% if showCloseButton %}
14+
<button type="button" class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" data-action="click->dialog#close">
15+
<twig:ux:icon name="lucide:x" />
16+
<span class="sr-only">Close</span>
17+
</button>
18+
{% endif %}
19+
</dialog>

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

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

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

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

‎src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{# @block content The default block #}
2+
<header
3+
class="{{ 'flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class')|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</header>

0 commit comments

Comments
 (0)