Common Web Components!

About

• This project is used for creating and sharing components between the Web App Hiring project and the Web App Worker project.

Notes

• This project should not make requests to our API or use any of our services.

Setup

Install

• npm ci

Commiting changes

• npm run commit - Runs git-cz. For breaking changes, make sure to indicate that in the commit prompts so that semantic-release can do it's thing.

Test

• npm test
• npm test -- path/to/file.js

Running

npm start - runs storybook on port 3000

Local development

When adding/modifying components here it will often be helpful to link it to the repo in which the changes need to be used. To do that run:

• npm run link in the root of this repo
• npm run link:lib-web-common" in the root of the other repo

Don't forget to update the lib-common dep after the MR in this repo is merged and published.

Beta builds

• Run npm run deploy:beta from a branch that matches one of the branch patterns in .releaserc (except on develop or master as these should only be deployed by CI)
• e.g. run npm run deploy:beta from a branch beta will trigger a build if the other conditions are met for a patch, minor, major release.

Content Block Inputs

These components located at ~shared/ContentBlock/ContentBlockInputs/ should all call onChange with an object where the keys are the props the components manipulate and the values are the values. This is so that ContentSectionInput can manage updating it's section as a result.

Using shouldForwardProp

When using shouldForwardProp on styled components, the following pattern should be used:

shouldForwardProp: prop => !["someProp", "otherProp"].includes(prop)

• We'll use this pattern even if we're only handling a single prop. Just for simplicity and ease of adding more in the future.
• We'll no longer be using the isPropValid lib, since it can cause issues with props when styling custom components. The above pattern works in every situation.