astronomix

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 and what's the difference between the tilde ~ and caret ^ in package.json.

version.js will detect bad versions by iterating through dependencies within 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

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)

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 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