docs: add tabs for sylius vs sylius stack templatesDir and fix twig code block

Author: stlgaits

docs/cookbook/admin_panel/basic_operations.md

@@ -21,20 +21,38 @@ bin/console cache:clear # To refresh grid's cache
 
 Magic! Here is the generated grid.
 
+{% code title="src/Grid/BookGrid.php" lineNumbers="true" %}
 ```php
-final class BookGrid extends AbstractGrid implements ResourceAwareGridInterface
+<?php
+
+namespace App\Grid;
+
+use App\Entity\Book;
+use Sylius\Bundle\GridBundle\Builder\Action\CreateAction;
+use Sylius\Bundle\GridBundle\Builder\Action\DeleteAction;
+use Sylius\Bundle\GridBundle\Builder\Action\ShowAction;
+use Sylius\Bundle\GridBundle\Builder\Action\UpdateAction;
+use Sylius\Bundle\GridBundle\Builder\ActionGroup\BulkActionGroup;
+use Sylius\Bundle\GridBundle\Builder\ActionGroup\ItemActionGroup;
+use Sylius\Bundle\GridBundle\Builder\ActionGroup\MainActionGroup;
+use Sylius\Bundle\GridBundle\Builder\Field\DateTimeField;
+use Sylius\Bundle\GridBundle\Builder\Field\StringField;
+use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface;
+use Sylius\Bundle\GridBundle\Grid\AbstractGrid;
+use Sylius\Component\Grid\Attribute\AsGrid;
+
+#[AsGrid(
+    name: 'app_book',
+    resourceClass: Book::class,
+)]
+final class BookGrid extends AbstractGrid
 {
     public function __construct()
     {
         // TODO inject services if required
     }
 
-    public static function getName(): string
-    {
-        return 'app_book';
-    }
-
-    public function buildGrid(GridBuilderInterface $gridBuilder): void
+    public function __invoke(GridBuilderInterface $gridBuilder): void
     {
         $gridBuilder
             // see https://github.com/Sylius/SyliusGridBundle/blob/master/docs/field_types.md
@@ -67,15 +85,14 @@ final class BookGrid extends AbstractGrid implements ResourceAwareGridInterface
             )
         ;
     }
-
-    public function getResourceClass(): string
-    {
-        return Book::class;
-    }
 ```
+{% endcode %}
 
 Configure the `index` operation in your resource.
 
