[Toolkit] Rework the documentation

Author: Kocal

.github/workflows/toolkit-kits-cs.yaml

@@ -0,0 +1,28 @@
+name: Toolkit Kits
+
+on:
+    push:
+        paths:
+            - 'src/Toolkit/kits/**'
+    pull_request:
+        paths:
+            - 'src/Toolkit/kits/**'
+
+jobs:
+    kits-cs:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: shivammathur/setup-php@v2
+              with:
+                php-version: 8.3
+
+            - name: Install composer packages
+              uses: ramsey/composer-install@v3
+              with:
+                working-directory: src/Toolkit
+
+            - name: Check kits code style
+              run: php vendor/bin/twig-cs-fixer check kits
+              working-directory: src/Toolkit

src/Toolkit/composer.json

@@ -1,7 +1,7 @@
 {
   "name": "symfony/ux-toolkit",
   "type": "symfony-bundle",
-  "description": "Twig Toolkit for Symfony",
+  "description": "A tool for easily creating your own design system in your Symfony app, by installing well-crafted and fully-customizable Twig components",
   "keywords": [
     "symfony-ux",
     "twig",

src/Toolkit/doc/index.rst

@@ -7,7 +7,7 @@ to change, or even change drastically.
 Symfony UX Toolkit provides a set of ready-to-use kits for Symfony applications.
 It is part of `the Symfony UX initiative`_.
 
-Kits are a nice way to begin a new Symfony application, by providing a set 
+Kits are a nice way to begin a new Symfony application, by providing a set
 of `Twig components`_ (based on Tailwind CSS, but fully customizable depending
 on your needs).
 
@@ -24,8 +24,8 @@ Additionally, some `Twig components`_ use ``html_cva`` and ``tailwind_merge``,
 you can either remove them from your project or install ``twig/html-extra``
 and ``tales-from-a-dev/twig-tailwind-extra`` to use them.
 
-Also, we do not force you to use Tailwind CSS at all. If you want to use
-another CSS framework, you can, but you will need to adapt the UI components to it.
+Also, we do not force you to use Tailwind CSS at all. You can use whatever
+CSS framework you want, but you will need to adapt the UI components to it.
 
 Installation
 ------------
@@ -37,7 +37,7 @@ Install the UX Toolkit using Composer and Symfony Flex:
     # The UX Toolkit is a development dependency:
     $ composer require --dev symfony/ux-toolkit
 
-    # If you want to keep `html_cva` and `tailwind_merge` in your UI components:
+    # If you want to keep `html_cva` and `tailwind_merge` in your Twig components:
     $ composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra
 
 Configuration
@@ -71,7 +71,7 @@ It will create the ``templates/components/Button.html.twig`` file, and you will
 Create your own kit
 -------------------
 
-You have the ability to create and share your own kit with the community, 
+You have the ability to create and share your own kit with the community,
 by using the ``php vendor/bin/ux-toolkit-kit-create`` command in a new GitHub repository:
 
 .. code-block:: terminal
@@ -89,7 +89,7 @@ by using the ``php vendor/bin/ux-toolkit-kit-create`` command in a new GitHub re
 
     # Create your kit
     $ php vendor/bin/ux-toolkit-kit-create
-    
+
     # ... edit the files, add your components, examples, etc.
 
     # Share your kit
@@ -124,7 +124,7 @@ A kit is composed of:
 Use your kit in a Symfony application
 -------------------------------------
 
-You can globally configure the kit to use in your application by setting the ``ux_toolkit.kit`` parameter:
+You can globally configure the kit to use in your application by setting the ``ux_toolkit.kit`` configuration:
 
 .. code-block:: yaml
 

src/Toolkit/kits/shadcn/docs/components/Input.md

@@ -0,0 +1,56 @@
+# Input
+
+A form input component for text, email, password, and other input types.
+
+```twig {"preview":true}
+<twig:Input type="email" placeholder="Email" class="max-w-sm" />
+```
+
+## Installation
+
+<!-- Placeholder: Installation -->
+
+## Usage
+
+<!-- Placeholder: Usage -->
+
+## Examples
+
+### Default
+
+```twig {"preview":true}
+<twig:Input type="email" placeholder="Email" class="max-w-sm" />
+```
+
+### File
+
+```twig {"preview":true}
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <label for="picture">Picture</label>
+    <twig:Input type="file" id="picture" />
+</div>
+```
+
+### Disabled
+
+```twig {"preview":true}
+<twig:Input type="email" placeholder="Email" disabled class="max-w-sm" />
+```
+
+### With Label
+
+```twig {"preview":true}
+<div class="grid w-full max-w-sm items-center gap-1.5">
+    <twig:Label for="email">Email</twig:Label>
+    <twig:Input type="email" id="email" />
+</div>
+```
+
+### With Button
+
+```twig {"preview":true}
+<div class="flex w-full max-w-sm items-center space-x-2">
+    <twig:Input type="email" id="email" />
+    <twig:Button type="submit">Subscribe</twig:Button>
+</div>
+```

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

@@ -1,11 +1,4 @@
-{%- props -%}
-{%- set style = html_cva(
-    base: 'aspect-square h-full w-full',
-    variants: {},
-    compoundVariants: []
-) -%}
-
 <img
-    class="{{ style.apply({}, attributes.render('class'))|tailwind_merge }}"
-    {{ attributes.defaults({}).without('class') }}
-/>
+    class="{{ 'aspect-square h-full w-full ' ~ attributes.render('class')|tailwind_merge }}"
+    {{ attributes.defaults({alt: ''}).without('class') }}
+/>

src/Toolkit/src/Kit/KitFactory.php

@@ -14,7 +14,6 @@
 use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Filesystem\Path;
 use Symfony\Component\Finder\Finder;
-use Symfony\Component\Yaml\Yaml;
 use Symfony\UX\Toolkit\Component\Component;
 use Symfony\UX\Toolkit\Dependency\DependenciesResolver;
 use Symfony\UX\Toolkit\File\Doc;

src/Toolkit/tests/Kit/KitFactoryTest.php

@@ -68,7 +68,7 @@ public function testCanCreateKit(): void
 
 A component for displaying structured data in rows and columns with support for headers, captions, and customizable styling.
 EOF
-        , $table->doc->markdownContent);
+            , $table->doc->markdownContent);
     }
 
     private function createKitFactory(): KitFactory

