@servicetitan/anvil2-ext-atlas

Atlas • Anvil2 Extended Library

This package contains the UI components used in the Atlas chat experience. These components are built using Anvil2, and are maintained by both the Atlas and Anvil teams.

Getting started

Installation

To use the Atlas UI components in this library, install the extended library in your project:

npm install @servicetitan/anvil2-ext-atlas

[!NOTE] This package requires @servicetitan/anvil2 as a peerDependency, so make sure that is installed as well, and meets the version requirement in this package's package.json.

Usage

The Atlas Extended Library includes React components and utils, which can be imported and used just as you would Anvil2 or other component libraries:

import { ChatWindow } from "@servicetitan/anvil2-ext-atlas";

export function ExampleComponent() {
  return <ChatWindow />;
}

[!WARNING] This should be updated after actually migrating components to this package.

Contributing

Check out the CONTRIBUTING.md in the root of the monorepo for general instructions for running and contributing to this repo.

File structure

Here is a high-level breakdown of where files for source code should exist within this package:

src/
  components/
    ComponentName/
      ComponentName.tsx
      ComponentName.module.scss
      ComponentName.stories.tsx
      ComponentName.test.tsx
      index.ts
  hooks/
    useHookName.ts
    index.ts
  utils/
    someUtil.ts
    index.ts
  index.ts

[!NOTE] If a component has internal utils or sub-components, they can be added to an internal directory within the component directory.

Testing

We recommend including unit tests to verify functionality of all components and utils

Storybook

Storybook is a great tool for development and testing. If you haven't used it before, check out their docs to learn more.

Each component should have a Component.stories.tsx file, with at least one story to test and validate features.

To run Storybook locally for this project, simply run:

pnpm sb:atlas

Chromatic

This project also leverages Chromatic to publish the Storybook on each branch, and prevent visual regressions in PRs. Each PR will have two relevant checks:

• UI Tests: Anvil2 Extended Atlas: does a visual regression test on stories to verify visual differences
• Storybook Publish: Anvil2 Extended Atlas: publishes the Storybook for viewing and testing

Any changes that are caught in the UI Tests should be approved before merging and releasing changes.