Add Login page to the new Admin Panel

composer.json

@@ -131,6 +131,7 @@
         "symfony/translation": "^6.3.3",
         "symfony/translation-contracts": "^2.5.2",
         "symfony/twig-bundle": "^6.3.0",
+        "symfony/ux-twig-component": "^2.11.2",
         "symfony/validator": "^6.3.4",
         "symfony/webpack-encore-bundle": "^1.17.1",
         "symfony/yaml": "^6.3.3",

config/bundles.php

@@ -59,4 +59,5 @@
     SyliusLabs\DoctrineMigrationsExtraBundle\SyliusLabsDoctrineMigrationsExtraBundle::class => ['all' => true],
     SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
     Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
 ];

package.json

@@ -4,6 +4,7 @@
   "license": "MIT",
   "author": "Sylius Sp. z o.o.",
   "dependencies": {
+    "@sylius-ui/admin": "file:src/Sylius/Bundle/AdminBundle",
     "chart.js": "^3.7.1",
     "jquery": "^3.5.0",
     "jquery.dirtyforms": "^2.0.0",

rector.php

@@ -2,21 +2,12 @@
 
 declare(strict_types=1);
 
-use Rector\Core\Configuration\Option;
-use Rector\Php74\Rector\Closure\ClosureToArrowFunctionRector;
-use Rector\Php74\Rector\Property\TypedPropertyRector;
+use Rector\Config\RectorConfig;
 use Rector\Set\ValueObject\LevelSetList;
-use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
 
-return static function (ContainerConfigurator $containerConfigurator): void
+return static function (RectorConfig $config): void
 {
-    $containerConfigurator->import(LevelSetList::UP_TO_PHP_80);
-
-    $parameters = $containerConfigurator->parameters();
-    $parameters->set(Option::AUTO_IMPORT_NAMES, true);
-    $parameters->set(Option::IMPORT_SHORT_CLASSES, false);
-
-    $services = $containerConfigurator->services();
-    $services->set(TypedPropertyRector::class);
-    $services->set(ClosureToArrowFunctionRector::class);
+    $config->sets([
+        LevelSetList::UP_TO_PHP_82
+    ]);
 };

src/Sylius/Bundle/AdminBundle/Resources/assets/entrypoint.js

@@ -0,0 +1,18 @@
+/*
+ * 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/apexcharts';
+import './scripts/choices';
+
+import 'bootstrap';
+
+import './images/sylius-logo.svg';
+import './images/sylius-logo-dark-text.png';

src/Sylius/Bundle/AdminBundle/Resources/assets/scripts/apexcharts.js

@@ -0,0 +1,99 @@
+/*
+ * 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 ApexCharts from 'apexcharts';
+
+(function () {
+  const options = {
+    series: [{
+      name: 'Inflation',
+      data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
+    }],
+    chart: {
+      height: 350,
+      type: 'bar',
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 10,
+        dataLabels: {
+          position: 'top', // top, center, bottom
+        },
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      formatter(val) {
+        return `${val}%`;
+      },
+      offsetY: -20,
+      style: {
+        fontSize: '12px',
+        colors: ['#304758'],
+      },
+    },
+
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      position: 'top',
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      crosshairs: {
+        fill: {
+          type: 'gradient',
+          gradient: {
+            colorFrom: '#D8E3F0',
+            colorTo: '#BED1E6',
+            stops: [0, 100],
+            opacityFrom: 0.4,
+            opacityTo: 0.5,
+          },
+        },
+      },
+      tooltip: {
+        enabled: true,
+      }
+    },
+    yaxis: {
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        show: false,
+        formatter(val) {
+          return `${val}%`;
+        },
+      },
+
+    },
+    title: {
+      floating: true,
+      offsetY: 330,
+      align: 'center',
+      style: {
+        color: '#444',
+      },
+    },
+  };
+
+  // eslint-disable-next-line no-undef
+  const ch = document.querySelector('#chart-demo');
+  if (ch) {
+    // eslint-disable-next-line no-undef
+    const chart = new ApexCharts(document.querySelector('#chart-demo'), options);
+    chart.render();
+  }
+}());

src/Sylius/Bundle/AdminBundle/Resources/assets/scripts/choices.js

@@ -0,0 +1,22 @@
+/*
+ * 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 Choices from 'choices.js';
+
+(function () {
+  // eslint-disable-next-line no-undef
+  const items = document.querySelectorAll('[data-choices]');
+
+  if (items.length) {
+    items.forEach((el) => {
+      // eslint-disable-next-line no-new
+      new Choices(el);
+    });
+  }
+}());

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_avatar.scss

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+
+.sylius {
+    &.avatar {
+        background-color: $gray-100;
+    }
+}

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_flags.scss

@@ -0,0 +1,11 @@
+/*!
+ * 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 "@tabler/core/src/scss/config";
+@import "ui/flags";

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/_navbar.scss

@@ -0,0 +1,18 @@
+/*!
+ * 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.
+ */
+
+.sylius {
+    &.navbar-nav {
+        gap: 0.5rem;
+    }
+
+    &.navbar-brand-image {
+        height: 4rem;
+    }
+}

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/main.scss

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+$assets-base: $rootDir + "/node_modules/@tabler/core/dist";
+$primary: #1ABB9C;
+
+@import "choices.js/src/styles/choices.scss";
+@import "@tabler/core/src/scss/tabler.scss";
+
+
+// TODO: Once https://github.com/tabler/tabler/pull/1718 merged or resolve remove the custom _flags.scss and import the tabler's one
+//@import "@tabler/core/src/scss/tabler-flags.scss";
+@import "_flags.scss";
+
+body {
+    font-family: "Inter", sans-serif;
+    font-feature-settings: "cv03", "cv04", "cv11";
+}
+
+@import "avatar";
+@import "navbar";

src/Sylius/Bundle/AdminBundle/Resources/assets/styles/ui/_flags.scss

@@ -0,0 +1,31 @@
+$countries: (
+    'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
+);
+
+.flag {
+    position: relative;
+    display: inline-block;
+    height: $avatar-size;
+    aspect-ratio: 1.33333;
+    background: no-repeat center/cover;
+    box-shadow: $flag-box-shadow;
+    border-radius: $flag-border-radius;
+    vertical-align: bottom;
+
+    &.flag-country-np {
+        box-shadow: none;
+        border-radius: 0;
+    }
+}
+
+@each $country in $countries {
+    .flag-country-#{$country} {
+        background-image: url("#{$assets-base}/img/flags/#{$country}.svg");
+    }
+}
+
+@each $flag-size, $size in $flag-sizes {
+    .flag-#{$flag-size} {
+        height: map-get($size, size);
+    }
+}

src/Sylius/Bundle/AdminBundle/Resources/config/app/config.yml

@@ -1,7 +1,7 @@
 imports:
     - { resource: "@SyliusUiBundle/Resources/config/app/config.yml" }
 
-    - { resource: "@SyliusAdminBundle/Resources/config/app/events.yaml" }
+    - { resource: "@SyliusAdminBundle/Resources/config/app/template_events.yaml" }
     - { resource: "@SyliusAdminBundle/Resources/config/app/sylius/sylius_mailer.yml" }
     - { resource: "@SyliusAdminBundle/Resources/config/grids/address_log_entry.yml" }
     - { resource: "@SyliusAdminBundle/Resources/config/grids/admin_user.yml" }