ux.symfony.com/.platform.app.yaml

@@ -53,6 +53,8 @@ hooks:
         export NO_NPM=1
 
         (>&2 symfony-build)
+        php bin/console tailwind:build --minify
+        php bin/console asset-map:compile
 
     deploy: |
         set -x -e

ux.symfony.com/.symfony.local.yaml

@@ -2,6 +2,8 @@ workers:
     docker_compose: ~
     sass:
         cmd: ['symfony', 'console', 'sass:build', '--watch']
+    tailwind:
+        cmd: ['symfony', 'console', 'tailwind:build', '--watch']
 
 http:
     use_gzip: true

ux.symfony.com/assets/controllers/tabs-controller.js

@@ -1,16 +1,16 @@
-import {Controller} from '@hotwired/stimulus';
-import {getComponent} from '@symfony/ux-live-component';
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
 
 export default class extends Controller {
     static targets = ["tab", "control"]
-    static values = {tab: String}
-    static classes = [ "active" ]
+    static values = { tab: String }
+    static classes = ["active"]
 
     initialize() {
         this.showTab(this.tabValue);
     }
 
-    show({ params: { tab }}) {
+    show({ params: { tab } }) {
         this.tabValue = tab;
     }
 
@@ -20,6 +20,7 @@ export default class extends Controller {
 
         const controlTarget = this.getControlTarget(tab);
         controlTarget.classList.add(this.activeClass);
+        controlTarget.setAttribute("aria-selected", "true");
     }
 
     hideTab(tab) {
@@ -28,6 +29,7 @@ export default class extends Controller {
 
         const controlTarget = this.getControlTarget(tab);
         controlTarget.classList.remove(this.activeClass);
+        controlTarget.setAttribute("aria-selected", "false");
     }
 
     tabValueChanged(value, previousValue) {