minor #18 Setup ESLint, and lint/format files (Kocal)

This PR was squashed before being merged into the main branch.

Discussion
----------

Setup ESLint, and lint/format files

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Tickets       | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

Hi 👋

We are already using Prettier for the formatting and that's really nice, but using a linter is a must have, especially if it's an open-source project where many people can contribute.

I've configured ESLint (and Prettier) in the root `package.json`, because I saw that Jest were configured in workspaces's `package.json` files, but I can move it in external files if needed.

The ESLint configuration is pretty basic, we extends the recommended configuration and use the [Jest ESLint plugin](https://github.com/jest-community/eslint-plugin-jest#readme).

This PR add 4 new Yarn commands:
- `lint`, run ESLint and fix linting issues
- `format`, run Prettier on `.js`, `.json` and `.md` files, and fix formatting issues
- `check-lint` (for the CI), check if ESLint was run
- `check-format` (for the CI), check if Prettier was run

Each workspaces have a new Yarn command `lint` that will run ESLint locally to the workspace, this way `@babel/eslint-parser` will find the Babel config file used by the workspace, and it won't fail if ESLint was ran in the repository root.

WDYT?
Thanks!

Commits
-------

3716e1c Setup ESLint, and lint/format files

Author: tgalopin

.github/workflows/test.yaml

@@ -20,10 +20,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@master
-            - name: Prettier
-              run: |
-                  yarn global add prettier@^2.2.0
-                  ~/.yarn/bin/prettier --check src/*/Resources/assets/{src,test}/*.js --config .prettierrc.json
+            - run: yarn
+            - run: yarn check-lint
+            - run: yarn check-format
 
     tests-php-low-deps:
         runs-on: ubuntu-latest

.prettierrc.json

@@ -18,8 +18,8 @@ infrastructure.
 This problem is not new: it looks a whole lot like the state of Symfony in PHP
 before Symfony Flex. We need a Symfony Flex equivalent for JavaScript: a tool to
 build amazing User Experiences as quickly as we can now setup
-[an HTTP client](https://symfony.com/doc/current/http_client.html), 
-[a Mailer](https://symfony.com/doc/current/mailer.html) or 
+[an HTTP client](https://symfony.com/doc/current/http_client.html),
+[a Mailer](https://symfony.com/doc/current/mailer.html) or
 [an administration panel](https://symfony.com/doc/current/bundles/EasyAdminBundle/index.html).
 
 **That's Symfony UX.**
@@ -28,24 +28,24 @@ build amazing User Experiences as quickly as we can now setup
 
 # Packages
 
-* [UX Chart.js](https://github.com/symfony/ux-chartjs): 
-  [Chart.js](https://www.chartjs.org/) chart library integration for Symfony
-* [UX Cropper.js](https://github.com/symfony/ux-cropperjs): 
-  [Cropper.js](https://fengyuanchen.github.io/cropperjs/) image cropper library integration for Symfony
-* [UX Dropzone](https://github.com/symfony/ux-dropzone): 
-  File input drag-and-drop zones for Symfony Forms
-* [UX LazyImage](https://github.com/symfony/ux-lazy-image):
-  Improve image loading performances through lazy-loading and data-uri thumbnails
-* [UX Swup](https://github.com/symfony/ux-swup):
-  [Swup](https://swup.js.org/) page transition library integration for Symfony
+-   [UX Chart.js](https://github.com/symfony/ux-chartjs):
+    [Chart.js](https://www.chartjs.org/) chart library integration for Symfony
+-   [UX Cropper.js](https://github.com/symfony/ux-cropperjs):
+    [Cropper.js](https://fengyuanchen.github.io/cropperjs/) image cropper library integration for Symfony
+-   [UX Dropzone](https://github.com/symfony/ux-dropzone):
+    File input drag-and-drop zones for Symfony Forms
+-   [UX LazyImage](https://github.com/symfony/ux-lazy-image):
+    Improve image loading performances through lazy-loading and data-uri thumbnails
+-   [UX Swup](https://github.com/symfony/ux-swup):
+    [Swup](https://swup.js.org/) page transition library integration for Symfony
 
 # Let's build an amazing ecosystem together
 
 Symfony UX is an **initiative**: its aim is to build an ecosystem. To achieve this,
-we need your help: what other packages could we create in Symfony UX? What about a 
-library that automatically adds an [input mask](https://imask.js.org/) to the text 
+we need your help: what other packages could we create in Symfony UX? What about a
+library that automatically adds an [input mask](https://imask.js.org/) to the text
 fields of your Symfony forms? Or the ability to make the `EntityType` render with
-[AJAX auto-completion](https://tarekraafat.github.io/autoComplete.js)? Anything you 
+[AJAX auto-completion](https://tarekraafat.github.io/autoComplete.js)? Anything you
 do in JavaScript could be done streamlined as a UX package.
 
 We have some ideas and we will release more packages in the coming days. The rest

README.md

@@ -1,8 +1,49 @@
 {
     "private": true,
-    "workspaces": ["src/*/Resources/assets"],
+    "workspaces": [
+        "src/*/Resources/assets"
+    ],
     "scripts": {
         "build": "yarn workspaces run build",
-        "test": "yarn workspaces run test"
+        "test": "yarn workspaces run test",
+        "lint": "yarn workspaces run lint --fix",
+        "format": "prettier src/*/Resources/assets/{src,test}/*.js {,src/*/}*.{json,md} --write",
+        "check-lint": "yarn lint --no-fix",
+        "check-format": "yarn format --no-write --check"
+    },
+    "devDependencies": {
+        "@babel/eslint-parser": "^7.12.1",
+        "eslint": "^7.15.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-jest": "^24.1.3",
+        "prettier": "^2.2.1"
+    },
+    "eslintConfig": {
+        "root": true,
+        "parser": "@babel/eslint-parser",
+        "extends": [
+            "eslint:recommended",
+            "prettier"
+        ],
+        "env": {
+            "browser": true
+        },
+        "overrides": [
+            {
+                "files": [
+                    "src/*/Resources/assets/test/*.js"
+                ],
+                "extends": [
+                    "plugin:jest/recommended"
+                ]
+            }
+        ]
+    },
+    "prettier": {
+        "printWidth": 120,
+        "trailingComma": "es5",
+        "tabWidth": 4,
+        "jsxBracketSameLine": true,
+        "singleQuote": true
     }
 }

