From 417715278d0ec38c9b2bbb9690bf59388f321792 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 09:15:35 +0100 Subject: [PATCH 1/5] install chromatic --- .gitignore | 3 ++- package-lock.json | 12 ++++++++++++ package.json | 4 +++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 448a4ee..e02009a 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ coverage/ !.storybook/ !.vuepress/ .vuepress/.temp/ -.vuepress/.cache/ \ No newline at end of file +.vuepress/.cache/ +build-storybook.log \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ec39387..40ce2d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "@vitest/coverage-v8": "^0.34.6", "@vue/test-utils": "^2.4.2", "@vuepress/bundler-vite": "^2.0.0-rc.0", + "chromatic": "^9.1.0", "eslint": "^8.53.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard": "^17.1.0", @@ -11789,6 +11790,17 @@ "node": ">=10" } }, + "node_modules/chromatic": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-9.1.0.tgz", + "integrity": "sha512-9ib8k4LIfg/88kKufxz1N8vgCB7nlLhJqmx+Vx55cM/6DCB/M6oqroirVRXfdeC7qaZuhyUemPF2QHxBh7GXtQ==", + "dev": true, + "bin": { + "chroma": "dist/bin.js", + "chromatic": "dist/bin.js", + "chromatic-cli": "dist/bin.js" + } + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", diff --git a/package.json b/package.json index 56df7d2..359e81d 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,8 @@ "test:unit:dev": "vitest", "test": "npm run test:lint && npm run test:unit", "docs:dev": "vuepress dev .", - "docs:build": "vuepress build ." + "docs:build": "vuepress build .", + "chromatic": "npx chromatic --build-script-name storybook:build" }, "dependencies": { "@intlify/unplugin-vue-i18n": "^1.5.0", @@ -92,6 +93,7 @@ "@vitest/coverage-v8": "^0.34.6", "@vue/test-utils": "^2.4.2", "@vuepress/bundler-vite": "^2.0.0-rc.0", + "chromatic": "^9.1.0", "eslint": "^8.53.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard": "^17.1.0", From 85d7be9531b4a4646619994dfa3b710dcf286c7f Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 09:15:45 +0100 Subject: [PATCH 2/5] workflow deploy chromatic --- .../workflows/frontend.deploy.chromatic.yml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .github/workflows/frontend.deploy.chromatic.yml diff --git a/.github/workflows/frontend.deploy.chromatic.yml b/.github/workflows/frontend.deploy.chromatic.yml new file mode 100644 index 0000000..daa1fb0 --- /dev/null +++ b/.github/workflows/frontend.deploy.chromatic.yml @@ -0,0 +1,18 @@ +name: "frontend:deploy:chromatic" +on: [push] +#on: +# push: +# branches: +# - master +jobs: + build-and-deploy: + name: Chromatic - Frontend + runs-on: ubuntu-latest + env: + CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Frontend | Build + run: npm install && npm run chromatic -- --exit-zero-on-changes \ No newline at end of file From 5db38df3278392436fdd9c74ad1f548fe10bd1be Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 09:21:43 +0100 Subject: [PATCH 3/5] provide readme & fetch-depth for git history --- .github/workflows/frontend.deploy.chromatic.yml | 2 ++ README.md | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/.github/workflows/frontend.deploy.chromatic.yml b/.github/workflows/frontend.deploy.chromatic.yml index daa1fb0..f808821 100644 --- a/.github/workflows/frontend.deploy.chromatic.yml +++ b/.github/workflows/frontend.deploy.chromatic.yml @@ -13,6 +13,8 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v3 + with: + fetch-depth: 0 - name: Frontend | Build run: npm install && npm run chromatic -- --exit-zero-on-changes \ No newline at end of file diff --git a/README.md b/README.md index fa12e5e..cc1cae6 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,20 @@ Docker can be run in production mode: docker compose -f docker-compose.yml up ``` +### Chromatic + +In order to use the chromatic workflow you need to provide a `CHROMATIC_PROJECT_TOKEN` in the repository secrets. + +If you want to run chromatic from the command line you either have to provide this variable as well +``` +export CHROMATIC_PROJECT_TOKEN=... +npm run chromatic +``` +or you have to append it via parameter: +``` +npm run chromatic -- --project-token=... +``` + ## Endpoints The following endpoints are provided given the right command is executed or all three if `docker compose` is used: From 9421411bb9e2f70a7070da7f0dafb11e737e9e24 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 09:25:21 +0100 Subject: [PATCH 4/5] run chromatic only on master --- .github/workflows/frontend.deploy.chromatic.yml | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/.github/workflows/frontend.deploy.chromatic.yml b/.github/workflows/frontend.deploy.chromatic.yml index f808821..5436a4b 100644 --- a/.github/workflows/frontend.deploy.chromatic.yml +++ b/.github/workflows/frontend.deploy.chromatic.yml @@ -1,9 +1,8 @@ name: "frontend:deploy:chromatic" -on: [push] -#on: -# push: -# branches: -# - master +on: + push: + branches: + - master jobs: build-and-deploy: name: Chromatic - Frontend From 48d9309dc1fb357106f0a3a6c55db4aa1dc6d7a6 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 09:27:26 +0100 Subject: [PATCH 5/5] fix lint --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cc1cae6..6de5854 100644 --- a/README.md +++ b/README.md @@ -73,12 +73,12 @@ docker compose -f docker-compose.yml up In order to use the chromatic workflow you need to provide a `CHROMATIC_PROJECT_TOKEN` in the repository secrets. If you want to run chromatic from the command line you either have to provide this variable as well -``` +```bash export CHROMATIC_PROJECT_TOKEN=... npm run chromatic ``` or you have to append it via parameter: -``` +```bash npm run chromatic -- --project-token=... ```