From 3716e1cb97b1004e5fa9150508d4493a7e96add0 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 5 Dec 2020 22:16:02 +0100 Subject: [PATCH] Setup ESLint, and lint/format files --- .github/workflows/test.yaml | 7 ++-- .prettierrc.json | 7 ---- README.md | 30 +++++++------- package.json | 45 ++++++++++++++++++++- src/Chartjs/README.md | 8 +++- src/Chartjs/Resources/assets/package.json | 3 +- src/Chartjs/composer.json | 8 +++- src/Cropperjs/Resources/assets/package.json | 3 +- src/Cropperjs/composer.json | 8 +++- src/Dropzone/README.md | 2 +- src/Dropzone/Resources/assets/package.json | 3 +- src/Dropzone/composer.json | 6 ++- src/LazyImage/README.md | 10 ++--- src/LazyImage/Resources/assets/package.json | 3 +- src/LazyImage/composer.json | 6 ++- src/Swup/Resources/assets/package.json | 3 +- src/Swup/composer.json | 6 ++- 17 files changed, 112 insertions(+), 46 deletions(-) delete mode 100644 .prettierrc.json diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index bb0d954fa8e..00039549785 100644 --- a/.github/workflows/test.yaml +++ b/.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 diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index cfa381f1481..00000000000 --- a/.prettierrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "printWidth": 120, - "trailingComma": "es5", - "tabWidth": 4, - "jsxBracketSameLine": true, - "singleQuote": true -} diff --git a/README.md b/README.md index c54012467af..32c0e463492 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/package.json b/package.json index a36b92f66cb..cf4eb51832d 100644 --- a/package.json +++ b/package.json @@ -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 } } diff --git a/src/Chartjs/README.md b/src/Chartjs/README.md index 10fc38db830..73ab613610c 100644 --- a/src/Chartjs/README.md +++ b/src/Chartjs/README.md @@ -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) => { + /* ... */ + }; } } ``` diff --git a/src/Chartjs/Resources/assets/package.json b/src/Chartjs/Resources/assets/package.json index 2e8eb00d78d..be3882525ff 100644 --- a/src/Chartjs/Resources/assets/package.json +++ b/src/Chartjs/Resources/assets/package.json @@ -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" diff --git a/src/Chartjs/composer.json b/src/Chartjs/composer.json index 8fd9d30f460..3170141ca4b 100644 --- a/src/Chartjs/composer.json +++ b/src/Chartjs/composer.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": [ diff --git a/src/Cropperjs/Resources/assets/package.json b/src/Cropperjs/Resources/assets/package.json index f3598aa107e..cda3f556184 100644 --- a/src/Cropperjs/Resources/assets/package.json +++ b/src/Cropperjs/Resources/assets/package.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" diff --git a/src/Cropperjs/composer.json b/src/Cropperjs/composer.json index 21460e255fe..704c40045a1 100644 --- a/src/Cropperjs/composer.json +++ b/src/Cropperjs/composer.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": [ diff --git a/src/Dropzone/README.md b/src/Dropzone/README.md index abd528a04c8..1683bf23807 100644 --- a/src/Dropzone/README.md +++ b/src/Dropzone/README.md @@ -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 diff --git a/src/Dropzone/Resources/assets/package.json b/src/Dropzone/Resources/assets/package.json index d980fc56008..40d98ca8faf 100644 --- a/src/Dropzone/Resources/assets/package.json +++ b/src/Dropzone/Resources/assets/package.json @@ -17,7 +17,8 @@ }, "scripts": { "build": "babel src -d dist", - "test": "babel src -d dist && jest" + "test": "babel src -d dist && jest", + "lint": "eslint src test" }, "peerDependencies": { "stimulus": "^2.0.0" diff --git a/src/Dropzone/composer.json b/src/Dropzone/composer.json index 83e832ed24b..44a1d44b7e9 100644 --- a/src/Dropzone/composer.json +++ b/src/Dropzone/composer.json @@ -2,7 +2,11 @@ "name": "symfony/ux-dropzone", "type": "symfony-bundle", "description": "File input dropzones for Symfony Forms", - "keywords": ["symfony", "ux", "dropzone"], + "keywords": [ + "symfony", + "ux", + "dropzone" + ], "homepage": "https://symfony.com", "license": "MIT", "authors": [ diff --git a/src/LazyImage/README.md b/src/LazyImage/README.md index be0244c5852..6fb4804b960 100644 --- a/src/LazyImage/README.md +++ b/src/LazyImage/README.md @@ -5,8 +5,8 @@ image loading performance. It is part of [the Symfony UX initiative](https://sym It provides two key features: -* a Stimulus controller to load lazily heavy images, with a placeholder -* a [BlurHash implementation](https://blurha.sh/) to create data-uri thumbnails for images +- a Stimulus controller to load lazily heavy images, with a placeholder +- a [BlurHash implementation](https://blurha.sh/) to create data-uri thumbnails for images ## Installation @@ -57,9 +57,9 @@ the BlurHash algorithm to create a light, blurred, data-uri thumbnail of the ima The `data_uri_thumbnail` function receives 3 arguments: -* the server path to the image to generate the data-uri thumbnail for ; -* the width of the BlurHash to generate -* the height of the BlurHash to generate +- the server path to the image to generate the data-uri thumbnail for ; +- the width of the BlurHash to generate +- the height of the BlurHash to generate You should try to generate small BlurHash images as generating the image can be CPU-intensive. Instead, you can rely on the browser scaling abilities by generating a small image and using the diff --git a/src/LazyImage/Resources/assets/package.json b/src/LazyImage/Resources/assets/package.json index a7aa3e0b62f..fd5bb06fe00 100644 --- a/src/LazyImage/Resources/assets/package.json +++ b/src/LazyImage/Resources/assets/package.json @@ -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" }, "peerDependencies": { "stimulus": "^2.0.0" diff --git a/src/LazyImage/composer.json b/src/LazyImage/composer.json index 0f7b896943d..2455e7d5dfb 100644 --- a/src/LazyImage/composer.json +++ b/src/LazyImage/composer.json @@ -2,7 +2,11 @@ "name": "symfony/ux-lazy-image", "type": "symfony-bundle", "description": "Lazy image loader and utilities for Symfony", - "keywords": ["symfony", "ux", "dropzone"], + "keywords": [ + "symfony", + "ux", + "dropzone" + ], "homepage": "https://symfony.com", "license": "MIT", "authors": [ diff --git a/src/Swup/Resources/assets/package.json b/src/Swup/Resources/assets/package.json index b32b8ceb7d2..b683ce347c4 100644 --- a/src/Swup/Resources/assets/package.json +++ b/src/Swup/Resources/assets/package.json @@ -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": { "@swup/fade-theme": "^1.0", diff --git a/src/Swup/composer.json b/src/Swup/composer.json index aab78296a4b..102e111dce5 100644 --- a/src/Swup/composer.json +++ b/src/Swup/composer.json @@ -2,7 +2,11 @@ "name": "symfony/ux-swup", "type": "symfony-bundle", "description": "Swup integration for Symfony", - "keywords": ["symfony", "ux", "swup"], + "keywords": [ + "symfony", + "ux", + "swup" + ], "homepage": "https://symfony.com", "license": "MIT", "authors": [