[Toolkit][Shadcn] Add DropdownMenu component

src/Toolkit/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 2.33.0
+
+-  [Shadcn] Rework templates of `avatar` recipe
+-  [Shadcn] Rework templates of `badge` recipe
+-  [Shadcn] Rework templates of `card` recipe
+-  [Shadcn] Rework templates of `input-group` recipe
+-  [Shadcn] Rework templates of `table` recipe
+-  [Shadcn] Rework templates of `textarea` recipe
+
 ## 2.29.0
 
 -  Add Symfony 8 support

src/Toolkit/CONTRIBUTING.md

@@ -42,7 +42,7 @@ A kit is composed of several recipes, each providing Twig components, styles, an
     - A folder for each recipe provided by the kit, e.g., `button/` for the Button recipe
 4. Each recipe directory contains:
     - A `manifest.json` file containing metadata about the recipe: its type, name, description, files to copy, dependencies, etc.
-    - An `EXAMPLES.md` file with usage examples (used by the UX Website)
+    - A folder `examples/` containing Twig files, it is used for Toolkit tests and previews on UX website
     - Based on the "files to copy" setting, the kit may contain subdirectories such as:
         - `templates/components/` for Twig components
         - `assets/controllers/` for Stimulus controllers
@@ -59,7 +59,8 @@ You can then preview your changes by navigating to the relevant sections in the
 
 Tests use snapshots to ensure that the kits and their recipes work as expected and to prevent regressions.
 
-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.
+Snapshots are created from all Twig code examples provided in each recipe's `examples/` folder.
+The Twig code examples are rendered in an isolated environment.
 
 The rendered output is then compared to stored snapshots to ensure that the kit's recipes work as expected.
 

src/Toolkit/kits/shadcn/alert-dialog/EXAMPLES.md → src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig

@@ -1,18 +1,13 @@
-# Examples
-
-## Default
-
-```twig {"preview":true,"height":"500px"}
 <twig:AlertDialog id="delete_account">
     <twig:AlertDialog:Trigger>
-        <twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
+        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
     </twig:AlertDialog:Trigger>
     <twig:AlertDialog:Content>
         <twig:AlertDialog:Header>
             <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
             <twig:AlertDialog:Description>
-                This action cannot be undone. This will permanently delete your account
-                and remove your data from our servers.
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
             </twig:AlertDialog:Description>
         </twig:AlertDialog:Header>
         <twig:AlertDialog:Footer>
@@ -21,4 +16,3 @@
         </twig:AlertDialog:Footer>
     </twig:AlertDialog:Content>
 </twig:AlertDialog>
-```

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

@@ -0,0 +1,18 @@
+<twig:AlertDialog id="delete_account">
+    <twig:AlertDialog:Trigger>
+        <twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
+    </twig:AlertDialog:Trigger>
+    <twig:AlertDialog:Content>
+        <twig:AlertDialog:Header>
+            <twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
+            <twig:AlertDialog:Description>
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+            </twig:AlertDialog:Description>
+        </twig:AlertDialog:Header>
+        <twig:AlertDialog:Footer>
+            <twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
+            <twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
+        </twig:AlertDialog:Footer>
+    </twig:AlertDialog:Content>
+</twig:AlertDialog>

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

@@ -0,0 +1,27 @@
+<div class="grid w-full max-w-xl items-start gap-4">
+    <twig:Alert>
+        <twig:ux:icon name="tabler:circle-check" class="h-4 w-4" />
+        <twig:Alert:Title>Success! Your changes have been saved</twig:Alert:Title>
+        <twig:Alert:Description>
+            This is an alert with icon, title and description.
+        </twig:Alert:Description>
+    </twig:Alert>
+    <twig:Alert>
+        <twig:ux:icon name="tabler:trash" class="h-4 w-4" />
+        <twig:Alert:Title>
+            This Alert has a title and an icon. No description.
+        </twig:Alert:Title>
+    </twig:Alert>
+    <twig:Alert variant="destructive">
+        <twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
+        <twig:Alert:Title>Unable to process your payment.</twig:Alert:Title>
+        <twig:Alert:Description>
+            <p>Please verify your billing information and try again.</p>
+            <ul class="list-inside list-disc text-sm">
+                <li>Check your card details</li>
+                <li>Ensure sufficient funds</li>
+                <li>Verify billing address</li>
+            </ul>
+        </twig:Alert:Description>
+    </twig:Alert>
+</div>

src/Toolkit/kits/shadcn/alert/examples/Usage.html.twig

@@ -0,0 +1,7 @@
+<twig:Alert class="max-w-lg">
+    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
+    <twig:Alert:Title>Heads up!</twig:Alert:Title>
+    <twig:Alert:Description>
+        You can add components to your app using the cli.
+    </twig:Alert:Description>
+</twig:Alert>

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

@@ -0,0 +1,8 @@
+<twig:AspectRatio ratio="16 / 9" class="max-h-80">
+    <img
+        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+        alt="Bukchon Hanok Village by Y K"
+        class="h-full w-full rounded-md object-cover"
+    />
+    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
+</twig:AspectRatio>

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

