remove unused styles

.env

@@ -18,3 +18,5 @@
 APP_ENV=dev
 APP_SECRET=bfc9c288ee3dcce80dec8622c2870f27
 ###< symfony/framework-bundle ###
+
+DATA_DIR='/var/www/html/data'

.gitignore

@@ -1,4 +1,5 @@
 /.idea/
+/data/
 ###> symfony/framework-bundle ###
 /.env.local
 /.env.local.php
@@ -8,3 +9,8 @@
 /var/
 /vendor/
 ###< symfony/framework-bundle ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###

assets/app.js

@@ -0,0 +1,10 @@
+import './bootstrap.js';
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * This file will be included onto the page via the importmap() Twig function,
+ * which should already be in your base.html.twig.
+ */
+import './styles/app.css';
+
+console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/upload_file_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        console.log(this.element);
+        this.element.querySelector('input').addEventListener('change', () => {
+            this.element.querySelector('button[type="submit"]').click();
+        });
+    }
+}

assets/icons/file/default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg>

assets/icons/file/upload.svg

@@ -0,0 +1,3 @@
+<svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+</svg>

assets/icons/folder/closed.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h6l2 2h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z"/></svg>

assets/styles/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: transparent;
+}

composer.json

@@ -8,12 +8,21 @@
         "ext-ctype": "*",
         "ext-iconv": "*",
         "symfony/apache-pack": "^1.0",
+        "symfony/asset-mapper": "^7.1",
         "symfony/console": "7.1.*",
         "symfony/dotenv": "7.1.*",
+        "symfony/finder": "7.1.*",
         "symfony/flex": "^2",
+        "symfony/form": "^7.1",
         "symfony/framework-bundle": "7.1.*",
         "symfony/runtime": "7.1.*",
-        "symfony/yaml": "7.1.*"
+        "symfony/stimulus-bundle": "^2.22",
+        "symfony/twig-bundle": "7.1.*",
+        "symfony/ux-icons": "^2.22",
+        "symfony/yaml": "7.1.*",
+        "symfonycasts/tailwind-bundle": "^0.6.1",
+        "twig/extra-bundle": "^2.12|^3.0",
+        "twig/twig": "^2.12|^3.0"
     },
     "config": {
         "allow-plugins": {
@@ -46,7 +55,8 @@
     "scripts": {
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+            "assets:install %PUBLIC_DIR%": "symfony-cmd",
+            "importmap:install": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"
@@ -63,5 +73,9 @@
             "allow-contrib": false,
             "require": "7.1.*"
         }
+    },
+    "require-dev": {
+        "symfony/stopwatch": "7.1.*",
+        "symfony/web-profiler-bundle": "7.1.*"
     }
 }

config/bundles.php

@@ -2,4 +2,10 @@
 
 return [
     Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
+    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
+    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
 ];

config/packages/asset_mapper.yaml

@@ -0,0 +1,11 @@
+framework:
+    asset_mapper:
+        # The paths to make available to the asset mapper.
+        paths:
+            - assets/
+        missing_import_mode: strict
+
+when@prod:
+    framework:
+        asset_mapper:
+            missing_import_mode: warn

config/packages/twig.yaml

@@ -0,0 +1,6 @@
+twig:
+    file_name_pattern: '*.twig'
+
+when@test:
+    twig:
+        strict_variables: true

config/packages/web_profiler.yaml

@@ -0,0 +1,17 @@
+when@dev:
+    web_profiler:
+        toolbar: true
+        intercept_redirects: false
+
+    framework:
+        profiler:
+            only_exceptions: false
+            collect_serializer_data: true
+
+when@test:
+    web_profiler:
+        toolbar: false
+        intercept_redirects: false
+
+    framework:
+        profiler: { collect: false }

config/routes/web_profiler.yaml

@@ -0,0 +1,8 @@
+when@dev:
+    web_profiler_wdt:
+        resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
+        prefix: /_wdt
+
+    web_profiler_profiler:
+        resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
+        prefix: /_profiler

importmap.php

