From 5667e3ff0a943297dfb28ec4b9e10cfaa0115500 Mon Sep 17 00:00:00 2001 From: patricklafrance Date: Thu, 11 Apr 2024 11:40:27 -0400 Subject: [PATCH] chore: Renaming the package to @workleap/chromado --- .changeset/twelve-olives-buy.md | 5 +++++ README.md | 8 ++++---- docs/about.md | 6 +++--- docs/available-options.md | 20 ++++++++++++++++---- docs/getting-started.md | 22 +++++++++++----------- package.json | 4 ++-- retype.yml | 18 +++++++++--------- 7 files changed, 50 insertions(+), 33 deletions(-) create mode 100644 .changeset/twelve-olives-buy.md diff --git a/.changeset/twelve-olives-buy.md b/.changeset/twelve-olives-buy.md new file mode 100644 index 0000000..731718e --- /dev/null +++ b/.changeset/twelve-olives-buy.md @@ -0,0 +1,5 @@ +--- +"@workleap/chromado": major +--- + +First major release and rebranding to @workleap/chromado diff --git a/README.md b/README.md index 6be94a1..a4f3cbe 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/about.md b/docs/about.md index 49aca99..9ae6aab 100644 --- a/docs/about.md +++ b/docs/about.md @@ -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. diff --git a/docs/available-options.md b/docs/available-options.md index 24e0307..d18639c 100644 --- a/docs/available-options.md +++ b/docs/available-options.md @@ -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) @@ -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) diff --git a/docs/getting-started.md b/docs/getting-started.md index 4b11349..7a1ebe6 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -5,17 +5,17 @@ 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) @@ -23,11 +23,11 @@ This package resolves this by automatically providing build notifications as pul ### 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: @@ -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: @@ -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. @@ -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) @@ -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) diff --git a/package.json b/package.json index 68d9804..da93e94 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/retype.yml b/retype.yml index 1f063ad..18953f6 100644 --- a/retype.yml +++ b/retype.yml @@ -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 @@ -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: - link: https://www.npmjs.com/package/@workleap/chromatic-ado + link: https://www.npmjs.com/package/@workleap/chromado target: blank footer: @@ -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.