UI Components is a collection of React components for building web interfaces.
@anyfin/ui is available as an npm package and can be installed on any React web project.
yarn add @anyfin/ui
Use Case: create new components in storybook
- Run Storybook on a separate terminal using
Open http://localhost:6006 with your browser to see Storybook and the list of component stories.
You can start modifying the components, and they will update automatically in Storybook to reflect the changes. If you change the functionality of any component (e.g., removing or adding props) don't forget to update the component's stories and documentation to reflect those changes.
Use Case: Develop in sync with web or mypages
- Run the build in watch mode using
yarn devand link this package to web or mypages.
If you are working on the web or mypages project, sometimes you want to modify some @anyfin/ui components and see them update on that project as well. You can achieve this by running the following commands. in the ui-components repository, run:
Then, in the web/mypages directory run
yarn link @anyfin/ui. Now the component set is linked to code in the web/mypages directory which means they should update.
Don't forget to run dev mode (
yarn dev) in this repository and the one you have linked this one against (e.g. web or mypages).
Publishing new versions
@anyfin/ui is available as an npm package. You will need access to the npm organization in order to publish new versions of this package.
Make sure to include the version bump in package.json in your PR, if your changes are merged in master go to "Releases" -> Draft a new release. Here, you can create the "release" that will be published to npm. By default this should be the latest master (with your changes included).
Using a CLI
To publish a new version, run
yarn version to create new tags and
yarn publish to publish these to npm. This package follows semver versioning.
A merge in
master will automatically update the only storybook.