Typescript type checking (#133)

* Add typecheck npm script and start addressing type errors.

* Set default checked value for required checkbox in the input pattern edit component.

* Create separate safeZodParseFormErrors from safeZodParse

* Cleanup types around the parseUserInput pattern controller method. This will be further refined when we revisit the presentation of the public-facing form.

* Make children optional on FormManagerLayoutProps

* Punt on sorting out weird Storybook types by typing parameters to describeStories with "any"

* Remove references to unused "required" field on radio groups. Could be added back later.

* Sort out noEmit?

* typecheck: handle jsx and cache for incremental builds

* Typechecking on all packages working (I think)

* Run typechecking in test workflow

* Linting

* Add "Initialize Terraform CDK configuration" step to run-tests workflow, so we can typecheck the infra

* Work around type issues in stories

* Update pnpm-lock.yaml after Storybook minor update. Not sure why this wasn't picked up originally.

.github/workflows/run-tests.yml

@@ -61,6 +61,17 @@ jobs:
         shell: bash
         run: pnpm test
 
+      - name: Initialize Terraform CDK configuration
+        shell: bash
+        run: |
+          cd infra
+          pnpm cdktf get
+          pnpm build:tsc
+
+      - name: Typecheck source code
+        shell: bash
+        run: pnpm typecheck
+
       #- name: Vitest Coverage Report
       #  if: always()
       #  uses: davelosert/[email protected]

.gitignore

@@ -9,5 +9,4 @@ html/
 node_modules/
 NOTES.md
 tsconfig.tsbuildinfo
-
-*storybook.log
+*storybook.log

apps/cli/tsconfig.json

@@ -1,12 +1,10 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "./dist",
     "emitDeclarationOnly": true
   },
-  "include": [
-    "./src"
-  ],
+  "include": ["./src"],
   "references": []
 }

apps/doj-demo/tsconfig.json

@@ -1,17 +1,12 @@
 {
   // For reference, the base Astro tsconfig:
   // https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/base.json
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "ESNext",
-    "noEmit": true,
     "jsx": "react",
     "resolveJsonModule": true
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/components/**"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/components/**"]
 }

apps/rest-api/tsconfig.json

@@ -1,16 +1,10 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "dist",
     "emitDeclarationOnly": true,
     "rootDir": "src"
   },
-  "include": [
-    "src/**/*"
-  ],
-  "references": [
-    {
-      "path": "../../packages/interviews"
-    }
-  ]
+  "include": ["src/**/*"],
+  "references": []
 }

apps/spotlight/tsconfig.json

@@ -1,17 +1,12 @@
 {
   // For reference, the base Astro tsconfig:
   // https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/base.json
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "ESNext",
-    "noEmit": true,
     "jsx": "react",
     "resolveJsonModule": true
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/components/**"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/components/**"]
 }

infra/tsconfig.json

@@ -5,9 +5,7 @@
     "experimentalDecorators": true,
     "inlineSourceMap": true,
     "inlineSources": true,
-    "lib": [
-      "es2018"
-    ],
+    "lib": ["es2018"],
     "module": "CommonJS",
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
@@ -25,11 +23,6 @@
     "incremental": true,
     "skipLibCheck": true
   },
-  "include": [
-    "**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "cdktf.out"
-  ]
+  "include": [".gen/**/*.ts", "src/**/*.ts"],
+  "exclude": ["node_modules", "cdktf.out"]
 }

package.json

@@ -13,7 +13,8 @@
     "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 --coverage.enabled --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure --reporter vitest-github-actions-reporter",
-    "test:infra": "turbo run --filter=infra test"
+    "test:infra": "turbo run --filter=infra test",
+    "typecheck": "tsc --build"
   },
   "hooks": {
     "pre-commit": "pnpm format"

packages/common/src/index.ts

@@ -3,3 +3,6 @@ export type VoidSuccess = { success: true };
 export type Failure<E> = { success: false; error: E };
 export type Result<T, E = string> = Success<T> | Failure<E>;
 export type VoidResult<E = string> = VoidSuccess | Failure<E>;
+
+export const success = <T>(data: T): Success<T> => ({ success: true, data });
+export const failure = <E>(error: E): Failure<E> => ({ success: false, error });

packages/common/tsconfig.json

@@ -1,11 +1,9 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./dist",
     "emitDeclarationOnly": true
   },
-  "include": [
-    "./src"
-  ],
+  "include": ["./src"],
   "references": []
 }

packages/dependency-graph/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./dist",
     "emitDeclarationOnly": true

packages/design/src/Form/Form.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Form from '.';
 import { createTestFormContext, createTestSession } from '../test-form';
 
