feat: add shadcn admin ui

.github/workflows/ci.yaml

@@ -96,8 +96,9 @@ jobs:
 
             -   name: "Install & compile assets"
                 run: |
-                    bin/console importmap:install      
-                    bin/console asset-map:compile      
+                    bin/console importmap:install
+                    bin/console tailwind:build
+                    bin/console asset-map:compile
 
             -   name: Run PHPUnit
                 run: vendor/bin/phpunit
@@ -141,6 +142,22 @@ jobs:
                     yarn install --frozen-lockfile --non-interactive
                     yarn test
 
+            - name: "Restrict packages' versions (Shadcn Admin Ui)"
+              run: |
+                  (cd src/ShadcnAdminUi/ && composer config --no-plugins allow-plugins.symfony/runtime true)
+                  (cd src/ShadcnAdminUi/ && composer config extra.symfony.require "${{ matrix.symfony }}")
+
+            -   name: "Install dependencies (Shadcn Admin Ui)"
+                run: (cd src/ShadcnAdminUi/ && composer update --no-interaction --no-scripts)
+
+            -   name: "Build the assets (Shadcn Admin Ui)"
+                run: |
+                    (cd src/ShadcnAdminUi/ && APP_ENV=test php tests/Functional/.application/bin/console importmap:install)
+                    (cd src/ShadcnAdminUi/ && APP_ENV=test php tests/Functional/.application/bin/console tailwind:build)
+
+            -   name: Run PHPUnit (Shadcn Admin Ui)
+                run: (cd src/ShadcnAdminUi/ && vendor/bin/phpunit)
+
             - name: "Restrict packages' versions (Twig Hooks)"
               run: |
                   (cd src/TwigHooks/ && composer config --no-plugins allow-plugins.symfony/runtime true)

.github/workflows/split_packages.yaml

@@ -26,6 +26,9 @@ jobs:
                     -
                         directory: src/BootstrapAdminUi
                         repository: BootstrapAdminUi
+                    -
+                        directory: src/ShadcnAdminUi
+                        repository: ShadcnAdminUi
                     -
                         directory: src/TwigExtra
                         repository: TwigExtra

.gitignore

@@ -1,6 +1,7 @@
 config/reference.php
 /src/**/.phpunit.result.cache
 /src/**/vendor
+!/src/ShadcnAdminUi/assets/styles/vendor
 composer.lock
 
 ###> symfony/framework-bundle ###

README.md

