# {{pluginName}}

<div align="center">

[![CD Release tag pipeline](https://github.com/KoRoHandelsGmbH/{{pluginName}}/actions/workflows/cd-release-pipeline.yaml/badge.svg)](https://github.com/KoRoHandelsGmbH/{{pluginName}}/actions/workflows/cd-release-pipeline.yaml) [![CD Pipeline](https://github.com/KoRoHandelsGmbH/{{pluginName}}/actions/workflows/cd-develop-pipeline.yaml/badge.svg)](https://github.com/KoRoHandelsGmbH/{{pluginName}}/actions/workflows/cd-develop-pipeline.yaml)

![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg) ![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square) ![js linting: eslint](https://img.shields.io/badge/js_liniting-eslint-6358D4?style=flat-square) ![css/scss linting: stylelint](https://img.shields.io/badge/css/scss_linting-stylelint-000?style=flat-square)

</div>

## Installation

In your Shopware installation, head over to the folder `custom/plugins/` and clone the repository:

```bash
git clone git@github.com:KoRoHandelsGmbH/{{pluginName}}.git {{pluginName}}
```

Next up, update the plugin list and install the theme plugin:

```bash
bin/console plugin:refresh
bin/console plugin:install --activate {{pluginName}}
```

## Code quality tools set up & configuration

In this project we're using Prettier as the main formatter for the source code and extended it with the following
linters:

* ESLint
* Stylelint
* Twig Melody

### PhpStorm setup

Unfortunately setting up the code quality tools in PhpStorm isn't a one-click configuration. You have to configure the
different tools accordingly.

#### Requirements

Before we can set up the different tools, we have to point PhpStorm to the Node.js interpreter. Please follow this
guide:
[https://www.jetbrains.com/help/phpstorm/developing-node-js-applications.html#ws_node_configure_local_node_interpreter](https://www.jetbrains.com/help/phpstorm/developing-node-js-applications.html#ws_node_configure_local_node_interpreter)

#### Prettier configuration

Starting with Prettier, we have to install the PhpStorm extension
first: [https://plugins.jetbrains.com/plugin/10456-prettier](https://plugins.jetbrains.com/plugin/10456-prettier)

Next up, go to Preferences/Settings | Languages & Frameworks | JavaScript | Prettier. Now select the prettier package
which is located within the theme
under `custom/plugins/{{pluginName}}/src/Resources/app/storefront/node_modules/prettier`.

Use the following glob for the setting "Run for files": `{**/*,*}.{js,ts,jsx,tsx,scss,sass,twig}`

To run Prettier on save, tick the "Run on save for files" and "On code reformat".

#### ESLint configuration

As usual, we need the ESLint plugin which can be installed from
here: [https://plugins.jetbrains.com/plugin/7494-eslint](https://plugins.jetbrains.com/plugin/7494-eslint).

Next up, go to Preferences/Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.

Check the radio box "Automatic configuration" and tick the checkbox "Run eslint --fix on save".

#### Stylelint configuration

PhpStorm comes bundled with a Stylelint plugin. To configure it go to Preferences/Settings | Languages & Frameworks |
Style Sheets | Stylelint.

Inside the Stylelint settings, tick the checkbox "Enable" and set the package location which is
under: `custom/plugins/{{pluginName}}/src/Resources/app/storefront/node_modules/stylelint`

Next up, set the configuration file which is located
under: `custom/plugins/{{pluginName}}/src/Resources/app/storefront/stylelint.config.js`.

Unlike the configurations of Prettier & ESLint the Stylelint plugin configuration doesn't have a checkbox "Run on save".
A workaround is setting up a file watcher.

Head over to Preferences/Settings | Tools | File Watcher.

Add a new File Watcher using the "+" button and choose the following settings:

- File type: SCSS style sheet
- Scope: Project files
- Program: npm
- Arguments: run fix-styles
- Auto-save edited files to trigger the watcher

## Github Actions

The repository uses Github Actions as pipelines. We're having the following pipelines:

* CD Pipeline (Branch `develop`)
   * Runs when a pull request got closed & merged.
   * It builds plugin zip file and pushes the `develop` to the development cluster.
* CD Release tag pipeline
  * Runs when a new tag got pushed
  * It deploys the tag to the live enviroment. Please keep in mind, the Shopware cache will not be cleared. Cause it would end the session of our customers.
* Automatic assign author
  * Runs when a PR got opened or reopened
  * It automatically assigns PR creator as author
* PR Pipeline (Branch `develop`)
  * Runs when a pull requests with target branch `develop`
  * Checks all commit messages and branch name to match our convention
* PR Code Quality pipelines
  * Runs when a PR gets created with `develop` as target branch
  * It checks the JavaScript code style using ESLint, CSS/SCSS code style using StyleLint and PHP code style using Easy Coding standards.

## License

Licensed under MIT

Copyright (c) 2020-present [Koro Handels GmbH](https://github.com/KoRoHandelsGmbH/)