ApeSwap UIkit is a set of React components and hooks used to build pages on ApeSwap's apps. It also contains a theme file for dark and light mode.

Create a Github Personal Access token.

Export the personal access token as NPM_TOKEN
export NPM_TOKEN=<your-token>

yarn add @apeswapfinance/uikit

The approach to publishing for this repo is very important because the apeswap-frontend will pull the latest version of the package regardless of release version. (Prerelease or otherwise)

New features added to this ui-kit will likely need to be tested in a separate environment which means we can't publish test packages with the latest tag until we are ready to use them in production.

Looking at the ui-kit versions page, you will see which package will be install by default with the latest tag. (This applies the same for the NPM package directory)

1. Make updates to the UI kit
2. Update the version and add a alpha/beta id (npm version prepatch --preid alpha)
3. Publish the version with an alpha/beta tag (yarn publish --tag=alpha0)
4. Install the proper package for testing (npm install @apeswapfinance/[email protected])
5. Make changes and update the prerelease version (npm version prerelease --preid alpha)
6. Publish the new prerelease version (yarn publish --tag=alpha1)
7. After making the final updates, version the package with the prerelease id removed (npm version 0.10.9)
8. Publish the final version with a latest tag (npm publish)
9. With the latest publish above, the version will be installed by default when running npm install @apeswapfinance/uikit

Current version is 0.10.8

npm version prepatch --preid alpha
Version is changed to 0.10.9-alpha.0 (WARNING: If you publish this version with the default npm publish it will be set as the latest release and be installed by default on the frontend. Follow below for more details)

Publish the prerelease with the proper tag based on your prerelease version. This will ensure the package is not installed by default on the frontend. yarn publish --tag=alpha0

After making updates to the first alpha version, another alpha version can be published:
npm version prerelease --preid alpha Version is changed to 0.10.9-alpha.1
yarn publish --tag=alpha1

If a beta version is needed it can also be created:
npm version prerelease --preid beta
Version is changed to 0.10.9-beta0
yarn publish --tag=beta0

To remove the prerelease version run the following with the proper version number:
npm version 0.10.9

Publish the version npm publish

To print out the available versions for installing run:
npm dist-tag ls @apeswapfinance/uikit

To install a prerelease from above:
npm install @apeswapfinance/[email protected]

To install the final version just run the standard install command:
yarn add @apeswapfinance/uikit

Before using ApeSwap UIkit, you need to provide the theme file to styled-component.

import { ThemeProvider } from 'styled-components'
import { light, dark } from '@apeswapfinance/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>

A reset CSS is available as a global styled component.

import { ResetCSS } from '@apeswapfinance/uikit'
...
<ResetCSS />

This project is built with Typescript and export all the relevant types.