Bnpl UI SDK

Note: This project uses Node Version 16 and NPM Version 8 , Make sure you have that installed in your machine

Quick Overview

There are 3 parts to this project.
- Examples folder
- Src folder: SDK folder, components folder
- Stories folder

Examples Folder:

This folder contains the playground environment where you are able to see the UI components and the whole app itself. You as a user can click through buttons and use the app as a standalone.

Src Folder:

SDK Folder

This folder contains the UI SDK that can be installed from npm and imported and used inside of a React app. The SDK has interfaces that needs to be implemented so that the sdk can run and function as expected.

Components Folder

This folder contains all the modular components that can be important and used inside of the SDK folder. The modular components can be installed and used inside of an React app by themselves and a stand alone component. Note: Some components might be dependent on others.

Stories Folder

This folder contains all the implementation of the component as a doc and also shows how the component looks like by itself. Gives good understanding of the needed and optional props that needs to be passed for the component so that it can work as expected.

Easy start to run UI locally

npm install

cd to example folder

npm install

npm start

Storybook

Running storybook to see each component:

npm run storybook

This loads the stories from ./stories.

Unit test with Jest

Jest tests are set up to run with npm run test or yarn run test.

E2E test with cypress

- Note: if this is your first time running cypress the browser might not open right away, you might have to run the cmd again

Before running cypress test, make sure you are running the example.

Cypress tests are set up to run with npm run e2e or yarn run e2e. This will open up a browser showing all the available e2e test than can be run. Continue by selecting and running the test.

Running Cypress headless mode

npm run e2e-headless

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in package.json and dist/index.js accordingly. Please report if any issues are found.

Publishing

• When you are in development phase and if you do need to publish your library for testing, recommend using postfix the Version number with your initial such as 0.11.0-TD

• If you want to change version number while publising from your laptop, do following

npm config set @equipifi:registry https://gitlab.com/api/v4/projects/34083948/packages/npm/
echo "//gitlab.com/api/v4/projects/34083948/packages/npm/:_authToken=HpjEbfx3Rz5gWCnoNSsH">.npmrc
npm version 0.11.0-TD -no-git-tag-version --force
npm publish

• Once you are ready for review your code you can update the version number in .gitlab-ci.yml without postfix and create PR

• Once the the PR is merged to release branch an artifact will be published as <version_no>-release (e.g. 0.11.0-release)

• Once we merged release branch to deploy branch the an artifact will be published as <version_no> (e.g. 0.11.0)

• Consumer of this library should always use specific release version while in release branch

• Once the consumer of this library decided to move from release to deploy branch, you can update the version to use deploy version of the library