effigenix/frontend/packages/types

@effigenix/types

TypeScript types for the Effigenix ERP system. Types are automatically generated from the backend OpenAPI specification and extended with UI-specific types.

Features

• Auto-generated from OpenAPI - Types are generated from the backend's OpenAPI spec
• Type-safe - Compile-time type checking for all API interactions
• Custom UI types - Additional types for UI state management
• Clean exports - Organized wrapper files for easy consumption

Installation

This package is part of the Effigenix frontend monorepo and is not published separately.

pnpm add @effigenix/types --filter my-package

Usage

Importing Types

import {
  // Auth types
  LoginRequest,
  LoginResponse,
  TokenStorage,

  // User types
  UserDTO,
  CreateUserRequest,
  UpdateUserRequest,

  // Role types
  RoleDTO,
  Permission,

  // Common types
  ApiError,
  ValidationError,

  // Enums
  UserStatus,
  LoadingState,
  Screen
} from '@effigenix/types';

Example: Type-safe API request

import { LoginRequest, LoginResponse } from '@effigenix/types';

async function login(request: LoginRequest): Promise<LoginResponse> {
  // TypeScript ensures the request matches the backend's expected structure
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    body: JSON.stringify(request),
  });

  return response.json() as Promise<LoginResponse>;
}

Type Generation

Types are automatically generated from the backend's OpenAPI specification.

Prerequisites

1. Backend must be running at http://localhost:8080
2. OpenAPI spec must be available at http://localhost:8080/api-docs

Generate Types

# Start backend first
cd ../../../backend
mvn spring-boot:run

# In another terminal, generate types
cd frontend/packages/types
pnpm run generate:types

This will:

1. Fetch the OpenAPI spec from the backend
2. Generate TypeScript types in src/generated/api.ts
3. Types are automatically used by wrapper files (auth.ts, user.ts, etc.)

Build Process

# Generate types + build package
pnpm run build

# Type check only
pnpm run typecheck

# Watch mode for development
pnpm run dev

Structure

src/
├── generated/
│   └── api.ts           # AUTO-GENERATED from OpenAPI (DO NOT EDIT)
├── auth.ts              # Authentication types (wrapper + custom)
├── user.ts              # User management types (wrapper + custom)
├── role.ts              # Role and permission types (wrapper + custom)
├── common.ts            # Common types (wrapper + custom)
├── enums.ts             # Enums and constants
└── index.ts             # Main export file

Type Categories

Generated Types (from OpenAPI)

These types are automatically generated and should not be edited manually:

• LoginRequest, LoginResponse
• UserDTO, CreateUserRequest, UpdateUserRequest
• RoleDTO, Permission
• ErrorResponse

Custom UI Types

These types are defined manually for UI-specific needs:

• TokenStorage - Token storage structure
• UserListFilters - User list filtering options
• UserFormData - Form data for user creation/editing
• LoadingState - UI loading states
• Screen - TUI screen navigation

CI/CD

In CI/CD pipelines, ensure types are generated before building:

# Start backend in background
docker-compose up -d backend

# Wait for backend to be ready
./scripts/wait-for-backend.sh

# Generate types
cd frontend/packages/types
pnpm run generate:types

# Build
pnpm run build

Development Workflow

1. Make changes to backend DTOs
2. Restart backend
3. Run pnpm run generate:types in this package
4. TypeScript will catch any breaking changes in dependent packages
5. Update wrapper files if needed (add new custom types)

Notes

• The generated/api.ts file should never be edited manually
• Wrapper files (auth.ts, user.ts, etc.) re-export types with clean names
• Custom types should be added to wrapper files, not generated/api.ts
• Run type generation before building to ensure types are up-to-date