@justeattakeaway/generator-pie-component

generator-pie-component

generator-pie-component is a generator for Pie Web Components.

---

Usage

1. Installation
2. Generate the component
3. Add the component to storybook
4. Set up Percy visual regression testing
5. Set up the project label for Github

Installation

Build the generator package locally (it is recommended you force the build)

$ yarn build --filter=generator-pie-component --force

Generating a new component

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.

Setting up Storybook:

• Add the component to the storybook package.json dependencies:

"@justeattakeaway/pie-{{COMPONENT_NAME}}": "0.0.0",

Setting up Visual Regression Testing:

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

Setting up the project label for Github:

• Create a label for the component in the GitHub UI
• Add the new label to project-labeler.yml under the Component projects section

Local development

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

Contributing

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