-export default {
+const meta: Meta<typeof Form> = {
   title: 'Form',
   component: Form,
   decorators: [(Story, args) => <Story {...args} />],
@@ -13,6 +13,7 @@ export default {
     session: createTestSession(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Form>;
+};
 
+export default meta;
 export const FormTest = {} satisfies StoryObj<typeof Form>;

packages/design/src/Form/components/FormSummary/FormSummary.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import FormSummary from '.';
-import { type FormSummaryProps } from '@atj/forms';
 
 export default {
   title: 'patterns/FormSummary',
@@ -11,13 +10,11 @@ export default {
 
 export const FormSummaryWithLongDescription = {
   args: {
-    pattern: {
-      _patternId: 'test-id',
-      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.',
-    } as FormSummaryProps,
+    _patternId: 'test-id',
+    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 StoryObj<typeof FormSummary>;
 

packages/design/src/Form/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,36 +1,34 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import RadioGroup, { RadioInput } from './RadioGroup';
 import React from 'react';
 
-export default {
+const meta: Meta = {
   title: 'Components/RadioGroup',
   component: RadioGroup,
   tags: ['autodocs'],
-} as Meta;
+};
+export default meta;
 
-const Template: Story = () => (
+export const Default: StoryFn = () => (
   <RadioGroup legend="Select an item">
     <RadioInput
       id="option-1"
       name="select-item"
-      defaultValue="option1"
+      defaultChecked={false}
       label="Option 1"
     />
     <RadioInput
       id="option-2"
       name="select-item"
-      defaultValue="option2"
+      defaultChecked={false}
       label="Option 2"
     />
     <RadioInput
       id="option-3"
       name="select-item"
-      defaultValue="option3"
+      defaultChecked={true}
       label="Option 3"
     />
   </RadioGroup>
 );
-
-export const Default = Template.bind({});
-Default.args = {};

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

@@ -1,6 +1,6 @@
 import React, { type ReactElement } from 'react';
 
-type RadioGroupProps = {
+export type RadioGroupProps = {
   legend: string;
   children: ReactElement<RadioProps> | ReactElement<RadioProps>[];
 };

packages/design/src/Form/components/TextInput/TestInput.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import TextInput from '.';
 
-export default {
+const meta: Meta<typeof TextInput> = {
   title: 'patterns/TextInput',
   component: TextInput,
   decorators: [
@@ -21,8 +21,9 @@ export default {
     },
   ],
   tags: ['autodocs'],
-} satisfies Meta<typeof TextInput>;
+};
 
+export default meta;
 export const Required = {
   args: {
     _patternId: '',

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

@@ -29,7 +29,7 @@ const TextInput: PatternComponent<TextInputProps> = props => {
             id={`input-error-message-${props.inputId}`}
             role="alert"
           >
-            {props.error}
+            {props.error.message}
           </span>
         )}
         <input

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

@@ -1,4 +1,4 @@
-import { type ComponentForPattern } from '..';
+import { PatternComponent, type ComponentForPattern } from '..';
 
 import Address from './Address';
 import Checkbox from './Checkbox';
@@ -11,13 +11,13 @@ import SubmissionConfirmation from './SubmissionConfirmation';
 import TextInput from './TextInput';
 
 export const defaultPatternComponents: ComponentForPattern = {
-  address: Address,
-  checkbox: Checkbox,
-  fieldset: Fieldset,
-  'form-summary': FormSummary,
-  input: TextInput,
-  paragraph: Paragraph,
-  'radio-group': RadioGroup,
-  sequence: Sequence,
-  'submission-confirmation': SubmissionConfirmation,
+  address: Address as PatternComponent,
+  checkbox: Checkbox as PatternComponent,
+  fieldset: Fieldset as PatternComponent,
+  'form-summary': FormSummary as PatternComponent,
+  input: TextInput as PatternComponent,
+  paragraph: Paragraph as PatternComponent,
+  'radio-group': RadioGroup as PatternComponent,
+  sequence: Sequence as PatternComponent,
+  'submission-confirmation': SubmissionConfirmation as PatternComponent,
 };

packages/design/src/Form/index.tsx

@@ -77,6 +77,7 @@ export default function Form({
     context.config,
     session
   );
+  console.log('prompt', prompt);
 
   // So the preview view can update the session, regen the prompt.
   // This feels smelly.

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

@@ -7,7 +7,7 @@ import { createTestFormService } from '@atj/form-service';
 import FormDelete from '.';
 import { createTestForm } from '../../test-form';
 
-export default {
+const meta: Meta<typeof FormDelete> = {
   title: 'FormManager/FormDelete',
   component: FormDelete,
   decorators: [
@@ -24,6 +24,7 @@ export default {
     }),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof FormDelete>;
+};
 
+export default meta;
 export const FormDeleteTest = {} satisfies StoryObj<typeof FormDelete>;

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

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import DocumentImporter from '.';
 import { createTestForm } from '../../../test-form';
 
-export default {
+const meta: Meta<typeof DocumentImporter> = {
   title: 'FormManager/DocumentImporter',
   component: DocumentImporter,
   decorators: [
@@ -20,6 +20,7 @@ export default {
     form: createTestForm(),
   },
   tags: ['autodocs'],
-} as Meta<typeof DocumentImporter>;
+};
 
+export default meta;
 export const TestForm = {} satisfies StoryObj<typeof DocumentImporter>;

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

@@ -8,7 +8,7 @@ import { FormManagerProvider } from '../store';
 import FormEdit from '.';
 import { createTestForm, createTestFormManagerContext } from '../../test-form';
 
-export default {
+const meta: Meta<typeof FormEdit> = {
   title: 'FormManager/FormEdit',
   component: FormEdit,
   decorators: [
@@ -27,8 +27,9 @@ export default {
     formId: 'test-form',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof FormEdit>;
+};
 
+export default meta;
 export const FormEditTest: StoryObj<typeof FormEdit> = {
   play: async ({ canvasElement }) => {
     await editFieldLabel(canvasElement, 'Pattern 1', 'Pattern 1 (updated)');

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

@@ -108,6 +108,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
               type="checkbox"
               id={fieldId('required')}
               {...register('required')}
+              defaultChecked={pattern.data.required}
             />
             <label
               style={{ display: 'inline-block' }}