Modernise frontend code

.babelrc.js

@@ -0,0 +1,18 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/*
+ * DO NOT EDIT THIS FILE!
+ *
+ * It's auto-generated by sonata-project/dev-kit package.
+ */
+
+module.exports = {
+  presets: ['@babel/preset-env'],
+};

.eslintrc.js

@@ -0,0 +1,41 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/*
+ * DO NOT EDIT THIS FILE!
+ *
+ * It's auto-generated by sonata-project/dev-kit package.
+ */
+
+module.exports = {
+  parser: '@babel/eslint-parser',
+  extends: ['airbnb-base', 'prettier'],
+  env: {
+    browser: true,
+    jquery: true,
+  },
+  plugins: ['header'],
+  rules: {
+    'header/header': [
+      2,
+      'block',
+      [
+        '!',
+        ' * This file is part of the Sonata Project package.',
+        ' *',
+        ' * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>',
+        ' *',
+        ' * For the full copyright and license information, please view the LICENSE',
+        ' * file that was distributed with this source code.',
+        ' ',
+      ],
+      2,
+    ],
+  },
+};

.github/workflows/frontend.yaml

@@ -0,0 +1,49 @@
+# DO NOT EDIT THIS FILE!
+#
+# It's auto-generated by sonata-project/dev-kit package.
+
+name: Frontend
+
+on:
+    schedule:
+        - cron: '30 0 * * *'
+    push:
+        branches:
+            - 4.x
+    pull_request:
+
+permissions:
+    contents: read
+
+jobs:
+    webpack-encore:
+        name: Webpack Encore
+
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '16'
+
+            - name: Install NPM dependencies
+              uses: bahmutov/npm-install@v1
+
+            - name: Run Eslint
+              run: npx eslint assets/js
+
+            - name: Run Stylelint
+              run: npx stylelint assets/scss
+
+            - name: Run Prettier
+              run: npx prettier --check assets
+
+            - name: Run Webpack Encore
+              run: npx encore production
+
+            - name: Check if the compilation is up to date
+              run: git diff --no-patch --exit-code src/**/Resources/public

.prettierignore

@@ -0,0 +1 @@
+assets/vendor

.stylelintrc.js

@@ -0,0 +1,27 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+/*
+ * DO NOT EDIT THIS FILE!
+ *
+ * It's auto-generated by sonata-project/dev-kit package.
+ */
+
+module.exports = {
+  customSyntax: 'postcss-scss',
+  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  plugins: ['stylelint-scss', 'stylelint-order'],
+  rules: {
+    'at-rule-no-unknown': null,
+    'scss/at-rule-no-unknown': true,
+    'order/order': ['custom-properties', 'declarations'],
+    'order/properties-alphabetical-order': true,
+    'selector-class-pattern': null,
+  },
+};

UPGRADE-4.0.md

@@ -38,3 +38,9 @@ The following code has been removed since it is not used:
 
 * `Sonata\PageBundle\Controller\AjaxController`
 * `Sonata\PageBundle\Controller\BlockController`
+
+## Migration to Webpack
+
+Please check the src/Resources/public and the documentation to see the used CSS and JavaScript.
+
+If you are customising (specially removing standard JavaScript or CSS) assets, this will affect you.

assets/js/app.js

@@ -0,0 +1,18 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+// Any SCSS/CSS you require will output into a single css file (app.css in this case)
+import '../scss/app.scss';
+
+// Only using droppable widget from jQuery UI library
+import 'jquery-ui/ui/widgets/droppable';
+
+// SonataPage custom scripts
+import './composer';
+import './treeview';