
Library name:       riojaui
Version:            1.0.0
Repository URL:     
License:            UNLICENSED
License Text:       # Rioja UI (aka new-newUI-2017)

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

The aim is to generate a simple bundle containing all the logic for the UI part using React, Redux, etc.

## Commands

* **npm install**: will install all the required dependencies to work, it's part of the server plugin lifecycle (See pom.xml)
* **npm run build (PRODUCTION)**: will generate production specific bundles (minimized, optimized, etc), both main and vendor,
and will copy into `/src/main/resources/templates/dist/riojaui`... executed at any time and refreshing the browser allows a real
production integration taste of the application
* **npm run build:vendor (PRODUCTION)**: will regenerate JUST the vendor build (it should not be necessary unless it changes, once
it was generated for the first time)
* **npm run build:main (PRODUCTION)**: will regenerate JUST the main build without touching vendor one
* **npm run watch:vendor (DEVELOPMENT)**: will watch the vendor bundle waiting for changes, bundle will be generated in dev mode
* **npm run watch:main (DEVELOPMENT)**: will watch the main bundle waiting for changes, bundle will be generated in dev mode...
this is the fastest method to develop, just watch it -> change code -> reload the browser
* **npm run profile:vendor (DEVELOPMENT)**: will display a size-map to see all packages and sizes for vendor bundle
* **npm run profile:main (DEVELOPMENT)**: will display a size-map to see all packages and sizes for main bundle


## Development lifecycle

We'll start **Confluence server** to serve the backend and host the plugin environment, this env will trigger the production build (see
later), installing rioja's dependencies, packaging a production bundle and serve iframes by itself

Besides this env, for dev purposes we have seveal tools, use them where needed:

### Dev MODE

`npm run watch:main` will be enough... check it stays watching files and it rebuilds the bundle (in develop mode, not compressed, etc) after a change


### Prod MODE

`npm run build` will generate a ready-for-production build (it'll take a while)

The advantages of a production bundle are:

* Way smaller: minified, optimised, etc.

## i18n

**Please don't add plain strings into your component**

How to add i18n capabilities to a Component that requires it:

* Add the import for the i18n hoc: `import { withTranslation } from 'react-i18next'`
* Decorate your component with the hoc: `export default withTranslation()(MyComponent)`, this will mean it'll be injected the translation function `t` as a prop as usual
* Grab it and use it:

```
<div>
    {t('Byline.addReviewer')}
</div>
```

* Add the keys to the files located in: `<rioja-path>/i18n/XX.properties`
* Note there's support for parameters, plurals, etc (you can check https://www.i18next.com/)

Conventions used for keys (opinionated):

* Separated using a prefix from the "app"/folder the components belong to (ex. Byline.*, Workflow.*, Tasks.*, etc.)
* Used properties files to mimic Java ones... but parsed by us at `<rioja-path>/i18n/langs.js`, so support may be limited, good news is in case of error, we can add more code

## storybook

Serves to explore and test UI components.

To install:
  $ cd rioja-ui
  $ npm i

And run command:
  $ npm run storybook

Access storybook via browser:
  http://localhost:9001/

Stories files are found at /workflows-ui/stories/

## Troubleshooting

* **My i18n bundle files does not exist**: remember you need a main mvn build to generate those resources in its place ./i18n, before that, they won't be there and npm build will crash
