# 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.
