Feat: start new front

.env.example

@@ -0,0 +1 @@
+AUTOUPGRADE_DEV_WATCH_MODE=0

.github/workflows/build-release.yml

@@ -20,10 +20,22 @@ jobs:
       - name: Install composer dependencies
         run: composer install --ansi --prefer-dist --no-interaction --no-progress --no-dev
 
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Install and build npm dependencies
+        run:
+          npm install --prefix ./_dev
+          npm run vite:build --prefix ./_dev
+
       - name: Clean-up project
         uses: PrestaShopCorp/[email protected]
         with:
-          paths: storybook
+          paths:
+            - storybook
+            - _dev
 
       - name: Create & upload artifact
         uses: actions/[email protected]

.github/workflows/js.yml

@@ -0,0 +1,29 @@
+name: JS tests
+on: [push, pull_request]
+concurrency:
+  group: ${{ github.event_name }}-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  js-linter:
+    name: JS linter syntax check
+    runs-on: unbuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Install npm dependencies
+        run:
+          npm install --prefix ./_dev
+
+      - name: Launch typescript linter
+        run:
+          npm run lint --prefix ./_dev
+
+      - name: Launch scss linter
+        run:
+          npm run lint-scss --prefix ./_dev

.gitignore

@@ -1,9 +1,11 @@
 nbproject
 
 vendor/
+node_modules/
 /config_*.xml
 .php_cs.cache
 .idea
+.env
 
 ## QA Nightly
 /artifacts

README.md

@@ -28,7 +28,8 @@ Please note PrestaShop 1.6 and older are not maintained anymore.
 ## Prerequisites
 
 * PrestaShop 1.7 or 8
-* PHP 7.1+
+* PHP >= 7.1
+* Node.js >= 20 - [Download Node.js](https://nodejs.org/) (preference for LTS 20.11.0)
 
 ## Installation
 
@@ -40,6 +41,7 @@ If you download a ZIP archive that contains the source code or if you want to us
 
 * Clone (`git clone https://github.com/PrestaShop/autoupgrade.git`) or [download](https://github.com/PrestaShop/autoupgrade/archive/master.zip) the source code. You can also download a release **Source code** ([ex. v4.14.2](https://github.com/PrestaShop/autoupgrade/archive/v4.14.2.zip)). If you download a source code archive, you need to extract the file and rename the extracted folder to **autoupgrade**
 * Enter into folder **autoupgrade** and run the command `composer install`  ([composer](https://getcomposer.org/)).
+* Enter into folder **autoupgrade/_dev** and run the commands `npm install` and `npm run build:vite` ([npm](https://docs.npmjs.com/)).
 * Create a new ZIP archive from the of **autoupgrade** folder.
 * Now you can install it in your shop. For example, you can upload it using the dropzone in Module Manager back office page. 
 
@@ -91,6 +93,38 @@ The [Storybook folder](/storybook) contains a project allowing you to use Storyb
 
 More information on the project [README](/storybook/README.md).
 
+## Linting and Testing
+
+This section outlines all the commands for code linting and testing. Before running these, ensure you've followed the project setup steps and installed all dependencies.
+
+### Backend
+
+All backend commands should be executed from the root directory.
+
+- `./tests/phpstan/phpstan.sh [version]` ⮕ Runs **PHPStan**, a tool for static code analysis to identify potential errors in your PHP code (requires running a `composer install` in the `tests` folder). Available version options:
+    - `1.7.2.5`
+    - `1.7.3.4`
+    - `1.7.4.4`
+    - `1.7.5.1`
+    - `1.7.6`
+    - `1.7.7`
+    - `1.7.8`
+    - `8.0.0`
+    - `latest`
+
+- `./vendor/bin/phpunit ./tests/unit/` ⮕ Runs **PHPUnit**, a framework for running unit tests on your PHP code. You can modify the path to target specific test files.
+
+- `./vendor/bin/php-cs-fixer` ⮕ Runs **PHP CS Fixer**, a tool that ensures your PHP code follows the correct coding standards. Add the `fix` option to automatically resolve fixable style issues.
+
+### Frontend
+
+All frontend commands should be executed from the `_dev` directory.
+
+- `npm run lint` ⮕ Runs **ESLint** and **Prettier** to perform static code analysis and automatic formatting of your JavaScript code. Add `:fix` to the command to automatically fix fixable issues.
+
+- `npm run lint-scss` ⮕ Runs **Stylelint** to lint and format your SCSS files. You can append `:fix` to automatically resolve solvable formatting issues.
+
+
 ## Contributing
 
 PrestaShop modules are open source extensions to the [PrestaShop e-commerce platform][prestashop]. Everyone is welcome and even encouraged to contribute with their own improvements!

_dev/.prettierrc

@@ -0,0 +1,19 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "printWidth": 100,
+        "tabWidth": 2,
+        "useTabs": false,
+        "singleQuote": false,
+        "bracketSpacing": true,
+        "parser": "scss"
+      }
+    }
+  ]
+}

_dev/.stylelintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: '@prestashopcorp/stylelint-config',
+  rules: {
+    'comment-empty-line-before': null,
+    'no-unknown-animations': null,
+    'scss/at-import-no-partial-leading-underscore': null
+  }
+};

_dev/eslint.config.mjs

@@ -0,0 +1,51 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslintPlugin from '@typescript-eslint/eslint-plugin';
+import tseslintParser from '@typescript-eslint/parser';
+import eslintPluginPrettier from 'eslint-plugin-prettier';
+import globals from 'globals';
+
+export default [
+  eslint.configs.recommended,
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      },
+      parser: tseslintParser,
+      parserOptions: {
+        project: './tsconfig.json'
+      }
+    },
+    plugins: {
+      '@typescript-eslint': tseslintPlugin
+    },
+    rules: {
+      ...tseslintPlugin.configs.recommended.rules
+    }
+  },
+  {
+    plugins: {
+      prettier: eslintPluginPrettier
+    },
+    rules: {
+      ...eslintPluginPrettier.configs.recommended.rules
+    }
+  }
+];