Lukas
59c92f9a83
Add automated type synchronization from backend OpenAPI schema to frontend TypeScript types to prevent type drift and ensure runtime safety. Changes: - Add openapi-typescript as dev dependency - Create npm scripts for type generation (generate:types) and validation (validate:types) - Integrate type generation into build pipeline (runs before TypeScript compilation) - Generate frontend/src/types/generated.ts from backend OpenAPI schema - Add frontend/scripts/validate-types.sh for CI/CD validation - Update Web-Development.md with type generation workflow documentation - Update Backend-Development.md with OpenAPI schema sync requirements Workflow: 1. Backend automatically exposes OpenAPI schema at /api/openapi.json (FastAPI built-in) 2. Frontend build runs 'npm run generate:types' to generate types from schema 3. Generated types are committed to version control 4. CI can run 'npm run validate:types' to fail builds if types drift Fixes critical type safety issue where frontend types were manually maintained and could become out of sync with backend Pydantic models. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
58 lines
1.9 KiB
JSON
58 lines
1.9 KiB
JSON
{
|
|
"name": "bangui-frontend",
|
|
"private": true,
|
|
"version": "0.9.19",
|
|
"description": "BanGUI frontend — fail2ban web management interface",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"generate:types": "openapi-typescript http://localhost:8000/api/openapi.json -o src/types/generated.ts",
|
|
"validate:types": "bash scripts/validate-types.sh",
|
|
"build": "npm run generate:types && tsc --noEmit && vite build",
|
|
"preview": "vite preview",
|
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
"typecheck": "tsc --noEmit",
|
|
"format": "prettier --write 'src/**/*.{ts,tsx,css}'",
|
|
"test": "vitest run --config vitest.config.ts",
|
|
"coverage": "vitest run --config vitest.config.ts --coverage"
|
|
},
|
|
"dependencies": {
|
|
"@fluentui/react-components": "^9.55.0",
|
|
"@fluentui/react-icons": "^2.0.257",
|
|
"d3-geo": "^3.1.1",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"react-router-dom": "^6.27.0",
|
|
"recharts": "^3.8.0",
|
|
"topojson-client": "^3.1.0",
|
|
"world-atlas": "^2.0.2"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.13.0",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/d3-geo": "^3.1.0",
|
|
"@types/node": "^25.3.2",
|
|
"@types/react": "^18.3.12",
|
|
"@types/react-dom": "^18.3.1",
|
|
"@types/topojson-client": "^3.0.0",
|
|
"@typescript-eslint/eslint-plugin": "^8.13.0",
|
|
"@typescript-eslint/parser": "^8.13.0",
|
|
"@vitejs/plugin-react": "^4.3.3",
|
|
"@vitest/coverage-v8": "^4.0.18",
|
|
"eslint": "^9.13.0",
|
|
"eslint-config-prettier": "^9.1.0",
|
|
"eslint-plugin-react": "^7.37.5",
|
|
"eslint-plugin-react-hooks": "^5.0.0",
|
|
"jiti": "^2.6.1",
|
|
"jsdom": "^28.1.0",
|
|
"openapi-typescript": "^7.13.0",
|
|
"prettier": "^3.3.3",
|
|
"typescript": "^5.6.3",
|
|
"typescript-eslint": "^8.56.1",
|
|
"vite": "^5.4.11",
|
|
"vitest": "^4.0.18"
|
|
}
|
|
}
|