Demo With Theme Toggle #338
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Workflow name | |
| name: build-chromatic | |
| # Event for the workflow | |
| on: | |
| pull_request: | |
| branches: | |
| - main | |
| # push: | |
| # branches: | |
| # - main | |
| # List of jobs | |
| jobs: | |
| chromatic-deployment: | |
| # Operating System | |
| runs-on: ubuntu-latest | |
| strategy: | |
| matrix: | |
| node-version: [16.x] | |
| # Job steps | |
| steps: | |
| - name: Checkout the codebase | |
| uses: actions/checkout@v3 | |
| with: | |
| fetch-depth: 0 | |
| # For NX caching | |
| # For more info see: https://nx.dev/recipes/ci/monorepo-ci-github-actions | |
| - uses: nrwl/nx-set-shas@v3 | |
| - name: Use Node.js ${{ matrix.node-version }} | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| cache: 'yarn' | |
| # Cache node_modules to speed up future builds | |
| # For more info see: https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows | |
| - name: Cache node modules | |
| id: cache-nodemodules | |
| uses: actions/cache@v3 | |
| env: | |
| cache-name: cache-node-modules | |
| with: | |
| path: node_modules | |
| key: ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}-${{ hashFiles('**/yarn.lock', '**/package.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-build-${{ env.cache.name }}-${{ github.head_ref }}- | |
| ${{ runner.os }}-build-${{ env.cache.name }}-main- | |
| ${{ runner.os }}-build-${{ env.cache.name }}- | |
| ${{ runner.os }}-build- | |
| ${{ runner.os }}- | |
| # Only install dependencies if cached dependencies aren't found (applies when content of yarn.lock or any package.json changes) | |
| - name: Install Dependencies | |
| if: ${{ steps.cache-nodemodules.outputs.cache-hit != 'true' }} | |
| run: yarn install --frozen-lockfile | |
| - name: Validate tokens | |
| id: validate-tokens | |
| run: | | |
| # Parse and Validate Design Tokens | |
| yarn tokens:ci | |
| - name: Build projects 🏗 | |
| run: npx nx run demo:build --skip-nx-cache | |
| - name: Lint | |
| run: yarn lint:ci | |
| - name: Test | |
| run: npx nx affected --parallel=2 --target=test --coverage --skip-nx-cache | |
| - name: Coverage Report | |
| uses: vebr/[email protected] | |
| with: | |
| github-token: ${{ secrets.GITHUB_TOKEN }} | |
| lcov-file: ./coverage/lcov.info | |
| update-comment: true | |
| # 👇 Adds Chromatic as a step in the workflow | |
| - name: Publish to Chromatic | |
| uses: chromaui/action@v1 | |
| # Chromatic GitHub Action options | |
| with: | |
| # 👇 Chromatic projectToken, refer to the manage page to obtain it. | |
| buildScriptName: build-storybook | |
| projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | |
| onlyChanged: true | |
| traceChanged: true | |
| id: chromatic | |
| # Find existing Chromatic URL comment | |
| - name: Find Existing Comment | |
| uses: peter-evans/find-comment@v2 | |
| id: fc | |
| with: | |
| issue-number: ${{ github.event.pull_request.number }} | |
| comment-author: 'github-actions[bot]' | |
| body-includes: Chromatic Results | |
| # Either create new comment with Chromatic links, or replace content of existing comment if found in previous step | |
| - name: Create or update PR comment with Chromatic links | |
| uses: peter-evans/create-or-update-comment@v2 | |
| with: | |
| comment-id: ${{ steps.fc.outputs.comment-id }} | |
| issue-number: ${{ github.event.pull_request.number }} | |
| body: | | |
| | :art: Chromatic Results :art: | | | |
| | --- | --- | | |
| | Chromatic URL | ${{steps.chromatic.outputs.buildUrl}} | | |
| | Storybook Preview | ${{steps.chromatic.outputs.storybookUrl}} | | |
| | Component Count | ${{steps.chromatic.outputs.componentCount}} | | |
| edit-mode: replace |