@nyaruka/temba-components 0.129.2 → 0.129.4

package/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'import/named': 'off',
     'import/no-unresolved': 'off',
     // Block console.log statements unless explicitly disabled

package/.github/workflows/build.yml

@@ -1,6 +1,10 @@
 name: 'build'
 
-on: [push]
+on: [push, pull_request]
+
+permissions:
+  contents: write
+  pull-requests: write
 
 jobs:
   build:
@@ -12,24 +16,153 @@ jobs:
           timezoneLinux: 'UTC'
       - name: Checkout (GitHub)
         uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
       - run: docker network create --driver bridge textit_default
       - name: Build and run dev container task
+        id: validate
         uses: devcontainers/ci@v0.3
+        continue-on-error: true
         with:
-          runCmd: yarn validate
+          runCmd: |
+            yarn validate 2>&1 | tee validate_output.log
+            exit ${PIPESTATUS[0]}
           push: never
           env: |
             CI=true
 
+      - name: Extract coverage stats
+        if: always()
+        run: |
+          if [ -f validate_output.log ]; then
+            echo "Extracting coverage information from validate output..."
+            
+            # Extract coverage report section
+            COVERAGE_REPORT=$(grep -A 10 "📊 Coverage Report" validate_output.log | head -15 || echo "Coverage report not found")
+            
+            # Save coverage to environment file for PR comment
+            echo "COVERAGE_REPORT<<EOF" >> $GITHUB_ENV
+            echo "$COVERAGE_REPORT" >> $GITHUB_ENV
+            echo "EOF" >> $GITHUB_ENV
+            
+            # Also save individual metrics for easier parsing
+            LINES_COVERAGE=$(grep "Lines:" validate_output.log | grep -o '[0-9.]*%' | tail -1 || echo "N/A")
+            FUNCTIONS_COVERAGE=$(grep "Functions:" validate_output.log | grep -o '[0-9.]*%' | tail -1 || echo "N/A")
+            BRANCHES_COVERAGE=$(grep "Branches:" validate_output.log | grep -o '[0-9.]*%' | tail -1 || echo "N/A")
+            
+            echo "LINES_COVERAGE=$LINES_COVERAGE" >> $GITHUB_ENV
+            echo "FUNCTIONS_COVERAGE=$FUNCTIONS_COVERAGE" >> $GITHUB_ENV
+            echo "BRANCHES_COVERAGE=$BRANCHES_COVERAGE" >> $GITHUB_ENV
+            
+            echo "Coverage extracted:"
+            echo "Lines: $LINES_COVERAGE"
+            echo "Functions: $FUNCTIONS_COVERAGE" 
+            echo "Branches: $BRANCHES_COVERAGE"
+            
+            # Debug: show what coverage files we have
+            echo "Available coverage files:"
+            find . -name "coverage" -type d 2>/dev/null || echo "No coverage directories found"
+            find . -name "lcov-report" -type d 2>/dev/null || echo "No lcov-report directories found"
+          else
+            echo "No validate output found"
+          fi
+
+      - name: Comment coverage on PR
+        if: github.event_name == 'pull_request' && always()
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const coverageReport = process.env.COVERAGE_REPORT;
+            const linesCoverage = process.env.LINES_COVERAGE;
+            const functionsCoverage = process.env.FUNCTIONS_COVERAGE;
+            const branchesCoverage = process.env.BRANCHES_COVERAGE;
+
+            const body = `## 📊 Coverage Report
+
+            \`\`\`
+            ${coverageReport}
+            \`\`\`
+
+            ### Summary
+            - **Lines:** ${linesCoverage}
+            - **Functions:** ${functionsCoverage}
+            - **Branches:** ${branchesCoverage}
+
+            [Coverage Report](https://s3.us-east-1.amazonaws.com/dev.temba.io/coverage/temba-components/pr-${context.payload.number}/index.html)
+            `;
+
+            // Find existing coverage comment
+            const comments = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.payload.number,
+            });
+
+            const existingComment = comments.data.find(comment => 
+              comment.user.login === 'github-actions[bot]' && 
+              comment.body.includes('📊 Coverage Report')
+            );
+
+            if (existingComment) {
+              // Update existing comment
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existingComment.id,
+                body: body
+              });
+            } else {
+              // Create new comment
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.number,
+                body: body
+              });
+            }
+
+      - name: Configure AWS credentials
+        if: always()
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+
+      - name: Upload coverage report to S3
+        if: always()
+        run: |
+          # Check if coverage directory exists
+          if [ -d "coverage/lcov-report" ]; then
+            echo "Uploading coverage report to S3..."
+            
+            if [ "${{ github.event_name }}" == "pull_request" ]; then
+              # For PRs, upload to a PR-specific folder
+              S3_PATH="s3://dev.temba.io/coverage/temba-components/pr-${{ github.event.number }}/"
+            else
+              # For main branch, upload to main folder
+              S3_PATH="s3://dev.temba.io/coverage/temba-components/main/"
+            fi
+            
+            aws s3 sync coverage/lcov-report/ "$S3_PATH" --delete
+            echo "Coverage report uploaded to: $S3_PATH"
+          else
+            echo "No coverage report found to upload"
+          fi
+
+      - name: Check validation result
+        run: |
+          if [ "${{ steps.validate.outcome }}" != "success" ]; then
+            echo "❌ Validation failed"
+            exit 1
+          else
+            echo "✅ Validation passed"
+          fi
+
       - name: Upload artifacts
         if: failure()
         uses: actions/upload-artifact@v4
         with:
           name: screenshots
           path: screenshots/
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{secrets.CODECOV_TOKEN}}
-          files: coverage/lcov.info

