Strengthen frontend Biome linting rules to enforce import and Tailwind sorting, naming conventions, etc.

[tjementum]

Summary & Motivation

Updated the Biome configuration to enforce sorted imports in TypeScript and .tsx files and sorted Tailwind class names. A full solution-wide cleanup has been performed to align with these changes.

Biome's linting rules have been expanded to:

• Enforce naming conventions while allowing PascalCased OpenAPI .NET parameters
• Require explicit block statements ({}) where necessary
• Strengthen formatting enforcement by removing format scripts from package.json, as formatting is now handled via lint

Also, a generic cleanup in the frontend, including fixing most Sonar warnings. Including:

• Import React wherever React.ReactNode is used to avoid warnings
• Mark variables as readonly and non-nullable where applicable
• Remove obsolete avatar.png
• Update location of module federation types from mf-typesto module-federation-types
• Remove leftover configuration from React Canary usage
• Remove workspace-biome workaround to make Biome work in VS Code

Downstream projects

1. Update package.json scripts

Update the application/[your-self-contained system]/WebApp/package.json to apply the new strict linting rules, and remove the format script which is now fully covered by the lint script:

  "scripts": {
-   "check": "biome check",
-   "lint": "biome lint --write",
-   "format": "biome format --write",
+   "check": "biome check --error-on-warnings",
+   "lint": "biome check --write --unsafe"
  }

3. Ignore Biome warning in bootstrap.tsx

Update application/[your-self-contained system]/WebApp/bootstrap.tsx to ignore incorrect casing of ReactDOM:

+  // biome-ignore lint/style/useNamingConvention: ReactDOM is a standard library name with consecutive uppercase letters
   import ReactDOM from "react-dom/client";

4. Update rsbuild.config.ts

Rename the MFPlugin to ModuleFederationPlugin in application/[your-self-contained system]/WebApp/rsbuild.config.ts:

+import { ModuleFederationPlugin } from "@repo/build/plugin/ModuleFederationPlugin";
-import { MFPlugin } from "@repo/build/plugin/MFPlugin";

+ ModuleFederationPlugin({
- MFPlugin({

5. Update react-env.d.ts

Update application/[your-self-contained system]/WebApp/react-env.d.ts to use the new module-federation-types folder:

+/// <reference types="@repo/build/module-federation-types/account-management.d.ts" />
-/// <reference types="@repo/build/mf-types/account-management.d.ts" />

6. IMPORTANT: Restart CLI command before continuing

Since npm run format has been removed, the build CLI command will fail if you continue. After making the above changes, please restart the process by running: pp pull-platform-platform-changes --resume (where pp is your CLI alias).

Checklist

• I have added tests, or done manual regression tests
• I have updated the documentation, if necessary

[linear]

PP-329 Enable Biome to sort Tailwind classes and TypeScript imports

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.1% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Please retry analysis of this Pull-Request directly on SonarQube Cloud

[sonarqubecloud]

Please retry analysis of this Pull-Request directly on SonarQube Cloud