build.yml

name: Build
on:
  pull_request:
  push:
    branches:
      - main
  workflow_dispatch:

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1

      - uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4
        id: setup-node
        with:
          node-version: '18'
          cache: 'npm'
          cache-dependency-path: '**/package-lock.json'

      - name: Install dependencies
        run: |
          npm ci --ignore-scripts
          npm explore esbuild -- npm run postinstall
          # Please check with Brave's security team prior to adding any packages to this list.

      - run: npm rebuild style-dictionary-create-react-app

      - name: Format
        id: format
        run: |
          npm run format-diff

      - name: Build nala
        id: build-nala
        run: |
          npm run build

      - name: Audit Tokens
        id: audit-tokens
        run: |
          node ./src/scripts/audit-tokens.js

      - name: Diff Tokens
        id: diff-tokens
        run: |
          for filePath in ./tokens/css/variables*.css; do
            fileName=${filePath/.\/tokens\/css\//}
            reqStatus=$(curl -sL --write-out "%{http_code}" -o ./tokens/css/${fileName/%.css/.old.css} https://nala.bravesoftware.com/css/$fileName)
            # Note: Diff has exit code 1 for differences, and there are always
            # some differences because the file contains a timestamp.
            if [ -s ./tokens/css/file-sizes.diff ]; then
              echo "---" >> ./tokens/css/file-sizes.diff
            fi
            if [ "$reqStatus" -eq 200 ]; then
              echo "- $(stat -c "%n: %s bytes" ./tokens/css/${fileName/%.css/.old.css})" >> ./tokens/css/file-sizes.diff
              echo "+ $(stat -c "%n: %s bytes" ./tokens/css/$fileName)" >> ./tokens/css/file-sizes.diff
              diff -u ./tokens/css/${fileName/%.css/.old.css} ./tokens/css/$fileName >> ./tokens/css/${fileName/%.css/.diff} || :
            else
              echo "+ $(stat -c "%n: %s bytes" ./tokens/css/$fileName)" >> ./tokens/css/file-sizes.diff
              diff -u /dev/null ./tokens/css/$fileName >> ./tokens/css/${fileName/%.css/.diff} || :
            fi
          done

      - name: Check Types
        id: check-types
        run: |
          npm run check

      - name: Build the React example project
        id: example-react
        working-directory: ./examples/example-ui-react
        run: |
          npm install --no-save
          npm run build

      - name: Build Storybook
        env:
          NODE_OPTIONS: '--max_old_space_size=6144'
        run: npm run build-storybook

      - name: Upload Artifact
        uses: actions/upload-artifact@b4b15b8c7c6ac21ea08fcf65892d2ee8f75cf882 # v4
        with:
          name: build
          if-no-files-found: error
          path: |
            ./storybook-static
            ./tokens/css/variables*.diff
            ./tokens/css/file-sizes.diff