[Toolkit][Shadcn] Add menubar and popover recipes

src/Toolkit/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - Minimum required Symfony version is now 7.4
 - Minimum required PHP version is now 8.4
+- [Shadcn] Add `menubar` recipe
+- [Shadcn] Add `popover` recipe
 
 ## 2.35
 

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

@@ -0,0 +1,27 @@
+<twig:Menubar>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>File</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>New Tab</twig:Menubar:Item>
+            <twig:Menubar:Item>New Window</twig:Menubar:Item>
+            <twig:Menubar:Separator />
+            <twig:Menubar:Item>Print…</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>Edit</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Undo</twig:Menubar:Item>
+            <twig:Menubar:Item>Redo</twig:Menubar:Item>
+            <twig:Menubar:Separator />
+            <twig:Menubar:Item>Find…</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>View</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Reload</twig:Menubar:Item>
+            <twig:Menubar:Item>Toggle Fullscreen</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+</twig:Menubar>

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

@@ -0,0 +1,16 @@
+<twig:Menubar>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>File</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>New Tab</twig:Menubar:Item>
+            <twig:Menubar:Item>New Window</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>Edit</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Undo</twig:Menubar:Item>
+            <twig:Menubar:Item>Redo</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+</twig:Menubar>

src/Toolkit/kits/shadcn/menubar/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Menubar",
+    "description": "A horizontal menu bar with dropdown menus, similar to desktop application menus.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar.html.twig

@@ -0,0 +1,10 @@
+{# @block content A list of `Menubar:Menu` children #}
+<div
+    role="menubar"
+    class="{{ ('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar/Content.html.twig

@@ -0,0 +1,10 @@
+{# @block content The menu items revealed on hover or focus #}
+<div
+    role="menu"
+    class="{{ ('invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar-content',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar/Item.html.twig

@@ -0,0 +1,11 @@
+{# @block content The menu item label #}
+<button
+    type="button"
+    role="menuitem"
+    class="{{ ('relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar-item',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</button>

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar/Menu.html.twig

@@ -0,0 +1,9 @@
+{# @block content A `Menubar:Trigger` and a `Menubar:Content` #}
+<div
+    class="{{ ('group/menubar-menu relative ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar-menu',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar/Separator.html.twig

@@ -0,0 +1,7 @@
+<div
+    role="separator"
+    class="{{ ('-mx-1 my-1 h-px bg-muted ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar-separator',
+    }) }}
+></div>

src/Toolkit/kits/shadcn/menubar/templates/components/Menubar/Trigger.html.twig

