Test coverage improvements

.github/workflows/run-tests.yml

@@ -56,3 +56,7 @@ jobs:
       - name: Run test suite
         shell: bash
         run: pnpm test
+
+      - name: Vitest Coverage Report
+        if: always()
+        uses: davelosert/[email protected]

.gitignore

@@ -5,5 +5,6 @@ _site
 .turbo/
 .vscode/
 coverage/
+html/
 node_modules/
 NOTES.md

apps/cli/package.json

@@ -2,6 +2,7 @@
   "name": "@atj/cli-app",
   "version": "1.0.0",
   "description": "10x ATJ command-line interface",
+  "type": "module",
   "license": "CC0",
   "main": "src/index.ts",
   "scripts": {

apps/spotlight/src/layouts/ContentLayout.astro

@@ -1,6 +1,5 @@
 ---
-import { type AppContext } from '../context';
-import Layout from '../layouts/Layout.astro';
+import Layout from './Layout.astro';
 
 interface Props {
   title: string;

apps/spotlight/src/layouts/Layout.astro

@@ -1,9 +1,9 @@
 ---
 import '../styles.css';
 
-import Footer from '../components/Footer.astro';
 import UsaBanner from '../components/UsaBanner.astro';
 import { getAppContext } from '../context';
+import Footer from '../components/Footer.astro';
 
 interface Props {
   title: string;

apps/spotlight/src/pages/forms/import-pdf.astro

@@ -1,10 +1,5 @@
 ---
-import DocumentImporter from '@atj/design/src/form-builder/DocumentImporter';
-import { createBrowserFormService } from '@atj/form-service';
-
 import ContentLayout from '../../layouts/ContentLayout.astro';
-
-const formService = createBrowserFormService();
 ---
 
 <ContentLayout title="10x Access to Justice Spotlight">

documents/adr/0009-design-assets-workflow.md

@@ -0,0 +1,23 @@
+# 9. Design assets workflow
+
+Date: 2024-01-16
+
+## Status
+
+Accepted
+
+## Context
+
+The 10x Digital Access to Justice Platform project will produce user interface components for form lifecycle operations including creating and filling web-based form. These components will be demo'd as part of the project's phase 3 work, and are intended to be leveraged by third-parties. These components inherit the stylesheet strategy outlined in ADR [./0007-initial-css-strategy.md](./0007-initial-css-strategy.md).
+
+The project team desires a method of organizing frontend components in a manner that facilitates rapid development and collaboration use cases.
+
+## Decision
+
+The project team will use [Storybook](https://storybook.js.org/) as development aid, component documentation, and collaboration tool. Storybook and corresponding React components will be located in the @atj/design namespace. The Storybook build will be bundled with the Spotlight build and deployed to Cloud.gov Pages.
+
+The Spotlight frontend will leverage this package via CSS imports. Where necessary, the Spotlight frontend application will use straight CSS.
+
+## Consequences
+
+The deployed application will include a Storybook instance at `/design`.

package.json

@@ -10,7 +10,9 @@
     "clean": "turbo run clean",
     "dev": "turbo run dev",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",
-    "test": "turbo run test",
+    "test": "run-p test:*",
+    "test:infra": "turbo run --filter=infra test",
+    "test:vitest": "vitest run --coverage.enabled --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure --reporter vitest-github-actions-reporter",
     "format": "prettier --write \"packages/**/*.{js,jsx,ts,tsx}\""
   },
   "hooks": {
@@ -20,12 +22,15 @@
     "@types/node": "^18.16.20",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^1.2.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
     "turbo": "^1.10.16",
     "typescript": "^5.2.2",
     "vitest": "^0.34.6",
+    "vitest-github-actions-reporter": "^0.11.1",
     "vitest-mock-extended": "^1.3.1"
   },
   "dependencies": {

packages/dependency-graph/package.json

@@ -2,6 +2,7 @@
   "name": "@atj/dependency-graph",
   "version": "1.0.0",
   "description": "generates a dependency graph of projects in a pnpm workspace",
+  "type": "module",
   "license": "CC0",
   "main": "src/index.ts",
   "scripts": {

packages/design/README.md

@@ -1,3 +1,14 @@
 # @atj/design
 
-This package encapsulates all the CSS styles used in 10x Digital Access to Justice frontend applications. See [documents/adr/0007-initial-css-strategy](../../documents/adr/0007-initial-css-strategy.md).
+This package encapsulates all the design components used in 10x Digital Access to Justice frontend applications.
+
+This includes:
+
+- USWDS themed stylesheet
+- React component library
+- Storybook stories
+
+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)

packages/design/gulpfile.js

@@ -1,7 +1,7 @@
 /**
  * Import uswds-compile
  */
-const uswds = require('@uswds/compile');
+import uswds from '@uswds/compile';
 
 /**
  * USWDS version
@@ -15,7 +15,7 @@ uswds.paths.dist.fonts = './static/uswds/fonts';
 uswds.paths.dist.img = './static/uswds/img';
 uswds.paths.dist.js = './static/uswds/js';
 
-exports.compile = uswds.compile;
-exports.init = uswds.init;
-exports.update = uswds.updateUswds;
-exports.watch = uswds.watch;
+export const compile = uswds.compile;
+export const init = uswds.init;
+export const update = uswds.updateUswds;
+export const watch = uswds.watch;

packages/design/package.json

@@ -2,6 +2,7 @@
   "name": "@atj/design",
   "version": "0.0.1",
   "main": "src/index.ts",
+  "type": "module",
   "scripts": {
     "build": "run-p build:lib build:styles && pnpm build:storybook",
     "build:lib": "vite build",
@@ -21,35 +22,34 @@
     "dist/**/*"
   ],
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-interactions": "^7.6.8",
-    "@storybook/addon-links": "^7.6.8",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.8",
-    "@storybook/react": "^7.6.8",
-    "@storybook/react-vite": "^7.6.8",
-    "@storybook/test": "^7.6.8",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
+    "@storybook/test": "^7.6.10",
     "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.2.48",
     "@uswds/compile": "github:danielnaab/uswds-compile#package-json-paths",
     "@vitejs/plugin-react": "^4.2.1",
     "glob": "^10.3.10",
     "gulp": "^4.0.2",
-    "npm-run-all": "^4.1.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-dts": "^3.7.1"
   },
   "dependencies": {
     "@atj/documents": "workspace:*",
     "@atj/forms": "workspace:*",
     "@atj/form-service": "workspace:*",
     "@atj/interviews": "workspace:*",
-    "@uswds/uswds": "^3.6.1",
+    "@uswds/uswds": "^3.7.1",
     "react-hook-form": "^7.49.3",
-    "react-router-dom": "^6.21.1",
-    "storybook": "^7.6.8"
+    "react-router-dom": "^6.21.2",
+    "storybook": "^7.6.10"
   }
 }

packages/design/src/form-builder/DocumentImporter.stories.tsx

@@ -0,0 +1,40 @@
+// Replace your-framework with the name of your framework
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { createForm } from '@atj/forms';
+
+import DocumentImporter from './DocumentImporter';
+
+export default {
+  title: 'form-builder/DocumentImporter',
+  component: DocumentImporter,
+  decorators: [
+    (Story: StoryFn, args: any) => (
+      <MemoryRouter initialEntries={['/']}>
+        <Story {...args} />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    formId: 'test-id',
+    form: createForm(
+      {
+        title: '10x Test Form',
+        description: 'This is a sample form being testing via Storybook',
+      },
+      [
+        {
+          id: 'full-name',
+          text: 'Full name',
+          initial: '',
+          required: true,
+        },
+      ]
+    ),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DocumentImporter>;
+
+export const TestForm = {};

packages/design/src/form/prompts/FormSummary/FormSummary.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import FormSummary, { TextSummaryProps } from '.';
+
+export default {
+  title: 'prompts/FormSummary',
+  component: FormSummary,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FormSummary>;
+
+export const FormSummaryWithLongDescription = {
+  args: {
+    prompt: {
+      type: 'form-summary',
+      title: 'Form title',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    },
+  } satisfies TextSummaryProps,
+} satisfies StoryObj<typeof FormSummary>;
+
+export const FormSummaryWithShortDescription = {
+  args: {
+    prompt: {
+      type: 'form-summary',
+      title: 'Title 2',
+      description: 'Short description',
+    },
+  } satisfies TextSummaryProps,
+} satisfies StoryObj<typeof FormSummary>;

packages/design/src/form/prompts/FormSummary/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { FormSummaryPrompt } from '@atj/forms';
+
+export type TextSummaryProps = { prompt: FormSummaryPrompt };
+
+export default function FormSummary({ prompt }: TextSummaryProps) {
+  return (
+    <>
+      <legend className="usa-legend usa-legend--large">{prompt.title}</legend>
+      <p>{prompt.description}</p>
+    </>
+  );
+}

packages/design/src/form/prompts/TextInput/TestInput.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import TextInput, { TextInputProps } from '.';
+
+export default {
+  title: 'prompts/TextInput',
+  component: TextInput,
+  decorators: [
+    (Story: StoryFn, args: any) => {
+      const formMethods = useForm();
+      return (
+        <FormProvider {...formMethods}>
+          <Story {...args} />
+        </FormProvider>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof TextInput>;
+
+export const Required = {
+  args: {
+    prompt: {
+      type: 'text',
+      id: 'test-prompt',
+      value: '',
+      label: 'Please enter your first name.',
+      required: true,
+    },
+  } satisfies TextInputProps,
+} satisfies StoryObj<typeof TextInput>;
+
+export const NotRequired = {
+  args: {
+    prompt: {
+      type: 'text',
+      id: 'test-prompt',
+      value: '',
+      label: 'Please enter your first name.',
+      required: false,
+    },
+  } satisfies TextInputProps,
+} satisfies StoryObj<typeof TextInput>;

packages/design/src/form/prompts/text-input.tsx → packages/design/src/form/prompts/TextInput/index.tsx

@@ -3,7 +3,9 @@ import { useFormContext } from 'react-hook-form';
 
 import { type TextInputPrompt } from '@atj/forms';
 
-export const TextInput = ({ prompt }: { prompt: TextInputPrompt }) => {
+export type TextInputProps = { prompt: TextInputPrompt };
+
+export default function TextInput({ prompt }: TextInputProps) {
   const { register } = useFormContext();
   return (
     <div className="usa-form-group" key={prompt.id}>
@@ -27,4 +29,4 @@ export const TextInput = ({ prompt }: { prompt: TextInputPrompt }) => {
       />
     </div>
   );
-};
+}

packages/design/src/form/prompts/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { type PromptPart } from '@atj/forms';
-import { FormSummary } from './form-summary';
-import { TextInput } from './text-input';
+import FormSummary from './FormSummary';
+import TextInput from './TextInput';
 
 export const PromptSegment = ({ promptPart }: { promptPart: PromptPart }) => {
   if (promptPart.type === 'form-summary') {

packages/design/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "emitDeclarationOnly": true,
     "jsx": "react",
-    "outDir": "./dist"
+    "outDir": "./dist",
+    "module": "esnext"
   },
   "include": [
     "./src"

packages/design/vite.config.ts

@@ -1,7 +1,5 @@
-import { extname, relative, resolve } from 'path';
-import { fileURLToPath } from 'node:url';
+import { resolve } from 'path';
 
-import { glob } from 'glob';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react';