@@ -0,0 +1,25 @@
+<?php
+
+/**
+ * Returns the importmap for this application.
+ *
+ * - "path" is a path inside the asset mapper system. Use the
+ *     "debug:asset-map" command to see the full list of paths.
+ *
+ * - "entrypoint" (JavaScript only) set to true for any module that will
+ *     be used as an "entrypoint" (and passed to the importmap() Twig function).
+ *
+ * The "importmap:require" command can be used to add new entries to this file.
+ */
+return [
+    'app' => [
+        'path' => './assets/app.js',
+        'entrypoint' => true,
+    ],
+    '@hotwired/stimulus' => [
+        'version' => '3.2.2',
+    ],
+    '@symfony/stimulus-bundle' => [
+        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
+    ],
+];

src/Controller/EntrypointController.php

@@ -0,0 +1,18 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class EntrypointController extends AbstractController
+{
+    #[Route(path: '/', name: 'app_root', methods: Request::METHOD_GET)]
+    public function __invoke(): Response
+    {
+        return $this->redirectToRoute('app_home');
+    }
+}

src/Controller/HomeController.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Controller;
+
+use App\Forms\UploadFileForm;
+use App\Service\FileSystemService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class HomeController extends AbstractController
+{
+    #[Route(path: '/files', name: 'app_home', methods: [Request::METHOD_GET])]
+    public function __invoke(FileSystemService $fileSystemService): Response
+    {
+        return $this->render('home.html.twig', [
+            'content' => $fileSystemService->getDirs(),
+            'fileForm' => $this->createForm(UploadFileForm::class),
+        ]);
+    }
+}

src/Controller/UploadController.php

@@ -0,0 +1,31 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Forms\UploadFileForm;
+use App\Objects\UploadedFileData;
+use App\Service\FileSystemService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class UploadController extends AbstractController
+{
+    #[Route(path: '/upload', name: 'app_upload', methods: Request::METHOD_POST)]
+    public function __invoke(
+        FileSystemService $fileSystemService,
+        Request $request,
+    ): Response
+    {
+        $fileData = new UploadedFileData();
+        $form  = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            $fileSystemService->uploadFile($fileData->file);
+        }
+
+        return $this->redirectToRoute('app_home');
+    }
+}

src/Forms/UploadFileForm.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Forms;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class UploadFileForm extends AbstractType
+{
+    public function __construct(private readonly UrlGeneratorInterface $urlGenerator)
+    {
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->setAction($this->urlGenerator->generate('app_upload'))
+            ->add('file', FileType::class, [
+            'attr' => ['class' => 'hidden'],
+            'multiple' => true,
+        ]);
+    }
+}

src/Objects/DirContent.php

@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Objects;
+
+use SplFileInfo;
+
+class DirContent
+{
+    private function __construct(
+        private readonly string $name,
+        private readonly int $size,
+        private readonly string $type,
+    )
+    {
+    }
+
+    public static function make(SplFileInfo $fileInfo): DirContent
+    {
+        return new self(
+            $fileInfo->getBasename(),
+            $fileInfo->getSize() ?? 0,
+            $fileInfo->getType() ?? 'N/A',
+        );
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function getSize(bool $humanReadable = true): int|string
+    {
+        if (!$humanReadable) {
+            return $this->size;
+        }
+
+        return $this->getHumanReadableSize();
+    }
+
+    public function getType(): string
+    {
+        return $this->type;
+    }
+
+    private function getHumanReadableSize()
+    {
+        $bytes = $this->size;
+        $size = array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
+        $factor = floor((strlen((string) $bytes) - 1) / 3);
+
+        return sprintf("%.1f %s", $bytes / (1024 ** $factor), $size[$factor]);
+
+    }
+}

src/Objects/UploadedFileData.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Objects;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class UploadedFileData
+{
+    /**
+     * @var UploadedFile[] $file
+     */
+    public array $file;
+}

src/Service/FileSystemService.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Service;
+
+use App\Objects\DirContent;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\Filesystem\Filesystem;
+use Symfony\Component\Finder\Finder;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class FileSystemService
+{
+    public function __construct(
+        #[Autowire(env: 'DATA_DIR')]
+        private readonly string $dir,
+         private readonly Filesystem $filesystem,
+    ) {
+    }
+
+    /**
+     * @return DirContent[]
+     */
+    public function getDirs(): array
+    {
+        $finder = new Finder();
+        $finder->in($this->dir);
+
+        $contents = [];
+
+        foreach ($finder->depth(0) as $content) {
+            $contents[] = DirContent::make($content);
+        }
+
+        return $contents;
+    }
+
+    /**
+     * @param UploadedFile[] $files
+     */
+    public function uploadFile(array $files): void
+    {
+        foreach ($files as $file) {
+            $this->filesystem->dumpFile($this->dir . '/' . $file->getClientOriginalName(), $file->getContent());
+        }
+    }
+}

symfony.lock

@@ -11,6 +11,21 @@
             "public/.htaccess"
         ]
     },
