generator-pie-component
is a generator for Pie Web Components.
- Installation
- Generate the component
- Add the component to storybook
- Set up Percy visual regression testing
- Set up the project label for GitHub
Build the generator package locally (it is recommended you force the build)
$ yarn build --filter=generator-pie-component --force
To run the generator, use this command from the root directory within the monorepo:
$ npx yo @justeattakeaway/pie-component
An interactive prompt should now be displayed asking for a component name.
Once you have completed all the prompts, your scaffolded component will be generated! 🎉
The newly generated package.json
file will most likely contain references to the local monorepo packages. Please replace its versions with the latest published version:
cd packages/components/pie-{{COMPONENT_NAME}}
npx npm-check-updates "@justeattakeaway/*" -u
Note: If this step fails, ensure you have installed the repository dependencies with yarn
. Otherwise, this (and any other commands) will fail.
- Add the component to the storybook package.json dependencies:
"@justeattakeaway/pie-{{COMPONENT_NAME}}": "0.0.0",
- Create a Percy project for the component on the Percy website.
- Update the
test:visual
command in package.json to the following:
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_COMPONENT_NAME} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
- Add the token environment variable to
github/workflows/ci.yml
as follows:
PERCY_TOKEN_PIE_COMPONENT_NAME: ${{ secrets.PERCY_TOKEN_PIE_COMPONENT_NAME }}
- Now you need to add this token as a repository secret in GitHub. It must be named
PERCY_TOKEN_PIE_COMPONENT_NAME
and the value should be the Percy token for the component. Visual tests will not work/run if this is not set up correctly.
- Create a label for the component on GitHub.
- Add the new label to
project-labeler.yml
under theComponent projects
section
Install the dependencies. Note that this, and the following commands below, should be run from the root of the monorepo:
yarn
To build the generator-pie-component
package, run the following command:
yarn build --filter=generator-pie-component
You can also build the component in watch
mode if desired with the following command:
yarn watch --filter=generator-pie-component
In order to contribute to the generator-pie-component
, it's advised to link your local build of the generator to Yeoman.
To do this, run yarn link
from the root of the generator-pie-component
folder in the mono-repo.
Once you have done this, running yo @justeattakeaway/generator-pie-component
will run your local copy of the generator (rather than the version installed globally via NPM/Yarn).