# astronomix

[![npm version](https://badge.fury.io/js/%40simply-fin-services%2Fastronomix.svg)](https://badge.fury.io/js/%40simply-fin-services%2Fastronomix)

## Environment

Use Node 8.

### Install via npm

* Install React version 16.x
* `npm install @simply-fin-services/astronomix --save**
* astronomix assumes you have a bundler like webpack setup. You will require
  * sass-loader: example <https://github.com/insin/nwb-sass/blob/master/index.js>
  * less-loader: example <https://github.com/insin/nwb-less/blob/master/index.js>
    * note you need to set 'javascriptEnabled' as true for less version 3

### Install via UDM

* Install React version 16.x
* Include the relevant js and css files from <https://unpkg.com/@simply-fin-services/astronomix@0.1.34/umd/>. Remember to specify the correct version.

## Bad dependency versions

Watch out! Deployment will fail.

> Read up about [semantic versioning](https://docs.npmjs.com/about-semantic-versioning) and what's the [difference](https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json?rq=1) between the tilde `~` and caret `^` in `package.json`.

[version.js](./tools/version.js) will detect **bad versions** by iterating through dependencies within [package.json](./package.json).

Bad versions are **compatibility** versions which start with a caret `^`. Eg. `^1.0.0`.

This failure step was introduced to avoid automatic version incrementing as all future minor/patch versions will be applied without incrementing to the major version. Therefore `^2.3.4` will use releases from `2.3.4` to `<3.0.0`. This can cause unwanted pain due to unforeseen changes with minor/patch releases.

Again. Watch out! Deployment will fail.

# Adding new themes

See "/src/themes/AddingNewThemes.md";

# Development

This library is based if <https://github.com/insin/nwb> react-component. See documentation for details.

`npm run start` will start the development server and load the Demo application that is found in the demo folder.

Use the demo app to test components as well as to explain their usage. The Demo app will be deployed to gitlab pages.

Latest version: <https://simplyfinservices.gitlab.io/astronomix>

Components can also be described using [StoryBook](https://storybook.js.org/basics/writing-stories/)

`npm run storybook` will start the storybook dev environment

Latest version: <https://simplyfinservices.gitlab.io/astronomix/stories>

### Components

Components are defined with their styles in their own folders inside of src. Once a component is completed be sure to export it from src/index.js.

- MyButton
  - index.js
  - style.scss

### Styles

Component specific styles should be added in the components folder. More generic style changes can be added in the src/styles folder. Remember that variables are good and should be specified and included from the variables.less.

The Ant.Design theme can be changed in the ant.less file.

### Todo List

_DEV_

* when happy with the process only deploy tags to gitlab pages

_OPTIMIZATIONS_

* update readme for consuming styles
* shrink and minifiy css and all the related things

_DEPLOY_

* consume with antizer like cljs
* build base containers for super fast deploys


# Deploying

Once you are ready to deploy a new version you should do the following

1. npm version patch|minor|major  (this will bump the version and tag the build)
2. npm run deploy  (this will push the new version tag to gitlab resulting in a new npm build and a deployment to github pages)


[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/simply-astronomix

# Test your feature

`npm run deploy:feature`

* Verifies that the package dependencies are valid.
* A patch version will be created and branch tagged.
* The latest commit with its tag will be pushed to origin.
* Gitlab will build and deploy the package to npm and then to unpkg.


* Check on [gitlab](http://gitlab.com/SimplyFinServices/astronomix) on your branch/MR. The build pipeline will publish to NPM.

* Install new version on your app.


# Testing locally on different apps

Instead of deploying a pre-release and hosting, the necessary files can be copied to the
appropriate apps. Have a look at some existing scripts:

`npm run cp:tenandsix`, `npm run cp:suffix` and `npm run cp:asterix`

## Add new apps

> Follow the `cp` naming standard which stands for copy.

* Build astro.
* Identify where the files reside in the app.
* Delete these files. (it's okay because they are in git)
* Copy the necessary files across to the app. (eg just the umd directory)
* Make sure the directories follow the expected naming convention.

## Troubleshooting

```
SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/path/astronomix/node_modules/fs-extra/lib/mkdirs/index.js:3:44)
```

fixed by running `npm clean-install`