react.yml

name: React

on:
  pull_request: { }
  push:
    branches:
      - master
    tags:
      - v*.*.*
      - v*.*.*-alpha.*
      - v*.*.*-beta.*

env:
  working_directory: .

jobs:
  pre_checks:
    name: Pre-checks
    runs-on: ubuntu-latest
    outputs:
      should_skip: ${{ steps.skip_check.outputs.should_skip }}
    steps:
      - id: skip_check
        uses: fkirc/skip-duplicate-actions@v5
        with:
          cancel_others: true
          do_not_skip: >-
            [
              "push",
              "schedule",
              "workflow_dispatch"
            ]
          paths_ignore: >-
            [
              "icons-scripts/**",
              "packages/kronos-crm-icons/**",
              "packages/kronos-fna-icons/**"
            ]

  setup:
    name: Setup
    runs-on: ubuntu-latest
    needs:
      - pre_checks
    if: ${{ needs.pre_checks.outputs.should_skip != 'true' }}

    outputs:
      deploy: ${{ steps.versions.outputs.deploy }}
      next_version: ${{ steps.versions.outputs.next_version }}
      qualifier: ${{ steps.versions.outputs.qualifier }}
      is_pr: ${{ steps.versions.outputs.is_pr }}

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Find version details
        id: versions
        run: |
          qualifier=dev
          next_version=0.0.0
          deploy=false
          is_pr=false

          if [[ $GITHUB_REF == refs/tags/v*.*.* ]]; then
            next_version=${GITHUB_REF#refs/tags/v}
            deploy=true

            if [[ $next_version == *-*.* ]]; then
              qualifier=$(echo "${next_version}" | sed -n 's/.*-\(.*\)\..*/\1/p')
            else
              qualifier=latest
            fi
          elif [[ $GITHUB_REF == refs/heads/* ]]; then
            branch_name=$(echo "${GITHUB_REF#refs/heads/}" | sed -r 's#/+#-#g')
            if [ "master" = "${branch_name}" ]; then
              qualifier=snapshot
              deploy=true
            else
              qualifier="branch-${branch_name}"
            fi

            latest=$(curl -sS https://registry.npmjs.org/@equisoft/design-elements-react | jq -r '."dist-tags".latest')
            next_version="$(npx semver -i "${latest}")-${qualifier}.$(date -u "+%Y%m%d%H%M%S")"
          elif [[ $GITHUB_REF == refs/pull/* ]]; then
            is_pr=true
            qualifier=pr-${{ github.event.pull_request.number }}
          fi

          echo "next_version=${next_version}" >> $GITHUB_OUTPUT
          echo "qualifier=${qualifier}" >> $GITHUB_OUTPUT
          echo "deploy=${deploy}" >> $GITHUB_OUTPUT
          echo "is_pr=${is_pr}" >> $GITHUB_OUTPUT

  react_eslint:
    name: 'React: ESLint'
    runs-on: ubuntu-latest
    needs:
      - setup
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Run ESLint
        uses: equisoft-actions/yarn-eslint@v2
        with:
          report-name: react-eslint.sarif
          working-directory: packages/react

  react_stylelint:
    name: 'React: Stylelint'
    runs-on: ubuntu-latest
    needs:
      - setup
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Run Stylelint
        uses: equisoft-actions/yarn-stylelint@v1
        with:
          report-name: react-stylelint.sarif
          working-directory: packages/react

      - name: Create annotations
        if: "!cancelled()"
        uses: equisoft-actions/sarif-annotator@v1
        with:
          level: warning
          sarif-path: packages/react/build/stylelint/report.sarif
          title: Stylelint results

  react_unit_tests:
    name: "React: Unit tests"
    runs-on: ubuntu-latest
    needs:
      - setup

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      # Tests
      - name: Unit tests
        uses: equisoft-actions/yarn-jest@v1
        with:
          working-directory: ./packages/react

      - name: Upload test coverage results
        uses: actions/upload-artifact@v4
        if: ${{ success() || failure() }}
        with:
          name: react-test-coverage.clover.xml
          path: packages/react/build/jest/coverage/clover.xml
          if-no-files-found: error

  react_compile:
    name: "React: Compile"
    runs-on: ubuntu-latest
    needs:
      - setup

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      # Compile
      - name: Update package version
        env:
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          contents="$(jq ".version = \"${VERSION}\"" ./packages/react/package.json)" && echo "${contents}" > ./packages/react/package.json

      - name: Compile
        working-directory: ./packages/react
        run: yarn build

      - name: Store react package
        uses: actions/upload-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/
          retention-days: 1
          if-no-files-found: error

  react_deploy:
    name: "React: Deploy"
    runs-on: ubuntu-latest
    environment: npm-deployment
    needs:
      - setup
      - react_eslint
      - react_stylelint
      - react_unit_tests
      - react_compile
    if: ${{ needs.setup.outputs.deploy == 'true' }}

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Update package version
        env:
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          contents="$(jq ".version = \"${VERSION}\"" ./packages/react/package.json)" && echo "${contents}" > ./packages/react/package.json

      - name: Publish to npmjs
        working-directory: ./packages/react
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
          NPM_TAG: ${{ needs.setup.outputs.qualifier }}
        run: |
          echo -e "npmRegistries: \n  //registry.yarnpkg.com:\n    npmAlwaysAuth: true\n    npmAuthToken: ${NPM_TOKEN}" >> ~/.yarnrc.yml
          yarn npm publish --tag "${NPM_TAG}" --tolerate-republish

  storybook_eslint:
    name: "Storybook: ESLint"
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_compile

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Run ESLint
        uses: equisoft-actions/yarn-eslint@v2
        with:
          report-name: storybook-eslint.sarif
          working-directory: packages/storybook

  storybook_stylelint:
    name: "Storybook: Stylelint"
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_compile

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Run Stylelint
        uses: equisoft-actions/yarn-stylelint@v1
        with:
          report-name: storybook-stylelint.sarif
          working-directory: packages/storybook

      - name: Create annotations
        if: "!cancelled()"
        uses: equisoft-actions/sarif-annotator@v1
        with:
          level: warning
          sarif-path: packages/storybook/build/stylelint/report.sarif
          title: Stylelint results

  storybook_compile:
    name: "Storybook: Compile"
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_compile

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      # Compile
      - name: Update package version
        env:
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          contents="$(jq ".version = \"${VERSION}\"" ./packages/react/package.json)" && echo "${contents}" > ./packages/react/package.json
          contents="$(jq ".version = \"${VERSION}\"" ./packages/storybook/package.json)" && echo "${contents}" > ./packages/storybook/package.json

      - name: Compile
        working-directory: ./packages/storybook
        run: yarn build

      - name: Store storybook package
        uses: actions/upload-artifact@v4
        with:
          name: storybook_dist
          path: packages/storybook/dist/
          retention-days: 1
          if-no-files-found: error

  storybook_deploy:
    name: "Storybook: Deploy"
    runs-on: ubuntu-latest
    environment: github-pages
    needs:
      - setup
      - react_deploy
      - storybook_eslint
      - storybook_stylelint
      - storybook_compile
    if: |
      always() &&
      !failure() &&
      !cancelled() &&
      (needs.setup.outputs.deploy == 'true' || needs.setup.outputs.is_pr == 'true') &&
      !contains(needs.*.result, 'failure') &&
      !contains(needs.*.result, 'cancelled')

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download
        uses: actions/download-artifact@v4
        with:
          name: storybook_dist
          path: packages/storybook/dist/

      - name: Update package version
        env:
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          contents="$(jq ".version = \"${VERSION}\"" ./packages/react/package.json)" && echo "${contents}" > ./packages/react/package.json
          contents="$(jq ".version = \"${VERSION}\"" ./packages/storybook/package.json)" && echo "${contents}" > ./packages/storybook/package.json

      - name: Resolve documentation target
        id: target
        env:
          QUALIFIER: ${{ needs.setup.outputs.qualifier }}
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          if [ "${QUALIFIER}" == "snapshot" ]; then
              echo "folder=${QUALIFIER}" >> $GITHUB_OUTPUT
              echo "commit=docs(storybook): update snapshot to ${GITHUB_SHA}" >> $GITHUB_OUTPUT
          elif [[ "${QUALIFIER}" = pr-* ]]; then
              echo "folder=${QUALIFIER}" >> $GITHUB_OUTPUT
              echo "commit=docs(storybook): update pull request ${QUALIFIER} to ${GITHUB_SHA}" >> $GITHUB_OUTPUT
          else
              echo "folder=${VERSION}" >> $GITHUB_OUTPUT
              echo "commit=docs(storybook): add v${VERSION}" >> $GITHUB_OUTPUT
          fi

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          commit-message: ${{ steps.target.outputs.commit }}
          folder: packages/storybook/dist/
          git-config-email: na-qc@equisoft.com
          git-config-name: kronostechnologies-build
          target-folder: ${{ steps.target.outputs.folder }}
          token: ${{ secrets.GH_REPO_TOKEN }}

      - name: Update latest
        if: ${{ needs.setup.outputs.qualifier == 'latest' }}
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          commit-message: "docs: update latest doc to ${{ needs.setup.outputs.next_version }}"
          folder: packages/storybook/dist/
          git-config-email: na-qc@equisoft.com
          git-config-name: kronostechnologies-build
          target-folder: latest
          token: ${{ secrets.GH_REPO_TOKEN }}

      - name: Generate summary
        id: summary
        continue-on-error: true
        run: |
          url="https://ds.equisoft.io/${{ steps.target.outputs.folder }}/"
          body="Storybook for this build: <${url}>"
          echo "body=${body}" >> $GITHUB_OUTPUT
          echo "${body}" >> $GITHUB_STEP_SUMMARY

      - name: Comment the summary on the PR
        if: ${{ needs.setup.outputs.is_pr == 'true' }}
        continue-on-error: true
        uses: actions/github-script@v7
        with:
          script: |
            const pr = {
              issue_number: '${{ github.event.pull_request.number }}',
              owner: 'kronostechnologies',
              repo: 'design-elements',
            };
            github.rest.issues.listComments(pr).then(comments => {
              const commentBody = '${{ steps.summary.outputs.body }}';
              const comment = comments.data.find(comment => comment.body.includes(commentBody));
              if (!comment) {
                github.rest.issues.createComment({
                  ...pr,
                  body: commentBody
                });
              }
            });

  webapp_eslint:
    name: 'Webapp: ESLint'
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_compile
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Run ESLint
        uses: equisoft-actions/yarn-eslint@v2
        with:
          report-name: webapp-eslint.sarif
          working-directory: packages/webapp

  webapp_stylelint:
    name: 'Webapp: Stylelint'
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_compile
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Run Stylelint
        uses: equisoft-actions/yarn-stylelint@v1
        with:
          report-name: webapp-stylelint.sarif
          working-directory: packages/webapp

      - name: Create annotations
        if: "!cancelled()"
        uses: equisoft-actions/sarif-annotator@v1
        with:
          level: warning
          sarif-path: packages/webapp/build/stylelint/report.sarif
          title: Stylelint results

  webapp_deploy:
    name: "Webapp: Deploy"
    runs-on: ubuntu-latest
    environment: github-pages
    needs:
      - setup
      - webapp_eslint
      - webapp_stylelint
      - storybook_deploy
    if: |
      always() &&
      !failure() &&
      !cancelled() &&
      (needs.setup.outputs.deploy == 'true' || needs.setup.outputs.is_pr == 'true') &&
      !contains(needs.*.result, 'failure') &&
      !contains(needs.*.result, 'cancelled')

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Download React Dist
        uses: actions/download-artifact@v4
        with:
          name: react_dist
          path: packages/react/dist/

      - name: Setup asdf-vm
        uses: equisoft-actions/with-asdf-vm@v2

      - name: Install NPM dependencies
        uses: equisoft-actions/yarn-install@v1
        with:
          working-directory: ${{ env.working_directory }}

      - name: Update package version
        env:
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          contents="$(jq ".version = \"${VERSION}\"" ./packages/react/package.json)" && echo "${contents}" > ./packages/react/package.json
          contents="$(jq ".version = \"${VERSION}\"" ./packages/storybook/package.json)" && echo "${contents}" > ./packages/storybook/package.json
          contents="$(jq ".version = \"${VERSION}\"" ./packages/webapp/package.json)" && echo "${contents}" > ./packages/webapp/package.json

      - name: Resolve target
        id: target
        env:
          QUALIFIER: ${{ needs.setup.outputs.qualifier }}
          VERSION: ${{ needs.setup.outputs.next_version }}
        run: |
          if [ "${QUALIFIER}" == "snapshot" ]; then
              echo "folder=${QUALIFIER}" >> $GITHUB_OUTPUT
              echo "commit=docs(webapp): update snapshot to ${GITHUB_SHA}" >> $GITHUB_OUTPUT
          elif [[ "${QUALIFIER}" = pr-* ]]; then
              echo "folder=${QUALIFIER}" >> $GITHUB_OUTPUT
              echo "commit=docs(webapp): update pull request ${QUALIFIER} to ${GITHUB_SHA}" >> $GITHUB_OUTPUT
          else
              echo "folder=${VERSION}" >> $GITHUB_OUTPUT
              echo "commit=docs(webapp): add v${VERSION}" >> $GITHUB_OUTPUT
          fi

      - name: Compile
        env:
          APP_CONFIG_VERSION: ${{ needs.setup.outputs.next_version }}
          APP_CONFIG_PUBLIC_PATH: /${{ steps.target.outputs.folder }}/webapp/
        shell: bash
        working-directory: ./packages/webapp
        run: |
          yarn build:production

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          commit-message: ${{ steps.target.outputs.commit }}
          folder: packages/webapp/dist/
          git-config-email: na-qc@equisoft.com
          git-config-name: kronostechnologies-build
          target-folder: ${{ steps.target.outputs.folder }}/webapp
          token: ${{ secrets.GH_REPO_TOKEN }}

      - name: Update latest
        if: ${{ needs.setup.outputs.qualifier == 'latest' }}
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          commit-message: "docs(webapp): update latest doc to ${{ needs.setup.outputs.next_version }}"
          folder: packages/webapp/dist/
          git-config-email: na-qc@equisoft.com
          git-config-name: kronostechnologies-build
          target-folder: latest/webapp
          token: ${{ secrets.GH_REPO_TOKEN }}

      - name: Generate summary
        id: summary
        continue-on-error: true
        run: |
          url="https://ds.equisoft.io/${{ steps.target.outputs.folder }}/webapp/"
          body="Webapp for this build: <${url}>"
          echo "body=${body}" >> $GITHUB_OUTPUT
          echo "${body}" >> $GITHUB_STEP_SUMMARY

      - name: Comment the summary on the PR
        if: ${{ needs.setup.outputs.is_pr == 'true' }}
        continue-on-error: true
        uses: actions/github-script@v7
        with:
          script: |
            const pr = {
              issue_number: '${{ github.event.pull_request.number }}',
              owner: 'kronostechnologies',
              repo: 'design-elements',
            };
            github.rest.issues.listComments(pr).then(comments => {
              const commentBody = '${{ steps.summary.outputs.body }}';
              const comment = comments.data.find(comment => comment.body.includes(commentBody));
              if (!comment) {
                github.rest.issues.createComment({
                  ...pr,
                  body: commentBody
                });
              }
            });

  notify:
    name: Notify
    runs-on: ubuntu-latest
    needs:
      - setup
      - react_eslint
      - react_stylelint
      - react_unit_tests
      - react_compile
      - storybook_eslint
      - storybook_stylelint
      - storybook_compile
      - storybook_deploy
      - webapp_deploy
    if: needs.setup.outputs.deploy == 'true'

    steps:
      - name: Post workflow status
        uses: equisoft-actions/notify-workflow-status@v1
        with:
          needs: ${{ toJSON(needs) }}
          slack-webhook-url: ${{ secrets.OPS_CI_WEBHOOK_URL }}