Skip to content

Commit 1864016

Browse files
KocalKocal
committed
[Toolkit] Rework recipes docs/examples
1 parent 2c80359 commit 1864016

File tree

284 files changed

+2039
-1731
lines changed

Some content is hidden

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

284 files changed

+2039
-1731
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/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>

‎src/Toolkit/kits/shadcn/aspect-ratio/examples/With 1 - 1 aspect ratio.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)