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