Skip to content

Latest commit

 

History

History
106 lines (67 loc) · 3.58 KB

CONTRIBUTING.md

File metadata and controls

106 lines (67 loc) · 3.58 KB
Raw

How to contribute

This project uses the fork feature in Github for anyone outside of the core maintainers.

Develop Locally

We use NVM to manage node versions. Our node version is in the ./nvmrc file. We also assume you have access to our private org on NPM.

Run the following commands to get your local development environment set up.

  1. Make sure you're using the specified npm version
nvm use
  1. Install all dependencies off of the package-lock.json. (Use npm i if you're introducing new dependencies. Please note that all dev-dependencies need to be listed on the root package.json as well as the package specific package.json)
npm ci
  1. Builds all the things
npm run build
  1. We use Storybook to develop locally along with Next.js.
npm run storybook
  1. Don't forget to add your component to the kitchen-sink page. You can run npm run docsite:dev to develop and test with the kitchen-sink page. You can only access this page directly via http://localhost:3000/kitchen-sink. This page allows us to quickly check that all the components render as expected.

Testing

We use Testing Library and/or Storybook's new Interaction feature for Unit & Interaction Testing

This command runs the Jest.

npm run test

This command runs the Storybook Test runner

npm run test-storybook

Good resources on testing:

Avoid writing "render" or "display" tests. Leverage our "Tests" stories in Storybook for this. Those UI tests will be tested in Chromatic.

Component Development

Create a new component use the following command. It will stub out all the required files using plop-templates.

npm run new-component NewComponentName

You can create an experimental release for testing by following the release doc

Contribute a component

Release a component

Testing an PR in your project

We will use the npx git-publish CLI from git-publish to test a PR in your project. Along with GitPkg. This will allow you to test a PR in your project without having to wait for a release. This method will unlock the ability to test in Preview and Staging environments. We're looking into automating this as part of our PR CI.

# cd into the package directory for the component you want to test
cd ui/select
# run the git-publish command. it will prompt you to install if its your first time
npx git-publish
# it will publish the package to our repo under `npm/<your-branch-name>`

Then in your project you can run the following command to install the package from the branch.

npm install 'https://gitpkg.now.sh/washingtonpost/wpds-ui-kit/<component-directory>?<your-branch-name'

Troubleshooting

You may need to override the version of the package in your package.json. You can do this by adding the following to your package.json.

"overrides": {
  "@washingtonpost/wpds-select": "https://gitpkg.now.sh/washingtonpost/wpds-ui-kit/select?main"
}

Or running npm dedupe after installing the package.