filtr-admin
===========

- https://apollo.localhost:2000
- https://dev.apollo.stream
- https://qa.apollo.stream
- https://staging.apollo.stream
- https://uat.apollo.stream
- https://apollo.stream

## Prerequisites
- Install [Node.js](https://nodejs.org) v10.15.3
- Install [Yarn](https://yarnpkg.com) v1.15.2

## Setup
Copy `.env.shadow` to `.env` and fill in variables

Install dependencies by running

**VPN should be "On" when installing packages, to access resources from private registry**

```bash
yarn install
```

Import certificate `certificates/wildcard-apollo-localhost-cert.pem` into your OS's certificate store

Add `apollo.localhost` to your `/etc/hosts` file

## Switch to develop branch

Switch to develop branch via WebStorm UI or git CLI or with some other tool.

## Run build script

```yarn
yarn run build
```

## Starting app on local environment

### Option 1: Run only dev script to start Node server with App UI

```bash
yarn run dev
```

### Option 2: Generate Docs, start dev script with Node server, open Docs and App in new browser tabs

```bash
yarn run locoal
```

Open [https://apollo.localhost:2000](https://apollo.localhost:2000/)

## Work with Emotion css

Emotion has specific feature: it join classes with duplicated styles into one and applies it across the portal.
Sometimes, it can cause a problem with styles order in DOM, last styles in order have higher priority.
To avoid this situation, you can add extra styles to differentiate your class from others.

Existing Class A: css({
fontSize: "12px",
})

Existing Class B: css({
fontSize: "14px",
lineHeight: "20px",
display: "block"
})

Additional Class C: css({
fontSize: "12px",
})

RESULT IN DOM:
class="class A+B"

.....
RESULT GENERATED BY EMOTION:
class A
class B
....

Workaround:
Existing Class A: css({
fontSize: "12px",
})

Existing Class B: css({
fontSize: "14px",
lineHeight: "20px",
display: "block"
})

Additional Class C: css({
fontSize: "12px",
lineHeight: "20px",
})

RESULT IN DOM:
class="class A+C"

.....
RESULT GENERATED BY EMOTION:
class A
class B
class C
....

## Working with Juno email templates

HEML preprocessor is used for HTML Email markup that allows to write semantic, maintainable, and modular email templates
using a syntax that is similar to HTML.

Basic steps to work with HEML files are:

1. Install HEML using `yarn` by running the command `yarn add heml` in the terminal.
2. Create/Open a HEML file with the extension .heml and start writing HEML code in it.
3. Compile HEML to HTML by using the command `heml build <input-file> -o <output-file>` in the terminal.
4. Open the HTML file in browser to verify markup
5. Remove HEML package using `yarn remove heml`

**Do not commit `heml` package to the `package.json`**

Juno email templates are located at `/static/juno-email/`.
To modify template, modify `.heml` file, and compile it to `.html` file with steps defined above.
Commit changes in `.heml` and built `.html` files.

**Do not forget to notify BE team to reflect these changes on their side**

## Generate utils documentation
All utils in the project should be documented with JSDoc.

To browse existing documentation run `yarn run dev` and open [https://apollo.localhost:9000/docs](https://apollo.localhost:9000/docs).

To rebuild documentation use `yarn run generate-docs`