Autonolas Frontend Library

This repository contains the common UI modules/components for Autonolas frontends.

Tech Stack

ReactJS
Styled components
Ant Design
React testing library
Jest
ethers

Note

To avoid multiple react packages please do the following:

In Application: a) cd node_modules/react && yarn link b) cd node_modules/react-dom && yarn link
In Library a) yarn link react b) yarn link react-dom

Working with components in autonolas-frontend-library

When developing changes in the autonolas-frontend-library repo that you wish to see in any other repository, let's take for example autonolas-registry-frontend, follow the yarn linking process to resolve this dependency locally rather than downloading the published library package.

In autonolas-frontend-library, run yarn link. This creates a symlink on your machine pointing to the library. You may require sudo permissions to run this command.
In autonolas-registry-frontend, run yarn link autonolas-frontend-library. This tells yarn to get the library from your symlink instead of downloading the package from GitHub.

Once the package is linked, run yarn run build:watch in the autonolas-frontend-library repo, make changes, and see them hot reloaded into autonolas-registry-frontend.

Once you are done developing in autonolas-frontend-library, you can follow the steps below to unlink the local package. Otherwise, you may see issues if your autonolas-frontend-library repo is not up to date.

In autonolas-registry-frontend, run yarn unlink --no-save autonolas-frontend-library. The --no-save flag is important to ensure that the dependency is not removed from package.json and yarn.lock.
In autonolas-registry-frontend, run yarn install autonolas-frontend-library to fetch the latest published version from GitHub.
In autonolas-frontend-library, run yarn unlink to delete the symlink created by yarn. You may require sudo permissions to run this command.

To run storybook

yarn run storybook