name: Chromatic on: push: branches: - "main" - "rc" - "hotfix-rc" pull_request_target: types: [opened, synchronize, reopened] branches: - "main" permissions: {} jobs: check-run: name: Check PR run uses: bitwarden/gh-actions/.github/workflows/check-run.yml@main permissions: contents: read chromatic: name: Chromatic runs-on: ubuntu-22.04 needs: check-run permissions: contents: read pull-requests: write id-token: write steps: - name: Check out repo uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0 with: ref: ${{ github.event.pull_request.head.sha }} fetch-depth: 0 persist-credentials: false - name: Get changed files id: get-changed-files-for-chromatic uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2 with: filters: | storyFiles: - "apps/!(cli)/**" - "bitwarden_license/bit-web/src/app/**" - "libs/!(eslint)/**" - "package.json" - ".storybook/**" - name: Get Node version id: retrieve-node-version if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' run: | NODE_NVMRC=$(cat .nvmrc) NODE_VERSION=${NODE_NVMRC/v/''} echo "node_version=$NODE_VERSION" >> "$GITHUB_OUTPUT" - name: Set up Node uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0 with: node-version: ${{ steps.retrieve-node-version.outputs.node_version }} if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' - name: Cache NPM id: npm-cache uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0 with: path: "~/.npm" key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }} if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' - name: Install Node dependencies if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' run: npm ci # Manually build the Storybook to resolve a bug related to TurboSnap - name: Build Storybook if: steps.get-changed-files-for-chromatic.outputs.storyFiles == 'true' run: npm run build-storybook:ci - name: Log in to Azure uses: bitwarden/gh-actions/azure-login@main with: subscription_id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} tenant_id: ${{ secrets.AZURE_TENANT_ID }} client_id: ${{ secrets.AZURE_CLIENT_ID }} - name: Get Azure Key Vault secrets id: get-kv-secrets uses: bitwarden/gh-actions/get-keyvault-secrets@main with: keyvault: gh-clients secrets: "CHROMATIC-PROJECT-TOKEN" - name: Log out from Azure uses: bitwarden/gh-actions/azure-logout@main - name: Publish to Chromatic uses: chromaui/action@d0795df816d05c4a89c80295303970fddd247cce # v13.1.4 with: token: ${{ secrets.GITHUB_TOKEN }} projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }} storybookBuildDir: ./storybook-static exitOnceUploaded: true onlyChanged: true externals: | libs/components/**/*.scss libs/components/**/*.css libs/components/tailwind.config*.js # Rather than use an `if` check on the whole publish step, we need to tell Chromatic to skip so that any Chromatic-spawned actions are properly skipped skip: ${{ steps.get-changed-files-for-chromatic.outputs.storyFiles == 'false' }}