FoxDen Component Library

This library provides reusable components for use with FoxDen and potentially other ReadyTalk Angular based projects. This document describes how to build, install and use this library. See STYLEGUIDE.md for information about writing components and using our living styleguide.

Installation

npm install

Development

To build the release version of this project:

gulp fresh-build

The release version is what's used when you install the components as a package with npm or jspm. It's also used if you link the component library to your FoxDen project (more info on that below.)

To run the styleguide website for testing components:

gulp init-styleguide # first time only gulp fresh-styleguide

The styleguide is used to view and test components outside of the FoxDen project. After generating the styleguide, you can visit the url logged in the console to see the components in action (more info in STYLEGUIDE.md). Be sure to run gulp init-styleguide the first time you download the project in order to generate the dependencies that allow the styleguide website to function.

To run the tests:

gulp init-styleguide # first time only gulp test

The tests generate screenshots of the components in the project and compare them to previously checked in screenshots. Since the tests require building and running the styleguide website, you will need to run gulp init-styleguide at least once before you can run the tests.

If you add new components, you may find the tests complaining that you need to regenerate the reference screenshots. You can do this by running gulp init-tests. However, be careful that you haven't broken the old images.

All fresh-* gulp tasks do a clean before running their respective builds. You can save some compile time by skipping the clean steps by running the tasks without the 'fresh' prefix. For example:

gulp styleguide

or

gulp build

Installation for local development

To build new components for FoxDen, you will want to install this repo locally and then symlink it to your FoxDen project so you don't need to push your component changes in order to test them in FoxDen. There is a gulp task in FoxDen which will setup the symlink for you if you have installed the two projects side-by-side.

gulp link_components

Now you will see your component updates as soon as you run a build inside the component library.

gulp build (inside foxden-component-library)

If the projects aren't installed side-by-side, you can do something like the following:

1. cd path/to/ionic_collab/build/lib/stash/mob/
2. ln -s ../../../../../path/to/components/lib/ build/lib/stash/mob/foxden-component-library@master

Another option is to use jspm link. Unfortunately, using this option requires running jspm install whenever you make changes to the FoxDen component library.

1. cd path/to/foxden-component-library
2. jspm link
3. cd path/to/ionic_collab
4. jspm install --link stash:mob/foxden-component-library

Now during development, after you make changes to a component in foxden-component-library:

1. gulp build (inside foxden-component-library)
2. cd path/to/ionic_collab
3. jspm install

TODO Does the following need to be documented?

jspm registry create stash jspm-git
ssh://[email protected]/