Workleap Chromado

https://github.com/workleap/wl-chromado
Admin
A library designed to easily integrate Chromatic with Azure Pipelines for visual testing and review...
Tokens:2,024
Snippets:25
Trust Score:9.7
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Azure Pipeline Configuration (YAML)

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/getting-started.md

Defines the configuration for an Azure pipeline to integrate Chromatic. This YAML file specifies the pipeline's setup and tasks.

```yaml
--- !chromatic.yml
# This is a placeholder for the actual Azure pipeline configuration.
# The content provided in the original text was incomplete and only included the file name and a comment.
# For a full implementation, refer to Chromatic's Azure Pipelines documentation.

```

--------------------------------

### Run Chromatic Build Locally

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/getting-started.md

Execute a local Chromatic build to test your pipeline. This command initiates the build process and requires your Chromatic project token.

```bash
pnpm chromatic --project-token <YOUR_CHROMATIC_PROJECT_TOKEN>
```

--------------------------------

### Configure Chromatic Project (JSON)

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/getting-started.md

Creates a 'chromatic.config.json' file at the root of your VSCode project to store your Chromatic project ID. This is essential for the Chromado integration.

```json
{
    "projectId": "<YOUR_CHROMATIC_PROJECT_ID>"
}
```

--------------------------------

### Azure Pipeline Trigger and Steps for Chromatic

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/getting-started.md

Defines the Azure pipeline configuration to trigger Chromatic on pull requests targeting the 'main' branch. It includes steps for checking out the full Git history, executing a setup template, and running the Chromatic command-line tool with project and comment access tokens.

```yaml
trigger:
  branches:
    include:
      - main

pr:
  branches:
    include:
      - main
  drafts: false

steps:
  - checkout: self
    displayName: Get full Git history
    fetchDepth: 0

  - template: templates/setup.yml

  - task: CmdLine@2
    displayName: Chromatic
    inputs:
      script: pnpm dlx @workleap/chromado
    env:
      CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
      CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Installs all the necessary project dependencies using PNPM after PNPM has been globally installed. This command should be run from the project's root directory.

```bash
pnpm install
```

--------------------------------

### Install PNPM Globally

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Installs the PNPM package manager globally on your system, which is a prerequisite for managing this project's dependencies.

```bash
npm install -g pnpm
```

--------------------------------

### Enable Chromatic Debug Mode with Chromado

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/available-options.md

This example demonstrates enabling debug mode for Chromatic builds via Chromado by setting the CHROMATIC_DEBUG environment variable. This provides more detailed logs for troubleshooting.

```yaml
- task: CmdLine@2
  displayName: Chromatic
  inputs:
    script: pnpm dlx @workleap/chromado
  env:
    CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
    CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
    CHROMATIC_DEBUG: true
```

--------------------------------

### Reset Monorepo Installation

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Resets the monorepo installation by deleting 'dist' folders, clearing caches, and removing 'node_modules' folders.

```bash
pnpm reset
```

--------------------------------

### Specify Default Branch for Chromado

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/available-options.md

This example shows how to configure Chromado to use a non-standard default branch for your repository by setting the CHROMATIC_DEFAULT_BRANCH environment variable.

```yaml
- task: CmdLine@2
  displayName: Chromatic
  inputs:
    script: pnpm dlx @workleap/chromado
  env:
    CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
    CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
    CHROMATIC_DEFAULT_BRANCH: master
