Solas UI React

A set of React components based for British Counil applications developed by the British Council.

Local setup and development

• Install the dependencies with npm install
• Start [storybook dev environment}(https://storybook.js.org/) npm start

Testing changes locally in other projects

In order to test your changes before they are published to npm you need to test the packaged files. The first thing to do is run the build.

Build the package

npm run build

This creates a dist folder and transpiles the source files to ES5 using babel, a module exports file is automatically created allowing for easy inclusion via named imports.

It's the contents of the dist folder which is actually published to npm. To test your changes locally in another projects you can use npm link which creates symbolic links connecting the two projects locally.

Using npm link

1. Change directory into the dist folder: cd dist
2. Symlink the package: npm link - this will create a node_modules folder
3. Switch to the project you want to test your changes in and type: npm link solas-ui

You should now be able to test your components in your project, to make changes follow steps 1 and 2 again.

You can “undo” the effects of npm link by simply removing the symbolic links. But there is a built in command for it, aptly called: npm unlink. Just run npm unlink on the module’s directory to remove the global symlink, and run npm unlink solas-ui on your project’s directory to remove the local symlink.

To run tests:

@TODO: Add snapshot testing Given that the CSS is generted in another project this makes this more troublesome as changes in that repo would break the snapshots. We will be moving the CSS into this project in future which solve this issue but of course creates many more :-)

Releasing

We use Semantic Versioning and bump versions using the npm version command (see npm docs). We've defined a postversion hook in package.json.

How to release a new version

1. You should only publish the master branch. Make sure to be clear on what kind of version it is (patch, minor or major). Create a new version:

npm version patch

This runs the build creating the dist folder ready to be published. The version number is bumped and committed to master.

2. Do a git log to check that the version number is correct. To test your changes locally in another project you can use see using npm link. When you're confident, push to GitHub:

git push origin && git push origin --tags

3. Change into the dist directory cd dist and make sure you are in the dist folder. The publish to npm:

npm publish

Credits

@TODO