Refactor components to be responsible for rendering their own childre…

…n; upgrade dependencies; use Vitest browser mode for UI tests rather than JSDOM. (#421)

* Handle wrapping PromptComponent objects with React components in the comonent itself, rather than in the form mechanics.

* Fix circular imports

* Update dependencies

* More dep updates and temporarily comment out server tests from Vitest root workspace. These tests pass when run directly via the server package.

* Switch back to eslint 8

* Remove inline debug plugin

* In-progress for sharing

* Fixing issues with child rendering

* Starting work to use Vitest Browser Mode with Storybook

* Storybook tests working via Vitest browser mode

* Replace design package's test:ci script with usage of the root Vitest workspace

* Remove debug logging

* Remove describeStories test helper from design package.

* Remove jsdom from the design package, and get the DnD test working with the current version of the code.

* Remove "pnpm --filter @atj/design test:ci" from root test:ci, since the Vitest workspace covers these tests now.

* Remove old commented-out PatternComponent defn

* Remove debug comments

* Remove debug log

.nvmrc

@@ -1 +1 @@
-v20.18.0
+v22.12.0

package.json

@@ -15,8 +15,8 @@
     "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx,scss,css}\"",
     "lint": "turbo run lint",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",
-    "test": "vitest run && pnpm --filter @atj/design test:ci",
-    "test:ci": "vitest run && pnpm --filter @atj/design test:ci # --coverage.enabled --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure",
+    "test": "vitest run",
+    "test:ci": "vitest run # --coverage.enabled --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure",
     "test:infra": "turbo run --filter=infra-cdktf test",
     "typecheck": "tsc --build",
     "prepare": "husky"
@@ -25,27 +25,27 @@
     "pre-commit": "pnpm format"
   },
   "devDependencies": {
-    "@playwright/test": "^1.48.1",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@playwright/test": "^1.49.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@types/node": "^22.7.4",
-    "@vitest/browser": "^2.1.3",
-    "@vitest/coverage-v8": "^2.1.3",
-    "@vitest/ui": "^2.1.3",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@types/node": "^22.10.5",
+    "@vitest/browser": "^3.0.0-beta.4",
+    "@vitest/coverage-v8": "^3.0.0-beta.4",
+    "@vitest/ui": "^3.0.0-beta.4",
     "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "husky": "^9.1.6",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "rollup": "^4.23.0",
+    "rollup": "^4.30.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.0",
     "turbo": "^2.1.3",
     "typescript": "^5.6.2",
-    "vitest": "^2.1.3",
-    "vitest-mock-extended": "^2.0.0"
+    "vitest": "^3.0.0-beta.4",
+    "vitest-mock-extended": "^2.0.2"
   }
 }

packages/auth/package.json

@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.11",
-    "vitest-fetch-mock": "^0.3.0"
+    "vitest-fetch-mock": "^0.4.3"
   }
 }

packages/auth/src/repository/create-session.test.ts