+    "symfony/asset-mapper": {
+        "version": "7.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.4",
+            "ref": "5ad1308aa756d58f999ffbe1540d1189f5d7d14a"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/asset_mapper.yaml",
+            "importmap.php"
+        ]
+    },
     "symfony/console": {
         "version": "7.1",
         "recipe": {
@@ -66,5 +81,63 @@
             "config/packages/routing.yaml",
             "config/routes.yaml"
         ]
+    },
+    "symfony/stimulus-bundle": {
+        "version": "2.22",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
+        },
+        "files": [
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js"
+        ]
+    },
+    "symfony/twig-bundle": {
+        "version": "7.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.4",
+            "ref": "cab5fd2a13a45c266d45a7d9337e28dee6272877"
+        },
+        "files": [
+            "config/packages/twig.yaml",
+            "templates/base.html.twig"
+        ]
+    },
+    "symfony/ux-icons": {
+        "version": "2.22",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.17",
+            "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
+        },
+        "files": [
+            "assets/icons/symfony.svg"
+        ]
+    },
+    "symfony/web-profiler-bundle": {
+        "version": "7.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.1",
+            "ref": "e42b3f0177df239add25373083a564e5ead4e13a"
+        },
+        "files": [
+            "config/packages/web_profiler.yaml",
+            "config/routes/web_profiler.yaml"
+        ]
+    },
+    "symfonycasts/tailwind-bundle": {
+        "version": "v0.6.1"
+    },
+    "twig/extra-bundle": {
+        "version": "v3.16.0"
     }
 }

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./assets/**/*.js",
+        "./templates/**/*.html.twig",
+    ],
+    plugins: [
+        require("@tailwindcss/forms")
+    ],
+    darkMode: 'class',
+}
+

templates/_partials/_row.html.twig

@@ -0,0 +1,15 @@
+<tr class="border-b">
+    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        {% if file.type == 'dir' %}
+            {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
+        {% else %}
+            {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
+        {% endif %}
+    </th>
+    <td class="px-6 py-4">
+        {{ file.name }}
+    </td>
+    <td class="px-6 py-4">
+        {{ file.size }}
+    </td>
+</tr>

templates/_partials/_table.html.twig

@@ -0,0 +1,36 @@
+<div class="max-w-4xl overflow-x-auto shadow-md sm:rounded-lg ">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+            <th scope="col" class="px-6 py-3" style="width: 5%;">
+
+            </th>
+            <th scope="col" class="px-6 py-3">
+                name
+            </th>
+            <th scope="col" class="px-6 py-3">
+                Size
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for dirContent in content %}
+            {% include '_partials/_row.html.twig' with {file: dirContent} %}
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+
+{{ form_start(fileForm, {'attr': {'data-controller': 'upload-file'}}) }}
+<div class="flex items-center justify-center max-w-4xl mt-5">
+    <label for="upload_file_form_file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+            {{ ux_icon('file:upload', {height: '64px', width: '64px'}) }}
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+        </div>
+        {{ form_widget(fileForm.file) }}
+        <button type="submit" class="hidden"></button>
+    </label>
+</div>
+{{ form_end(fileForm) }}

templates/base.html.twig

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Files | {% block title %}{% endblock %}</title>
+        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+        <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
+        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
+
+        {% block stylesheets %}
+        {% endblock %}
+
+        {% block javascripts %}
+            {% block importmap %}{{ importmap('app') }}{% endblock %}
+        {% endblock %}
+    </head>
+    <body data-turbo="true">
+        {% block body %}{% endblock %}
+    </body>
+</html>

templates/home.html.twig

@@ -0,0 +1,9 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Home{% endblock %}
+
+{% block body %}
+    <center class="container mt-5">
+        {% include '_partials/_table.html.twig' %}
+    </center>
+{% endblock %}