@tokenfoundry/foundry-frontend

Reusable UI Components to be used across Foundry

Dependencies

Run yarn install to install depencencies.

Usage

Add this to your project by running:

yarn add @tokenfoundry/foundry-frontend

Add peer dependencies:

yarn add lodash polished prop-types react-media styled-components

Development

We are using storybook as a UI development environment. Open storybook by running:

yarn storybook

It should open automatically at http://localhost:6006.

Local development along other projects

To add this package as a local dependency in your local projects we use yalc.

Why yalc? Take a look a this issue: "yarn knit": a better "yarn link" #1213

In short words: yalc makes a copy of this package as it was published into a npm registry, avoiding the usage of yarn link which creates a symlink including source files and node_modules leading to multiple dependencies being used in the development environment.

Steps

Follow these steps to use @tokenfoundry/foundry-frontend in another frontend-project package:

• Install yalc cli tool globally by running:

  yarn global add yalc

• Publish @tokenfoundry/foundry-frontend to your local ~/.yalc folder by running in @tokenfoundry/foundry-frontend folder:

  yalc publish

• Go to frontend-project folder and link @tokenfoundry/foundry-frontend published version:

  yalc link @tokenfoundry/foundry-frontend

  Run yarn install to install dependencies, then add .yalc/ and yalc.lock to frontend-project's .gitignore

• Publish changes and update linked installations of @tokenfoundry/foundry-frontend by running in its folder:

  yarn push # equivalent to `yarn build && yalc push`

  To do this automatically when files change in src/ folder run:

  yarn dev # equivalent to `nodemon --watch src --exec yarn push`

Caveats

• yalc link @tokenfoundry/foundry-frontend will leave a symlink inside node_modules, if you ever want to go back to the version downloaded from npm, remove it and install it again.
• Some projects need to recompile: since components are being imported from node_modules they will be cached by bundlers and changes won't be reflected right away.

Publishing to NPM

• Once your PR has been approved, squash and merge the feature branch into develop.

• Locally, checkout develop, pull, and increment the version of the package:

  git checkout develop
  git pull
  yarn version

• Push the updated develop branch and the associated tag:

  git push
  git push origin <new_tag_name>

• Create a new PR to merge develop into master with a title following the format "Master < Develop <new_tag_name>"

• Once the team approves, merge the PR (normally, without squashing or rebasing). CircleCI will automatically publish to NPM if all tests pass. Always verify that everything worked here and on npm.