[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) {

ux.symfony.com/assets/icons/simple-icons/shadcnui.svg

@@ -75,7 +75,7 @@ $utilities: map-remove(
 // @import "../../vendor/twbs/bootstrap/scss/navbar";
 @import "../../vendor/twbs/bootstrap/scss/card";
 // @import "../../vendor/twbs/bootstrap/scss/accordion";
-// @import "../../vendor/twbs/bootstrap/scss/breadcrumb";
+@import "../../vendor/twbs/bootstrap/scss/breadcrumb";
 // @import "../../vendor/twbs/bootstrap/scss/pagination";
 // @import "../../vendor/twbs/bootstrap/scss/badge";
 @import "../../vendor/twbs/bootstrap/scss/alert";
@@ -128,6 +128,7 @@ $utilities: map-remove(
 @import "components/Button";
 @import "components/Browser";
 @import "components/Changelog";
+@import "components/CodePreview_Tabs";
 @import "components/DataList";
 @import "components/DemoContainer";
 @import "components/DemoCard";
@@ -144,15 +145,18 @@ $utilities: map-remove(
 @import "components/PackageHeader";
 @import "components/PackageBox";
 @import "components/PackageList";
+@import "components/SidebarNav";
 @import "components/Cookbook";
 @import "components/SupportBox";
 @import "components/Tabs";
 @import "components/Tag";
 @import "components/Terminal";
 @import "components/TerminalCommand";
 @import "components/ThemeSwitcher";
+@import "components/Wysiwyg";
 
 // Utilities
+@import "utilities/animation";
 @import "utilities/arrow";
 @import "utilities/background";
 @import "utilities/info-tooltips";
@@ -176,4 +180,3 @@ $utilities: map-remove(
 .code-description a {
     text-decoration: underline;
 }
-

ux.symfony.com/assets/images/ux_packages/toolkit-1200x675.png

@@ -0,0 +1,60 @@
+.CodePreview_Tabs {
+}
+
+.CodePreview_TabHead {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem
+}
+
+.CodePreview_TabControl {
+  border-bottom: 3px solid transparent;
+  color: var(--bs-primary-color);
+  padding: 0 1rem;
+  font-size: .9rem;
+  line-height: 2;
+  font-stretch: semi-condensed;
+  transition: border-color 150ms ease-in-out;
+  margin-bottom: -1px;
+}
+
+.CodePreview_TabControl.active {
+  border-color: var(--bs-secondary-color);
+}
+
+.CodePreview_TabPanel {
+    position: relative;
+}
+
+.CodePreview_TabPanel:not(.active) {
+  display: none;
+}
+
+.CodePreview_TabPanel:has(.CodePreview_Preview) {
+    border: 1px solid var(--bs-border-color);
+    border-radius: .75rem
+}
+
+.CodePreview_Loader {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .2rem;
+    position: absolute;
+
+    svg {
+        animation: rotating 1s linear infinite;
+    }
+}
+
+.CodePreview_Preview {
+    width: 100%;
+    transition: opacity .250s linear;
+    border-radius: .75rem;
+    opacity: 1;
+
+    &.loading {
+        opacity: 0;
+    }
+}

ux.symfony.com/assets/images/ux_packages/toolkit.png

@@ -0,0 +1,22 @@
+.SidebarNav {}
+
+.SidebarNav_Heading {
+    font-weight: 600;
+    padding: 0 .5rem;
+}
+
+.SidebarNav_Item {
+    border-radius: .5rem;
+    transition: background-color 100ms ease-in-out;
+}
+.SidebarNav_Item.active,
+.SidebarNav_Item:hover {
+    background-color: var(--bs-secondary-bg);
+}
+
+
+.SidebarNav_Link {
+    display: block;
+    font-size: .9rem;
+    padding: .1rem .5rem;
+}

ux.symfony.com/assets/styles/app.scss

@@ -0,0 +1,29 @@
+.Wysiwyg {
+    h1 {
+        font-family: var(--font-family-title);
+        font-size: 2.6rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-family: var(--font-family-title);
+        font-size: 2rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        margin-top: 2rem;
+    }
+
+    h3 {
+        font-family: var(--font-family-title);
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        margin-top: 1.5rem;
+    }
+
+    a {
+        color: var(--bs-link-color);
+        text-decoration: underline;
+    }
+}