Strengthen frontend Biome linting rules to enforce import and Tailwind sorting, naming conventions, etc. (platformplatform#703)

### 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-types`to
`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:

```diff
  "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`:

```diff
+  // 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`:

```diff
+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:

```diff
+/// <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

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

application/account-management/WebApp/bootstrap.tsx

@@ -1,10 +1,11 @@
 import "@repo/ui/tailwind.css";
 import { router } from "@/shared/lib/router/router";
+import { ApplicationInsightsProvider } from "@repo/infrastructure/applicationInsights/ApplicationInsightsProvider";
+import { Translation } from "@repo/infrastructure/translations/Translation";
 import { RouterProvider } from "@tanstack/react-router";
 import React from "react";
+// biome-ignore lint/style/useNamingConvention: ReactDOM is a standard library name with consecutive uppercase letters
 import ReactDOM from "react-dom/client";
-import { Translation } from "@repo/infrastructure/translations/Translation";
-import { ApplicationInsightsProvider } from "@repo/infrastructure/applicationInsights/ApplicationInsightsProvider";
 
 const { TranslationProvider } = await Translation.create(
   (locale) => import(`@/shared/translations/locale/${locale}.ts`)

application/account-management/WebApp/package.json

@@ -7,9 +7,8 @@
     "dev:setup": "npm run update-translations && npm run swagger",
     "build": "npm run update-translations && npm run swagger && rsbuild build",
     "update-translations": "lingui extract --clean && lingui compile --typescript",
-    "check": "biome check",
-    "lint": "biome lint --write",
-    "format": "biome format --write",
+    "check": "biome check --error-on-warnings",
+    "lint": "biome check --write --unsafe",
     "swagger": "openapi-typescript shared/lib/api/AccountManagement.Api.json -o shared/lib/api/api.generated.d.ts --properties-required-by-default -t --enum --alphabetize",
     "publish": "npm run build && mkdir -p ../Api/publish/WebApp/dist/ && rsync -r ./dist/ ../Api/publish/WebApp/dist/"
   },

application/account-management/WebApp/routes/(index)/-components/CommunitySection.tsx

@@ -1,7 +1,7 @@
-import { githubImageUrl, slackImageUrl, youtubeImageUrl } from "./cdnImages";
 import { Link } from "@repo/ui/components/Link";
 import { ArrowRight } from "lucide-react";
 import type { LinkProps } from "react-aria-components";
+import { githubImageUrl, slackImageUrl, youtubeImageUrl } from "./cdnImages";
 
 // Props for FeatureBlock component
 interface FeatureBlockProps {
@@ -16,14 +16,14 @@ interface FeatureBlockProps {
 // Component to display a feature with an image, title, content, and a link
 function FeatureBlock({ title, content, image, href, linkText, arrow }: Readonly<FeatureBlockProps>) {
   return (
-    <div className="flex flex-col gap-4  items-center justify-center">
-      <div className="flex shadow rounded-lg w-12 h-12 justify-center p-1 items-center">
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex h-12 w-12 items-center justify-center rounded-lg p-1 shadow">
         <img src={image} alt={title} />
       </div>
-      <div className="text-foreground text-xl font-semibold text-center">{title}</div>
-      <div className="text-muted-foreground text-base font-normal text-center">{content}</div>
+      <div className="text-center font-semibold text-foreground text-xl">{title}</div>
+      <div className="text-center font-normal text-base text-muted-foreground">{content}</div>
       <Link href={href}>
-        {linkText} {arrow && <ArrowRight className="w-4 h-4" />}
+        {linkText} {arrow && <ArrowRight className="h-4 w-4" />}
       </Link>
     </div>
   );
@@ -32,39 +32,39 @@ function FeatureBlock({ title, content, image, href, linkText, arrow }: Readonly
 // Component for the Community Section
 export function CommunitySection() {
   return (
-    <div className="flex flex-col gap-8 items-center bg-background py-48">
-      <div className="flex flex-col gap-8 text-center items-center md:px-32 lg:px-64 px-8 max-w-7xl">
-        <h1 className="text-amber-600 text-base font-semibold">COMMUNITY</h1>
-        <h2 className="text-foreground text-4xl md:text-6xl font-semibold">Join builders on PlatformPlatform</h2>
-        <p className="text-muted-foreground text-xl font-normal">
+    <div className="flex flex-col items-center gap-8 bg-background py-48">
+      <div className="flex max-w-7xl flex-col items-center gap-8 px-8 text-center md:px-32 lg:px-64">
+        <h1 className="font-semibold text-amber-600 text-base">COMMUNITY</h1>
+        <h2 className="font-semibold text-4xl text-foreground md:text-6xl">Join builders on PlatformPlatform</h2>
+        <p className="font-normal text-muted-foreground text-xl">
           Our community is full of developers, designers and founders - just like you, to get your going, sharing ideas
           and experiences. Join us now.
         </p>
       </div>
-      <div className="grid grid-row-3 md:grid-cols-3 px-32 gap-16">
+      <div className="grid-row-3 grid gap-16 px-32 md:grid-cols-3">
         <FeatureBlock
           title="YouTube"
           content="Subscribe to our YouTube channel to get quickly started, and stay informed of new features."
           image={youtubeImageUrl}
           href="https://www.youtube.com"
           linkText="View training videos"
-          arrow
+          arrow={true}
         />
         <FeatureBlock
           title="Slack"
           content="Chat with our team or other members of the PlatformPlatform community."
           image={slackImageUrl}
           href="https://slack.com"
           linkText="Join our Slack channel"
-          arrow
+          arrow={true}
         />
         <FeatureBlock
           title="GitHub"
           content="View our GitHub repository and collaborate with thousands of developers like you."
           image={githubImageUrl}
           href="https://github.com"
           linkText="Check GitHub"
-          arrow
+          arrow={true}
         />
       </div>
     </div>

application/account-management/WebApp/routes/(index)/-components/CtaSection.tsx

@@ -3,13 +3,13 @@ import { Button } from "@repo/ui/components/Button";
 // CtaSection: A functional component that displays a call to action
 export function CtaSection() {
   return (
-    <div className="flex flex-col gap-4 text-center bg-muted px-8 md:px-48 py-24">
-      <div className="flex flex-col gap-8 text-center px-8">
-        <h2 className="text-foreground text-4xl font-semibold">A single solution for you to build on</h2>
-        <p className="text-muted-foreground text-xl font-normal">
+    <div className="flex flex-col gap-4 bg-muted px-8 py-24 text-center md:px-48">
+      <div className="flex flex-col gap-8 px-8 text-center">
+        <h2 className="font-semibold text-4xl text-foreground">A single solution for you to build on</h2>
+        <p className="font-normal text-muted-foreground text-xl">
           Join Startups and Enterprises already building on PlatformPlatform
         </p>
-        <div className="flex flex-col md:gap-8 items-center">
+        <div className="flex flex-col items-center md:gap-8">
           <Button variant="secondary">Get started today - it&apos;s free</Button>
         </div>
       </div>

application/account-management/WebApp/routes/(index)/-components/CtaSection2.tsx

@@ -1,16 +1,16 @@
-import { calenderMockupUrl } from "./cdnImages";
 import { Button } from "@repo/ui/components/Button";
+import { calenderMockupUrl } from "./cdnImages";
 
 // CtaSection2: A functional component that displays the second call to action section
 export function CtaSection2() {
   return (
-    <div className="flex bg-background justify-center pb-12 pt-24 px-8 md:px-24 shadow-lg">
-      <div className="flex bg-gray-800 justify-between items-center rounded-3xl pt-16 p-4 md:py-16 md:px-8 gap-16 md:flex-row flex-col">
-        <div className="flex flex-col items-center md:items-start gap-8 px-8 w-1/3">
-          <div className="text-white text-4xl font-semibold">
+    <div className="flex justify-center bg-background px-8 pt-24 pb-12 shadow-lg md:px-24">
+      <div className="flex flex-col items-center justify-between gap-16 rounded-3xl bg-gray-800 p-4 pt-16 md:flex-row md:px-8 md:py-16">
+        <div className="flex w-1/3 flex-col items-center gap-8 px-8 md:items-start">
+          <div className="font-semibold text-4xl text-white">
             Get lightyears ahead and get your product in the hands of your customers
           </div>
-          <div className="text-slate-200 text-xl font-normal">No credit cards or hidden fees. Just Open Source.</div>
+          <div className="font-normal text-slate-200 text-xl">No credit cards or hidden fees. Just Open Source.</div>
           <Button variant="secondary">Get started today - it’s free</Button>
         </div>
         <div className="w-min-6xl">

application/account-management/WebApp/routes/(index)/-components/CtaSection3.tsx

@@ -3,14 +3,14 @@ import { SignUpButton } from "@repo/infrastructure/auth/SignUpButton";
 // CtaSection3: A functional component that displays a call to action
 export function CtaSection3() {
   return (
-    <div className="flex flex-col gap-4 items-center text-center bg-background px-8 md:px-24 pt-12 pb-24">
-      <div className="bg-muted py-16 md:py-32 rounded-xl w-full">
+    <div className="flex flex-col items-center gap-4 bg-background px-8 pt-12 pb-24 text-center md:px-24">
+      <div className="w-full rounded-xl bg-muted py-16 md:py-32">
         <div className="flex flex-col gap-8 text-center">
-          <h2 className="text-foreground text-4xl md:text-6xl font-semibold">Start scaling your business today</h2>
-          <p className="text-muted-foreground text-xl font-normal">
+          <h2 className="font-semibold text-4xl text-foreground md:text-6xl">Start scaling your business today</h2>
+          <p className="font-normal text-muted-foreground text-xl">
             Join Startups and Enterprises already building on PlatformPlatform
           </p>
-          <div className="flex flex-col md:gap-8 items-center">
+          <div className="flex flex-col items-center md:gap-8">
             {/* Button component is used to display a call to action */}
             <SignUpButton variant="primary">Get started for free</SignUpButton>
           </div>

application/account-management/WebApp/routes/(index)/-components/FeatureSection.tsx

@@ -13,27 +13,27 @@ import {
 // FeatureSection: A functional component that displays the feature section
 export function FeatureSection() {
   return (
-    <div className="flex flex-col gap-8 text-center bg-background pb-12">
-      <div className="flex flex-col gap-8 self-center   md:w-1/2 px-8 pt-24">
-        <h1 className="text-amber-600 text-base font-semibold">FEATURES</h1>
-        <h2 className="text-foreground text-2xl md:text-6xl font-semibold">
+    <div className="flex flex-col gap-8 bg-background pb-12 text-center">
+      <div className="flex flex-col gap-8 self-center px-8 pt-24 md:w-1/2">
+        <h1 className="font-semibold text-amber-600 text-base">FEATURES</h1>
+        <h2 className="font-semibold text-2xl text-foreground md:text-6xl">
           All-in-one Infrastructure for any business
         </h2>
-        <p className="text-muted-foreground text-md md:text-xl font-normal">
+        <p className="font-normal text-md text-muted-foreground md:text-xl">
           Get a full enterprise grade production environment running within 1 hour. From development, infrastructure as
           code to fully deployed production application with a security score of 100%.
         </p>
       </div>
       <div className="flex flex-row justify-center gap-4 px-16 md:pr-0">
         <div className="flex flex-col gap-4">
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={createAccountUrl}
             alt="Create Account"
             loading="lazy"
           />
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={enterCodeUrl}
             alt="Enter Code"
             loading="lazy"
@@ -42,52 +42,52 @@ export function FeatureSection() {
         <div className="flex flex-col gap-4">
           <div className="flex flex-row gap-2">
             <img
-              className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+              className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
               src={profileEditDarkUrl}
               alt="Profile Edit Dark"
               loading="lazy"
             />
             <div>
               <img
-                className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+                className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
                 src={darkModeUrl}
                 alt="Dark Mode"
                 loading="lazy"
               />
             </div>
             <div>
               <img
-                className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+                className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
                 src={lightModeUrl}
                 alt="Light Mode"
                 loading="lazy"
               />
             </div>
           </div>
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={editProfileUrl}
             alt="Edit Profile"
             loading="lazy"
           />
         </div>
-        <div className="flex-col gap-4 hidden md:flex">
+        <div className="hidden flex-col gap-4 md:flex">
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={accountSettingsUrl}
             alt="Account Settings"
             loading="lazy"
           />
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={profileEditLightUrl}
             alt="Edit Profile Light"
             loading="lazy"
           />
         </div>
-        <div className="flex-col gap-4 hidden md:flex">
+        <div className="hidden flex-col gap-4 md:flex">
           <img
-            className="shadow-xl shadow-gray-400 dark:shadow-gray-800 rounded-lg"
+            className="rounded-lg shadow-gray-400 shadow-xl dark:shadow-gray-800"
             src={usersUrl}
             alt="Users"
             loading="lazy"

application/account-management/WebApp/routes/(index)/-components/FeatureSection2.tsx

@@ -1,13 +1,13 @@
 // FeatureSection2: Displays a section with features
 export function FeatureSection2() {
   return (
-    <div className="flex flex-col md:flex-row gap-8 bg-background py-24 px-8 md:px-32">
-      <div className="flex flex-col md:w-1/3 grow gap-4 text-foreground text-4xl font-semibold text-start pr-8">
-        <h1 className="text-amber-600 text-base font-semibold text-start">FEATURES</h1>
+    <div className="flex flex-col gap-8 bg-background px-8 py-24 md:flex-row md:px-32">
+      <div className="flex grow flex-col gap-4 pr-8 text-start font-semibold text-4xl text-foreground md:w-1/3">
+        <h1 className="text-start font-semibold text-amber-600 text-base">FEATURES</h1>
         All the features you need to build anything you want
       </div>
-      <div className="flex md:flex-row flex-col gap-16 w-2/3">
-        <div className="grid gap-x-16 gap-y-8 grid-cols-1 md:grid-cols-2 grid-rows-3 text-black md:max-w-full">
+      <div className="flex w-2/3 flex-col gap-16 md:flex-row">
+        <div className="grid grid-cols-1 grid-rows-3 gap-x-16 gap-y-8 text-black md:max-w-full md:grid-cols-2">
           <FeatureBlock
             title="Authentication and authorisation"
             content="Authentication and authorisation of your users are built right in using best practice and most secure industry standards."
@@ -46,9 +46,9 @@ interface FeatureBlockProps {
 // FeatureBlock: Displays a single feature
 function FeatureBlock({ title, content }: Readonly<FeatureBlockProps>) {
   return (
-    <div className="flex flex-col gap-4 h-1/3">
-      <div className="text-foreground text-xl font-semibold text-start">{title}</div>
-      <div className="text-muted-foreground text-base font-normal text-start">{content}</div>
+    <div className="flex h-1/3 flex-col gap-4">
+      <div className="text-start font-semibold text-foreground text-xl">{title}</div>
+      <div className="text-start font-normal text-base text-muted-foreground">{content}</div>
     </div>
   );
 }