@tokenfoundry/foundry-frontend

@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.