@lewisblackwood/component-library v5.0.5

Personably's component library

This repo is for developing all our componentes so that they can be shared across the app and the marketing site (and any other frontend application we build in the future). All components are built using styled-components.

To build components in development we are using storybook. You can see our live storybook version here. The component library is published to a private npm package here.

To get started

1. If you don't have storybook installed globally, run npm i -g @storybook/cli

2. Install dependencies yarn install

3. Start storybook yarn storybook.

4. Go to http://localhost:6006/

Deploying storybook

Storybook is automatically deployed to GitHub pages from the index.html in the /docs directory on master. To update the /docs directory and get the changes deployed:

1. Run yarn build-storybook

2. Commit the changes and open a PR to master. Once merged, it will automatically deploy the changes.

Publishing the component library

Every time you update the component library, it will need to be published to npm.

New versions are automatically published to npm after they're merged into master. To update the package version:

1. If you have not logged into npm on your command line you will need to do this first: npm login

2. Update the version number: npm version <major|minor|patch> - see versioning to see what version you should be updating to. This will bump the version in package.json and commit the change.

3. Update the CHANGELOG with any changes made.

4. Any repositories that use this component library will then need to be updated to the latest version.

CircleCI also publishes dev builds under the dev tag on npm. You can use these builds in other local/staging apps to test against unpublished changes to the component library. e.g. your symmetrical-parakeet package.json could reference the following to bring in component-library commit 714e63c1caf82127ab1de2c0f77025869b5a1d46:

  "@personably/component-library": "0.0.0-714e63c1caf82127ab1de2c0f77025869b5a1d46"

Using the component library in a project

1. Add .npmrc file in the root of your project and add //registry.npmjs.org/:_authToken=${NPM_TOKEN}

2. Copy your npm auth token from the .npmrc on your machine. You can find this by running the command open ~/.npmrc. If this file does not exist you will need to login into npm first by running npm login.

3. Save your npm token as an environment variable export NPM_TOKEN="00000000-0000-0000-0000-000000000000" (replacing the auth token with your own) here:

• If you are using zsh run open ~/.zprofile and save the token there. Run source ~/.zprofile to refresh.
• If you are using bash run open ~/.profile or open ~/.bash_profile and save the token there. Run source ~/.profile or source ~/.bash_profile to refresh.

4. So that Heroku can install the private package run heroku config:set NPM_TOKEN=00000000-0000-0000-0000-000000000000 --app=application_name. If you do not have the heroku CLI installed you will need to do that here. Alternatively, the environment variable can be added via the dashboard.

You can also read about how to do this on the npm website here

Linking the component library to co-develop locally

1. In the component library directory run yarn link and then yarn watch.

2. In you project directory run yarn link @personably/component-library and then your start project's start command.

Now any changes made to the component library locally will update in your project 🎉

If you want to unlink the component library from your project you will need to run yarn unlink @personably/component-library and then yarn install --force.

Tests

Watch this space.