About

Welcome to JSKit - a collection of React components available to be reused in any React-based application of Bright Pattern. Feel free to visit JSKit Storybook to explore what we already have.

Contribution

It's very easy to contribute - simply open a PR and let people know about it by leaving a message in the "JSKit" chat in Microsoft Teams. Please take you time to properly describe your contribution by adding a meaningful name and description to your Pull Request, supplying it with screenshots if necessary. This will greatly help other people to get the idea of what is inside.

Local Testing

To build and publish JSkit locally follow these steps:

1. Install yalc globally -> npm i -g yalc or yarn global add yalc
2. Inside JSkit run yarn build after that run yalc publish
3. Inside your project run npm uninstall @servicepattern/jskit or yarn remove @servicepattern/jskit
4. Add JSkit from yalc's registry: yalc add @servicepattern/jskit
5. Now you are using local version instead of version from registry

Any local changes to JSkit would require to run step 2 and step 4.

Authentication in dependent projects

In order to use this repository as a part of another BrightPattern project a developer must authenticate in private NPM registry (we use GutHub Packages). To authenticate in GitHub packages a developer should create .npmrc file and place it in the root directory of the web project (e.g. for the AuditLog project the final path should look like this AuditLog/web/.npmrc). Make sure that .npmrc is ignored in .gitignore as it contains personal sensitive data. Copy the following text and paste into .npmrc:

registry=https://registry.yarnpkg.com/

@servicepattern:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=TOKEN
always-auth=true

After that, TOKEN must be replaced with a proper GitHub Personal Access Token that should be generated here https://github.com/settings/tokens

Make sure that these permissions are enabled:

- repo
  - repo:status
  - repo_deployment
  - public_repo
  - repo:invite
  - security_events
- write:packages
  - read:packages

When a token is created, replace the TOKEN part of the text snippet above with your personal token. That's it!

End-to-end testing (Playwright)

Overview

In this project we use Playwright to enable end-to-end (e2e) testing for component showcased in Storybook. Testing automatically runs in the CI environment (GitHub Actions) every time a developer commits changes to the files within the following directories:

• src/main/*
• src/semantic-ui/*
• src/test/*

Playwright testing is based on comparing visual snapshots and this repository stores screenshots of several existing jskit components (the screenshots can be found here src/test/e2e/snapshots). These screenshots are used as a reference when comparing results of newly introduced changes with what we previously had. This protects these components from being accidentally changed when contributing a new code.

Making changes (updating snapshots)

Whenever a developer intentionally commits a change that modifies how a component is visually rendered, a snapshot-updating command should be executed to prevent tests from failing. To do this, run the following command:

yarn test:e2e:update-snapshots

This command (yarn test:e2e:update-snapshots) creates a Git tag and pushes it to the repository:

# the date below is given for illustrative purposes
git tag -a playwright-snapshots.24-05-2022 -m "Update PW snapshots"
git push --tags

The tag for updating snapshots starts with 'playwright-snapshots.' and includes the current date for convenience. Example: playwright-snapshots.05-24-2022

An in-detail documentation covering Playwright testing can be found here.

Code auto-format

In this project we use Prettier to auto-format the source code. Please visit this page to configure your IDE. Additionally, this project uses ESLint, so don't forget to enable it in your IDE.

Project structure

All JSKit-dependent projects should maintain the same project structure described in this document https://github.com/ServicePattern/jskit/wiki/Client-Application-Project-Structure

Git Merge Strategy

All developers of JSKit are encouraged to use the rebase strategy.