@@ -0,0 +1,11 @@
+{# @block content The trigger label #}
+<button
+    type="button"
+    role="menuitem"
+    class="{{ ('flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'menubar-trigger',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</button>

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

@@ -0,0 +1,23 @@
+<twig:Popover>
+    <twig:Popover:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Dimensions
+    </twig:Popover:Trigger>
+    <twig:Popover:Content class="w-80">
+        <div class="grid gap-4">
+            <div class="space-y-1">
+                <h4 class="text-sm font-medium leading-none">Dimensions</h4>
+                <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p>
+            </div>
+            <div class="grid gap-2">
+                <div class="grid grid-cols-3 items-center gap-4">
+                    <twig:Label for="popover-width">Width</twig:Label>
+                    <input id="popover-width" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="100%" />
+                </div>
+                <div class="grid grid-cols-3 items-center gap-4">
+                    <twig:Label for="popover-height">Height</twig:Label>
+                    <input id="popover-height" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="25px" />
+                </div>
+            </div>
+        </div>
+    </twig:Popover:Content>
+</twig:Popover>

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

@@ -0,0 +1,8 @@
+<twig:Popover>
+    <twig:Popover:Trigger class="h-9 rounded-md border border-input bg-background px-4 shadow-xs hover:bg-accent">
+        Open popover
+    </twig:Popover:Trigger>
+    <twig:Popover:Content>
+        Popover content goes here.
+    </twig:Popover:Content>
+</twig:Popover>

src/Toolkit/kits/shadcn/popover/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Popover",
+    "description": "A click-triggered popup that displays rich content, anchored to its trigger.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig

@@ -0,0 +1,9 @@
+{# @block content A `Popover:Trigger` and a `Popover:Content` #}
+<details
+    class="{{ ('group/popover relative inline-block ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'popover',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</details>

src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig

@@ -0,0 +1,10 @@
+{# @block content The content revealed when the popover is open #}
+<div
+    role="dialog"
+    class="{{ ('absolute left-1/2 top-full z-50 mt-2 w-72 -translate-x-1/2 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'popover-content',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig

@@ -0,0 +1,9 @@
+{# @block content The clickable trigger #}
+<summary
+    class="{{ ('list-none cursor-pointer outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-md inline-flex items-center justify-center ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'popover-trigger',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</summary>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component menubar, code file Demo.html__1.html

@@ -0,0 +1,45 @@
+<!--
+- Kit: Shadcn UI
+- Component: Menubar
+- Code:
+```twig
+<twig:Menubar>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>File</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>New Tab</twig:Menubar:Item>
+            <twig:Menubar:Item>New Window</twig:Menubar:Item>
+            <twig:Menubar:Separator />
+            <twig:Menubar:Item>Print…</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>Edit</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Undo</twig:Menubar:Item>
+            <twig:Menubar:Item>Redo</twig:Menubar:Item>
+            <twig:Menubar:Separator />
+            <twig:Menubar:Item>Find…</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>View</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Reload</twig:Menubar:Item>
+            <twig:Menubar:Item>Toggle Fullscreen</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+</twig:Menubar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="menubar" class="flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs" data-slot="menubar">
+<div class="group/menubar-menu relative" data-slot="menubar-menu">
+<button type="button" role="menuitem" class="flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent" data-slot="menubar-trigger">File</button>        <div role="menu" class="invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="menubar-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">New Tab</button>            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">New Window</button>            <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="menubar-separator"></div>
+            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Print&acirc;&#128;&brvbar;</button>        </div>    </div>    <div class="group/menubar-menu relative" data-slot="menubar-menu">
+<button type="button" role="menuitem" class="flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent" data-slot="menubar-trigger">Edit</button>        <div role="menu" class="invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="menubar-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Undo</button>            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Redo</button>            <div role="separator" class="-mx-1 my-1 h-px bg-muted" data-slot="menubar-separator"></div>
+            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Find&acirc;&#128;&brvbar;</button>        </div>    </div>    <div class="group/menubar-menu relative" data-slot="menubar-menu">
+<button type="button" role="menuitem" class="flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent" data-slot="menubar-trigger">View</button>        <div role="menu" class="invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="menubar-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Reload</button>            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Toggle Fullscreen</button>        </div>    </div>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component menubar, code file Usage.html__1.html

@@ -0,0 +1,30 @@
+<!--
+- Kit: Shadcn UI
+- Component: Menubar
+- Code:
+```twig
+<twig:Menubar>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>File</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>New Tab</twig:Menubar:Item>
+            <twig:Menubar:Item>New Window</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+    <twig:Menubar:Menu>
+        <twig:Menubar:Trigger>Edit</twig:Menubar:Trigger>
+        <twig:Menubar:Content>
+            <twig:Menubar:Item>Undo</twig:Menubar:Item>
+            <twig:Menubar:Item>Redo</twig:Menubar:Item>
+        </twig:Menubar:Content>
+    </twig:Menubar:Menu>
+</twig:Menubar>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div role="menubar" class="flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs" data-slot="menubar">
+<div class="group/menubar-menu relative" data-slot="menubar-menu">
+<button type="button" role="menuitem" class="flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent" data-slot="menubar-trigger">File</button>        <div role="menu" class="invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="menubar-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">New Tab</button>            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">New Window</button>        </div>    </div>    <div class="group/menubar-menu relative" data-slot="menubar-menu">
+<button type="button" role="menuitem" class="flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group-hover/menubar-menu:bg-accent group-hover/menubar-menu:text-accent-foreground group-focus-within/menubar-menu:bg-accent" data-slot="menubar-trigger">Edit</button>        <div role="menu" class="invisible opacity-0 group-hover/menubar-menu:visible group-hover/menubar-menu:opacity-100 group-focus-within/menubar-menu:visible group-focus-within/menubar-menu:opacity-100 transition-opacity absolute left-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md" data-slot="menubar-content">
+<button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Undo</button>            <button type="button" role="menuitem" class="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50" data-slot="menubar-item">Redo</button>        </div>    </div>
+</div>