Init bootstrap theme with sidebar & Ui translations package (#29)

![Capture d’écran du 2024-09-15
15-04-58](https://github.com/user-attachments/assets/0e5cd484-8735-4817-999c-bdfcf4837920)

app/Menu/AdminMenuBuilder.php

@@ -0,0 +1,86 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace App\Menu;
+
+use Knp\Menu\ItemInterface;
+use Sylius\AdminUi\Knp\Menu\MenuBuilderInterface;
+use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+
+#[AsDecorator(decorates: 'sylius_admin_ui.knp.menu_builder')]
+final class AdminMenuBuilder implements MenuBuilderInterface
+{
+    public function __construct(private MenuBuilderInterface $menuBuilder)
+    {
+    }
+
+    public function createMenu(array $options): ItemInterface
+    {
+        $menu = $this->menuBuilder->createMenu($options);
+
+        $menu
+            ->addChild('dashboard')
+            ->setLabel('sylius.ui.dashboard')
+            ->setLabelAttribute('icon', 'dashboard')
+        ;
+
+        $this->addLibrarySubMenu($menu);
+        $this->addConfigurationSubMenu($menu);
+
+        return $menu;
+    }
+
+    private function addLibrarySubMenu(ItemInterface $menu): void
+    {
+        $library = $menu
+            ->addChild('library')
+            ->setLabel('app.ui.library')
+            ->setLabelAttribute('icon', 'users')
+        ;
+
+        $library->addChild('books', ['route' => 'app_admin_book_index'])
+            ->setLabel('app.ui.books')
+            ->setLabelAttribute('icon', 'book')
+        ;
+
+        $library->addChild('authors')
+            ->setLabel('app.ui.authors')
+            ->setLabelAttribute('icon', 'folder')
+        ;
+    }
+
+    private function addConfigurationSubMenu(ItemInterface $menu): void
+    {
+        $library = $menu
+            ->addChild('configuration')
+            ->setLabel('Configuration')
+            ->setLabelAttribute('icon', 'dashboard')
+        ;
+
+        $library->addChild('channels')
+            ->setLabel('Channels')
+            ->setLabelAttribute('icon', 'shuffle');
+
+        $library->addChild('countries')
+            ->setLabel('Countries')
+            ->setLabelAttribute('icon', 'flag');
+
+        $library->addChild('zones')
+            ->setLabel('Zones')
+            ->setLabelAttribute('icon', 'globe');
+
+        $library->addChild('administrators')
+            ->setLabel('Admin Users')
+            ->setLabelAttribute('icon', 'lock');
+    }
+}

composer.json

@@ -21,6 +21,8 @@
         "knplabs/knp-menu-bundle": "^3.0",
         "laminas/laminas-stdlib": "^3.18",
         "pagerfanta/doctrine-orm-adapter": "^4.6",
+        "pagerfanta/twig": "^4.6",
+        "symfony/asset": "^6.4 || ^7.0",
         "sylius/grid-bundle": "^1.13@alpha",
         "sylius/resource-bundle": "^1.11 || ^1.12@alpha",
         "symfony/config": "^6.4 || ^7.0",
@@ -44,6 +46,7 @@
         "sylius-labs/coding-standard": "^4.0",
         "symfony/browser-kit": "^6.4 || ^7.0",
         "symfony/console": "^6.4 || ^7.0",
+        "symfony/css-selector": "^6.4 || ^7.0",
         "symfony/debug-bundle": "^6.4 || ^7.0",
         "symfony/dom-crawler": "^6.4 || ^7.0",
         "symfony/dotenv": "^6.4 || ^7.0",
@@ -59,8 +62,10 @@
     "autoload": {
         "psr-4": {
             "Sylius\\AdminUi\\": "src/AdminUi/src/",
+            "Sylius\\BootstrapTheme\\": "src/BootstrapTheme/src/",
             "Sylius\\TwigExtra\\": "src/TwigExtra/src/",
-            "Sylius\\TwigHooks\\": "src/TwigHooks/src/"
+            "Sylius\\TwigHooks\\": "src/TwigHooks/src/",
+            "Sylius\\UiTranslations\\": "src/UiTranslations/src/"
         }
     },
     "autoload-dev": {

config/bundles.php

@@ -7,6 +7,8 @@
     Sylius\TwigHooks\TwigHooksBundle::class => ['all' => true],
     Sylius\TwigExtra\Symfony\TwigExtraBundle::class => ['all' => true],
     Sylius\AdminUi\Symfony\SyliusAdminUiBundle::class => ['all' => true],
+    Sylius\UiTranslations\Symfony\UiTranslationsBundle::class => ['all' => true],
+    Sylius\BootstrapTheme\Symfony\SyliusBootstrapThemeBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
     Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],

config/packages/framework.yaml

@@ -2,7 +2,7 @@
 framework:
     secret: '%env(APP_SECRET)%'
     #csrf_protection: true
-    http_method_override: false
+    http_method_override: true #needed for legacy routes
 
     # Enables session support. Note that the session will ONLY be started if you read or write from it.
     # Remove or comment this section to explicitly disable session support.

config/packages/sylius_bootstrap_theme.yaml

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

phpunit.xml.dist

@@ -33,6 +33,10 @@
         <testsuite name="TwigHooks Test Suite">
             <directory>src/TwigHooks/tests</directory>
         </testsuite>
+
+        <testsuite name="UiTranslations Test Suite">
+            <directory>src/UiTranslations/tests</directory>
+        </testsuite>
     </testsuites>
 
     <groups>

src/BootstrapTheme/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/public

src/BootstrapTheme/assets/entrypoint.js

@@ -0,0 +1,12 @@
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import './styles/main.scss';
+
+import './scripts/bootstrap';

src/BootstrapTheme/assets/scripts/bootstrap.js

@@ -0,0 +1,18 @@
+/* eslint-env browser */
+import * as bootstrap from 'bootstrap';
+
+// Fix dropdowns
+(() => {
+    document.querySelectorAll('.dropdown-static').forEach((dropdownToggleEl) => {
+        const parent = dropdownToggleEl.closest('[data-bs-toggle="dropdown"]');
+        if (parent) {
+            let dropdown = new bootstrap.Dropdown(parent, {
+                popperConfig(defaultBsPopperConfig) {
+                    return { ...defaultBsPopperConfig, strategy: 'fixed' };
+                },
+            });
+        }
+    });
+})();
+
+window.bootstrap = bootstrap;

src/BootstrapTheme/assets/styles/_body.scss

@@ -0,0 +1,79 @@
+/*!
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+* {
+    --tblr-breadcrumb-item-active-color: var(--tblr-gray-500);
+    --tblr-breadcrumb-divider-color: var(--tblr-gray-300);
+}
+
+[data-bs-theme=dark] {
+    --tblr-bg-surface: #1E2433;
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
+    font-weight: 1 999;
+}
+
+body {
+    font-feature-settings: "cv03", "cv04", "cv11";
+}
+
+a {
+    text-underline-offset: 0.25em;
+}
+
+a.link-reset {
+    text-decoration: none;
+}
+
+.btn-collapse {
+    &.collapsed {
+        .icon-chevron-right {
+            display: inline-flex;
+        }
+        .icon-chevron-down {
+            display: none;
+        }
+    }
+
+    &:not(.collapsed) {
+        .icon-chevron-right {
+            display: none;
+        }
+        .icon-chevron-down {
+            display: inline-flex;
+        }
+    }
+}
+
+.breadcrumb-item a {
+    text-decoration: none;
+
+    &:hover {
+        color: $primary
+    }
+}
+
+html[data-bs-theme="light"] [data-theme-switch="light"] {
+    display: none;
+}
+
+html[data-bs-theme="dark"] [data-theme-switch="dark"] {
+    display: none;
+}
+
+.switch-collapse {
+    display: none;
+}
+
+label:has(input:checked) ~ .switch-collapse {
+    display: block;
+}