cnio-ui-components

Installing and Running

Clone this repo

git clone [email protected]:nio/cnio-proj/cnio-ui-components.git
cd cnio-ui-components

Configure NPM registry settings in .npmrc file (ask team for the password)

@nio:registry=https://asia-southeast1-npm.pkg.dev/teko-development/teko-npm/
//asia-southeast1-npm.pkg.dev/teko-development/teko-npm/:always-auth=true
//asia-southeast1-npm.pkg.dev/teko-development/teko-npm/:_password="TEKO_NPM_PASSWORD"
//asia-southeast1-npm.pkg.dev/teko-development/teko-npm/:username=_json_key_base64

Install dependencies

yarn install

Run storybook

yarn storybook

Blockchain wallet extensions in Storybook

Because storybook usually displays the UI in an iFrame, it will use a different window object, causing some wallet extensions like Eternl and Nami cannot be detected and used.

To resolve this, please run Storybook in fullscreen mode by:

1. Go to these links after running yarn storybook

http://localhost:6006/iframe.html?args=&id=cnio-account--default&viewMode=story
http://localhost:6006/iframe.html?args=&id=cnio-market--default&viewMode=story

2. Click on Open canvas in new tab button on the top right of the screen (with the fullscreen icon)

Update npm package

Build and publish package

Because the UI in our project will be used/integrated with Tempi, we will publish our code/product as an NPM package. In Tempi's mono repo, we will install the package and re-use our exported UI components

To build and publish package, do the following steps:

(ONLY DO THIS WHEN CODE IS MERGED TO MASTER, we highly suggested you mentioning @anh.tv or @quang.nm for a heads up before doing this):

git pull origin main
yarn # To ensure we are using the correct node-modules and get the correct current version
npm version # Get current version
yarn build
npm version <next-version-to-publish>
git push origin main
npm publish

Package version convention

Branches

In this repo, we will have 3 kind of branches to publish packages:

1. main (publish dev version. Example: 1.0.57-dev)
2. releases/<release_version> (publish staging version. Example: 1.0.57-stag)
3. releases/<release_version>-prod> (publish product version. Example: 1.0.57-prod)

Please remember to use the correct version tag on each branch with the corresponding environment(dev, stag and prod)

We will increase the patch part of the version by 1 when we need to publish a new package. For example: if the current version is1.0.57-dev, the next published version will be 1.0.58-dev

Installing on tempi

Clone the Tempi repo on first time, cd into the repo's root folder, then checkout to a new branch, and do the following step:

Editor

cd packages/nio-elements
yarn add cnio-optim-ui@<published-version>
cd ../..
yarn && yarn build:packages && yarn dev:le

Note: before running yarn dev:le, you might want to changes some code in packages/nio-elements (add new component, do some twitching)

Server-side rendering

On file /sites/landing/components/LandingPage/LandingPage.tsx, change

const hostname = context.req.headers.host;

to

const hostname = 'preview.landing.dev.teko.vn';

_ DO NOT PUSH/MERGE THIS CHANGE TO MASTER _

cd packages/nio-elements
yarn add cnio-optim-ui@<published-version>
cd ../..
yarn && yarn build:packages && yarn dev:landing