@payfit/midnight v0.0.0-master-0986e3a1

💿 Installation

First, make sure to have react and react-dom (or react-native depending on the targeted ecosystem) installed:

npm install react react-dom --save
# or
yarn add react react-dom

Then, install @payfit/midnight inside your project:

npm install @payfit/midnight --save
# or
yarn add @payfit/midnight

✍️ Usage

import ReactDOM from 'react-dom'
import { Button } from '@payfit/midnight'

ReactDOM.render(
  <MidnightProvider locale="en-GB">
    <Button>I am using Midnight!</Button>
  </MidnightProvider>,
  document.getElementById('root'),
)

🧑‍💻 Development

Setup & Code contribution

Read through our contributing guidelines to learn more about the local setup, our review process, coding rules and more.

🚀 Release

⚠️ Only a Midnight collaborator can release a new version. Please note that you must not run the yarn release command if you don't know how to proceed. If you have any doubt, ask one of your teammate to help you in the process, even if it is described below.

Since Midnight host some content on AWS before starting you have to make sure your logged in to aws with SSO to the prod-design-system profile with this command:

aws --profile prod-design-system sso login

The release process is fully interactive: it starts by running yarn release in the root monorepo level and follow required steps. This is what you should see:

$ yarn release

What's new?
- pull request name (#XXXX) hash
- pull request name (#XXXX) hash

? Current version: X.XX.X
Choose a new version: (Use arrow keys)
❯ experimental (0.0.0-master-[hash])
  patch (X.XX.X)
  minor (X.XX.0)
  major (X.0.0)

Depending on the needs you can make 2 types of release:

• 👷‍♂️ Experimental release: a new experimental version of Midnight for testing and feedback loop purposes.
• ✨ Stable release: a new stable version of Midnight following its versioning policy to deploy new updates on a bi-weekly basis

👷‍♂️ How to make an experimental release?

The purpose of the experimental version is to test a future version to avoid breaking changes, bugs and so on. It can be useful as well to get feedbacks on early updates (canary release).

After running yarn release select experimental.

If there is no error the experimental version is published to NPM following this format 0.0.0-[branch-name]-[hash] under the experimental NPM distribution tag.

You can check the availability of the release by running npm view @payfit/midnight (and checking the experimental distribution tag value):

You can then consume the released version in your stack to get feedbacks or test any incoming changes. If you need to test it in the admin/employee application space, you can follow the "How to test a Midnight release in the PayFit application" section.

✨ How to make a stable release?

This is the main release process to deliver new versions of Midnight following this versioning strategy.

1. Checkout master branch
2. After running yarn release select one of patch | minor | major proposition depending on the type of release you have to do
3. It will check if your local repository is in a clean state (eg. no staged files)
4. Then it will check if the current branch name is master because a stable release can only be performed from master
5. Finally, it will publish a new NPM version (to the latest distribution tag) and, unlike experimental versions, will also push a new tag and commit on the Midnight GIT repository.
6. You will be redirected on Github release page on you browser.

You can check the availability of the release by running npm view @payfit/midnight (and checking the latest tag value):

After these steps you have to write the release note.

The description area should be already filled with commit metadata between the previous and newest tag but make sure to follow the same template as previous releases, like this one:

Midnight (depending on the update target, other sections can also be added such as Playground, Documentation and other tools)

✨ New:

    [here what's new]

⚙️ Update:

    [here what was updated]

🐛 Fix:

    [here what was fixed]

🧹 Chore:

    [here what was improved in the codebase]

https://github.com/payfit/midnight/compare/[new tag]...[old tag]

In each section add a list of all Pull requests concerned by the release with their id ( e.g: Awesome component: doing amazing things (#0000)). Delete the sections with no changes.

Now you can click on "Publish" and it will deploy the Midnight documentation with the last changes.

Tip: To check the progress of the deployment you can watch the circle CI job "deployment" on the master branch.

The last release step is to share a message in the #announcements-midnight slack channel. A little summary of the main changements done and a link to the release note for more details (to help you formatting the message, you can take some inspiration from previous announcements).

How to test a Midnight release in the PayFit application

To test a Midnight release in the PayFit application, you will need to create a ToDD.

A ToDD (Testing on DemanD) is useful when it comes to test, consumer side, Midnight early updates. More specifically (but not only) checking regressions or showcasing product changes in real application conditions.

Before creating a ToDD, let's update hr-apps codebase:

• Create a new branch on hr-apps to update a midnight component.
• When your happy with your changes you can push your branch on the remote repository
• On the Github Checks of your branch you can access the circle-ci jobs, click on one of them to access the docker_build_and_deploy workflow
• Wait the CI to complete and click on the build-trigger job to release a new helm chart and make it available for ToDD deployment

Then you can create a ToDD following this documentation (to access the payfit portal you have to be connected to the VPN).

Generally you only have to fill the following informations:

• The name of the ToDD (less than 15 characters) automatically prefixed by todd- (e.g: todd-name)
• Your Payfit email
• Edit the channel (branch) column with your branch for the right service (e.g: branch-name in hr-apps). You can use the search input to find the right service directly and then edit the branch name by clicking in the action column. Then you can validate the changes and deploy the ToDD.

It will take around 20-30 minutes before being fully deployed. You can retrieve your ToDD in the list section.

By clicking the details button you will be able to check the status, the action history and have access to all links available for your Todd (application url, processor url...).

If all steps goes well and you can access the ToDD urls, you can now share them for testing (eg. in your pull request).

Troubleshooting If you cannot access the details of your ToDD you will have to find its catalog here: https://github.com/PayFit/testing.payfit.net/tree/main/todd-manager/catalog, just copy paste the github url of the file named after your ToDD (e.g: todd-name.catalog-info.yaml).

Then go to this page and paste the url to import it.

⚠️ Don't forget that your ToDD is ephemeral, you will have to click on the "Resume" button of your ToDD's details page to redeploy it if it's no longer available.