@procore/directory-add-company

directory-add-company

New add company flow allowing users to add a connected company to their directory by searching PCN.

Installation

yarn add @procore/directory-add-company

Development

Adding Dependencies

This package uses yarn workspaces to manage dependencies. To add a dependency, run the following command in the root directory of this package:

yarn workspace @procore/directory-add-company add <npm-package-name>

Yarn Workspaces Docs

Local Development using Storybook

This package uses storybook to develop and test components. To run storybook, run the following command in the root directory of this package:

yarn storybook

Storybook Docs

Local Development inside the Directory Hydra Client

By linking the directory hydra client to the directory add company package, you can import the package in the directory hydra client as you would any other package.

Install yalc https://www.npmjs.com/package/yalc If you already have yalc installed you can skip this step.

yarn global add yalc

In this directory directory-js-monorepo/packages/directory-add-company, run

yarn publish:locally

This will publish the package to your local yalc store.

In the Directory hydra client root folder, run

yalc add @procore/directory-add-company

This will link the package to the directory hydra client.

You can then import the package in the directory hydra client as you would any other package.

import { AddCompanyButton } from '@procore/directory-add-company';

After making changes to the directory add company package, run yarn publish:locally in this directory and restart your server in the directory hydra client to see the changes.

Publishing to NPM and updating the package in the Directory Hydra Client

To publish a release with changes:

1. Create new new branch (e.g., git checkout -b chore/release).
2. Create a changeset by running yarn changeset in the root folder of this monorepo and follow the prompts. This will create a file in the .changeset folder.
3. Run yarn changeset version to create a release containing all changes. This command will update the version(s) of any packages that have changed, as well as update any relevant CHANGELOG.md files.
4. Commit the changes (e.g., git commit -m "chore: release").
5. Create a pull request. git push -u origin <BRANCH_NAME>, and then create pull request in the web UI.
6. Once the pull request is merged to main the updated packages will be published to npm once the CI pipeline is completed.

Updating the package in the Directory Hydra Client

Once the PR containing the changeset is merged, you can update the package in the directory hydra client by running the following command in the directory hydra client root folder:

yarn add @procore/directory-add-company

You can then test the changes in the directory hydra client by running yarn start in the directory hydra client root folder.

If everything looks good, you can commit the changes to the directory hydra client and create a PR. If CI passes you can then create a tugboat instance from your branch to QA the changes.

Running E2E Tests Locally

This package uses Cypress to run E2E tests. To run the E2E tests, run the following command in the root directory of this package:

yarn cypress:local

Cypress Docs

Trouble Shooting

• If you receive an error stating no declaration file was found after linking the package, run yarn build in the directory-add-company package and restart your server.

Publishing Storybook by Chromatic

The Chromatic snapshot testing (Regression Testing) is turned off by default as we can publish stories to Chromatic without running these tests.

Note: DO NOT turn on regression testing without acquiring leadership sign off for funding as this will accrue cost

References: Chromatic Docs

How to publish stories from local machine

In order to publish stories to Chromatic:

• Please copy the Chromatic project token to .env file:

// .env
CHROMATIC_PROJECT_TOKEN=your-token-here

• Run chromatic script:

yarn chromatic

How to publish stories with CI tools

• Please copy the Chromatic project from Chromatic token to CI Environment value.

• Add new job to your process. Circle CI example:

  workflows:
    ...
    jobs:
      - storybook_chromatic_deployment:
      requires:
          - setup
  

  jobs:
      storybook_chromatic_deployment:
      steps:
      - run:
          name: Deploy To Chromatic
          command: yarn chromatic:ci
  

• Optionally(Recommended) if you like to speed up the build with Chromatic you can use the already built stories so we can depend the Chromatic build on the generated build from Storybook build. Steps are as following:

  1. Add --storybook-build-dir ./storybook-static flag to the chromatic script.(Already added)

  2. Add --webpack-stats-json flag to storybook:build.(Already added)

  3. Add the steps to build stories before building Chromatic.

             ```
             workflows:
                 - storybook_chromatic_deployment
                   requires:
                     - build_storybook
             ```
     
     </details>
      <details>
     

     How to see published storybook:
     Please visit: https://www.chromatic.com/docs/setup#view-published-storybook