@@ -7,6 +7,56 @@ The Sylius stack is a set of tools for your Symfony projects.
 
 Documentation is available at [stack.sylius.com](https://stack.sylius.com).
 
+🛠️ Contributing
+---------------
+
+The repository ships a demo application to try the packages:
+
+```bash
+composer install
+docker compose up -d
+symfony console doctrine:schema:create
+symfony console doctrine:fixtures:load -n
+symfony serve -d
+```
+
+The admin panel is available at `/admin` (login: `admin@example.com` / `admin`).
+
+### Switching the admin UI
+
+The demo application can run with either [BootstrapAdminUi](src/BootstrapAdminUi) or [ShadcnAdminUi](src/ShadcnAdminUi):
+
+```bash
+bin/switch-admin-ui            # toggles between the two
+bin/switch-admin-ui bootstrap
+bin/switch-admin-ui shadcn
+```
+
+The script enables the matching bundle and theme configuration, updates the template namespaces of the demo
+application, then clears the cache (and builds the Tailwind stylesheet for `shadcn`).
+
+When working on the shadcn templates, keep the Tailwind watcher running:
+
+```bash
+symfony console tailwind:build --watch
+```
+
+### Switching the color themes and the sidebar
+
+With ShadcnAdminUi, try the [color themes](docs/shadcn-admin-ui/theming.md#color-themes) and the sidebar variants on
+the demo application:
+
+```bash
+bin/switch-admin-theme zinc blue            # a base color, then an accent
+bin/switch-admin-theme --sidebar=floating   # sidebar, floating or inset
+bin/switch-admin-theme --sidebar=inset rose
+bin/switch-admin-theme none                 # back to the neutral theme
+bin/switch-admin-theme                      # shows the current settings and the available themes
+```
+
+A setting left out keeps its current value. The script enables ShadcnAdminUi if needed; switching back to Bootstrap
+resets both settings.
+
 🤝 Community
 ------------
 

assets/admin.js

@@ -0,0 +1,4 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+import './scripts/statistics_chart.js';
+
+startStimulusApp();

assets/styles/admin.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "../../src/ShadcnAdminUi/assets/styles/theme.css";
+
+@source "../../templates";

bin/switch-admin-theme

@@ -0,0 +1,106 @@
+#!/usr/bin/env bash
+#
+# Switches the color themes and the sidebar variant of the demo application (ShadcnAdminUi only).
+#
+# Usage: bin/switch-admin-theme [--sidebar=sidebar|floating|inset] [theme ...|none]
+# A setting left out keeps its current value; with no argument at all, prints the current settings.
+#
+# Examples:
+#   bin/switch-admin-theme zinc blue
+#   bin/switch-admin-theme --sidebar=floating
+#   bin/switch-admin-theme --sidebar=inset slate violet
+#   bin/switch-admin-theme none
+
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+themes_dir=src/ShadcnAdminUi/assets/styles/themes
+available=$(find "$themes_dir" -name '*.css' -exec basename {} .css \; | sort | tr '\n' ' ')
+variants='sidebar floating inset'
+config=config/packages/sylius_shadcn_admin_ui.yaml
+
+usage() {
+    echo "Usage: $0 [--sidebar=sidebar|floating|inset] [theme ...|none]"
+    echo "Available themes: $available"
+    echo "Combine a base color (stone, zinc, slate) with an accent, e.g.: $0 zinc blue"
+    echo "A setting left out keeps its current value; \"none\" goes back to the neutral theme."
+}
+
+# Current settings, read from the configuration written by this script.
+current_themes=''
+current_variant=sidebar
+if [[ -f "$config" ]]; then
+    current_themes=$(sed -n 's/^ *themes: \[\(.*\)\]$/\1/p' "$config" | tr -d ',')
+    current_variant=$(sed -n 's/^ *variant: *\([a-z]*\)$/\1/p' "$config")
+    current_variant=${current_variant:-sidebar}
+fi
+
+if [[ $# -eq 0 ]]; then
+    if grep -q 'SyliusShadcnAdminUiBundle' config/bundles.php; then
+        echo "Admin themes: ${current_themes:-none (neutral)}. Sidebar: $current_variant."
+    else
+        echo "The demo application runs BootstrapAdminUi: no theme."
+    fi
+    echo
+    usage
+    exit 0
+fi
+
+variant=$current_variant
+themes=()
+themes_given=false
+for arg in "$@"; do
+    case "$arg" in
+        -h|--help) usage; exit 0 ;;
+        --sidebar=*)
+            variant=${arg#--sidebar=}
+            if [[ " $variants " != *" $variant "* ]]; then
+                echo "Unknown sidebar variant \"$variant\": use one of $variants." >&2
+                exit 1
+            fi
+            ;;
+        none) themes_given=true ;;
+        -*) echo "Unknown option \"$arg\"." >&2; usage >&2; exit 1 ;;
+        *)
+            if [[ ! -f "$themes_dir/$arg.css" ]]; then
+                echo "Unknown theme \"$arg\". Available themes: $available" >&2
+                exit 1
+            fi
+            themes+=("$arg")
+            themes_given=true
+            ;;
+    esac
+done
+
+if [[ "$themes_given" == false && -n "$current_themes" ]]; then
+    read -r -a themes <<< "$current_themes"
+fi
+
+# The themes belong to ShadcnAdminUi: enable it first if needed.
+if ! grep -q 'SyliusShadcnAdminUiBundle' config/bundles.php; then
+    bin/switch-admin-ui shadcn
+fi
+
+cat > "$config" <<EOF
+imports:
+    - { resource: '../../src/ShadcnAdminUi/config/app.php' }
+EOF
+
+if [[ "$variant" != sidebar || ${#themes[@]} -gt 0 ]]; then
+    printf '\nsylius_shadcn_admin_ui:\n' >> "$config"
+fi
+if [[ "$variant" != sidebar ]]; then
+    printf '    sidebar:\n        variant: %s\n' "$variant" >> "$config"
+fi
+if [[ ${#themes[@]} -gt 0 ]]; then
+    list=$(printf '%s, ' "${themes[@]}")
+    printf '    themes: [%s]\n' "${list%, }" >> "$config"
+fi
+
+php bin/console cache:clear --quiet
+
+# PHP-FPM only revalidates the cached PHP files every 2 seconds (opcache.revalidate_freq): wait for the new container.
+sleep 2
+
+echo "Admin themes: ${themes[*]:-none (neutral)}. Sidebar: $variant."

bin/switch-admin-ui

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+#
+# Switches the demo application between BootstrapAdminUi and ShadcnAdminUi.
+#
+# Usage: bin/switch-admin-ui [bootstrap|shadcn]   (no argument: toggles)
+
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+current() {
+    if grep -q 'SyliusShadcnAdminUiBundle' config/bundles.php; then echo shadcn; else echo bootstrap; fi
+}
+
+from=$(current)
+to=${1:-}
+if [[ -z "$to" ]]; then
+    [[ "$from" == shadcn ]] && to=bootstrap || to=shadcn
+fi
+
+case "$to" in
+    bootstrap) Ns=Bootstrap; prefix=bootstrap; tom_select=true ;;
+    shadcn)    Ns=Shadcn;    prefix=shadcn;    tom_select=false ;;
+    *) echo "Usage: $0 [bootstrap|shadcn]" >&2; exit 1 ;;
+esac
+
+if [[ "$from" == "$to" ]]; then
+    echo "Admin UI is already \"$to\"."
+    exit 0
+fi
+
+[[ "$from" == shadcn ]] && OldNs=Shadcn || OldNs=Bootstrap
+old_prefix=$(echo "$OldNs" | tr '[:upper:]' '[:lower:]')
+
+# Kernel: only one of the two bundles can be enabled.
+perl -pi -e "s/Sylius\\\\${OldNs}AdminUi\\\\Symfony\\\\Sylius${OldNs}AdminUiBundle/Sylius\\\\${Ns}AdminUi\\\\Symfony\\\\Sylius${Ns}AdminUiBundle/" config/bundles.php
+
+# Theme configuration (hooks, grid templates, component prefixes).
+rm -f "config/packages/sylius_${old_prefix}_admin_ui.yaml"
+cat > "config/packages/sylius_${prefix}_admin_ui.yaml" <<EOF
+imports:
+    - { resource: '../../src/${Ns}AdminUi/config/app.php' }
+EOF
+
+# Template namespace and component prefix used by the application.
+grep -rlE "@Sylius${OldNs}AdminUi|sylius_${old_prefix}_admin_ui:" app templates config 2>/dev/null \
+    | xargs -r perl -pi -e "s/\@Sylius${OldNs}AdminUi/\@Sylius${Ns}AdminUi/g; s/sylius_${old_prefix}_admin_ui:/sylius_${prefix}_admin_ui:/g"
+
+# The shadcn theme fully replaces the Tom Select stylesheet.
+perl -pi -e "s#(\"tom-select/dist/css/tom-select.default.css\": )(true|false)#\${1}${tom_select}#" assets/controllers.json
+
+php bin/console cache:clear --quiet
+
+# PHP-FPM only revalidates the cached PHP files every 2 seconds (opcache.revalidate_freq): wait for the new container.
+sleep 2
+
+if [[ "$to" == shadcn ]]; then
+    php bin/console tailwind:build
+fi
+
+echo "Admin UI switched from \"$from\" to \"$to\"."

composer.json

@@ -41,6 +41,9 @@
         "symfony/ux-icons": "^2.20 || ^3.0",
         "symfony/ux-live-component": "^2.17 || ^3.0",
         "symfony/ux-twig-component": "^2.17 || ^3.0",
+        "symfonycasts/tailwind-bundle": "^0.13 || ^1.0",
+        "tales-from-a-dev/twig-tailwind-extra": "^1.3",
+        "twig/extra-bundle": "^3.24",
         "twig/twig": "^2.15 || ^3.0",
         "webmozart/assert": "^1.9"
     },
@@ -63,6 +66,7 @@
         "symfony/maker-bundle": "^1.61",
         "symfony/runtime": "^6.4 || ^7.4 || ^8.0",
         "symfony/translation": "^6.4 || ^7.4 || ^8.0",
+        "symfony/ux-toolkit": "v2.36.1 || ^3.7",
         "symfony/web-profiler-bundle": "^6.4 || ^7.4 || ^8.0",
         "symfony/workflow": "^6.4 || ^7.4 || ^8.0",
         "symfony/yaml": "^6.4 || ^7.4 || ^8.0",
@@ -74,6 +78,7 @@
         "psr-4": {
             "Sylius\\AdminUi\\": "src/AdminUi/src/",
             "Sylius\\BootstrapAdminUi\\": "src/BootstrapAdminUi/src/",
+            "Sylius\\ShadcnAdminUi\\": "src/ShadcnAdminUi/src/",
             "Sylius\\TwigExtra\\": "src/TwigExtra/src/",
             "Sylius\\TwigHooks\\": "src/TwigHooks/src/",
             "Sylius\\UiTranslations\\": "src/UiTranslations/src/"
@@ -85,10 +90,12 @@
             "MainTests\\Sylius\\": "tests/",
             "TestApplication\\Sylius\\AdminUi\\": "src/AdminUi/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\BootstrapAdminUi\\": "src/BootstrapAdminUi/tests/Functional/.application/src/",
+            "TestApplication\\Sylius\\ShadcnAdminUi\\": "src/ShadcnAdminUi/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\TwigExtra\\": "src/TwigExtra/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\TwigHooks\\": "src/TwigHooks/tests/Functional/.application/src/",
             "TestApplication\\Sylius\\UiTranslations\\": "src/UiTranslations/tests/Functional/.application/src/",
             "Tests\\Sylius\\AdminUi\\": "src/AdminUi/tests/",
+            "Tests\\Sylius\\ShadcnAdminUi\\": "src/ShadcnAdminUi/tests/",
             "Tests\\Sylius\\TwigExtra\\": "src/TwigExtra/tests/",
             "Tests\\Sylius\\TwigHooks\\": "src/TwigHooks/tests/",
             "Tests\\Sylius\\UiTranslations\\": "src/UiTranslations/tests/"
@@ -97,6 +104,7 @@
     "replace": {
         "sylius/admin-ui": "self.version",
         "sylius/bootstrap-admin-ui": "self.version",
+        "sylius/shadcn-admin-ui": "self.version",
         "sylius/twig-extra": "self.version",
         "sylius/twig-hooks": "self.version",
         "sylius/ui-translations": "self.version"

config/bundles.php

@@ -25,4 +25,7 @@
     Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
+    TalesFromADev\Twig\Extra\Tailwind\Bridge\Symfony\Bundle\TalesFromADevTwigExtraTailwindBundle::class => ['all' => true],
 ];

config/packages/sylius_bootstrap_admin_ui.yaml

@@ -1,2 +1,2 @@
 imports:
-  - { resource: '../../src/BootstrapAdminUi/config/app.php' }
+    - { resource: '../../src/BootstrapAdminUi/config/app.php' }

config/packages/symfonycasts_tailwind.yaml

@@ -0,0 +1,4 @@
+symfonycasts_tailwind:
+    binary_version: 'v4.3.3'
+    input_css:
+        - '%kernel.project_dir%/assets/styles/admin.css'

docs/README.md

@@ -19,6 +19,7 @@ The Sylius stack is a set of tools for your Symfony projects. It comes with a bu
 * [**GridBundle:** Amazing grids with support of filters and custom fields integrated into Symfony](grid/index.md)
 * [**AdminUi:** Minimalist generic templates for your admin panels](admin-ui/getting-started.md)
 * [**BootstrapAdminUi:** Build your Bootstrap admin panels with Sylius and Symfony UX](bootstrap-admin-ui/getting-started.md)
+* [**ShadcnAdminUi:** Build your Tailwind CSS and shadcn/ui admin panels with Sylius and Symfony UX](shadcn-admin-ui/getting-started.md)
 * [**TwigExtra:** Additional Twig extensions for your Symfony projects](twig-extra/getting-started.md)
 * [**TwigHooks:** Composable Twig layouts](twig-hooks/getting-started.md)
 * [**UiTranslations:** Basic UI translations](https://github.com/Sylius/Stack/blob/main/docs/ui-translations/getting-started.md)

docs/SUMMARY.md

@@ -71,6 +71,16 @@
 * Components
   * [Copy to clipboard](bootstrap-admin-ui/components/copy-to-clipboard.md)
 
+## 🌑 Shadcn Admin UI
+
+* [Getting started](shadcn-admin-ui/getting-started.md)
+* [Configuration](shadcn-admin-ui/configuration.md)
+* [Theming](shadcn-admin-ui/theming.md)
+* [Grids](shadcn-admin-ui/grids.md)
+* [Menu](shadcn-admin-ui/menu.md)
+* [Components](shadcn-admin-ui/components.md)
+* [Migrating from Bootstrap Admin UI](shadcn-admin-ui/migration.md)
+
 ## 🍀 Twig Extra
 
 * [Getting started](twig-extra/getting-started.md)