@equinor/ioc-pb-common-frontend v6.5.1

ioc-pb-common-frontend

NPM library for shared frontend code to be used by applications maintained by the IOC Prevent Breakdowns (PB) team.

Viewing and testing the content in storybook

The components created in this library should all be viewable and testable in storybook, locally (with yarn start, or yarn storybook) and in github pages.

Viewing storybook in github pages

In the github repo, in the upper right hand side under About, there is a link to the github pages where the library's components that are in the last released version are shown.

Making changes to the library

When adding a new export, make sure the folder it is in contains an index.ts file which is exporting that component, and that every folder upwards in the structure is exporting from the folders it contains.

Committing with commitizen and semantic versioning

Run git add .

and

git commit -m "my commit message"

as you normally would. When committing, you will be prompted to choose what type of commit it is by commitizen (e.g. feat, fix, chore etc) and provide other info for the change log.

Then run

git push

Creating a beta or alpha version and consuming it

You can create a beta or alpha version by pushing the commit to a branch named 'beta' or 'alpha' respectively.

To consume these check the name of the version that gets created in https://www.npmjs.com/package/@equinor/ioc-pb-common-frontend .

It will be something along the lines of '1.0.1-beta.1".

Install it using

yarn add @equinor/ioc-pb-common-frontend@1.0.1-beta.1

Testing the library locally with yarn symlink

When you have made changes to the library and want to test it via an app you also have locally. By using yarn's symlink support this is fairly easy.

In your package

In your package you want to link, enter this command:

yarn link

If your package is already registered you can skip this step, however, if you have a package with the same name registered, you have to unregister before you can do this step. To unregister, simply run:

yarn unlink

Now you can make sure that the package is build everytime you make a change to your code:

yarn dev

In your app you want to test the package

In your app you can link your package by running:

yarn link [package-name]

Now you can use it just like you would any library.

Update libraries to match pb frontend, or in both places.

Potential issues: yarn link dosen't link correctly

The yarn link [package-name] command writes in a line in your package.json file where it tells yarn/npm that a package has an exception to importing the package. Make sure that the names and the path are correct. It should be something like this

"resolutions": { @equinor/ioc-pb-common-frontend: "portal:path/to/the/package/repo/ioc-pb-common-frontend" }

Add the private flag if you do not have user rights cross domain yarn link -p [package-name]

Potential issues: Invalid Hook Call

You may get an error 'Invalid Hook Call Warning'. If you get this, from your library project folder run

npm link ../myapp/node_modules/react

substituting 'myapp' for the name of your app. See https://reactjs.org/warnings/invalid-hook-call-warning.html for more information.

Testing the library locally with yarn build

An alternative way of testing the library locally is by building the library locally and referring to this directly in package.json of the app you wish to test it in. This is however a very slow approach; for any changes to show up it requires a new build and install, which can take 5-10 mins.

How to:

1. In the app you wish to test new library changes in, go into package.json and set "@equinor/ioc-pb-common-frontend": "../../ioc-pb-common-frontend" (make sure you dont commit this change - it is only for testing locally)
2. In ioc-pb-common-frontend terminal: run "yarn build"
3. In app terminal: run "yarn" (this is the really slow one - and it looks like it's stuck and not doing anything. Have patience, go grab a coffee and wait 5-10 mins)

When you make changes to the npm package, you will have to repeat steps 2 + 3 in order to see those changes take effect in your app again.

Troubleshooting common issues

Github pages isnt updating to changes made in main

Github pages seems to randomly stop working. If it doesn't update with the newest changes, try the following:

1. In the github repo, go to the Settings tab, then in the left hand menu, within Code and Automation, go to Pages.
2. Source should be set to a branch called gh-pages, with folder root.
3. Change Source to main branch. Wait a few minutes then check the github pages page to see that it is now showing this readme file instead of storybook.
4. Change Source back to gh-pages branch. Wait a few minutes, then check to see that it is now showing storybook again, with all the latest and greatest components.