@nyaruka/temba-components 0.129.1 → 0.129.3

package/.github/workflows/build.yml

@@ -2,6 +2,9 @@ name: 'build'
 
 on: [push]
 
+permissions:
+  contents: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -12,6 +15,9 @@ 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
         uses: devcontainers/ci@v0.3
@@ -28,8 +34,3 @@ jobs:
           name: screenshots
           path: screenshots/
 
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{secrets.CODECOV_TOKEN}}
-          files: coverage/lcov.info

package/.github/workflows/coverage.yml

@@ -0,0 +1,80 @@
+name: 'Update Coverage Reports'
+
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: write
+
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set Timezone
+        uses: szenius/set-timezone@v2.0
+        with:
+          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 tests with coverage
+        uses: devcontainers/ci@v0.3
+        with:
+          runCmd: yarn validate && ./generate-coverage-badge.sh
+          push: never
+          env: |
+            CI=true
+
+      - name: Copy coverage to temp
+        run: |
+          mkdir -p /tmp/coverage-copy
+          cp -r coverage /tmp/coverage-copy/
+
+      - name: Deploy coverage to coverage branch
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+
+          # Remove any coverage directory to avoid ambiguity with branch name
+          rm -rf coverage
+
+          # Create or checkout coverage branch
+          if git show-ref --verify --quiet refs/remotes/origin/coverage; then
+            git fetch origin coverage
+            git checkout coverage
+          else
+            git checkout --orphan coverage
+            git rm -rf . || true
+          fi
+
+          # Copy coverage report files from temp directly to root
+          cp -r /tmp/coverage-copy/coverage/lcov-report/* ./
+          rm -rf /tmp/coverage-copy
+
+          # Create .nojekyll for GitHub Pages
+          touch .nojekyll
+
+          # Create .gitignore to exclude build byproducts from coverage branch
+          echo "# Ignore build artifacts and local byproducts in coverage branch" > .gitignore
+          echo "dist/" >> .gitignore
+          echo "node_modules/" >> .gitignore
+          echo "out-tsc/" >> .gitignore
+          echo "screenshots/test/" >> .gitignore
+          echo "static/svg/work/" >> .gitignore
+          echo "# Add more patterns as needed" >> .gitignore
+
+          # Add all files
+          git add .
+
+          # Commit if there are changes
+          if ! git diff --staged --quiet; then
+            git commit -m "Update coverage reports [skip ci] - $(date)"
+            git push origin coverage
+          fi

package/CHANGELOG.md

@@ -4,8 +4,40 @@ 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.3](https://github.com/nyaruka/temba-components/compare/v0.129.2...v0.129.3)
+
+- 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)
+- Standardize sticky-note-demo.html and horizontal-demo.html documentation [`36ad3c1`](https://github.com/nyaruka/temba-components/commit/36ad3c14a23c4419a7f0ed32c613cdc53b3737a7)
+- Move all component demos under demo/components directory [`dd2e778`](https://github.com/nyaruka/temba-components/commit/dd2e7787c9114912bc746bcb5fe2341db0ae2e0f)
+
 #### [v0.129.1](https://github.com/nyaruka/temba-components/compare/v0.129.0...v0.129.1)
 
+> 25 June 2025
+
 - Fix formatting for range dates [`#590`](https://github.com/nyaruka/temba-components/pull/590)
 
 #### [v0.129.0](https://github.com/nyaruka/temba-components/compare/v0.128.0...v0.129.0)

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 };

package/demo/components/alert/example.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Alert Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Alert Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+
+    <div class="example">
+      <h3>Basic Alert</h3>
+      <p>A simple alert component</p>
+      <temba-alert>This is a basic alert message.</temba-alert>
+    </div>
+
+    <div class="example">
+      <h3>Success Alert</h3>
+      <p>An alert for successful actions</p>
+      <temba-alert level="success"
+        >Your changes have been saved successfully!</temba-alert
+      >
+    </div>
+
+    <div class="example">
+      <h3>Warning Alert</h3>
+      <p>An alert for warning messages</p>
+      <temba-alert level="warning"
+        >Please review your input before proceeding.</temba-alert
+      >
+    </div>
+
+    <div class="example">
+      <h3>Error Alert</h3>
+      <p>An alert for error messages</p>
+      <temba-alert level="error"
+        >An error occurred while processing your request.</temba-alert
+      >
+    </div>
+
+    <div class="example">
+      <h3>Info Alert</h3>
+      <p>An alert for informational messages</p>
+      <temba-alert level="info"
+        >This feature is currently in beta testing.</temba-alert
+      >
+    </div>
+
+    <div class="example">
+      <h3>Dismissible Alert</h3>
+      <p>An alert that can be closed</p>
+      <temba-alert dismissible
+        >This alert can be dismissed by clicking the X button.</temba-alert
+      >
+    </div>
+
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/components/button/example.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Button Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/prism.css" rel="stylesheet" />
+    <script type="module" src="/demo/static/js/prism-loader.js"></script>
+  </head>
+  <body>
+    <h1>Button Examples</h1>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
+
+    <table class="attr-table">
+      <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>name</td>
+          <td>Text displayed on the button</td>
+          <td>None (required)</td>
+        </tr>
+        <tr>
+          <td>primary</td>
+          <td>Applies primary button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>secondary</td>
+          <td>Applies secondary button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>attention</td>
+          <td>Applies attention-grabbing styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>destructive</td>
+          <td>Applies destructive action styling (red)</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>light</td>
+          <td>Applies light button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>disabled</td>
+          <td>Disables the button and prevents interaction</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>submitting</td>
+          <td>Shows loading state during form submission</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>small</td>
+          <td>Applies smaller button size</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>lined</td>
+          <td>Applies outlined button styling</td>
+          <td>false</td>
+        </tr>
+        <tr>
+          <td>href</td>
+          <td>URL to navigate to when clicked (makes button a link)</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>icon</td>
+          <td>Icon name to display alongside button text</td>
+          <td>None</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="example">
+      <h3>Basic Button</h3>
+      <p>A simple button component</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button name="Click Me"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button name="Click Me"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Primary Button</h3>
+      <p>A primary styled button</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button primary name="Primary Action"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button primary name="Primary Action"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Secondary Button</h3>
+      <p>A secondary styled button</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button secondary name="Secondary Action"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button secondary name="Secondary Action"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Small Button</h3>
+      <p>A smaller button variant</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button small name="Small Button"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button small name="Small Button"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Disabled Button</h3>
+      <p>A button that cannot be clicked</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;temba-button disabled name="Disabled Button"&gt;&lt;/temba-button&gt;</code></pre>
+      <temba-button disabled name="Disabled Button"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Multiple Buttons</h3>
+      <p>Several buttons in a row with proper constraints</p>
+      <pre
+        class="example-html"
+      ><code class="language-markup">&lt;div class="button-group"&gt;
+  &lt;div&gt;&lt;temba-button name="Save"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;temba-button secondary name="Cancel"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;temba-button primary name="Submit"&gt;&lt;/temba-button&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+      <div class="button-group">
+        <div>
+          <temba-button name="Save"></temba-button>
+        </div>
+        <div>
+          <temba-button secondary name="Cancel"></temba-button>
+        </div>
+        <div>
+          <temba-button primary name="Submit"></temba-button>
+        </div>
+      </div>
+    </div>
+
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/{chart → components/chart}/example.html

@@ -12,7 +12,7 @@
       href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
       rel="stylesheet"
     />
-    <link href="../styles.css" rel="stylesheet" type="text/css" />
+    <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
     <style>
       .palette {
         display: flex;
@@ -45,7 +45,7 @@
   <body>
     <temba-store></temba-store>
     <h1>Chart Examples</h1>
-    <p><a href="../index.html">← Back to main demo</a></p>
+    <p><a href="/demo/index.html">← Back to main demo</a></p>
 
     <div class="example">
       <h3>Summation Chart</h3>
@@ -387,7 +387,7 @@
     </div>
 
     <script type="module">
-      import '../../out-tsc/temba-modules.js';
+      import '/out-tsc/temba-modules.js';
     </script>
   </body>
 </html>