@yewyewxd/lemondex-uikit v2.0.6
ApeSwap UIkit
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.
Install
Create a Github Personal Access token.
Export the personal access token as NPM_TOKENexport NPM_TOKEN=<your-token>
yarn add @apeswapfinance/uikit
Publishing
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)
Publish Flow
- Make updates to the UI kit
- Update the version and add a alpha/beta id (
npm version prepatch --preid alpha
) - Publish the version with an alpha/beta tag (
yarn publish --tag=alpha0
) - Install the proper package for testing (
npm install @apeswapfinance/uikit@0.10.9-alpha.0
) - Make changes and update the prerelease version (
npm version prerelease --preid alpha
) - Publish the new prerelease version (
yarn publish --tag=alpha1
) - After making the final updates, version the package with the prerelease id removed (
npm version 0.10.9
) - Publish the final version with a
latest
tag (npm publish
) - With the
latest
publish above, the version will be installed by default when runningnpm install @apeswapfinance/uikit
Example:
Current version is 0.10.8
Alpha versions
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
Beta versions (if needed)
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
Publish Final Version
To remove the prerelease version run the following with the proper version number:npm version 0.10.9
Publish the version
npm publish
Installing Prerelease Versions
To print out the available versions for installing run:npm dist-tag ls @apeswapfinance/uikit
To install a prerelease from above:npm install @apeswapfinance/uikit@0.10.9-alpha.1
To install the final version just run the standard install command:yarn add @apeswapfinance/uikit
Setup
Theme
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>
Reset
A reset CSS is available as a global styled component.
import { ResetCSS } from '@apeswapfinance/uikit'
...
<ResetCSS />
Types
This project is built with Typescript and export all the relevant types.