@eeacms/volto-accordion-block/DEVELOP.md

volto-accordion-block: Volto accordion block

# volto-accordion-block

## Develop

1. Make sure you have `docker` and `docker compose` installed and running on your machine:

    ```Bash
    git clone https://github.com/eea/volto-accordion-block.git
    cd volto-accordion-block
    git checkout -b bugfix-123456 develop
    make
    make start
    ```

1. Wait for `Volto started at 0.0.0.0:3000` meesage

1. Go to http://localhost:3000

1. Initialize git hooks

    ```Bash
    yarn prepare
    ```

1. Happy hacking!

### Or add @eeacms/volto-accordion-block to your Volto project

Before starting make sure your development environment is properly set.
See [Install](https://6.docs.plone.org/install/).

1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`

        npm install -g yo @plone/generator-volto mrs-developer

1.  Create new volto app

        yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block --skip-install
        cd my-volto-project

1.  Add the following to `mrs.developer.json`:

        {
            "volto-accordion-block": {
                "url": "https://github.com/eea/volto-accordion-block.git",
                "package": "@eeacms/volto-accordion-block",
                "branch": "develop",
                "path": "src"
            }
        }

1.  Install

        make develop
        yarn

1.  Start backend

        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend

    ...wait for backend to setup and start - `Ready to handle requests`:

    ...you can also check http://localhost:8080/Plone

1.  Start frontend

        yarn start

1.  Go to http://localhost:3000

1.  Happy hacking!

        cd src/addons/volto-accordion-block/

## Cypress

To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.

You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
project where you added `volto-accordion-block` to `mrs.developer.json`

Go to:

  ```BASH
  cd src/addons/volto-accordion-block/
  ```

Start:

  ```Bash
  make
  make start
  ```

This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-accordion-block` block installed.

Open Cypress Interface:

  ```Bash
  make cypress-open
  ```

Or run it:

  ```Bash
  make cypress-run
  ```

## Prettier

[Prettier](https://www.npmjs.com/package/prettier) is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it
with its own rules that take the maximum line length into account, wrapping code when necessary.

Run ``prettier`` linter, executing the following command:

  ```bash
  make prettier
  ```

To fix the ``prettier`` warnings, execute the following command:

  ```bash
  make prettier-fix
  ```

---

## Eslint

[ESLint](https://www.npmjs.com/package/eslint) is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

Eslint should run just fine using the setup config from any Volto projects generated by `volto project generator`.

If for some reason that doesn't work, and you need to manually install eslint,
you can also use the following steps to install eslint.

For installing ``eslint``, execute the following command:

  ```bash
  yarn add --dev eslint eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-flowtype
  ```

For setting up ``eslint``, execute the following command:

  ```bash
  cp .project.eslintrc.js .eslintrc.js
  ```

Run ``eslint``, executing the following command:

  ```bash
  make lint
  ```

To fix the problems found by ``eslint``, execute the following command:

  ```bash
  make lint-fix
  ```

---

## Stylelint

[Stylelint](https://www.npmjs.com/package/stylelint) is a mighty CSS linter that helps you avoid errors and enforce conventions.

For installing ``stylelint``, execute the following command:

  ```bash
  yarn add --dev stylelint
  ```

To run ``stylelint``, execute the following command:

  ```bash
  make stylelint
  ```

If you need to run ``stylelint`` on styles found in .overrides files, execute the following command:

  ```bash
  make stylelint-overrides
  ```

To auto fix the found issues by ``stylelint``, execute the following command:

  ```bash
  make stylelint-fix
  ```


## Internationalization (i18) and localization (l10n)

See [Internationalization](https://6.docs.plone.org/volto/development/i18n.html) and [Translate Volto](https://6.docs.plone.org/i18n-l10n/contributing-translations.html#translate-volto).