```

--------------------------------

### Run Chromado with Chromatic Options

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/available-options.md

This snippet shows how to execute Chromado using the pnpm dlx command, accepting standard Chromatic CLI options. It configures necessary environment variables for authentication and project access.

```yaml
- task: CmdLine@2
  displayName: Chromatic
  inputs:
    script: pnpm dlx @workleap/chromado --exit-zero-on-changes
  env:
    CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
    CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```

--------------------------------

### Build Project Packages

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Compiles the project's packages. This command is useful for debugging compilation issues without running the full release flow. The output is typically placed in respective 'dist' directories.

```bash
pnpm build
```

--------------------------------

### Add Retype License Key

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Adds a Retype license key to your local configuration, which may be necessary to bypass limitations on Pro features of the Retype documentation platform.

```bash
npx retype wallet --add <your-license-key-here>
```

--------------------------------

### Clean Project Artifacts

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Cleans the project by deleting 'dist' directories and clearing caches for both the shell packages and the sample application.

```bash
pnpm clean
```

--------------------------------

### Update Outdated Dependencies

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Updates all outdated dependencies to their latest versions. Refer to PNPM documentation for more details.

```bash
pnpm update-outdated-deps
```

--------------------------------

### Generate Release Changesets

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Initiates the changeset process to manage package versioning and changelog generation according to SemVer standards. This is the first step in releasing a new package version.

```bash
pnpm changeset
```

--------------------------------

### Lint Project Files

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Lints project files using ESLint, StyleLint, and TypeScript type checking. This command helps identify and potentially fix code quality and style issues.

```bash
pnpm lint
```

--------------------------------

### Check for Outdated Dependencies

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Checks for dependencies that are outdated compared to their latest available versions. Refer to PNPM documentation for more details.

```bash
pnpm list-outdated-deps
```

--------------------------------

### Configure chromatic.config.json to ignore localization files

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/best-practices.md

This configuration snippet for `chromatic.config.json` utilizes the 'untraced' setting to tell Chromatic to ignore changes in localization files (`resources.json`). This is a best practice to prevent TurboSnap from being disabled and initiating a full build due to modifications in these files.

```json
{
    "$schema": "https://www.chromatic.com/config-file.schema.json",
    "untraced": ["**/resources.json"]
}
```

--------------------------------

### Configure chromatic.config.json to ignore package.json

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/best-practices.md

This configuration snippet for `chromatic.config.json` uses the 'untraced' setting to instruct Chromatic to ignore changes in `package.json` files. This prevents TurboSnap from being disabled and triggering a full build when package dependencies are updated.

```json
{
    "$schema": "https://www.chromatic.com/config-file.schema.json",
    "untraced": ["**/package.json"]
}
```

--------------------------------

### Configure Untraced Files in chromatic.config.json

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/best-practices.md

Add specific constant or utility files to the 'untraced' setting in your chromatic.config.json to prevent them from triggering snapshot baseline refreshes when they change.

```json
{
  "untraced": [
    "src/constants/featureFlags.ts",
    "src/utils/dates.ts"
  ]
}
```

--------------------------------

### Fix Linting Errors Automatically

Source: https://github.com/workleap/wl-chromado/blob/main/CONTRIBUTING.md

Attempts to automatically fix linting errors in the project files using ESLint's built-in fixing capabilities.

```bash
eslint . --fix
```

--------------------------------

### Disable TurboSnap in Chromatic Builds with Chromado

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/available-options.md

This snippet illustrates how to disable TurboSnap for Chromatic builds by setting the CHROMATIC_DISABLE_TURBOSNAP environment variable in your Chromado pipeline configuration.

```yaml
- task: CmdLine@2
  displayName: Chromatic
  inputs:
    script: pnpm dlx @workleap/chromado
  env:
    CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
    CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
    CHROMATIC_DISABLE_TURBOSNAP: true
```

--------------------------------

### Azure DevOps Pipeline Configuration (YAML)

Source: https://github.com/workleap/wl-chromado/blob/main/docs/introduction/add-keeper-secrets.md

This snippet shows how to configure an Azure DevOps pipeline to use a variable group named 'Chromatic-kv' and set environment variables for the Chromatic CLI. It requires private agents to access the Key Vault.

```yaml
variables:
  - group: Chromatic-kv

pool: workleap

steps:
  - task: CmdLine@2
    displayName: Chromatic
    inputs:
      script: pnpm dlx @workleap/chromado
    env:
      CHROMATIC_PROJECT_TOKEN: $(CHROMATIC-PROJECT-TOKEN-WL-NAVBAR)
      CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL-REQUEST-COMMENT-ACCESS-TOKEN)
      CHROMATIC_DEBUG: true
```
Tokens:
Raw