@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/
andyalc.lock
tofrontend-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 insidenode_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
intomaster
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.