+{% tabs %}
+{% tab title="Sylius" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
 ```php
 namespace App\Entity;
 
@@ -87,10 +104,10 @@ use Sylius\Resource\Model\ResourceInterface;
 #[AsResource(
     section: 'admin', // This will influence the route name
     routePrefix: '/admin',
-    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic template for your list
+    templatesDir: '@SyliusAdmin/shared/crud', // This directory contains the generic template for your list
     operations: [
-        new Index( // This operation will add "index" operation for the books list
-            grid: BookGrid::class, // Use the grid class you have generated in previous step
+        new Index( // This operation will add an "index" operation for the books list
+            grid: BookGrid::class, // Use the grid class you've just generated above
         ), 
     ],    
 )]
@@ -99,10 +116,37 @@ class Book implements ResourceInterface
     //...
 }
 ```
+{% endcode %}
+{% endtab %}
 
-{% hint style="info" %}
-Note: When you are in a Sylius project, the `templatesDir` path is: `@SyliusAdmin/shared/crud`
-{% endhint %}
+{% tab title="Sylius Stack" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
+```php
+namespace App\Entity;
+
+use App\Grid\BookGrid;
+use Sylius\Resource\Metadata\AsResource;
+use Sylius\Resource\Metadata\Index;
+use Sylius\Resource\Model\ResourceInterface;
+
+#[AsResource(
+    section: 'admin', // This will influence the route name
+    routePrefix: '/admin',
+    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic template for your list
+    operations: [
+        new Index( // This operation will add an "index" operation for the books list
+            grid: BookGrid::class, // Use the grid class you've just generated above
+        ), 
+    ],    
+)]
+class Book implements ResourceInterface
+{
+    //...
+}
+```
+{% endcode %}
+{% endtab %}
+{% endtabs %}
 
 Use the Symfony `debug:router` command to check the results.
 
@@ -131,33 +175,61 @@ bin/console make:form
 
 Configure the `create` operation in your resource.
 
+{% tabs %}
+{% tab title="Sylius" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
 ```php
 namespace App\Entity;
 
-use App\Form\BookType;
+use App\Grid\BookGrid;
 use Sylius\Resource\Metadata\AsResource;
-use Sylius\Resource\Metadata\Create;
+use Sylius\Resource\Metadata\Index;
 use Sylius\Resource\Model\ResourceInterface;
 
 #[AsResource(
     section: 'admin', // This will influence the route name
     routePrefix: '/admin',
-    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic templates
-    formType: BookType::class, // The form type you have generated in previous step
+    templatesDir: '@SyliusAdmin/shared/crud', // This directory contains the generic template for your list
     operations: [
-        // ...
-        new Create(), // This operation will add "create" operation for the book resource
+      //...
+      new Create(), // This operation will add "create" operation for the book resource
     ],    
 )]
 class Book implements ResourceInterface
 {
     //...
 }
 ```
+{% endcode %}
+{% endtab %}
 
-{% hint style="info" %}
-Note: When you are in a Sylius project, the `templatesDir` path is: `@SyliusAdmin/shared/crud`
-{% endhint %}
+{% tab title="Sylius Stack" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
+```php
+namespace App\Entity;
+
+use App\Grid\BookGrid;
+use Sylius\Resource\Metadata\AsResource;
+use Sylius\Resource\Metadata\Index;
+use Sylius\Resource\Model\ResourceInterface;
+
+#[AsResource(
+    section: 'admin', // This will influence the route name
+    routePrefix: '/admin',
+    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic template for your list
+     operations: [
+      //...
+      new Create(), // This operation will add a "create" operation for the book resource
+    ],    
+)]
+class Book implements ResourceInterface
+{
+    //...
+}
+```
+{% endcode %}
+{% endtab %}
+{% endtabs %}
 
 Use the Symfony `debug:router` command to check the results.
 
@@ -182,33 +254,61 @@ Ensure you already created the Symfony form type in the [previous section](basic
 
 Configure the `update` operation in your resource.
 
+{% tabs %}
+{% tab title="Sylius" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
 ```php
 namespace App\Entity;
 
-use App\Form\BookType;
+use App\Grid\BookGrid;
 use Sylius\Resource\Metadata\AsResource;
-use Sylius\Resource\Metadata\Update;
+use Sylius\Resource\Metadata\Index;
 use Sylius\Resource\Model\ResourceInterface;
 
 #[AsResource(
     section: 'admin', // This will influence the route name
     routePrefix: '/admin',
-    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic templates
-    formType: BookType::class, // The form type you have generated in previous chapter
+    templatesDir: '@SyliusAdmin/shared/crud', // This directory contains the generic template for your list
     operations: [
-        // ...
-        new Update(), // This operation will add "update" operation for the book resource
+      //...
+      new Update(), // This operation will add "update" operation for the book resource
     ],    
 )]
 class Book implements ResourceInterface
 {
     //...
 }
 ```
+{% endcode %}
+{% endtab %}
 
-{% hint style="info" %}
-Note: When you are in a Sylius project, the `templatesDir` path is: `@SyliusAdmin/shared/crud`
-{% endhint %}
+{% tab title="Sylius Stack" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
+```php
+namespace App\Entity;
+
+use App\Grid\BookGrid;
+use Sylius\Resource\Metadata\AsResource;
+use Sylius\Resource\Metadata\Index;
+use Sylius\Resource\Model\ResourceInterface;
+
+#[AsResource(
+    section: 'admin', // This will influence the route name
+    routePrefix: '/admin',
+    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic template for your list
+     operations: [
+      //...
+      new Update(), // This operation will add "update" operation for the book resource
+    ],    
+)]
+class Book implements ResourceInterface
+{
+    //...
+}
+```
+{% endcode %}
+{% endtab %}
+{% endtabs %}
 
 Use the Symfony `debug:router` command to check the results.
 
@@ -231,32 +331,61 @@ Your route should look like this:
 
 Configure the `show` operation in your resource.
 
+{% tabs %}
+{% tab title="Sylius" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
 ```php
 namespace App\Entity;
 
-use App\Form\BookType;
+use App\Grid\BookGrid;
 use Sylius\Resource\Metadata\AsResource;
-use Sylius\Resource\Metadata\Show;
+use Sylius\Resource\Metadata\Index;
 use Sylius\Resource\Model\ResourceInterface;
 
 #[AsResource(
     section: 'admin', // This will influence the route name
     routePrefix: '/admin',
-    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic templates
+    templatesDir: '@SyliusAdmin/shared/crud', // This directory contains the generic template for your list
     operations: [
-        // ...
-        new Show(), // This operation will add "show" operation for the book resource
+      //...
+       new Show(), // This operation will add "show" operation for the book resource
     ],    
 )]
 class Book implements ResourceInterface
 {
     //...
 }
 ```
+{% endcode %}
+{% endtab %}
 
-{% hint style="info" %}
-Note: When you are in a Sylius project, the `templatesDir` path is: `@SyliusAdmin/shared/crud`
-{% endhint %}
+{% tab title="Sylius Stack" %}
+{% code title="src/Entity/Book.php" lineNumbers="true" %}
+```php
+namespace App\Entity;
+
+use App\Grid\BookGrid;
+use Sylius\Resource\Metadata\AsResource;
+use Sylius\Resource\Metadata\Index;
+use Sylius\Resource\Model\ResourceInterface;
+
+#[AsResource(
+    section: 'admin', // This will influence the route name
+    routePrefix: '/admin',
+    templatesDir: '@SyliusAdminUi/crud', // This directory contains the generic template for your list
+     operations: [
+      //...
+      new Update(), // This operation will add an "update" operation for the book resource
+    ],    
+)]
+class Book implements ResourceInterface
+{
+    //...
+}
+```
+{% endcode %}
+{% endtab %}
+{% endtabs %}
 
 Use the Symfony `debug:router` command to check the results.
 
@@ -277,26 +406,24 @@ Now we need to configure the templates.
 
 {% tabs %}
 {% tab title="YAML" %}
-{% code lineNumbers="true" %}
+{% code title="config/packages/sylius_bootstrap_admin_ui.yaml" lineNumbers="true" %}
 ```yaml
-# config/packages/sylius_bootstrap_admin_ui.yaml
-# ...
 sylius_twig_hooks:
     hooks:
         # ...
         # This will create the body block
         'sylius_admin.book.show.content':
             body:
                 template: 'book/show/content/body.html.twig'
-
 ```
 {% endcode %}
 {% endtab %}
 
 {% tab title="PHP" %}
-{% code lineNumbers="true" %}
+{% code title="config/packages/sylius_bootstrap_admin_ui.php" lineNumbers="true" %}
 ```php
-// config/packages/sylius_bootstrap_admin_ui.php
+<?php 
+
 declare(strict_types=1);
 
 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
@@ -319,12 +446,11 @@ return static function (ContainerConfigurator $container): void {
 {% endtab %}
 {% endtabs %}
 
+{% code title="templates/book/show/content/body.html.twig" lineNumbers="true" %}
 ```twig
 {% raw %}
-{# templates/book/show/content/body.html.twig #}
-
 {% set book = hookable_metadata.context.book %}
-
+{% endraw %}
 <div class="page-body">
     <div class="container-xl">
         <div class="row">
@@ -336,8 +462,8 @@ return static function (ContainerConfigurator $container): void {
         </div>
     </div>
 </div>
-{% endraw %}
 ```
+{% endcode %}
 
 {% hint style="info" %}
 Note that you can also [replace the default title](page_titles.md).