Add Rich text editor

.github/workflows/_validate.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install playwright
+        run: pnpm dlx playwright install --with-deps
+
       # While most of the test suite is self-contained, the tests for the demo
       # servers require a prod build of @atj/server.
       - name: Build

.gitignore

@@ -16,3 +16,4 @@ packages/form-service
 /e2e/playwright-report/
 /e2e/blob-report/
 /e2e/playwright/.cache/
+__screenshots__/

README.md

@@ -42,7 +42,7 @@ This project uses [pnpm workspaces](https://pnpm.io/workspaces). To work with th
 pnpm install
 ```
 
-To run the complete test suite, with coverage metrics generated:
+To install the browsers needed for the Storybook testing with `@vitest/browser`, you need to do a one-time install with `pnpm dlx install playwright --with-deps`. To run the complete test suite, with coverage metrics generated:
 
 ```bash
 pnpm test

apps/server-doj/.gitignore

@@ -1 +1,2 @@
 dist/
+*.db

apps/server-kansas/.gitignore

@@ -1 +1,2 @@
 dist/
+*.db

documents/adr/0012-rich-text-editor.md

@@ -0,0 +1,21 @@
+# 12. Rich Text Editor
+
+Date: 2024-08-12
+
+## Status
+
+Approved
+
+## Context
+
+In user testing, there was an expressed interest to be able to apply a limited set of rich text formatting to imported forms and new builds from scratch.
+
+## Decision
+
+TipTap was selected to provide the rich text formatting features after evaluating several alternatives (QuillJS, Prose, TinyMCE).
+
+Quill was originally installed, but there was a known issue in being able to execute a line break inside a bulleted list, which caused an issue with reformatting imported text when it was edited for the first time. TipTap was installed as an alternative.
+
+## Consequences
+
+TipTap is a popular package that works outside the React ecosystem, so it is portable if there is ever a need to move to a different JS framework. The plugin does operate on a freemium model with the subset of features being free with additional, more advanced features having a cost. However, based on the features we use at the time of this ADR, the free features are robust enough to current requirements as well as the most likely requirements in the future. 

e2e/README.md

@@ -24,22 +24,22 @@ First, make sure the script is executable:
 
 ```bash
 # from the project root
-chmod +x ./e2e/scripts/end-to-end.sh
+chmod +x ./e2e/script/end-to-end.sh
 ```
 
 Examples:
 
 ```bash
 # builds the test container (also will run the tests)
-./e2e/scripts/end-to-end.sh -f build_container -t test
+./e2e/script/end-to-end.sh -f build_container -t test
 ```
 
 ```bash
 # builds the serve container and start it
-./e2e/scripts/end-to-end.sh -f build_container -t serve -f run_container
+./e2e/script/end-to-end.sh -f build_container -t serve -f run_container
 ```
 
 ```bash
 # Runs the default tasks `end_to_end` and `interaction`
-./e2e/scripts/end-to-end.sh
+./e2e/script/end-to-end.sh
 ```

package.json

@@ -9,12 +9,12 @@
   "scripts": {
     "build": "turbo run build --filter=!@atj/infra-cdktf",
     "clean": "turbo run clean",
-    "dev": "turbo run dev --concurrency 18",
-    "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx,scss}\"",
+    "dev": "turbo run dev --concurrency 20",
+    "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",
-    "test:ci": "vitest run # --coverage.enabled --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure",
+    "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:infra": "turbo run --filter=infra-cdktf test",
     "typecheck": "tsc --build",
     "prepare": "husky"

packages/common/src/locales/en/app.ts

@@ -30,6 +30,11 @@ export const en = {
       displayName: 'Paragraph',
       errorTextMustContainChar: 'String must contain at least 1 character(s)',
     },
+    richText: {
+      fieldLabel: 'Rich text',
+      displayName: 'Rich text',
+      errorTextMustContainChar: 'String must contain at least 1 character(s)',
+    },
     radioGroup: {
       ...defaults,
       displayName: 'Radio group label',

packages/design/README.md

@@ -12,3 +12,5 @@ See relevant ADRs:
 
 - [documents/adr/0007-initial-css-strategy](../../documents/adr/0007-initial-css-strategy.md)
 - [documents/adr/0009-design-assets-workflow.md](../../documents/adr/0009-design-assets-workflow.md)
+
+This package as a special watch task. If your dev server is running already (`pnpm dev`), you can open a separate terminal and run `pnpm test:watch` and any changes to the *.{ts,tsx} files in this package will run the test suite. If you'd like to run from the project root directory, you would run `pnpm --filter @atj/design test:watch`.

packages/design/package.json

@@ -17,7 +17,9 @@
     "dev:styles": "gulp watch",
     "lint": "eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0 src",
     "test:url": "test-storybook --url http://127.0.0.1:9009 --config-dir .storybook",
-    "test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm build:storybook --quiet && pnpm http-server storybook-static --port 9009 --silent\" \"wait-on tcp:127.0.0.1:9009 && pnpm test:url --maxWorkers=2\""
+    "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": [
     "dist/**/*"
@@ -45,17 +47,21 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@uswds/compile": "1.1.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.0.5",
     "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.46.1",
     "prop-types": "^15.8.1",
     "react-dom": "^18.3.1",
     "vite": "^5.4.0",
     "vite-plugin-dts": "^4.0.1",
+    "vitest": "^2.0.5",
     "wait-on": "^7.2.0"
   },
   "dependencies": {
@@ -64,8 +70,12 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@tiptap/core": "^2.6.2",
+    "@tiptap/react": "^2.6.2",
+    "@tiptap/starter-kit": "^2.6.2",
     "@uswds/uswds": "^3.8.1",
     "classnames": "^2.5.1",
+    "debounce": "^2.1.0",
     "deep-equal": "^2.2.3",
     "react": "^18.3.1",
     "react-hook-form": "^7.52.2",

packages/design/src/Form/components/PageSet/PageMenu/pageMenuStyles.module.css

@@ -1,11 +1,11 @@
 .sideNavWrapper {
-    top: 6rem;
+  top: 6rem;
 }
 
 .sideNav a:not(.usa-button):not(.usa-current) {
-    color: #005ea2;
+  color: #005ea2;
 }
 
 .sideNav a:not(.usa-button):hover {
-    background-color: #d9e8f6;
+  background-color: #d9e8f6;
 }

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

@@ -25,7 +25,10 @@ const PageSet: PatternComponent<PageSetProps> = props => {
           })}
         />
       </nav>
-      <div 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">
+      <div
+        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}
         <ActionBar actions={props.actions} />
       </div>

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { type RichTextProps } from '@atj/forms';
+import { type PatternComponent } from '../../../Form/index.js';
+import styles from './richTextStyles.module.css';
+
+const FormSummary: PatternComponent<RichTextProps> = props => {
+  return (
+    <div className={`${styles.richTextEditorWrapper}`}>
+      <div dangerouslySetInnerHTML={{ __html: props.text }} />
+    </div>
+  );
+};
+export default FormSummary;

packages/design/src/Form/components/RichText/richTextStyles.module.css

@@ -0,0 +1,6 @@
+.richTextEditorWrapper li > p {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}

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

@@ -8,6 +8,7 @@ import Page from './Page/index.js';
 import PageSet from './PageSet/index.js';
 import Paragraph from './Paragraph/index.js';
 import RadioGroup from './RadioGroup/index.js';
+import RichText from './RichText/index.js';
 import Sequence from './Sequence/index.js';
 import SubmissionConfirmation from './SubmissionConfirmation/index.js';
 import TextInput from './TextInput/index.js';
@@ -22,6 +23,7 @@ export const defaultPatternComponents: ComponentForPattern = {
   'page-set': PageSet as PatternComponent,
   paragraph: Paragraph as PatternComponent,
   'radio-group': RadioGroup as PatternComponent,
+  'rich-text': RichText as PatternComponent,
   sequence: Sequence as PatternComponent,
   'submission-confirmation': SubmissionConfirmation as PatternComponent,
 };

packages/design/src/FormManager/FormDocumentImport/DocumentImporter/DocumentImporter.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import DocumentImporter from '.';
-import { createTwoPatternTestForm } from '../../../test-form';
+import DocumentImporter from './index.js';
+import { createTwoPatternTestForm } from '../../../test-form.js';
 
 const meta: Meta<typeof DocumentImporter> = {
   title: 'FormManager/DocumentImporter',

packages/design/src/FormManager/FormDocumentImport/DocumentImporter/DocumentImporter.test.ts

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { describeStories } from '../../../test-helper';
-import meta, * as stories from './DocumentImporter.stories';
+import { describeStories } from '../../../test-helper.js';
+import meta, * as stories from './DocumentImporter.stories.js';
 
 describeStories(meta, stories);

packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx

@@ -10,6 +10,7 @@ import checkboxIcon from './images/checkbox-icon.svg';
 import dateIcon from './images/date-icon.svg';
 import dropDownIcon from './images/dropdown-icon.svg';
 import dropDownOptionIcon from './images/dropdownoption-icon.svg';
+import richTextIcon from './images/richtext-icon.svg';
 import longanswerIcon from './images/longanswer-icon.svg';
 import pageIcon from './images/page-icon.svg';
 import shortanswerIcon from './images/shortanswer-icon.svg';
@@ -24,6 +25,7 @@ const icons: Record<string, string | any> = {
   'date-icon.svg.svg': dateIcon,
   'dropdown-icon.svg': dropDownIcon,
   'dropdownoption-icon.svg': dropDownOptionIcon,
+  'richtext-icon.svg': richTextIcon,
   'longanswer-icon.svg': longanswerIcon,
   'page-icon.svg': pageIcon,
   'shortanswer-icon.svg': shortanswerIcon,
@@ -89,12 +91,14 @@ const sidebarPatterns: DropdownPattern[] = [
   ['fieldset', defaultFormConfig.patterns['fieldset']],
   ['input', defaultFormConfig.patterns['input']],
   ['paragraph', defaultFormConfig.patterns['paragraph']],
+  ['rich-text', defaultFormConfig.patterns['rich-text']],
   ['radio-group', defaultFormConfig.patterns['radio-group']],
 ] as const;
 export const fieldsetPatterns: DropdownPattern[] = [
   ['form-summary', defaultFormConfig.patterns['form-summary']],
   ['input', defaultFormConfig.patterns['input']],
   ['paragraph', defaultFormConfig.patterns['paragraph']],
+  ['rich-text', defaultFormConfig.patterns['rich-text']],
   ['radio-group', defaultFormConfig.patterns['radio-group']],
 ] as const;
 

packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx

@@ -55,12 +55,14 @@ export const FormEditAddPattern: StoryObj<typeof FormEdit> = {
     await userEvent.click(canvas.getByText('Pattern 1'));
     //await userEvent.selectOptions(select, 'Text input');
 
-    select.forEach(async element => {
-      await userEvent.click(element);
-    });
+    await Promise.all(
+      select.map(async element => {
+        return await userEvent.click(element);
+      })
+    );
 
     const finalCount = (await canvas.findAllByRole('textbox')).length;
-    expect(finalCount).toBeGreaterThan(initialCount);
+    await expect(finalCount).toBeGreaterThan(initialCount);
   },
 };
 
@@ -82,9 +84,13 @@ const editFieldLabel = async (
   await userEvent.type(input, updatedLabel);
   //await userEvent.click(canvas.getByText('Add Element'));
 
-  select.forEach(async element => {
-    await userEvent.click(element);
-  });
+  await Promise.all(
+    select.map(async element => {
+      return await userEvent.click(element);
+    })
+  );
+
+  await userEvent.click(canvas.getByText(/save and close/i));
 
   waitFor(
     async () => {

packages/design/src/FormManager/FormEdit/components/PageSetEdit.tsx

@@ -31,7 +31,10 @@ const PageSetEdit: PatternEditComponent<PageSetProps> = ({ previewProps }) => {
           })}
         />
       </nav>
-      <div 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">
+      <div
+        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"
+      >
         {previewProps.children}
         <ActionBar actions={previewProps.actions} />
       </div>