package/CHANGELOG.md

@@ -4,8 +4,48 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.129.4](https://github.com/nyaruka/temba-components/compare/v0.129.3...v0.129.4)
+
+- Cleanup unused chat event types and remove some unused properties on other types [`#647`](https://github.com/nyaruka/temba-components/pull/647)
+- Nestable form layouts [`#644`](https://github.com/nyaruka/temba-components/pull/644)
+- Add KeyValueEditor and field config abstraction [`#643`](https://github.com/nyaruka/temba-components/pull/643)
+- Add send_email test [`#642`](https://github.com/nyaruka/temba-components/pull/642)
+- Add better action tests [`#641`](https://github.com/nyaruka/temba-components/pull/641)
+- Change coverage user and path [`#640`](https://github.com/nyaruka/temba-components/pull/640)
+- Update coverage storage for build [`#639`](https://github.com/nyaruka/temba-components/pull/639)
+- Add NodeConfig [`#638`](https://github.com/nyaruka/temba-components/pull/638)
+- Simplify ActionEditor form configuration by removing properties support and renaming transformations [`#637`](https://github.com/nyaruka/temba-components/pull/637)
+- Action editor [`#635`](https://github.com/nyaruka/temba-components/pull/635)
+- Introduce NodeConfig to complement ActionConfig [`3144a8b`](https://github.com/nyaruka/temba-components/commit/3144a8ba2ece77c35fe1610cc6b2fd2378874845)
+- Reorg flow config [`cb64d1f`](https://github.com/nyaruka/temba-components/commit/cb64d1fc24d8502442f854e612cf7d3b8723e5e8)
+- Add KeyValueEditor [`a138f41`](https://github.com/nyaruka/temba-components/commit/a138f41d9d62de3df79e82b0907cefac1997c0cf)
+
+#### [v0.129.3](https://github.com/nyaruka/temba-components/compare/v0.129.2...v0.129.3)
+
+> 29 July 2025
+
+- Don't attempt to show select items if loading [`#634`](https://github.com/nyaruka/temba-components/pull/634)
+- Fix sticky selection intersection [`#633`](https://github.com/nyaruka/temba-components/pull/633)
+- Flow Editor: Add missing action descriptions for flow rendering [`#632`](https://github.com/nyaruka/temba-components/pull/632)
+- Flow Editor: Implement action removal with confirmation UI [`#628`](https://github.com/nyaruka/temba-components/pull/628)
+- This functionally works great even though it does a tiny bit of DOM manipulation. I think for performance reasons, it actually is appropriate in this case. [`#626`](https://github.com/nyaruka/temba-components/pull/626)
+- Implement double-click to create sticky notes on Flow Editor canvas [`#622`](https://github.com/nyaruka/temba-components/pull/622)
+- Add color picker functionality to sticky notes [`#624`](https://github.com/nyaruka/temba-components/pull/624)
+- Fix snapping, background grid [`#620`](https://github.com/nyaruka/temba-components/pull/620)
+- Implement multi-node selection functionality in Flow Editor [`#613`](https://github.com/nyaruka/temba-components/pull/613)
+- Fix install warnings [`#616`](https://github.com/nyaruka/temba-components/pull/616)
+- Fail build if coverage drops below 80% and add text-based coverage report [`#605`](https://github.com/nyaruka/temba-components/pull/605)
+- Store coverage reports in repository and deploy to GitHub Pages [`#603`](https://github.com/nyaruka/temba-components/pull/603)
+- Improve test coverage from 75.62% to 76.22% and add comprehensive tests for core utilities [`#600`](https://github.com/nyaruka/temba-components/pull/600)
+- Remove component dedicated folders [`#599`](https://github.com/nyaruka/temba-components/pull/599)
+- Add comprehensive action rendering functions for flow editor [`e65bb5f`](https://github.com/nyaruka/temba-components/commit/e65bb5ff1cd2070f256f985e8671e631584c971b)
+- Implement action removal functionality with initial tests [`8476a36`](https://github.com/nyaruka/temba-components/commit/8476a3650e9eb2b1fa8de81fd25120deccc7eac0)
+- Implement action removal functionality with initial tests [`4f15d10`](https://github.com/nyaruka/temba-components/commit/4f15d1063c0937543965375976a3649388c7d3e0)
+
 #### [v0.129.2](https://github.com/nyaruka/temba-components/compare/v0.129.1...v0.129.2)
 
+> 26 June 2025
+
 - Add option for chart to not fetch until a window is provided [`#596`](https://github.com/nyaruka/temba-components/pull/596)
 - Standardize component documentation structure and remove inline styles [`#595`](https://github.com/nyaruka/temba-components/pull/595)
 - Fix demo links for styles and module import [`5c06b5a`](https://github.com/nyaruka/temba-components/commit/5c06b5a58118450d330d0a0370b0e0a5a3a40d58)

package/README.md

@@ -1,3 +1,9 @@
+# temba-components
+
+[![Coverage](https://nyaruka.github.io/temba-components/coverage-badge.svg)](https://nyaruka.github.io/temba-components/)
+
+Coverage reports are automatically generated and deployed to [GitHub Pages](https://nyaruka.github.io/temba-components/) from the `coverage` branch after each merge to main.
+
 temba-components is a suite of ui widgets used by various RapidPro projects.
 
 Some of the components:

package/check-coverage.js

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const COVERAGE_THRESHOLD = 80;
+const LCOV_FILE = path.join(__dirname, 'coverage', 'lcov.info');
+
+function parseLcovInfo(lcovPath) {
+  if (!fs.existsSync(lcovPath)) {
+    console.error('❌ Coverage file not found:', lcovPath);
+    process.exit(1);
+  }
+
+  const lcovData = fs.readFileSync(lcovPath, 'utf8');
+  const lines = lcovData.split('\n');
+
+  let totalLines = 0;
+  let hitLines = 0;
+  let totalFunctions = 0;
+  let hitFunctions = 0;
+  let totalBranches = 0;
+  let hitBranches = 0;
+
+  lines.forEach((line) => {
+    if (line.startsWith('LF:')) {
+      totalLines += parseInt(line.substring(3));
+    } else if (line.startsWith('LH:')) {
+      hitLines += parseInt(line.substring(3));
+    } else if (line.startsWith('FNF:')) {
+      totalFunctions += parseInt(line.substring(4));
+    } else if (line.startsWith('FNH:')) {
+      hitFunctions += parseInt(line.substring(4));
+    } else if (line.startsWith('BRF:')) {
+      totalBranches += parseInt(line.substring(4));
+    } else if (line.startsWith('BRH:')) {
+      hitBranches += parseInt(line.substring(4));
+    }
+  });
+
+  return {
+    lines: {
+      total: totalLines,
+      hit: hitLines,
+      percentage: totalLines > 0 ? (hitLines / totalLines) * 100 : 0
+    },
+    functions: {
+      total: totalFunctions,
+      hit: hitFunctions,
+      percentage: totalFunctions > 0 ? (hitFunctions / totalFunctions) * 100 : 0
+    },
+    branches: {
+      total: totalBranches,
+      hit: hitBranches,
+      percentage: totalBranches > 0 ? (hitBranches / totalBranches) * 100 : 0
+    }
+  };
+}
+
+function displayCoverageReport(coverage) {
+  console.log('\n📊 Coverage Report');
+  console.log('==================');
+  console.log(
+    `Lines:      ${coverage.lines.hit}/${
+      coverage.lines.total
+    } (${coverage.lines.percentage.toFixed(2)}%)`
+  );
+  console.log(
+    `Functions:  ${coverage.functions.hit}/${
+      coverage.functions.total
+    } (${coverage.functions.percentage.toFixed(2)}%)`
+  );
+  console.log(
+    `Branches:   ${coverage.branches.hit}/${
+      coverage.branches.total
+    } (${coverage.branches.percentage.toFixed(2)}%)`
+  );
+  console.log('==================');
+
+  // Use statement coverage (lines) as the metric for build success/failure
+  const statementCoverage = coverage.lines.percentage;
+
+  if (statementCoverage >= COVERAGE_THRESHOLD) {
+    console.log(
+      `✅ Statement Coverage: ${statementCoverage.toFixed(
+        2
+      )}% (above ${COVERAGE_THRESHOLD}% threshold)`
+    );
+  } else {
+    console.log(
+      `❌ Statement Coverage: ${statementCoverage.toFixed(
+        2
+      )}% (below ${COVERAGE_THRESHOLD}% threshold)`
+    );
+  }
+
+  return statementCoverage;
+}
+
+function main() {
+  try {
+    const coverage = parseLcovInfo(LCOV_FILE);
+    const statementCoverage = displayCoverageReport(coverage);
+
+    if (statementCoverage < COVERAGE_THRESHOLD) {
+      console.log(
+        `\n💥 Build failed: Statement coverage ${statementCoverage.toFixed(
+          2
+        )}% is below the required ${COVERAGE_THRESHOLD}% threshold.`
+      );
+      console.log(
+        `📈 Increase coverage by ${(
+          COVERAGE_THRESHOLD - statementCoverage
+        ).toFixed(2)}% to pass the build.`
+      );
+      process.exit(1);
+    } else {
+      console.log(
+        `\n🎉 Build passed: Statement coverage meets the ${COVERAGE_THRESHOLD}% threshold!`
+      );
+      process.exit(0);
+    }
+  } catch (error) {
+    console.error('❌ Error checking coverage:', error.message);
+    process.exit(1);
+  }
+}
+
+if (require.main === module) {
+  main();
+}
+
+module.exports = { parseLcovInfo, displayCoverageReport, COVERAGE_THRESHOLD };