@@ -6,7 +6,7 @@ import { createSession } from './create-session.js';
 
 describeDatabase('create session', () => {
   it<DbTestContext>('fails with unknown userId', async ({ db }) => {
-    expect(() =>
+    await expect(() =>
       createSession(db.ctx, {
         id: '31b72aca-116e-412d-b9b8-467300a53748',
         expiresAt: new Date(),

packages/database/package.json

@@ -9,19 +9,19 @@
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/cjs/index.js"
     },
     "./context": {
+      "types": "./dist/types/context/index.d.ts",
       "import": "./dist/esm/context.js",
-      "require": "./dist/cjs/context.js",
-      "types": "./dist/types/context/index.d.ts"
+      "require": "./dist/cjs/context.js"
     },
     "./testing": {
+      "types": "./dist/types/testing.d.ts",
       "import": "./dist/esm/testing.js",
-      "require": "./dist/cjs/testing.js",
-      "types": "./dist/types/testing.d.ts"
+      "require": "./dist/cjs/testing.js"
     }
   },
   "scripts": {
@@ -33,7 +33,7 @@
   "dependencies": {
     "@atj/common": "workspace:*",
     "@types/pg": "^8.11.6",
-    "better-sqlite3": "^11.1.2",
+    "better-sqlite3": "^11.7.2",
     "knex": "^3.1.0",
     "kysely": "^0.27.4",
     "pg": "^8.12.0"
@@ -42,6 +42,6 @@
     "@testcontainers/postgresql": "^10.13.2",
     "@types/better-sqlite3": "^7.6.11",
     "testcontainers": "^10.13.2",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

packages/database/rollup.config.js

@@ -5,8 +5,8 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import typescript from 'rollup-plugin-typescript2';
 
-import packageJson from './package.json' assert { type: 'json' };
-import workspacePackageJson from '../../package.json' assert { type: 'json' };
+import packageJson from './package.json' with { type: 'json' };
+import workspacePackageJson from '../../package.json' with { type: 'json' };
 
 export default {
   //input: ['src/index.ts', 'src/context/index.ts', 'src/testing.ts'],

packages/design/.storybook/main.ts

@@ -18,6 +18,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-coverage'),
+    getAbsolutePath('@storybook/experimental-addon-test'),
   ],
   core: {
     disableTelemetry: true,

packages/design/package.json

@@ -20,7 +20,6 @@
     "size:ci": "size-limit --json",
     "test:url": "test-storybook --url http://127.0.0.1:9009 --config-dir .storybook",
     "test:dev": "wait-on tcp:127.0.0.1:9009 && pnpm test:url --maxWorkers=2 # assumes dev server is running",
-    "test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build:storybook --quiet && pnpm http-server storybook-static --port 9009 --silent\" \"pnpm test:dev\"",
     "test:watch": "pnpm onchange './**/*.{tsx,ts}' -- pnpm test:url"
   },
   "files": [
@@ -34,18 +33,19 @@
   ],
   "devDependencies": {
     "@playwright/test": "1.48.1",
-    "@storybook/addon-a11y": "^8.2.8",
-    "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-interactions": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/blocks": "^8.2.8",
-    "@storybook/preview-api": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/react-vite": "^8.2.8",
-    "@storybook/test": "^8.2.8",
-    "@storybook/test-runner": "^0.17.0",
-    "@storybook/types": "^8.2.8",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-coverage": "^1.0.5",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/experimental-addon-test": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.21.0",
+    "@storybook/types": "^8.4.7",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/deep-equal": "^1.0.4",
@@ -54,22 +54,17 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@uswds/compile": "1.1.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^2.0.5",
+    "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.35.0",
     "gulp": "^5.0.0",
     "http-server": "^14.1.1",
     "install": "^0.13.0",
-    "jsdom": "^24.1.1",
     "onchange": "^7.1.0",
-    "playwright": "1.48.1",
     "prop-types": "^15.8.1",
     "react-dom": "^18.3.1",
-    "vite": "^5.4.6",
-    "vite-plugin-dts": "^4.0.1",
-    "vitest": "^2.0.5",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
     "wait-on": "^7.2.0"
   },
   "dependencies": {
@@ -89,8 +84,8 @@
     "react": "^18.3.1",
     "react-hook-form": "^7.52.2",
     "react-router-dom": "^6.26.0",
+    "storybook": "^8.4.7",
     "size-limit": "^11.1.6",
-    "storybook": "^8.2.8",
     "zustand": "^4.5.4",
     "zustand-utils": "^1.3.2"
   }

packages/design/src/Form/components/Fieldset/index.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import { type FieldsetProps } from '@atj/forms';
 
-import { type PatternComponent } from '../../../Form/index.js';
+import { type PatternComponent } from '../../index.js';
+import { renderPromptComponents } from '../../form-common.js';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
@@ -12,8 +13,7 @@ const Fieldset: PatternComponent<FieldsetProps> = props => {
           {props.legend}
         </legend>
       )}
-
-      {props.children}
+      {renderPromptComponents(props.context, props.childComponents)}
     </fieldset>
   );
 };

packages/design/src/Form/components/Page/index.tsx

@@ -3,9 +3,10 @@ import React from 'react';
 import { type PageProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../index.js';
+import { renderPromptComponents } from '../../form-common.js';
 
 const Page: PatternComponent<PageProps> = props => {
-  return <>{props.children}</>;
+  return <>{renderPromptComponents(props.context, props.childComponents)}</>;
 };
 
 export default Page;

packages/design/src/Form/components/PageSet/PageSet.tsx

@@ -6,6 +6,7 @@ import { type PatternComponent } from '../../index.js';
 import ActionBar from '../../../Form/ActionBar/index.js';
 
 import { PageMenu } from './PageMenu/index.js';
+import { renderPromptComponents } from '../../form-common.js';
 
 const PageSet: PatternComponent<PageSetProps> = props => {
   return (
@@ -17,7 +18,7 @@ const PageSet: PatternComponent<PageSetProps> = props => {
         className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper"
         aria-live="polite"
       >
-        {props.children}
+        {renderPromptComponents(props.context, props.childComponents)}
         <ActionBar actions={props.actions} />
       </div>
     </div>

packages/design/src/Form/components/Sequence/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import { type PatternComponent } from '../../index.js';
+import { renderPromptComponents } from '../../form-common.js';
 
-import { type PatternComponent } from '../../../Form/index.js';
-
-const Sequence: PatternComponent = ({ children }) => {
-  return <>{children}</>;
+const Sequence: PatternComponent = props => {
+  return renderPromptComponents(props.context, props.childComponents);
 };
 
 export default Sequence;