Analyze and track design system adoption

This GitHub action allows you to automatically analyze and push design system adoption data directly to zeroheight!

---

Learn more about zeroheight's design system adoption features, such as component usage tracking and package monitoring, in our learning hub or check out the linked video below.

---

Getting started

Note

This action presumes you already have a zeroheight account. You can sign up here.

1. Head to zeroheight.com/adoption and follow the steps to connect your design system packages and application source code to zeroheight
2. Follow the "Use the CLI" flow to create a Client ID and Access Token and ensure to note these down for future use
3. Now head over to your application's source code on GitHub and enter your zeroheight Client ID and Access Token as GitHub repository secrets (Settings → Secrets and variables → Actions) using ZEROHEIGHT_CLIENT_ID and ZEROHEIGHT_ACCESS_TOKEN respectively
4. Once completed you can use the action as part of your GitHub Action workflow file
5. Once your workflow is updated, trigger your action, and check in zeroheight to see design system usage data come in 🎉

Usage

Basic usage

  - name: Analyze design system adoption data
    uses: zh-ski/action-design-system-adoption@v2
    with:
      command: 'track-package'
    env:
      ZEROHEIGHT_CLIENT_ID: "${{ secrets.ZEROHEIGHT_CLIENT_ID }}"
      ZEROHEIGHT_ACCESS_TOKEN: "${{ secrets.ZEROHEIGHT_ACCESS_TOKEN }}"

Supplying additional arguments

  - name: Track package version
    uses: zh-ski/action-design-system-adoption@v2
    with:
      command: 'analyze'
      arguments: '--ignore "**/*.spec.*'
    env:
      ZEROHEIGHT_CLIENT_ID: "${{ secrets.ZEROHEIGHT_CLIENT_ID }}"
      ZEROHEIGHT_ACCESS_TOKEN: "${{ secrets.ZEROHEIGHT_ACCESS_TOKEN }}"

We recommend adding it as part of your post-deployment workflows. If you're new to workflows and actions check out GitHub's Actions documentation for more info.

Inputs

• command - The CLI command to run, can be one of analyze, track-package or monitor-repo
• arguments - Optionally provide additional arguments to pass to the command

Environment Variables

• ZEROHEIGHT_CLIENT_ID - Client ID for the authentication token generated in zeroheight
• ZEROHEIGHT_ACCESS_TOKEN - Access Token for the authentication token generated in zeroheight

See the CLI documentation for more details on the commands and arguments

Example

Check out our example React application for reference and it's containing GitHub Action file.