npm package: @kni143/r4e-ui-core
Description: reputation.com UI core components for business applications
Author: r4e-ui team
Latest version: 1.0.5

# r4e-ui-core

r4e web ui core components

Core components used across r4e-ui and r4e-ui-public

## tools

- git 2.0.1 (scm)
- node 16.13.0 (server)
- npm 8.1.0 (server/build dependencies)
- bower 1.8.2 (client dependencies)
- grunt-cli 1.2.0 (build)
- grunt 1.0.3
- karma-cli 0.0.4 (test)
- karma 0.12.1
- less (css preprocessor)

## frameworks

- jquery
- bootstrap
- angular
- angular-ui-bootstrap

## setup

Ensure that you have finished the Frontend Dev Setup: "Install What You Need" section before continuing:
https://docs.google.com/document/d/1PhPqma9G711h2LpAMcDi4Ou9EzmvhCpxl9dumGXLuIM/edit?usp=sharing
(If the link doesn't work, the doc was last titled "Frontend Dev Setup and Extras" on Jun 8, 2018. Or ask another front end developer if you can't find it).

1. clone this repo
   - `git clone git@github.com:reputation/r4e-ui-core`
2. install server/build dependencies
   - `cd {project-root}; npm ci`
3. install client dependencies
   - `bower install`
4. set up log directory
   - `sudo mkdir /reputation/var/log/r4e-ui-core` (chown user/group to your user/group)
5. configure environment
   - `cd {project-root}; cd config; ln -s {env-branch}.conf.json conf.json;`
   - OR copy and paste contents of an {env-branch}.conf.json file and paste it in a new `conf.json` file within the `config` folder.
6. run app
   - `cd {project-root}; grunt`
7. view app
   - `open http://localhost:8080`

## tasks

#### DEV

- **grunt** - serves up demo app, watches for source changes and executes tests/lints js files
- **grunt serve:dev** - serves up demo app using individual component files
- **grunt build** - generates library files under `{project-root}/dist`

#### DIST

- **grunt dist** - generates library files and updates demo app to use them under `{project-root}/dist`
- **grunt serve:dist** - serves up demo app using generated library files

#### TEST ONCE

- **grunt test** - executes tests once

#### TEST CONTINUOUS

- **grunt serve:test** - continuously watches source changes and executes tests

#### TEST COVERAGE

- **grunt test:coverage** - generates test coverage reports under `{project-root}/coverage`

## structure

- **/app**
- **/lib** - dependencies
- **/src** - components source and test
- **/demo** - components demo page
- **/rsrc** - resources
- **/dist**
- generated r4e-ui-core css/js library files and r4econs

## font icon

To update r4econs:

1.  Ask the designer to generate a svg version of new icon(s).
2.  Go to http://fontello.com.
3.  Drag and drop {project-root}/app/rsrc/fontello/config.json into the 'custom icons' section. This is the current r4econs set.
4.  Drag and drop the new icon(s) into the 'custom icons' section.
5.  Click on 'Customize Names' and make sure the new icon(s) follow the same naming pattern.

- **Important**: Some customers disable custom fonts, so we need to gracefully degrade. Please make sure and set the code point/default code for each icon. Some helpful sites which aid in finding defaults:
  - http://shapecatcher.com/
  - http://graphemica.com/
  - http://jrgraphix.net/r/Unicode/
  - http://apps.timwhitlock.info/emoji/tables/unicode

6.  Click on 'Download webfont' on the top right.
7.  Unzip downloaded file and copy directory to {project-root}/app/rsrc/fontello.
8.  Copy {project-root}/app/rsrc/fontello/font/\* to {project-root}/app/src/fonts.
9.  Open {project-root}/app/rsrc/fontello/css/r4econs.css and copy the @font-face rule to {project-root}/app/src/icon/icon.less. (Change "font" to "fonts").
10. Open {project-root}/app/rsrc/fontello/css/r4econs-codes.css and add the new icon code(s) to {project-root}/app/src/icon/icon.less.
11. Add the new icon(s) to the "DemoIconController" in {project-root}/app/demo/index.js.
12. Copy {project-root}/app/rsrc/fontello/font/\* to {project-root}../r4e-ui2/src/core/font.
13. Copy {project-root}/app/rsrc/fontello/css/r4econs.css to {project-root}../r4e-ui2/src/core/icon/Icon.scss. (Make sure L32, L45 icon margins are commented out)
14. Add the new icon(s) to {project-root}../r4e-ui2/src/core/icon/Icons.ts.

## guidelines

general

- always specify _exact_ versions of libraries

styles

- indentation of 4 spaces
- namespace modules with r4e.core ex. 'r4e.core.rating'
- prefix directives and class names with r4e ex. r4eRating, .r4e-rating
- prefer using directives as attributes over elements to be compatible with ie8 (without any extra decorations)

structure

- everything related to a component (including tests) live in its own directory under /src