upgrade react-aria v1, tailwind v3 and other component libs

.changes/change-pr-673.md

@@ -0,0 +1,5 @@
+---
+"web": minor
+---
+
+Upgrade to react-aria v1, tailwind v3 and bump other component libs.

package.json

@@ -9,7 +9,6 @@
   "scripts": {
     "start": "parcel serve ./src/index.html",
     "build": "parcel build ./src/index.html",
-    "watch": "parcel watch ./src/index.html",
     "size-report": "parcel build src/index.html --reporter @parcel/reporter-bundle-buddy",
     "test-ct": "playwright test -c playwright-ct.config.ts",
     "test-e2e": "playwright test",
@@ -19,10 +18,10 @@
     "covector": "covector"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.2",
+    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^1.0.6",
     "@microstates/react": "0.12.0",
-    "@tailwindcss/forms": "^0.3.4",
+    "@tailwindcss/forms": "^0.5.7",
     "@tauri-apps/api": "1.5.3",
     "big.js": "6.1.1",
     "d3": "^7.8.5",
@@ -34,11 +33,12 @@
     "papaparse": "5.3.1",
     "prop-types": "15.7.2",
     "react": "17.0.2",
-    "react-aria": "^3.28.0",
-    "react-aria-components": "^1.0.0-beta.0",
+    "react-aria": "^3.31.0",
+    "react-aria-components": "^1.0.0",
     "react-dom": "17.0.2",
     "react-file-reader-input": "2.0.0",
     "react-router-dom": "^6.21.1",
+    "tailwindcss-react-aria-components": "^1.0.0",
     "ynab": "2.2.0",
     "yup": "1.2.0"
   },
@@ -67,12 +67,12 @@
     "@types/node": "^20.10.5",
     "covector": "^0.10.2",
     "parcel": "^2.10.3",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "process": "^0.11.10",
     "punycode": "^1.4.1",
     "querystring-es3": "^0.2.1",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.4.0",
     "url": "^0.11.3"
   },
   "volta": {

playwright-ct.config.ts

@@ -18,7 +18,9 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI
+    ? [['html'], ['list'], ['github']]
+    : [['html'], ['list']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */

playwright.config.ts

@@ -16,18 +16,22 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 1,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI
+    ? [['html'], ['list'], ['github']]
+    : [['html'], ['list']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: 'http://127.0.0.1:1234',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry'
+    trace: 'retain-on-failure',
+
+    viewport: { width: 1920, height: 1080 }
   },
 
   /* Configure projects for major browsers */

src/elements/Header.js

@@ -44,8 +44,14 @@ export const Header = () => {
                     <NavLink
                       key={item.to}
                       to={item.to}
-                      activeClassName="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium border-indigo-500 text-gray-900"
-                      className="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                      className={({ isActive, isPending, isTransitioning }) =>
+                        [
+                          'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
+                          isActive
+                            ? 'border-indigo-500 text-gray-900'
+                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                        ].join(' ')
+                      }
                       end={item.end}
                     >
                       {item.name}

src/pages/planning/icicleChart.js

@@ -8,10 +8,10 @@ export const IcicleChart = ({ data }) => {
   }, [data]);
 
   return (
-    <div class="object-none object-center m-5 p-3">
+    <div className="object-none object-center m-5 p-3">
       <svg
         ref={d3Container}
-        class="m-auto"
+        className="m-auto"
         /* sx={{ height: [500, 600, 800], width: [500, 800, 1200] }}  */
       />
     </div>

tailwind.config.cjs

@@ -1,7 +1,6 @@
 module.exports = {
-  purge: ['./src/*.html', './src/**/*.{js,jsx,ts,tsx}'],
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {},
-  variants: {},
   plugins: [require('@tailwindcss/forms')]
 };

tests/accounts/account-delete.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('starting').fill('55');

tests/accounts/account-modification.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('starting').fill('550');

tests/accounts/form-submission.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from '@playwright/test';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 });
 

tests/debtpaybacks/debtpayback-dynamic.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('name').fill('Test Debt Submission');

tests/debtpaybacks/debypayback-delete.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('name').fill('Test Debt Submission');

tests/debtpaybacks/debypayback-modification.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('name').fill('Test Debt Submission');

tests/debtpaybacks/form-submission.spec.ts

@@ -1,7 +1,8 @@
 import { test, expect } from '@playwright/test';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Account').click();
 
   await page.getByLabel('name').fill('Test Debt Submission');

tests/helpers/navigate.ts

@@ -0,0 +1,9 @@
+import { expect, type Page } from '@playwright/test';
+
+export const navigateTo = async (page: Page, navLink: string) => {
+  await page.goto('/');
+  const gettingStartedButton = page.locator('a', { hasText: 'Get started' });
+  // makes certain the home page is loaded and the server is started up
+  await expect(gettingStartedButton).toBeVisible();
+  await page.locator('nav').first().locator('a', { hasText: navLink }).click();
+};

tests/transactions/form-submission.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect, type Page } from '@playwright/test';
+import { navigateTo } from '../helpers/navigate';
 
 const addGenericTransaction = async (
   page: Page,
@@ -15,21 +16,21 @@ const addGenericTransaction = async (
       await pageAction;
     }
   }
-  expect(page.getByText(value)).toBeVisible();
+  await expect(page.getByText(value)).toBeVisible();
 };
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Transaction').click();
 });
 
-test('tab switches to the form', async ({ page }) => {
+test('tab switches to the form', async ({ page }, testInfo) => {
   const addButton = page.getByRole('tab').getByText('Add Transaction');
   await addButton.click();
-  expect(addButton).toBeAttached();
+  await expect(addButton).toBeAttached();
 });
 
-test('submits simple transaction', async ({ page }) => {
+test('submits simple transaction', async ({ page }, testInfo) => {
   await addGenericTransaction(page);
 });
 
@@ -38,7 +39,7 @@ test('check income is listed in income tab after submit', async ({ page }) => {
 
   await page.getByRole('tab').getByText('Income').click();
   // all transactions should be visible, so just check existence
-  expect(page.getByText('55.00')).toBeVisible();
+  await expect(page.getByText('55.00')).toBeVisible();
 });
 
 test('check expense is listed in expense tab after submit', async ({
@@ -53,7 +54,7 @@ test('check expense is listed in expense tab after submit', async ({
 
   await page.getByRole('tab').getByText('Expenses').click();
   // all transactions should be visible, so just check existence
-  expect(page.getByText('67.00')).toBeVisible();
+  await expect(page.getByText('67.00')).toBeVisible();
 });
 
 test('check transfer is listed in transfer tab after submit', async ({
@@ -68,5 +69,5 @@ test('check transfer is listed in transfer tab after submit', async ({
 
   await page.getByRole('tab').getByText('Transfers').click();
   // all transactions should be visible, so just check existence
-  expect(page.getByText('53.00')).toBeVisible();
+  await expect(page.getByText('53.00')).toBeVisible();
 });

tests/transactions/transaction-delete.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Transaction').click();
 
   await page.getByLabel('value').fill('55');

tests/transactions/transaction-modification.spec.ts

@@ -1,8 +1,9 @@
 import { test, expect } from '@playwright/test';
 import { getRowWith } from '../helpers/tableHelpers';
+import { navigateTo } from '../helpers/navigate';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/planning');
+  await navigateTo(page, 'Planning');
   await page.getByText('Add Transaction').click();
 
   await page.getByLabel('value').fill('55');