-> Locally start a chromatic build and accepts the changes to create a baseline
-
-> Switch to a branch, make a visual change to a component for which a story is watched by Chromatic and the commit the change
-
-> A Chromatic build should be automatically triggered and a pull request notifications should be posted with visual changes
-
-
Click on the URL of the build and accept the changes
-
-
-> Re-queue the Chromatic pipeline
-
-> Once it completed with success, complete the PR
-
-> Another Chromatic build should be triggered on the main branch. The changes should be auto accepted and the pipeline should complete successfully
+
To test your new Chromatic pipeline, execute the following steps:
+
+
Locally start a Chromatic build by opening a terminal at the root of the project and executing the following command: pnpm chromatic --project-token <YOUR_PROJECT_TOKEN>.
+
+
Go to the Chromatic application and accepts all the changes to create a baseline. This guide takes for granted that your application already includes a few Storybook stories.
+
+
Switch to a new Git branch and update an existing component watched by Chromatic to trigger a visual change. Commit the change.
+
+
Go to Azure Devops and create a pull request for your new branch.
+
+
A Chromatic build should be automatically triggered for the pull request and a pull request comment with the visual change should be added to the pull request. The comment should mention that Chromatic detected at least one visual change.
+
+
In the pull request comment, click on the "Build URL" link. Accept the changes in the Chromatic application.
+
+
Re-queue the Chromatic pipeline by clicking on the "Re-queue" button of the pull request.
+
+
Once the Chromatic pipeline completed with success, merge the pull request.
+
+
Once merged, a new Chromatic build should be automatically triggered for the main branch. The changes of this new build should be automatically accepted and the pipeline should complete successfully.
+
+
#
diff --git a/index.html b/index.html
index 606b366..237bc06 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
+
@@ -30,11 +30,11 @@
-
+
-
+
-
+
diff --git a/resources/js/config.js b/resources/js/config.js
index eb83909..01ddd18 100644
--- a/resources/js/config.js
+++ b/resources/js/config.js
@@ -1 +1 @@
-var __DOCS_CONFIG__ = {"id":"FoEEAX1S78Xe1FVZiRkr4zpM21dE13PhoK","key":"/fvtKN7U+QhuELefuLMYxCpqJkaaimguDz10nHwYUZo.CBw57DPcksPKNNOHA65aiKvQC4J8SbW8r1NEeKvg3HD5HLwmet7JXga9nI/ZSRajUXDopZYkxrDUYj/YkMcDqQ.300046","base":"/wl-chromatic-ado/","host":"gsoft-inc.github.io","version":"1.0.0","useRelativePaths":true,"documentName":"index.html","appendDocumentName":false,"trailingSlash":true,"preloadSearch":false,"cacheBustingToken":"3.5.0.766034026414","cacheBustingStrategy":"query","sidebarFilterPlaceholder":"Filter","toolbarFilterPlaceholder":"Filter","showSidebarFilter":true,"filterNotFoundMsg":"No member names found containing the query \"{query}\"","maxHistoryItems":15,"homeIcon":"","access":[{"value":"public","label":"Public"},{"value":"protected","label":"Protected"}],"toolbarLinks":[{"id":"fields","label":"Fields"},{"id":"properties","label":"Properties"},{"id":"methods","label":"Methods"},{"id":"events","label":"Events"}],"sidebar":[{"n":"about","l":"About","v":false},{"n":"getting-started","l":"Getting started","s":""}],"search":{"mode":0,"minChars":2,"maxResults":20,"placeholder":"Search","hotkeys":["k"],"noResultsFoundMsg":"Sorry, no results found.","recognizeLanguages":true,"languages":[0],"preload":false},"resources":{"History_Title_Label":"History","History_ClearLink_Label":"Clear","History_NoHistory_Label":"No history items","API_AccessFilter_Label":"Access","API_ParameterSection_Label":"PARAMETERS","API_SignatureSection_Label":"SIGNATURE","API_CopyHint_Label":"Copy","API_CopyNameHint_Label":"Copy name","API_CopyLinkHint_Label":"Copy link","API_CopiedAckHint_Label":"Copied!","API_MoreOverloads_Label":"more","API_MoreDropdownItems_Label":"More","API_OptionalParameter_Label":"optional","API_DefaultParameterValue_Label":"Default value","API_InheritedFilter_Label":"Inherited","Search_Input_Placeholder":"Search","Toc_Contents_Label":"Contents","Toc_RelatedClasses_Label":"Related Classes","History_JustNowTime_Label":"just now","History_AgoTime_Label":"ago","History_YearTime_Label":"y","History_MonthTime_Label":"mo","History_DayTime_Label":"d","History_HourTime_Label":"h","History_MinuteTime_Label":"m","History_SecondTime_Label":"s"}};
+var __DOCS_CONFIG__ = {"id":"TwG0HI78ArFzbWXKQFmTFXaLNBHfFpbkXx","key":"9MLTGIsneNxLSFhDz5vhwiV25dYC6i27HFTqq1evnrQ.BTCZinFFQEMB3iafiHQaBQ63z10lHarM45llscVlzAfbj6kzPmJttNHpjkHEGGeMbIi9Yn0IsmW2aAUb5H1YzQ.300051","base":"/wl-chromatic-ado/","host":"gsoft-inc.github.io","version":"1.0.0","useRelativePaths":true,"documentName":"index.html","appendDocumentName":false,"trailingSlash":true,"preloadSearch":false,"cacheBustingToken":"3.5.0.766113768284","cacheBustingStrategy":"query","sidebarFilterPlaceholder":"Filter","toolbarFilterPlaceholder":"Filter","showSidebarFilter":true,"filterNotFoundMsg":"No member names found containing the query \"{query}\"","maxHistoryItems":15,"homeIcon":"","access":[{"value":"public","label":"Public"},{"value":"protected","label":"Protected"}],"toolbarLinks":[{"id":"fields","label":"Fields"},{"id":"properties","label":"Properties"},{"id":"methods","label":"Methods"},{"id":"events","label":"Events"}],"sidebar":[{"n":"about","l":"About","v":false},{"n":"getting-started","l":"Getting started","s":""}],"search":{"mode":0,"minChars":2,"maxResults":20,"placeholder":"Search","hotkeys":["k"],"noResultsFoundMsg":"Sorry, no results found.","recognizeLanguages":true,"languages":[0],"preload":false},"resources":{"History_Title_Label":"History","History_ClearLink_Label":"Clear","History_NoHistory_Label":"No history items","API_AccessFilter_Label":"Access","API_ParameterSection_Label":"PARAMETERS","API_SignatureSection_Label":"SIGNATURE","API_CopyHint_Label":"Copy","API_CopyNameHint_Label":"Copy name","API_CopyLinkHint_Label":"Copy link","API_CopiedAckHint_Label":"Copied!","API_MoreOverloads_Label":"more","API_MoreDropdownItems_Label":"More","API_OptionalParameter_Label":"optional","API_DefaultParameterValue_Label":"Default value","API_InheritedFilter_Label":"Inherited","Search_Input_Placeholder":"Search","Toc_Contents_Label":"Contents","Toc_RelatedClasses_Label":"Related Classes","History_JustNowTime_Label":"just now","History_AgoTime_Label":"ago","History_YearTime_Label":"y","History_MonthTime_Label":"mo","History_DayTime_Label":"d","History_HourTime_Label":"h","History_MinuteTime_Label":"m","History_SecondTime_Label":"s"}};
diff --git a/resources/js/search.json b/resources/js/search.json
index f573f95..7431366 100644
--- a/resources/js/search.json
+++ b/resources/js/search.json
@@ -1 +1 @@
-[[{"l":"About","p":["To ask a question or propose an idea, feel free to start a new discussion on Github. If you found a bug, please open an issue on Github."]},{"l":"Contributing","p":["Have a look at the contributor's documentation."]},{"l":"License","p":["See the LICENSE on Github."]}],[{"l":"Getting started","p":["Welcome to the @workleap/chromatic-ado package documentation. In this getting started page, you'll find information about how this package can enhance your Chromatic+ Azure Pipelines integration and how to setup this package for your environment."]},{"l":"Features","p":["This package aims to offer a workflow similar to the native Chromatic GitHub integration. While it's hardly as good, it will get you up and running with an adequate workflow until Chromatic offers a native Azure Pipelines integration."]},{"l":"Build notifications","p":["Chromatic Azure Pipelines documentation explains how to integrate Chromatic within an existing pipeline through its CLI, but it's basically it, there's no build notifications, it's up to you to figure out this part.","This is an important feature of this package, it figures out this part for you by providing build notifications as pull request comments whenever a build is completed:","Pull request notification example"]},{"l":"TurboSnap","p":["This package is compatible with TurboSnap and will by default trigger Chromatic builds with TurboSnap activated."]},{"l":"Squash merge","p":["Chromatic doesn't offer any mechanism to support squash merge on Azure DevOps. It means that by default, when using Azure DevOps as a Git provider, if you wish to keep your Chromatic baselines up-to-date, you would be constrained to merge your pull requests with regular merge commits. Fortunately, this package implements a workflow based on Chromatic auto-accept-changes feature, allowing pull requests to complete with squash merges.","Here's how it works:","Whenever you create or update a pull request, a Chromatic build will automatically be triggered. If the build fail, the Chromatic pipeline will fail and the team will have to either accept the changes or fix the issues before completing the pull request. If the changes are accepted, unfortunately the main branch baselines would not be updated.","To update the baselines of the main branch, once the pull request has been merged, a new Chromatic build will be triggered on the main branch. This new build will automatically accepts all the changes (its fine since they have been reviewed in the pull request) and update the main branch baselines."]},{"l":"Setup your workflow","p":["Most of the configurations to support this Chromatic workflow is related to Azure DevOps. First, let's create a new Chromatic project, then, a new Azure pipeline."]},{"l":"Create a new Chromatic project","p":["Ask the owner of the Chromatic gsoft-inc-ado organization to create a new Chromatic project for your application. Make sure to be added as \"collaborator\" of the new project.","Once created, login to Chromatic and select your application project from the list.","Save your Chromatic project id. The project id is available in the project URL under the appId parameter. For example, if your project id is 123, the project URL would be: https://www.chromatic.com/manage?appId=123.","In the left sidebar, choose \"Manage\" and click on the \"Configure\" tab. Go to the \"Project\" section and save the project token.","With the Chromatic project id and token in hands, process to the next section to create a new Chromatic Azure pipeline."]},{"l":"Create a new Azure pipeline","p":["First, open your application project and create a new YAML file called chromatic.yml. This file will store the configuration of your Chromatic Azure pipeline.","2.1. If your project already includes a template file to setup your pipelines, then paste the following configuration:","2.2. If your project doesn't have a setup template, paste the following configuration:","Create a new Azure pipeline from an existing YAML file. Name this new pipeline \"Chromatic\" (or actually, whichever suits you best).","Add the newly created Chromatic pipeline as a required build validation of your main branch. Make sure the build validation is required, this is important as the visual changes detected by Chromatic will be automatically accepted on the main branch.","Add the Chromatic project id and token that we saved earlier as pipeline variables of the newly created Chromatic pipeline. These variables should respectively be named CHROMATIC_PROJECT_TOKEN and CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN. You could also optionally create the CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN variable as a variable group."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["-> Locally start a chromatic build and accepts the changes to create a baseline","-> Switch to a branch, make a visual change to a component for which a story is watched by Chromatic and the commit the change","-> A Chromatic build should be automatically triggered and a pull request notifications should be posted with visual changes","Click on the URL of the build and accept the changes","-> Re-queue the Chromatic pipeline","-> Once it completed with success, complete the PR","-> Another Chromatic build should be triggered on the main branch. The changes should be auto accepted and the pipeline should complete successfully"]},{"l":"Troubleshoot issues","p":["-> Add the debug env var","-> Make sure you have the right Chromatic project token","-> Make sure you have provided the Chromatic project id","-> Make sure your ADO access token is valid and not expired"]}]]
\ No newline at end of file
+[[{"l":"About","p":["To ask a question or propose an idea, feel free to start a new discussion on Github. If you found a bug, please open an issue on Github."]},{"l":"Contributing","p":["Have a look at the contributor's documentation."]},{"l":"License","p":["See the LICENSE on Github."]}],[{"l":"Getting started","p":["Welcome to the @workleap/chromatic-ado package documentation. In this getting started page, you'll find information about how this package can enhance your Chromatic+ Azure Pipelines integration and how to setup this package for your environment."]},{"l":"Features","p":["This package aims to offer a workflow similar to the native Chromatic GitHub integration. While it's hardly as good, it will get you up and running with an adequate workflow until Chromatic offers a native Azure Pipelines integration."]},{"l":"Build notifications","p":["Chromatic Azure Pipelines documentation explains how to integrate Chromatic within an existing pipeline through its CLI, but it's basically it, there's no build notifications, it's up to you to figure out this part.","This is an important feature of this package, it figures out this part for you by providing build notifications as pull request comments whenever a build is completed:","Pull request notification example"]},{"l":"TurboSnap","p":["This package is compatible with TurboSnap and will by default trigger Chromatic builds with TurboSnap activated."]},{"l":"Squash merge","p":["Chromatic doesn't offer any mechanism to support squash merge on Azure DevOps. It means that by default, when using Azure DevOps as a Git provider, if you wish to keep your Chromatic baselines up-to-date, you would be constrained to merge your pull requests with regular merge commits. Fortunately, this package implements a workflow based on Chromatic auto-accept-changes feature, allowing pull requests to complete with squash merges.","Here's how it works:","Whenever you create or update a pull request, a Chromatic build will automatically be triggered. If the build fail, the Chromatic pipeline will fail and the team will have to either accept the changes or fix the issues before completing the pull request. If the changes are accepted, unfortunately the main branch baselines would not be updated.","To update the baselines of the main branch, once the pull request has been merged, a new Chromatic build will be triggered on the main branch. This new build will automatically accepts all the changes (its fine since they have been reviewed in the pull request) and update the main branch baselines."]},{"l":"Setup your workflow","p":["Most of the configurations to support this Chromatic workflow is related to Azure DevOps. First, let's create a new Chromatic project, then, a new Azure pipeline."]},{"l":"Create a new Chromatic project","p":["Ask the owner of the Chromatic gsoft-inc-ado organization to create a new Chromatic project for your application. Make sure to be added as \"collaborator\" of the new project.","Once created, login to Chromatic and select your application project from the list.","Save your Chromatic project id. The project id is available in the project URL under the appId parameter. For example, if your project id is 123, the project URL would be: https://www.chromatic.com/manage?appId=123.","In the left sidebar, choose \"Manage\" and click on the \"Configure\" tab. Go to the \"Project\" section and save the project token.","With the Chromatic project id and token in hands, process to the next section to create a new Chromatic Azure pipeline."]},{"l":"Create a new Azure pipeline","p":["First, open your application project and create a new YAML file called chromatic.yml. This file will store the configuration of your Chromatic Azure pipeline.","2.1. If your project already includes a template file to setup your pipelines, then paste the following configuration:","2.2. If your project doesn't have a setup template, paste the following configuration:","Create a new Azure pipeline from an existing YAML file. Name this new pipeline \"Chromatic\" (or actually, whichever suits you best).","Add the newly created Chromatic pipeline as a required build validation of your main branch. Make sure the build validation is required, this is important as the visual changes detected by Chromatic will be automatically accepted on the main branch.","Add the Chromatic project id and token that we saved earlier as pipeline variables of the newly created Chromatic pipeline. These variables should respectively be named CHROMATIC_PROJECT_TOKEN and CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN. You could also optionally create the CHROMATIC_PULL_REQUEST_COMMENT_ACCESS_TOKEN variable as a variable group."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Chromatic pipeline, execute the following steps:","Locally start a Chromatic build by opening a terminal at the root of the project and executing the following command: pnpm chromatic --project-token YOUR_PROJECT_TOKEN.","Go to the Chromatic application and accepts all the changes to create a baseline. This guide takes for granted that your application already includes a few Storybook stories.","Switch to a new Git branch and update an existing component watched by Chromatic to trigger a visual change. Commit the change.","Go to Azure Devops and create a pull request for your new branch.","A Chromatic build should be automatically triggered for the pull request and a pull request comment with the visual change should be added to the pull request. The comment should mention that Chromatic detected at least one visual change.","In the pull request comment, click on the \"Build URL\" link. Accept the changes in the Chromatic application.","Re-queue the Chromatic pipeline by clicking on the \"Re-queue\" button of the pull request.","Once the Chromatic pipeline completed with success, merge the pull request.","Once merged, a new Chromatic build should be automatically triggered for the main branch. The changes of this new build should be automatically accepted and the pipeline should complete successfully."]},{"l":"Troubleshoot issues","p":["-> Add the debug env var","-> Make sure you have the right Chromatic project token","-> Make sure you have provided the Chromatic project id","-> Make sure your ADO access token is valid and not expired"]}]]
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index f7573f1..6ef2e27 100644
Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