WIP: Rewrite plugin in react

.eslintrc.js

@@ -5,8 +5,23 @@ module.exports = {
 	],
 	parserOptions: {
 		ecmaVersion: 'latest',
+		ecmaFeatures: {
+			jsx: true,
+		},
 	},
 	rules: {
 		'no-console': 'off',
 	},
+	overrides: [
+		{
+			files: [
+				'**/__tests__/**/*.js',
+				'**/tests/**/*.js',
+				'assets/src/__tests__/*.js',
+			],
+			env: {
+				jest: true,
+			},
+		},
+	],
 };

.github/workflows/code-coverage.yml

@@ -55,6 +55,15 @@ jobs:
           composer-options: "--prefer-dist --with-dependencies"
           custom-cache-suffix: $(date -u -d "-0 month -$(($(date +%d)-1)) days" "+%F")-codecov-v2
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install npm dependencies
+        run: npm ci
+
       - name: Install WordPress Test Suite
         shell: bash
         run: tests/bin/install-wp-tests.sh wordpress_tests root root 127.0.0.1:3306 latest
@@ -123,6 +132,39 @@ jobs:
           path: phpunit-output.log
           retention-days: 7
 
+      - name: Run Jest tests with coverage
+        id: jest_coverage_current
+        run: |
+          set +e
+          npm run test:unit:coverage -- --coverage --coverageReporters=clover --coverageReporters=text > jest-coverage.log 2>&1
+          JEST_EXIT=$?
+          set -e
+
+          echo "=== Jest test output ==="
+          cat jest-coverage.log
+
+          if [ -f coverage/clover.xml ]; then
+            # Extract coverage from Jest Clover XML
+            STATEMENTS=$(xmllint --xpath 'string(//project/metrics/@statements)' coverage/clover.xml 2>/dev/null || echo "0")
+            COVERED=$(xmllint --xpath 'string(//project/metrics/@coveredstatements)' coverage/clover.xml 2>/dev/null || echo "0")
+
+            if [ "$STATEMENTS" != "0" ] && [ -n "$STATEMENTS" ] && [ -n "$COVERED" ]; then
+              JEST_COVERAGE=$(echo "scale=2; ($COVERED * 100) / $STATEMENTS" | bc)
+            else
+              JEST_COVERAGE="0"
+            fi
+
+            echo "jest_coverage=$JEST_COVERAGE" >> $GITHUB_OUTPUT
+            echo "Jest coverage: $JEST_COVERAGE%"
+
+            # Save for base branch comparison
+            cp coverage/clover.xml jest-coverage.xml
+          else
+            echo "jest_coverage=0" >> $GITHUB_OUTPUT
+            echo "No Jest coverage generated"
+          fi
+        continue-on-error: true
+
       - name: Generate coverage report summary
         id: coverage
         run: |
@@ -237,6 +279,33 @@ jobs:
           head -20 base-coverage-details.txt || true
         continue-on-error: true
 
+      - name: Generate Jest coverage for base branch
+        if: github.event_name == 'pull_request'
+        id: base_jest_coverage
+        run: |
+          # Install npm dependencies on base branch
+          npm ci || true
+
+          # Run Jest coverage
+          npm run test:unit:coverage -- --coverage --coverageReporters=clover > base-jest-coverage.log 2>&1 || true
+
+          if [ -f coverage/clover.xml ]; then
+            STATEMENTS=$(xmllint --xpath 'string(//project/metrics/@statements)' coverage/clover.xml 2>/dev/null || echo "0")
+            COVERED=$(xmllint --xpath 'string(//project/metrics/@coveredstatements)' coverage/clover.xml 2>/dev/null || echo "0")
+
+            if [ "$STATEMENTS" != "0" ] && [ -n "$STATEMENTS" ] && [ -n "$COVERED" ]; then
+              BASE_JEST_COVERAGE=$(echo "scale=2; ($COVERED * 100) / $STATEMENTS" | bc)
+            else
+              BASE_JEST_COVERAGE="0"
+            fi
+            echo "base_jest_coverage=$BASE_JEST_COVERAGE" >> $GITHUB_OUTPUT
+            echo "Base Jest coverage: $BASE_JEST_COVERAGE%"
+          else
+            echo "base_jest_coverage=0" >> $GITHUB_OUTPUT
+            echo "No base Jest coverage generated"
+          fi
+        continue-on-error: true
+
       - name: Generate coverage diff report
         if: github.event_name == 'pull_request'
         id: coverage_diff
@@ -364,20 +433,28 @@ jobs:
           fi
 
       - name: Comment PR with coverage
