actions/.github/workflows/chromatic.yaml at v1 · verkstedt/actions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
name: 'Chromatic'

on:
  workflow_call:
    inputs:
      working-directory:
        description: >
          Directory in which to run things in.
        type: string
        required: false
        default: '.'
    secrets:
      CHROMATIC_PROJECT_TOKEN:
        description: >
          Chromatic project token. You can get it from
          https://www.chromatic.com/start, then open your project and go
          to “Manage” → “Configure”.'
        required: true
      GH_AUTH_APP_SECRET:
        description: >
          GitHub App private key for generating tokens.
          Used in pair with vars.GH_AUTH_APP_ID — set both or neither.
        required: false
      GH_NPM_REGISTRY_PERSONAL_ACCESS_TOKEN:
        description: >
          GitHub personal access token for npm registry authentication.
          See `github-npm-registry-personal-access-token` input for
          `verkstedt/actions/setup` action for more info.
        required: false

jobs:
  chromatic:
    name: 'Chromatic'
    if: github.ref == 'refs/heads/main' || github.event.pull_request.draft == false
    runs-on: ubuntu-latest
    environment:
      name: ${{ github.ref == 'refs/heads/main' && 'storybook' || 'PR storybook' }}
      url: ${{ steps.publish.outputs.storybookUrl == 'undefined' && '' || steps.publish.outputs.storybookUrl }}
    steps:
      - name: Verify workflow setup
        run: |
          exit_code=0

          if [ -z "${{ secrets.CHROMATIC_PROJECT_TOKEN }}" ]
          then
            # shellcheck disable=SC1111
            echo "::error::Missing secret CHROMATIC_PROJECT_TOKEN. You can get it https://www.chromatic.com/start, then open your project and go to “Manage” → “Configure”."
            exit_code=78
          fi

          exit $exit_code

      - name: GitHub App token
        id: app-token
        uses: verkstedt/actions/create-github-app-token@v1
        with:
          app-id: ${{ vars.GH_AUTH_APP_ID }}
          private-key: ${{ secrets.GH_AUTH_APP_SECRET }}

      - name: Setup
        uses: verkstedt/actions/setup@v1
        with:
          working-directory: ${{ inputs.working-directory }}
          token: ${{ steps.app-token.outputs.token }}
          github-npm-registry-personal-access-token: ${{ secrets.GH_NPM_REGISTRY_PERSONAL_ACCESS_TOKEN }}
          fetch-depth: 0

      - name: Build StoryBook
        working-directory: ${{ inputs.working-directory }}
        run: |
          npx storybook build --webpack-stats-json

      - name: Publish to Chromatic
        id: publish
        uses: chromaui/action@v16.0.0
        with:
          workingDir: ${{ inputs.working-directory }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          # Take screenshots only of components that changed
          onlyChanged: true
          # We assume that everything that goes to main has already been
          # approved on the PR level
          autoAcceptChanges: main
          # Use StoryBook build from previous step
          storybookBuildDir: ./storybook-static/
          # Don’t want for the build to finish before continuing.
          # This require Chromatic is connected to GitHub repo and will
          # report it’s own checks, which we can use as required for
          # merging branches.
          exitOnceUploaded: true

      - name: Post summary
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
          {
            printf -- '# Chromatic\n\n'
            if [ "${{ steps.publish.outputs.buildUrl }}" = "undefined" ]
            then
              printf -- 'Skipped.\n'
            else
              printf -- '- StoryBook: %s\n' \
                '${{ steps.publish.outputs.storybookUrl }}'
              printf -- '- Build: %s\n' \
                '${{ steps.publish.outputs.buildUrl }}'
              printf -- '- Components: %d\n' \
                '${{ steps.publish.outputs.componentCount }}'
              printf -- '- Changed screenshots: %d out of %d built now + %d inherited\n' \
                '${{ steps.publish.outputs.changeCount }}' \
                '${{ steps.publish.outputs.actualCaptureCount }}' \
                '${{ steps.publish.outputs.inheritedCaptureCount }}'
            fi
          } >> "$GITHUB_STEP_SUMMARY"