IS-11008: add typecheck, prettier and build to the ci workflow

Author: aleixsuau

.github/workflows/lwa-github-ci-workflow.yml

@@ -56,6 +56,20 @@ jobs:
       - name: App — Run Tests
         run: npm run test -w src/haapi-react-app -- run
 
+      - name: Docs — Check Formatting
+        run: npm run prettier-check -w @curity/haapi-react-sdk-docs
+
+      # Type-checks the example sources (incl. catalog.ts's mock HAAPI steps) against the SDK's
+      # published types, so the fixtures can't structurally drift from the SDK without failing CI.
+      - name: Docs — Typecheck
+        run: npm run typecheck -w @curity/haapi-react-sdk-docs
+
+      # Runs the full generator chain (predocs:build) then `docusaurus build` with
+      # `onBrokenLinks: 'throw'` — so a generator crash, a broken link/anchor or an MDX
+      # compile error fails the PR instead of surfacing on someone's next local run.
+      - name: Docs — Build
+        run: npm run docs:build -w @curity/haapi-react-sdk-docs
+
   notify-slack:
     name: Notify Slack
     needs: build-and-test

src/haapi-react-sdk/docs/declarations.d.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2026 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ */
+
+/*
+ * Ambient stubs so the example typecheck (`npm run typecheck`) can resolve modules that aren't real
+ * dependencies of this docs project.
+ *
+ * Why stub instead of installing them:
+ *  - The third-party UI libs below (antd, icons, recaptcha) are used ONLY inside example playgrounds,
+ *    and Sandpack pulls them from a CDN at runtime — they were never docs dependencies. Installing them
+ *    just to typecheck would drag their large dependency trees into this project for no runtime benefit.
+ *  - The point of the example typecheck is to catch drift in *SDK and catalog* usage (the fixtures in
+ *    `examples/catalog.ts` are typed against the SDK). We don't need to type-check the third-party UI
+ *    calls — so we declare those modules as `any` and keep the dependency surface small. The trade-off is
+ *    that misuse of an antd/recaptcha API isn't caught here (it would surface in the running playground).
+ *
+ * The `*.module.css` stub covers the CSS-module imports in the SDK source that the examples pull in
+ * transitively (e.g. Spinner) — the SDK's own build provides this via its vite client types.
+ */
+
+declare module 'antd';
+declare module '@ant-design/icons';
+declare module '@google-recaptcha/react';
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

src/haapi-react-sdk/docs/examples/FullCustomizationUICompositionExample.tsx

