[Toolkit][Shadcn] Add scroll-area recipe

src/Toolkit/CHANGELOG.md

@@ -6,6 +6,7 @@
 - [Flowbite] Add `dropdown` recipe
 - [Shadcn] Add `hover-card` recipe
 - [Shadcn] Add `resizable` recipe
+- [Shadcn] Add `scroll-area` recipe
 
 ## 3.0.0
 

src/Toolkit/kits/shadcn/scroll-area/examples/Demo.html.twig

@@ -0,0 +1,9 @@
+<twig:ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {% for i in range(50, 1, -1) %}
+            <div class="text-sm">v1.2.0-beta.{{ i }}</div>
+            <div class="border-t my-2"></div>
+        {% endfor %}
+    </div>
+</twig:ScrollArea>

src/Toolkit/kits/shadcn/scroll-area/examples/Horizontal.html.twig

@@ -0,0 +1,31 @@
+<twig:ScrollArea class="w-96 rounded-md border whitespace-nowrap">
+    <div class="flex w-max space-x-4 p-4">
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80" alt="Photo by Ornella Binni" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Ornella Binni</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80" alt="Photo by Tom Byrom" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Tom Byrom</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80" alt="Photo by Vladimir Malyavko" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Vladimir Malyavko</span>
+            </figcaption>
+        </figure>
+    </div>
+</twig:ScrollArea>

src/Toolkit/kits/shadcn/scroll-area/examples/RTL.html.twig

@@ -0,0 +1,27 @@
+<div class="flex justify-center gap-4">
+    {# Arabic #}
+    <div dir="rtl">
+        <twig:ScrollArea class="h-72 w-48 rounded-md border">
+            <div class="p-4">
+                <h4 class="mb-4 text-sm font-medium leading-none">العلامات</h4>
+                {% for i in range(50, 1, -1) %}
+                    <div class="text-sm">v1.2.0-beta.{{ i }}</div>
+                    <div class="border-t my-2"></div>
+                {% endfor %}
+            </div>
+        </twig:ScrollArea>
+    </div>
+
+    {# Hebrew #}
+    <div dir="rtl">
+        <twig:ScrollArea class="h-72 w-48 rounded-md border">
+            <div class="p-4">
+                <h4 class="mb-4 text-sm font-medium leading-none">תגיות</h4>
+                {% for i in range(50, 1, -1) %}
+                    <div class="text-sm">v1.2.0-beta.{{ i }}</div>
+                    <div class="border-t my-2"></div>
+                {% endfor %}
+            </div>
+        </twig:ScrollArea>
+    </div>
+</div>

src/Toolkit/kits/shadcn/scroll-area/examples/Usage.html.twig

@@ -0,0 +1,12 @@
+<twig:ScrollArea class="h-40 w-60 rounded-md border p-4">
+    <p>Scrollable content goes here.</p>
+    <p>Line 2</p>
+    <p>Line 3</p>
+    <p>Line 4</p>
+    <p>Line 5</p>
+    <p>Line 6</p>
+    <p>Line 7</p>
+    <p>Line 8</p>
+    <p>Line 9</p>
+    <p>Line 10</p>
+</twig:ScrollArea>

src/Toolkit/kits/shadcn/scroll-area/manifest.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Scroll Area",
+    "description": "A container that augments native scroll behavior with a stylized scrollbar.",
+    "copy-files": {
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/scroll-area/templates/components/ScrollArea.html.twig

@@ -0,0 +1,9 @@
+{# @block content The scrollable content #}
+<div
+    class="{{ ('relative overflow-auto [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/50 scrollbar-thin ' ~ attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'scroll-area',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component scroll-area, code file Demo.html.twig__1.html

@@ -0,0 +1,121 @@
+<!--
+- Kit: Shadcn UI
+- Component: Scroll Area
+- Code:
+```twig
+<twig:ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {% for i in range(50, 1, -1) %}
+            <div class="text-sm">v1.2.0-beta.{{ i }}</div>
+            <div class="border-t my-2"></div>
+        {% endfor %}
+    </div>
+</twig:ScrollArea>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative overflow-auto [&amp;::-webkit-scrollbar]:w-2.5 [&amp;::-webkit-scrollbar]:h-2.5 [&amp;::-webkit-scrollbar-track]:bg-transparent [&amp;::-webkit-scrollbar-thumb]:bg-border [&amp;::-webkit-scrollbar-thumb]:rounded-full [&amp;::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/50 scrollbar-thin h-72 w-48 rounded-md border" data-slot="scroll-area">
+<div class="p-4">
+        <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+                    <div class="text-sm">v1.2.0-beta.50</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.49</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.48</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.47</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.46</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.45</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.44</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.43</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.42</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.41</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.40</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.39</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.38</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.37</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.36</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.35</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.34</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.33</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.32</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.31</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.30</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.29</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.28</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.27</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.26</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.25</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.24</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.23</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.22</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.21</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.20</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.19</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.18</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.17</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.16</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.15</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.14</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.13</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.12</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.11</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.10</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.9</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.8</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.7</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.6</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.5</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.4</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.3</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.2</div>
+            <div class="border-t my-2"></div>
+                    <div class="text-sm">v1.2.0-beta.1</div>
+            <div class="border-t my-2"></div>
+            </div>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component scroll-area, code file Horizontal.html.twig__1.html

@@ -0,0 +1,69 @@
+<!--
+- Kit: Shadcn UI
+- Component: Scroll Area
+- Code:
+```twig
+<twig:ScrollArea class="w-96 rounded-md border whitespace-nowrap">
+    <div class="flex w-max space-x-4 p-4">
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80" alt="Photo by Ornella Binni" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Ornella Binni</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80" alt="Photo by Tom Byrom" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Tom Byrom</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80" alt="Photo by Vladimir Malyavko" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Vladimir Malyavko</span>
+            </figcaption>
+        </figure>
+    </div>
+</twig:ScrollArea>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="relative overflow-auto [&amp;::-webkit-scrollbar]:w-2.5 [&amp;::-webkit-scrollbar]:h-2.5 [&amp;::-webkit-scrollbar-track]:bg-transparent [&amp;::-webkit-scrollbar-thumb]:bg-border [&amp;::-webkit-scrollbar-thumb]:rounded-full [&amp;::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/50 scrollbar-thin w-96 rounded-md border whitespace-nowrap" data-slot="scroll-area">
+<div class="flex w-max space-x-4 p-4">
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="Photo by Ornella Binni" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Ornella Binni</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="Photo by Tom Byrom" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Tom Byrom</span>
+            </figcaption>
+        </figure>
+        <figure class="shrink-0">
+            <div class="overflow-hidden rounded-md">
+                <img src="https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="Photo by Vladimir Malyavko" class="aspect-[3/4] h-fit w-fit object-cover" width="300" height="400">
+            </div>
+            <figcaption class="pt-2 text-xs text-muted-foreground">
+                Photo by
+                <span class="font-semibold text-foreground">Vladimir Malyavko</span>
+            </figcaption>
+        </figure>
+    </div>
+</div>