-        if: github.event_name == 'pull_request'
+        if: github.event_name == 'pull_request' && always()
         uses: actions/github-script@v7
         env:
           COVERAGE_CHANGES: ${{ steps.coverage_diff.outputs.coverage_changes }}
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
+            // PHP Coverage
             const current = parseFloat('${{ steps.coverage.outputs.current_coverage }}') || 0;
             const base = parseFloat('${{ steps.base_coverage.outputs.base_coverage }}') || 0;
             const diff = (current - base).toFixed(2);
             const diffEmoji = diff >= 0 ? '📈' : '📉';
             const coverageEmoji = current >= 80 ? '🎉' : current >= 60 ? '📈' : current >= 40 ? '📊' : '📉';
             const status = diff >= -0.5 ? '✅' : '⚠️';
 
+            // Jest Coverage
+            const jestCurrent = parseFloat('${{ steps.jest_coverage_current.outputs.jest_coverage }}') || 0;
+            const jestBase = parseFloat('${{ steps.base_jest_coverage.outputs.base_jest_coverage }}') || 0;
+            const jestDiff = (jestCurrent - jestBase).toFixed(2);
+            const jestDiffEmoji = jestDiff >= 0 ? '📈' : '📉';
+            const jestCoverageEmoji = jestCurrent >= 80 ? '🎉' : jestCurrent >= 60 ? '📈' : jestCurrent >= 40 ? '📊' : '📉';
+
             // Parse coverage changes JSON from environment variable
             let changesJson = {};
             try {
@@ -441,24 +518,39 @@ jobs:
 
             const comment = `## ${status} Code Coverage Report
 
+            ### PHP Coverage (PHPUnit)
+
             | Metric | Value |
             |--------|-------|
-            | **Total Coverage** | **${current.toFixed(2)}%** ${coverageEmoji} |
-            | Base Coverage | ${base.toFixed(2)}% |
-            | Difference | ${diffEmoji} **${diff}%** |
+            | **Current** | **${current.toFixed(2)}%** ${coverageEmoji} |
+            | Base | ${base.toFixed(2)}% |
+            | Change | ${diffEmoji} **${diff}%** |
 
-            ${current >= 40 ? '✅ Coverage meets minimum threshold (40%)' : '⚠️ Coverage below recommended 40% threshold'}
+            ${current >= 40 ? '✅ PHP coverage meets threshold (40%)' : '⚠️ PHP coverage below 40%'}
 
-            ${diff < -0.5 ? '⚠️ **Warning:** Coverage dropped by more than 0.5%. Please add tests.' : ''}
-            ${diff >= 0 ? '🎉 Great job maintaining/improving code coverage!' : ''}
+            ### JavaScript Coverage (Jest)
+
+            | Metric | Value |
+            |--------|-------|
+            | **Current** | **${jestCurrent.toFixed(2)}%** ${jestCoverageEmoji} |
+            | Base | ${jestBase.toFixed(2)}% |
+            | Change | ${jestDiffEmoji} **${jestDiff}%** |
+
+            ${jestCurrent >= 40 ? '✅ Jest coverage meets threshold (40%)' : '⚠️ Jest coverage below 40%'}
+
+            ---
+
+            ${diff < -0.5 ? '⚠️ **Warning:** PHP coverage dropped by more than 0.5%. Please add tests.' : ''}
+            ${diff >= 0 ? '🎉 Great job maintaining/improving PHP coverage!' : ''}
 
             ${detailedChanges}
 
             <details>
             <summary>ℹ️ About this report</summary>
 
-            - All tests run in a single job with Xdebug coverage
-            - Security tests excluded from coverage to prevent output issues
+            - PHP tests run with Xdebug coverage
+            - Jest tests run with built-in coverage
+            - Security tests excluded from PHP coverage
             - Coverage calculated from line coverage percentages
 
             </details>
@@ -507,3 +599,11 @@ jobs:
           name: coverage-report
           path: coverage-html/
           retention-days: 30
+
+      - name: Upload Jest coverage report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: jest-coverage-report
+          path: coverage/
+          retention-days: 30

.github/workflows/playground-merged.yml

@@ -42,5 +42,5 @@ jobs:
         with:
           message: |
             **Test merged PR on Playground**
-            [Test this pull request on the Playground](https://playground.wordpress.net/#${{ steps.blueprint.outputs.blueprint }})
+            [Test this pull request on the Playground](https://playground.progressplanner.com/#${{ steps.blueprint.outputs.blueprint }})
             or [download the zip](${{ github.server_url }}/${{ github.repository }}/archive/refs/heads/develop.zip)

.github/workflows/playground.yml

@@ -109,5 +109,5 @@ jobs:
         with:
           message: |
             **Test on Playground**
-            [Test this pull request on the Playground](https://playground.wordpress.net/#${{ steps.blueprint.outputs.blueprint }})
+            [Test this pull request on the Playground](https://playground.progressplanner.com/#${{ steps.blueprint.outputs.blueprint }})
             or [download the zip](https://nightly.link/${{ github.repository }}/actions/runs/${{ github.run_id }}/${{ github.event.repository.name }}.zip)

.github/workflows/plugin-check.yml

@@ -22,10 +22,10 @@ jobs:
         - name: Build plugin
           run: |
             wp dist-archive . ./${{ github.event.repository.name }}.zip
-            mkdir build
-            unzip ${{ github.event.repository.name }}.zip -d build
+            mkdir -p plugin-check-build
+            unzip ${{ github.event.repository.name }}.zip -d plugin-check-build
 
         - name: Run plugin check
           uses: wordpress/plugin-check-action@v1.0.6
           with:
-            build-dir: './build/${{ github.event.repository.name }}'
+            build-dir: './plugin-check-build/${{ github.event.repository.name }}'

.gitignore

@@ -13,4 +13,6 @@ auth.json
 
 # Environment variables
 .env
+.claude/
+
 coverage/

README.md

@@ -11,7 +11,7 @@
 [![WordPress Plugin Rating](https://img.shields.io/wordpress/plugin/stars/progress-planner.svg)](https://wordpress.org/support/plugin/progress-planner/reviews/)
 [![GitHub](https://img.shields.io/github/license/ProgressPlanner/progress-planner.svg)](https://github.com/ProgressPlanner/progress-planner/blob/main/LICENSE)
 
-[![Try Progress Planner on the WordPress playground](https://img.shields.io/badge/Try%20Progress%20Planner%20on%20the%20WordPress%20Playground-%23117AC9.svg?style=for-the-badge&logo=WordPress&logoColor=ddd)](https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fprogressplanner.com%2Fresearch%2Fblueprint-pp.php%3Frepo%3DProgressPlanner/progress-planner)
+[![Try Progress Planner on the WordPress playground](https://img.shields.io/badge/Try%20Progress%20Planner%20on%20the%20WordPress%20Playground-%23117AC9.svg?style=for-the-badge&logo=WordPress&logoColor=ddd)](https://playground.progressplanner.com/?blueprint-url=https%3A%2F%2Fprogressplanner.com%2Fresearch%2Fblueprint-pp.php%3Frepo%3DProgressPlanner/progress-planner)
 
 # Progress Planner
 

assets/css/admin.css

@@ -80,24 +80,6 @@ body.toplevel_page_progress-planner {
 	margin-top: var(--prpl-padding);
 }
 
-/*------------------------------------*\
-	Styles for the container of the page when the privacy policy is not accepted.
-\*------------------------------------*/
-.prpl-pp-not-accepted {
-
-	.prpl-start-onboarding-container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--prpl-padding);
-	}
-
-	.prpl-start-onboarding-graphic {
-		width: 250px;
-	}
-}
-
 /*------------------------------------*\
 	Generic styles.
 \*------------------------------------*/
@@ -209,54 +191,29 @@ button.prpl-info-icon {
 /*------------------------------------*\
 	Header & logo.
 \*------------------------------------*/
-.prpl-header {
-	margin-bottom: 2rem;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: center;
-
-	.prpl-header-logo img {
-		height: 100px;
-	}
+.prpl-header-logo img {
+	height: 100px;
 }
 
 .prpl-header-logo svg {
 	height: 88px;
 }
 
-.prpl-header-right {
-	display: flex;
-	gap: var(--prpl-padding);
-	align-items: center;
-
-	.prpl-info-icon {
-		width: 2rem;
-		height: 2rem;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.4em;
-
-		/* color: var(--prpl-color-border); */
-		background-color: #fff;
-		border: 1px solid var(--prpl-color-ui-icon);
-		border-radius: var(--prpl-border-radius);
+.prpl-header-right .prpl-info-icon {
 
-		svg {
-			width: 1rem;
-			height: 1rem;
+	svg {
+		width: 1rem;
+		height: 1rem;
 
-			& path {
-				fill: currentcolor;
-			}
+		& path {
+			fill: currentcolor;
 		}
+	}
 
-		&:hover {
-			color: var(--prpl-color-ui-icon-hover);
-			border-color: var(--prpl-color-ui-icon-hover);
-			background-color: var(--prpl-color-ui-icon-hover-fill);
-		}
+	&:hover {
+		color: var(--prpl-color-ui-icon-hover);
+		border-color: var(--prpl-color-ui-icon-hover);
+		background-color: var(--prpl-color-ui-icon-hover-fill);
 	}
 }
 
@@ -549,15 +506,6 @@ button.prpl-info-icon {
 	}
 }
 
-/*------------------------------------*\
-	Layout for columns.
-\*------------------------------------*/
-.prpl-columns-wrapper {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: var(--prpl-padding);
-}
-
 /*------------------------------------*\
 	Loader.
 	See https://cssloaders.github.io/ for more.