@@ -0,0 +1,8 @@
+<twig:AspectRatio ratio="16 / 9" class="max-h-80">
+    <img
+        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+        alt="Bukchon Hanok Village by Y K"
+        class="h-full w-full rounded-md object-cover"
+    />
+    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
+</twig:AspectRatio>

src/Toolkit/kits/shadcn/avatar/examples/Demo.html.twig

@@ -0,0 +1,21 @@
+<div class="flex flex-row flex-wrap items-center gap-12">
+    <twig:Avatar>
+        <twig:Avatar:Image src="https://avatars.githubusercontent.com/u/47313?v=4" alt="Fabien Potencier" />
+    </twig:Avatar>
+
+    <twig:Avatar class="rounded-lg">
+        <twig:Avatar:Image src="https://avatars.githubusercontent.com/u/47313?v=4" alt="Fabien Potencier" />
+    </twig:Avatar>
+
+    <div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2">
+        <twig:Avatar>
+            <twig:Avatar:Text class="bg-red-200">A</twig:Avatar:Text>
+        </twig:Avatar>
+        <twig:Avatar>
+            <twig:Avatar:Text class="bg-red-300">B</twig:Avatar:Text>
+        </twig:Avatar>
+        <twig:Avatar>
+            <twig:Avatar:Text class="bg-red-400">C</twig:Avatar:Text>
+        </twig:Avatar>
+    </div>
+</div>

src/Toolkit/kits/shadcn/avatar/examples/Usage.html.twig

@@ -0,0 +1,7 @@
+<twig:Avatar>
+    <twig:Avatar:Image src="https://avatars.githubusercontent.com/u/47313?v=4" alt="Fabien Potencier" />
+</twig:Avatar>
+
+<twig:Avatar>
+    <twig:Avatar:Text class="bg-red-200">FB</twig:Avatar:Text>
+</twig:Avatar>

src/Toolkit/kits/shadcn/avatar/templates/components/Avatar/Image.html.twig

@@ -1,4 +1,5 @@
 <img
     class="{{ 'aspect-square h-full w-full ' ~ attributes.render('class')|tailwind_merge }}"
+    data-slot="avatar-image"
     {{ attributes.defaults({alt: ''}) }}
 />

src/Toolkit/kits/shadcn/avatar/templates/components/Avatar/Text.html.twig

@@ -1,5 +1,6 @@
 <span
     class="{{ 'flex h-full w-full items-center justify-center rounded-full bg-muted ' ~ attributes.render('class')|tailwind_merge }}"
+    data-slot="avatar-text"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

src/Toolkit/kits/shadcn/badge/examples/As link.html.twig

@@ -0,0 +1,3 @@
+<twig:Badge as="a" href="https://ux.symfony.com/" variant="default">
+    Symfony UX
+</twig:Badge>

src/Toolkit/kits/shadcn/badge/examples/Demo.html.twig

@@ -0,0 +1,32 @@
+<div class="flex flex-col items-center gap-2">
+    <div class="flex w-full flex-wrap gap-2">
+        <twig:Badge>Badge</twig:Badge>
+        <twig:Badge variant="secondary">Secondary</twig:Badge>
+        <twig:Badge variant="destructive">Destructive</twig:Badge>
+        <twig:Badge variant="outline">Outline</twig:Badge>
+    </div>
+    <div class="flex w-full flex-wrap gap-2">
+        <twig:Badge
+            variant="secondary"
+            class="bg-blue-500 text-white dark:bg-blue-600"
+        >
+            <BadgeCheckIcon />
+            Verified
+        </twig:Badge>
+        <twig:Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+            8
+        </twig:Badge>
+        <twig:Badge
+            class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+            variant="destructive"
+        >
+            99
+        </twig:Badge>
+        <twig:Badge
+            class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+            variant="outline"
+        >
+            20+
+        </twig:Badge>
+    </div>
+</div>

src/Toolkit/kits/shadcn/badge/examples/Usage.html.twig

@@ -0,0 +1,3 @@
+<twig:Badge variant="default | outline | secondary | destructive">
+    Badge
+</twig:Badge>

src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig

@@ -1,20 +1,21 @@
 {# @prop variant 'default'|'secondary'|'destructive'|'outline' The variant, default to `default` #}
+{# @prop as 'div' The HTML tag to use, default to `div` #}
 {# @block content The default block #}
-{%- props variant = 'default' -%}
+{%- props variant = 'default', as = 'div' -%}
 {%- set style = html_cva(
-    base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    base: 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
     variants: {
         variant: {
-            default: 'border-transparent bg-primary text-primary-foreground',
-            secondary: 'border-transparent bg-secondary text-secondary-foreground',
-            destructive: 'border-transparent bg-destructive text-white',
-            outline: 'text-foreground',
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
         },
     },
 ) -%}
-<div
+<{{ as }}
     class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}
-</div>
+</{{ as }}>