@payfit/midnight

React UI components for the PayFit Design System

Usage

Install

• yarn add @payfit/midnight (or npm i -S @payfit/midnight)

Import

import { Text, Button } from '@payfit/midnight'

Development

Prerequisite

Environment variables setup:

You need to have an environment variable GITHUB_TOKEN. The value can be found in 1Password (GitHub API Token).

Packages installation:

yarn install

yarn install --cwd MidnightNativeDemo

Start the documentation locally

yarn start

Run the web sandbox

yarn storybook

Run the native sandbox

Setup native environment

First, you need to setup your emulator, read the following links to get started:

• On iOS: https://docs.expo.io/versions/latest/workflow/ios-simulator/
• On Android: https://docs.expo.io/versions/latest/workflow/android-studio-emulator/

Let's run it

• Run yarn dev:native
• Then, navigate to /MidnightNativeDemo
• Run yarn start and, via CLI interactions, you should be able to launch your sandbox on your opened emulator

Note: You can open an emulator directly from your VSCode editor via this extension

Note: On the metro bundler, the connection is set to Local by default, it is faster but you'll need to set it to LAN for Android.

Test

• yarn test

Release new version

• npm login (login info in 1Password at npm)
• git config --global push.followTags true (will push tags with git push automatically)
• npm version patch|minor|major
• npm publish
• git push

Deploying to testing

Prerequisite

To be able to deploy the documentation to testing, make sure you did this before: https://www.notion.so/payfitapp/Connecting-to-our-staging-preprod-testing-Kubernetes-cluster-Getting-started-1ca6f236d9d64e2c8ea292cb6c6f55f1

You'll also need helm:

brew install kubernetes-helm

Available commands

Command	Description
testing:list	Get the list of the deployed website
testing:status	Get testing status
testing:deploy	Deploy your branch to a testing, accessible at midnight-[branch-name].payfit.tech and will be updated automatically
testing:delete	Delete the current branch's testing environment

Note:

• Before deploying to a testing, push your work and make sure CircleCI has finished its jobs (https://circleci.com/gh/PayFit/workflows).
• If your branch name contains a non-alphanumerical character (such as / \_) it will be replaced by -.
• When you don't need to publish a branch anymore, don't forget to delete it.