Skip to content

Commit

Permalink
chore: Renaming the package to @workleap/chromado
Browse files Browse the repository at this point in the history
  • Loading branch information
patricklafrance committed Apr 11, 2024
1 parent 6505db8 commit 5667e3f
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 33 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-olives-buy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@workleap/chromado": major
---

First major release and rebranding to @workleap/chromado
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# wl-chromatic-ado
# chromado

A library to easily integrate [Chromatic](https://www.chromatic.com/) with [Azure Pipelines](https://azure.microsoft.com/en-ca/products/devops/pipelines).

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)
[![CI](https://github.com/gsoft-inc/wl-chromatic-ado/actions/workflows/ci.yml/badge.svg)](https://github.com/gsoft-inc/wl-chromatic-ado/actions/workflows/ci.yml)
[![CI](https://github.com/gsoft-inc/wl-chromado/actions/workflows/ci.yml/badge.svg)](https://github.com/gsoft-inc/wl-chromado/actions/workflows/ci.yml)
[![npm version](https://img.shields.io/npm/v/@workleap/chromatic-ado)](https://www.npmjs.com/package/@workleap/chromatic-ado)

## Have a question or found an issue?

To ask a question or propose an idea, feel free to start a new [discussion](https://github.com/gsoft-inc/wl-chromatic-ado/discussions). If you found a bug, please open an [issue](https://github.com/gsoft-inc/wl-chromatic-ado/issues).
To ask a question or propose an idea, feel free to start a new [discussion](https://github.com/gsoft-inc/wl-chromado/discussions). If you found a bug, please open an [issue](https://github.com/gsoft-inc/wl-chromado/issues).

## Documentation

View the [user's documentation](https://gsoft-inc.github.io/wl-chromatic-ado).
View the [user's documentation](https://gsoft-inc.github.io/wl-chromado).

## 🤝 Contributing

Expand Down
6 changes: 3 additions & 3 deletions docs/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ layout: page

# About

To ask a question or propose an idea, feel free to start a new [discussion](https://github.com/gsoft-inc/wl-chromatic-ado/discussions) on Github. If you found a bug, please open an [issue](https://github.com/gsoft-inc/wl-chromatic-ado/issues) on Github.
To ask a question or propose an idea, feel free to start a new [discussion](https://github.com/gsoft-inc/wl-chromado/discussions) on Github. If you found a bug, please open an [issue](https://github.com/gsoft-inc/wl-chromado/issues) on Github.

## Contributing

Have a look at the [contributor's documentation](https://github.com/gsoft-inc/wl-chromatic-ado/blob/main/CONTRIBUTING.md).
Have a look at the [contributor's documentation](https://github.com/gsoft-inc/wl-chromado/blob/main/CONTRIBUTING.md).

## License

See the [LICENSE](https://github.com/gsoft-inc/wl-chromatic-ado/blob/main/LICENSE) on Github.
See the [LICENSE](https://github.com/gsoft-inc/wl-chromado/blob/main/LICENSE) on Github.
20 changes: 16 additions & 4 deletions docs/available-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,31 @@ icon: gear

# Available options

Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the Chromado. If an option is not accepted, Chromado will output an error message.

Here's how you can specify additional Chromatic CLI options:

```yaml !#4 chromatic.yml
- 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)
```
In addition to Chromatic CLI options, a few environment variables are accepted.
## CHROMATIC_DEBUG
Add the `CHROMATIC_DEBUG` environment variable to your `chromatic.yml` pipeline to start a Chromatic build in "debug" mode and to benefit from additional logs from the `@workleap/chromatic-ado` script:
Add the `CHROMATIC_DEBUG` environment variable to your `chromatic.yml` pipeline to start a Chromatic build in "debug" mode and to benefit from additional logs from the Chromado:

```yaml !#8 chromatic.yml
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
Expand All @@ -31,7 +43,7 @@ Add the `CHROMATIC_DISABLE_TURBOSNAP` environment variable to your `chromatic.ym
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
Expand Down
22 changes: 11 additions & 11 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@ icon: rocket

# Getting started

Welcome to the `@workleap/chromatic-ado` package documentation. On this page, you'll discover how this package can optimize your [Chromatic](https://www.chromatic.com/) + [Azure Pipelines](https://azure.microsoft.com/en-ca/products/devops/pipelines) integration and learn how to set it up for your environment.
Welcome to the Chromado documentation, a library to seamlessly integrate [Chromatic](https://www.chromatic.com/) + [Azure Pipelines](https://azure.microsoft.com/en-ca/products/devops/pipelines). On this page, you'll discover how this package can optimize your workflow and learn how to set it up for your environment.

## Features

This package aims to provide a workflow similar to the native Chromatic [GitHub integration](https://www.chromatic.com/docs/github-actions/). While it's hardly as good, it's a functional workflow until Chromatic offers a native Azure Pipelines integration.
Chromado aims to provide a workflow similar to the native Chromatic [GitHub integration](https://www.chromatic.com/docs/github-actions/). While it's hardly as good, it's a functional workflow until Chromatic offers a native Azure Pipelines integration.

### Build notifications

The Chromatic Azure Pipelines [documentation](https://www.chromatic.com/docs/azure-pipelines/) explains how to integrate Chromatic within an existing pipeline through its CLI, but it's basically it, it lacks build notifications, it's up to you to figure out this part.

This package resolves this by automatically providing build notifications as pull request comments whenever a Chromatic build is completed:
Chromado resolves this by automatically providing build notifications as pull request comments whenever a Chromatic build is completed:

:::align-image-left
![Pull request notification example](./static/chromatic-pr-notification.png)
:::

### TurboSnap

This package is compatible with [TurboSnap](https://www.chromatic.com/docs/turbosnap/) and will by default trigger Chromatic builds with TurboSnap activated.
Chromado is compatible with [TurboSnap](https://www.chromatic.com/docs/turbosnap/) and will by default trigger Chromatic builds with TurboSnap activated.

### Squash merge

Chromatic doesn't offer any mechanism to support [squash merge](https://learn.microsoft.com/en-us/azure/devops/repos/git/merging-with-squash?view=azure-devops) on Azure DevOps. This means that when using Azure DevOps as a Git provider, if you wish to keep your Chromatic [baselines](https://www.chromatic.com/docs/branching-and-baselines/) up-to-date, you would be constrained to merging your pull requests with regular merge commits. Fortunately, this package implements a workflow based on Chromatic's [auto-accept-changes](https://www.chromatic.com/docs/azure-pipelines/#azure-squashrebase-merge-and-the-main-branch) feature, allowing pull requests to be completed with squash merges.
Chromatic doesn't offer any mechanism to support [squash merge](https://learn.microsoft.com/en-us/azure/devops/repos/git/merging-with-squash?view=azure-devops) on Azure DevOps. This means that when using Azure DevOps as a Git provider, if you wish to keep your Chromatic [baselines](https://www.chromatic.com/docs/branching-and-baselines/) up-to-date, you would be constrained to merging your pull requests with regular merge commits. Fortunately, Chromado implements a workflow based on Chromatic's [auto-accept-changes](https://www.chromatic.com/docs/azure-pipelines/#azure-squashrebase-merge-and-the-main-branch) feature, allowing pull requests to be completed with squash merges.

Here's how it works:

Expand Down Expand Up @@ -96,14 +96,14 @@ steps:
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```
!!!info
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromado` script. If an option is not accepted, the script will output an error message.
!!!

2.2. If your project doesn't include a template file to set up your pipelines, paste the following configuration:
Expand Down Expand Up @@ -162,14 +162,14 @@ steps:
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
```

!!!info
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromatic-ado` script. If an option is not accepted, the script will output an error message.
Most of Chromatic [CLI options](https://www.chromatic.com/docs/cli/#configuration-options) are accepted by the `@workleap/chromado` script. If an option is not accepted, the script will output an error message.
!!!

3. Create a new [Azure pipeline from an existing YAML file](https://www.nathannellans.com/post/azure-devops-yaml-pipelines-part-1). Name this new pipeline "Chromatic" or choose a name that best suits your project.
Expand Down Expand Up @@ -218,7 +218,7 @@ If you encounter issues with the Chromatic pipeline, follow these steps:
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
Expand All @@ -237,7 +237,7 @@ If you encounter issues with the Chromatic pipeline, follow these steps:
- task: CmdLine@2
displayName: Chromatic
inputs:
script: pnpm dlx @workleap/chromatic-ado
script: pnpm dlx @workleap/chromado
env:
CHROMATIC_PROJECT_TOKEN: $(CHROMATIC_PROJECT_TOKEN)
CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN: $(PULL_REQUEST_COMMENT_ACCESS_TOKEN)
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"name": "@workleap/chromatic-ado",
"name": "@workleap/chromado",
"author": "Workleap",
"version": "0.0.18",
"description": "Utilities to use Chromatic with Azure DevOps.",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "git+https://github.com/gsoft-inc/wl-chromatic-ado.git"
"url": "git+https://github.com/gsoft-inc/wl-chromado.git"
},
"publishConfig": {
"access": "public",
Expand Down
18 changes: 9 additions & 9 deletions retype.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@ start:
input: ./docs
output: .retype

url: https://gsoft-inc.github.io/wl-chromatic-ado/
url: https://gsoft-inc.github.io/wl-chromado/

branding:
title: "Chromatic - ADO"
title: "Chromado"
logo: ./static/logo.png

favicon: ./static/favicon.png

edit:
repo: "https://github.com/gsoft-inc/wl-chromatic-ado"
repo: "https://github.com/gsoft-inc/wl-chromado"
base: /docs
branch: main

Expand All @@ -49,27 +49,27 @@ links:

- text: Found a bug?
icon: issue-opened
link: https://github.com/gsoft-inc/wl-chromatic-ado/issues
link: https://github.com/gsoft-inc/wl-chromado/issues
target: blank

- text: Feature requests
icon: comment-discussion
link: https://github.com/gsoft-inc/wl-chromatic-ado/discussions
link: https://github.com/gsoft-inc/wl-chromado/discussions
target: blank

- text: Releases
icon: tag
link: https://github.com/gsoft-inc/wl-chromatic-ado/releases
link: https://github.com/gsoft-inc/wl-chromado/releases
target: blank

- text: Github
icon: mark-github
link: https://github.com/gsoft-inc/wl-chromatic-ado
link: https://github.com/gsoft-inc/wl-chromado
target: blank

- text: NPM
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0V0Z" fill="#CC0000"/><path d="M11.9184 2.57758H2.57764V21.4214H11.9175V7.32958H16.6695V21.4214H21.4215V2.57758H11.9184Z" fill="white"/></svg>
link: https://www.npmjs.com/package/@workleap/chromatic-ado
link: https://www.npmjs.com/package/@workleap/chromado
target: blank

footer:
Expand All @@ -81,7 +81,7 @@ footer:

- text: License
icon: shield-check
link: https://github.com/gsoft-inc/wl-chromatic-ado/blob/main/LICENSE
link: https://github.com/gsoft-inc/wl-chromado/blob/main/LICENSE
target: blank

# To allow using {{ }} in code blocks.
Expand Down

0 comments on commit 5667e3f

Please sign in to comment.