@@ -61,7 +61,7 @@ function CustomFlowUI() {
       <List
         size="small"
         dataSource={history}
-        renderItem={entry => (
+        renderItem={(entry: (typeof history)[number]) => (
           <List.Item>
             <Text>
               {entry.step.type} — {entry.timestamp.toLocaleTimeString()}

src/haapi-react-sdk/docs/examples/SelectorRenderInterceptorExample.tsx

@@ -12,7 +12,10 @@
 import { Select } from 'antd';
 import { HaapiStepper } from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/HaapiStepper';
 import { HaapiStepperStepUI } from '@curity/haapi-react-sdk/haapi-stepper/feature/steps/HaapiStepperStepUI';
-import type { HaapiStepperStepUISelectorActionRenderInterceptor } from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/haapi-stepper.types';
+import type {
+  HaapiStepperFormAction,
+  HaapiStepperStepUISelectorActionRenderInterceptor,
+} from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/haapi-stepper.types';
 import { ExamplePreviewer } from './ExamplePreviewer';
 import { HAAPI_EXAMPLE } from './catalog';
 
@@ -22,7 +25,7 @@ import { HAAPI_EXAMPLE } from './catalog';
  * the flow forward through `nextStep`, exactly like the built-in selector would.
  */
 const selectorActionRenderInterceptor: HaapiStepperStepUISelectorActionRenderInterceptor = ({ action, nextStep }) => {
-  const options = action.model.options;
+  const options = action.model.options as HaapiStepperFormAction[];
 
   return (
     <Select
@@ -32,7 +35,7 @@ const selectorActionRenderInterceptor: HaapiStepperStepUISelectorActionRenderInt
       style={{ width: '100%' }}
       optionFilterProp="label"
       options={options.map(option => ({ label: option.title, value: option.id }))}
-      onChange={value => {
+      onChange={(value: string) => {
         const option = options.find(candidate => candidate.id === value);
         if (option) {
           nextStep(option);

src/haapi-react-sdk/docs/examples/StepRenderInterceptorExample.tsx

@@ -12,6 +12,7 @@
 import type { CSSProperties } from 'react';
 import { HaapiStepper } from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/HaapiStepper';
 import { HaapiStepperStepUI } from '@curity/haapi-react-sdk/haapi-stepper/feature/steps/HaapiStepperStepUI';
+import type { HaapiStepperFormAction } from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/haapi-stepper.types';
 import { ExamplePreviewer } from './ExamplePreviewer';
 import { HAAPI_EXAMPLE } from './catalog';
 
@@ -35,7 +36,7 @@ export default function App() {
 
             const { nextStep } = stepperApi;
             const selector = stepperApi.currentStep.dataHelpers.actions?.selector?.[0];
-            const options = selector?.model.options ?? [];
+            const options = (selector?.model.options ?? []) as HaapiStepperFormAction[];
 
             return (
               <section>

src/haapi-react-sdk/docs/examples/TabbedAuthenticatorUICompositionExample.tsx

@@ -19,7 +19,7 @@ import { HAAPI_STEPS } from '@curity/haapi-react-sdk/haapi-stepper/data-access/t
 import { HAAPI_ACTION_CLIENT_OPERATIONS } from '@curity/haapi-react-sdk/haapi-stepper/data-access/types/haapi-action.types';
 import type { HaapiFetchAction } from '@curity/haapi-react-sdk/haapi-stepper/data-access/types/haapi-fetch.types';
 import type {
-  HaapiStepperAction,
+  HaapiStepperFormAction,
   HaapiStepperStep,
 } from '@curity/haapi-react-sdk/haapi-stepper/feature/stepper/haapi-stepper.types';
 import { ExamplePreviewer } from './ExamplePreviewer';
@@ -49,8 +49,7 @@ function TabbedAuthenticatorSelector() {
   }
 
   const selectorAction = selectStep.dataHelpers.actions?.selector[0];
-  // Selector options are already typed as `HaapiStepperAction[]` — no cast needed.
-  const options = selectorAction?.model.options ?? [];
+  const options = (selectorAction?.model.options ?? []) as HaapiStepperFormAction[];
   const bankIdOption = options.find(isBankId);
   const tabOptions = bankIdOption ? [bankIdOption, ...options.filter(option => option !== bankIdOption)] : options;
   const activeTabOption = tabOptions[activeIndex];
@@ -75,7 +74,7 @@ function TabbedAuthenticatorSelector() {
   return (
     <Tabs
       activeKey={String(activeIndex)}
-      onChange={key => selectTabOption(Number(key))}
+      onChange={(key: string) => selectTabOption(Number(key))}
       items={tabOptions.map((option, index) => ({
         key: String(index),
         label: option.title,
@@ -128,7 +127,7 @@ const isCustomAuthenticatorSelectStep = (step: HaapiStepperStep | null) =>
   step.metadata?.templateArea === CUSTOM_SELECT_TEMPLATE_AREA &&
   step.metadata.viewName === CUSTOM_SELECT_VIEW_NAME;
 
-const isBankId = (option: HaapiStepperAction) =>
+const isBankId = (option: HaapiStepperFormAction) =>
   option.properties?.authenticatorType === HAAPI_ACTION_CLIENT_OPERATIONS.BANKID;
 
 const isBankIdWaitStep = (step: HaapiStepperStep) => step.metadata?.viewName === BANKID_WAIT_VIEW_NAME;

src/haapi-react-sdk/docs/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "prettier-check": "prettier --check .",
     "prettier": "prettier --write .",
+    "typecheck": "tsc --noEmit",
     "docs:gen": "node scripts/build-sandpack-sdk.mjs",
     "docs:split": "node scripts/split-docs.mjs",
     "docs:apiref": "node scripts/emit-api-reference.mjs",

src/haapi-react-sdk/docs/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  // Type-checks the docs' example sources against the SDK's published types (run via `npm run typecheck`,
+  // gated in CI). Most importantly `examples/catalog.ts`, whose mock HAAPI steps are annotated with
+  // `HaapiActionStep`/`HaapiStep` etc. — so if the SDK's step model changes, the fixtures stop compiling.
+  // `moduleResolution: bundler` resolves the deep `@curity/haapi-react-sdk/haapi-stepper/*` imports; the
+  // Sandpack/CDN-only packages the playgrounds use (`antd`, `@ant-design/icons`, `@google-recaptcha/*`)
+  // are dev-only deps so tsc can resolve them, and `declarations.d.ts` covers the SDK's CSS-module imports.
+  //
+  // The Docusaurus `src/` components are out of scope — they use `@theme`/`@site` aliases that need the
+  // generated Docusaurus TS project.
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["examples", "declarations.d.ts"]
+}