TED Components
==============

## Installation

Make sure you have the latest `Node` and `npm` running. Preferably using `nvm` to manage your Node version, see: https://medium.com/@Joachim8675309/installing-node-js-with-nvm-4dc469c977d9

Download or clone the repository from Github.

Navigate to the project directory, `cd ted-components`

Install dependencies: `npm install`

## Usage

To develop the components locally you will need to run this repo alongside the [ted-storybook](https://github.com/onishiweb/tb-storybook) repository. Follow the installation instructions there to get set up and running.

### `npm link` 

To work on the components using the storybook you need to link the two repositories through `npm link`. This repository is published as am npm package [@tb-components/tb-components](https://www.npmjs.com/package/@tb-components/tb-components), which is included in the `ted-storybook` project.

Instead of updating and re-publishing this package for every change, you can work on the repositories simultaneously using `npm link` with the following steps:

- Navigate to the `ted-storybook` repository: `cd ted-storybook`
- Setup the link in the `ted-components` repo `npm link ../ted-components` (replace `../ted-components` with the path to your local version of this repo)
- Tell the storybook repository to use the newly created link for the components package: `npm link @tb-components/tb-components`

This will set up a symbolic link between the package location of the tb-components repository to your local version. You can now run both projects and work on components to see them updated in the storybook instance: 

- Watch the ted-components repository for changes, in another shell window/tab: `cd ../ted-components && npm start`
- Run the storybook project `npm start`

For more information on `npm link` you can check the [npm documentation](https://docs.npmjs.com/cli/link) or [this article explaining what happens when using `npm link`](https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af).