NAV K9 Sak Web Development

Expert development assistant for NAV's K9 case handling system (k9-sak-web), a monorepo containing React/TypeScript frontend applications for case processing.

Technology Stack

Critical Rules

1. Package Management - ALWAYS USE YARN

**NEVER use npm.** This project is locked to [email protected] with yarn workspaces.

```bash

yarn install # Install dependencies

yarn add <package> # Add dependency

yarn workspace <name> add <package> # Add to specific workspace

```

2. Monorepo Architecture & V2 Modernization

**Directory Structure:**

**V2 Import Rules (CRITICAL):**

**Path Aliases:**

3. TypeScript Configuration

**Before committing:**

```bash

yarn ts-check

```

4. Dependency Version Synchronization

**CRITICAL**: These dependencies MUST have synchronized versions across all packages:

When updating, ensure all `@navikt/ft-*` packages are compatible or use `resolutions` in package.json.

5. CSS & Styling Approach

**CSS Module Workflow:**

```bash

yarn css:modules:typegen # Generate TypeScript types for CSS modules

yarn css:lint # Lint CSS

```

**File naming:**

6. Testing Strategy

**Primary approach - Storybook Interaction Tests:**

**Vitest:**

**Playwright:**

**Commands:**

```bash

yarn test # Run tests

yarn test:watch # Watch mode

yarn storybook # Start Storybook

```

7. Code Style & Linting

```bash

yarn lint # Check linting

yarn lint:fix # Auto-fix issues

yarn ltb # Full check (lint, type-check, build)

```

**Pre-commit:** Husky + lint-staged runs automatically

8. Naming Conventions

| Item | Convention | Example |

|------|-----------|---------|

| Components (files + exports) | PascalCase | `MyComponent.tsx`, export `MyComponent` |

| Hooks (files + exports) | camelCase with `use` prefix | `useMyHook.ts`, export `useMyHook` |

| Utilities (files) | camelCase | `myUtils.ts` |

| Types/Interfaces | PascalCase | `type MyType = ...` |

| Constants | SCREAMING_SNAKE_CASE | `const MAX_COUNT = 10` |

| CSS Modules (files) | camelCase | `myComponent.module.css` |

| CSS Modules (classes) | camelCase | `.myClass { }` |

| Tests | Mirror target | `MyComponent.spec.tsx`, `myUtils.spec.ts` |

| Stories | Match component | `MyComponent.stories.tsx` |

9. Component Patterns

10. Text & Language Rules

Development Workflow

Local Development

```bash

yarn dev # Start K9 dev server

yarn dev:ung # Start Ungdomsytelse dev server

```

Build & Deploy

```bash

yarn build # Build K9 for production

yarn build:ung # Build Ungdomsytelse for production

```

Type Checking & Linting

```bash

yarn ts-check # Type check all code

yarn lint:fix # Fix linting issues

yarn css:lint # Lint CSS

yarn css:modules:typegen # Generate CSS module types

```

Testing

```bash

yarn test # Run all tests

yarn test:watch # Watch mode

yarn storybook # Start Storybook

```

Utilities

```bash

yarn knip # Find unused files/exports

yarn ltb # Full check (lint, type-check, build)

```

Package Structure

```

packages/[package-name]/

├── src/

├── index.ts # Public API

└── package.json

```

**Package categories:**

Feature Toggles

Best Practices

1. **Code Quality**: Write clean, maintainable, well-typed code

2. **Accessibility**: Always consider a11y in UI components

3. **Performance**: Use React.memo, useMemo, useCallback appropriately

4. **Error Handling**: Proper error boundaries and error states

5. **Documentation**: Update README when adding significant features

6. **Testing**: Write tests for new features and bug fixes

7. **Storybook**: Add stories for new shared components

8. **Backwards Compatibility**: Maintain compatibility when updating shared packages

Anti-Patterns to Avoid

1. ❌ Using `npm` instead of `yarn`

2. ❌ Importing from non-V2 code in V2 packages

3. ❌ Inconsistent NAV Design System package versions

4. ❌ Ignoring TypeScript errors

5. ❌ Using runtime i18n

6. ❌ Inline styles (use CSS modules or Tailwind)

7. ❌ Missing accessibility attributes

8. ❌ Not running type-check before committing

9. ❌ Introducing MSW in new tests (prefer fixtures and direct mocks)

10. ❌ Using `vi.spyOn` for HTTP in tests (use Storybook instead)

When Making Changes

1. Check if code should go in `packages/v2/` (for new/refactored code)

2. Run `yarn ts-check` to verify types

3. Run `yarn lint:fix` to fix style issues

4. Run `yarn test` to ensure tests pass

5. Add/update tests for changed functionality

6. Update Storybook stories if changing shared components

7. Generate CSS types if adding/changing CSS modules: `yarn css:modules:typegen`

Security & Privacy

This is a NAV (Norwegian Labour and Welfare Administration) project handling sensitive case data. Security and privacy are paramount. The system is used by case workers for processing various benefit types (Pleiepenger, Omsorgspenger, Opplæringspenger, Ungdomsytelse, etc.).

Additional Resources