Skip to content

Commit ad52817

Browse files
KocalKocal
committed
[Toolkit] Rework recipes docs/examples
1 parent 0ab0332 commit ad52817

File tree

285 files changed

+2041
-1733
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

285 files changed

+2041
-1733
lines changed

‎src/Toolkit/CONTRIBUTING.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ A kit is composed of several recipes, each providing Twig components, styles, an
4242
- A folder for each recipe provided by the kit, e.g., `button/` for the Button recipe
4343
4. Each recipe directory contains:
4444
- A `manifest.json` file containing metadata about the recipe: its type, name, description, files to copy, dependencies, etc.
45-
- An `EXAMPLES.md` file with usage examples (used by the UX Website)
45+
- A folder `examples/` containing Twig files, it is used for Toolkit tests and previews on UX website
4646
- Based on the "files to copy" setting, the kit may contain subdirectories such as:
4747
- `templates/components/` for Twig components
4848
- `assets/controllers/` for Stimulus controllers
@@ -59,7 +59,8 @@ You can then preview your changes by navigating to the relevant sections in the
5959

6060
Tests use snapshots to ensure that the kits and their recipes work as expected and to prevent regressions.
6161

62-
Snapshots are created from all Twig code examples provided in each recipe's `EXAMPLES.md` file. The Twig code examples are rendered in an isolated environment.
62+
Snapshots are created from all Twig code examples provided in each recipe's `examples/` folder.
63+
The Twig code examples are rendered in an isolated environment.
6364

6465
The rendered output is then compared to stored snapshots to ensure that the kit's recipes work as expected.
6566

src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md renamed to src/Toolkit/kits/shadcn/alert-dialog/examples/Default.html.twig

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
# Examples
2-
3-
## Default
4-
5-
```twig {"preview":true,"height":"500px"}
61
<twig:AlertDialog id="delete_account">
72
<twig:AlertDialog:Trigger>
8-
<twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
3+
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
94
</twig:AlertDialog:Trigger>
105
<twig:AlertDialog:Content>
116
<twig:AlertDialog:Header>
127
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
138
<twig:AlertDialog:Description>
14-
This action cannot be undone. This will permanently delete your account
15-
and remove your data from our servers.
9+
This action cannot be undone. This will permanently delete your
10+
account and remove your data from our servers.
1611
</twig:AlertDialog:Description>
1712
</twig:AlertDialog:Header>
1813
<twig:AlertDialog:Footer>
@@ -21,4 +16,3 @@
2116
</twig:AlertDialog:Footer>
2217
</twig:AlertDialog:Content>
2318
</twig:AlertDialog>
24-
```

‎src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<twig:AlertDialog id="delete_account">
2+
<twig:AlertDialog:Trigger>
3+
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
4+
</twig:AlertDialog:Trigger>
5+
<twig:AlertDialog:Content>
6+
<twig:AlertDialog:Header>
7+
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
8+
<twig:AlertDialog:Description>
9+
This action cannot be undone. This will permanently delete your
10+
account and remove your data from our servers.
11+
</twig:AlertDialog:Description>
12+
</twig:AlertDialog:Header>
13+
<twig:AlertDialog:Footer>
14+
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
15+
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
16+
</twig:AlertDialog:Footer>
17+
</twig:AlertDialog:Content>
18+
</twig:AlertDialog>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{# @block content The default block #}
22
<dialog
33
id="{{ _alert_dialog_id }}"
4-
class="{{ 'bg-background fixed top-[50%] left-[50%] z-50 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 }}"
4+
class="{{ 'text-foreground bg-background fixed top-[50%] left-[50%] z-50 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 }}"
55
data-alert-dialog-target="dialog"
66
data-action="keydown.esc->alert-dialog#close:prevent"
77
{{ attributes.without('id') }}

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/Toolkit/kits/shadcn/alert/examples/Default.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert class="max-w-lg">
2+
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
3+
<twig:Alert:Title>Heads up!</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
You can add components to your app using the cli.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Demo.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert class="max-w-lg">
2+
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
3+
<twig:Alert:Title>Heads up!</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
You can add components to your app using the cli.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Destructive.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert variant="destructive" class="max-w-lg">
2+
<twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
3+
<twig:Alert:Title>Error</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
Your session has expired. Please log in again.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/aspect-ratio/EXAMPLES.md‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/Toolkit/kits/shadcn/aspect-ratio/examples/Demo.html.twig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<twig:AspectRatio ratio="1 / 1" class="max-h-90">
2+
<img
3+
src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
4+
alt="Bukchon Hanok Village by Y K"
5+
class="h-full w-full rounded-md object-cover"
6+
/>
7+
<a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
8+
</twig:AspectRatio>

0 commit comments

Comments
 (0)