/lib-themisui

Primary LanguageCoffeeScriptOtherNOASSERTION

ThemisUI

Usage Docs Build Status Coverage Status

ThemisUI is a shareable suite of components and brand assets to be shared across Themis projects. ThemisUI also contains a docs viewer to allow for simple consumption of components.

Installing

We're running in stealth mode for now meaning we don't yet want to list on NPM. So to install run:

npm install --save github:clio/lib-themisui#<release-tag>

You can specify any other release as well.

Next you just need to include ThemisUI in your angular application like so:

angular = require('angular');

angular.module 'YourApp', [
    require 'lib-ThemisUI'
];

You must include the stylesheets as well:

  • node_modules/lib-ThemisUI/public/build/lib-temisui.css: the entire CSS
  • node_modules/lib-ThemisUI/themis_theme/index.scss: optional, SCSS variables defined for the Themis theme

You can now use any of our components in your application. The APIs for each component explain their usage.

Upgrading

Upgrading your project to a new version of ThemisUI is simple just run the following command with your desired release-tag.

--save will persist the upgrade in your package.json and, if relevant, also your shrinkwrap file.

npm install --save github:clio/lib-themisui#<release-tag>

For example to install version v0.9.0 — No More Mr Nice Guy you would run the following command.

npm install --save github:clio/lib-themisui#v0.9.0

Development

Running Docs

Whilst inside the lib-ThemisUI directory.

  1. Ensure you have npm installed.
  2. Do a npm install to get dependencies.
  3. Run npm start to start all the tasks we need and launch the server.
  4. Visit http://localhost:3042
  5. ???
  6. Profit

Running Tests

  1. Ensure you have npm installed.
  2. Do a npm install to get dependencies.
  3. Run npm test to start karma.

It's recommended that you leave npm test running as you dev. Karma will watch your files and tests and re-run when appropriate. If you're on OS X or Linux you'll even get notifications of the test state as you work.

Cutting Code

Give the Running Docs and Running Tests sections above a quick read through. All the components, their css and tests are kept in the themis_components directory. If you want to look at a simple component to get started I'd recommend th-switch.

If you are integrating ThemisUI into an external project and would like to test a new or revised component before a release is cut you can easily temporarily install from a third party fork / commit.

npm install github:<githubname>/<githubrepo>#<commit-ish>

To ensure that you don't accidentally drift your main project off of a primary release you'll want to take note on if it is appropriate to use --save when doing your npm install. If you specify --save then the package.json and shrinkwrap file (if relevant) will both be updated to the specified version / commit ref. This may not be what you want for a simple component test.

Coding Style

To adhere to our style guide we recommend using a linter addon for your code editor, which will enforce the rules defined under coffeelint.json. These rules will be enforced by our CI system.

Package Contents

  • themis_components
    • A library of reusable components.
  • themis_theme
    • Our base brand / fonts / icons / colours.

Deploying Docs

  1. Open a pull request from master against edge branch.
  2. When your pull request is approved and merged it will automatically deploy and be visibile at http://themisui-docs.clio.com/.

Other Notes

Installing node / npm

Mac

  1. Run brew update to ensure that the brew formulae are up to date.
  2. Install node with brew install node.