package.json

@@ -92,8 +92,12 @@ export default class extends Controller {
         console.log(event.detail.chart); // You can access the chart instance using the event details
 
         // For instance you can listen to additional events
-        event.detail.chart.options.onHover = (mouseEvent) => { /* ... */ };
-        event.detail.chart.options.onClick = (mouseEvent) => { /* ... */ };
+        event.detail.chart.options.onHover = (mouseEvent) => {
+            /* ... */
+        };
+        event.detail.chart.options.onClick = (mouseEvent) => {
+            /* ... */
+        };
     }
 }
 ```

src/Chartjs/README.md

@@ -14,7 +14,8 @@
     },
     "scripts": {
         "build": "babel src -d dist",
-        "test": "babel src -d dist && jest"
+        "test": "babel src -d dist && jest",
+        "lint": "eslint src test"
     },
     "dependencies": {
         "chart.js": "^2.9.4"

src/Chartjs/Resources/assets/package.json

@@ -2,7 +2,13 @@
     "name": "symfony/ux-chartjs",
     "type": "symfony-bundle",
     "description": "Chart.js integration for Symfony",
-    "keywords": ["symfony", "ux", "chart", "chart.js", "chartjs"],
+    "keywords": [
+        "symfony",
+        "ux",
+        "chart",
+        "chart.js",
+        "chartjs"
+    ],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [

src/Chartjs/composer.json

@@ -18,7 +18,8 @@
     },
     "scripts": {
         "build": "babel src -d dist",
-        "test": "babel src -d dist && jest"
+        "test": "babel src -d dist && jest",
+        "lint": "eslint src test"
     },
     "dependencies": {
         "cropperjs": "^1.5.9"

src/Cropperjs/Resources/assets/package.json

@@ -2,7 +2,13 @@
     "name": "symfony/ux-cropperjs",
     "type": "symfony-bundle",
     "description": "Cropper.js integration for Symfony",
-    "keywords": ["symfony", "ux", "cropper", "cropper.js", "cropperjs"],
+    "keywords": [
+        "symfony",
+        "ux",
+        "cropper",
+        "cropper.js",
+        "cropperjs"
+    ],
     "homepage": "https://symfony.com",
     "license": "MIT",
     "authors": [

src/Cropperjs/composer.json

@@ -69,7 +69,7 @@ the `@symfony/ux-dropzone/src/style.css` autoimport to `false`:
 }
 ```
 
-> *Note*: you should put the value to `false` and not remove the line so that Symfony Flex
+> _Note_: you should put the value to `false` and not remove the line so that Symfony Flex
 > won't try to add the line again in the future.
 
 Once done, the default stylesheet won't be used anymore and you can implement your own CSS on