refactor(pci-project): static analysis kit

ref: #MANAGER-20320

Signed-off-by: Fabien Henon <[email protected]>

Author: FabienHenon

.eslintignore

@@ -59,3 +59,4 @@ packages/manager-wiki
 lint-runner.js
 lint-html-runner.js
 lint-cli.js
+packages/manager/apps/pci-project

.prettierignore

@@ -17,3 +17,4 @@ packages/manager-ui-kit
 packages/manager-wiki
 packages/manager-tools/manager-forge-cli
 packages/manager-tools/manager-forge-cli/template
+packages/manager/apps/pci-project

packages/manager/apps/pci-project/eslint.config.mjs

@@ -0,0 +1,77 @@
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { a11yEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/a11y';
+import {
+  complexityJsxTsxConfig,
+  complexityTsJsConfig,
+} from '@ovh-ux/manager-static-analysis-kit/eslint/complexity';
+import { htmlEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/html';
+import { importEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/imports';
+import { javascriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/javascript';
+import { checkFileEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/naming-conventions';
+import { prettierEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/prettier';
+import { reactEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/react';
+import { tailwindJsxConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tailwind-jsx';
+import { tanStackQueryEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tanstack';
+import { vitestEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tests';
+import { typescriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/typescript';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default [
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+  javascriptEslintConfig,
+  typescriptEslintConfig,
+  reactEslintConfig,
+  a11yEslintConfig,
+  htmlEslintConfig,
+  tailwindJsxConfig,
+  tanStackQueryEslintConfig,
+  vitestEslintConfig,
+  prettierEslintConfig,
+  complexityJsxTsxConfig,
+  complexityTsJsConfig,
+  ...importEslintConfig,
+  ...checkFileEslintConfig,
+  {
+    rules: {
+      'import/no-nodejs-modules': 'off',
+      'check-file/filename-naming-convention': 'off',
+      'import/no-unresolved': 'off',
+      'react/no-multi-comp': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+      'no-undef': 'off',
+      'import/named': 'off',
+      'no-unsafe-optional-chaining': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      'no-redeclare': 'off',
+      'no-dupe-else-if': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-redundant-type-constituents': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/require-await': 'off',
+    },
+  },
+  {
+    files: ['**/setupTests.tsx', '**/*.spec.tsx', '**/*.spec.ts'],
+    rules: {
+      'max-lines-per-function': 'off',
+      'max-nested-callbacks': 'off',
+      'max-lines': 'off',
+    },
+  },
+];

packages/manager/apps/pci-project/index.html

@@ -17,6 +17,6 @@
             </strong>
         </noscript>
         <div id="root"></div>
-        <script type="module" src="./src/index.tsx"></script>
+        <script type="module" src="./src/main.tsx"></script>
     </body>
 </html>

packages/manager/apps/pci-project/package.json

@@ -14,16 +14,8 @@
   "scripts": {
     "build": "tsc && vite build",
     "coverage": "manager-test run --coverage",
-    "format": "run-p format:*",
-    "format:css": "yarn run lint:css --fix",
-    "format:html": "yarn run lint:html && prettier --parser=html --write \"**/*.html\"",
-    "format:js": "yarn run lint:js --fix",
-    "format:md": "yarn run lint:md --fix",
-    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
-    "lint:css": "stylelint \"**/*.{css,less,scss}\"",
-    "lint:html": "htmlhint --ignore \"**/dist/**,**/www/**,**/coverage/**,**/screenshot/**,**/docs-api/**\" \"packages/**/*.html\"",
-    "lint:js": "eslint --cache --quiet --format=pretty .",
-    "lint:md": "remark -qf . && eslint --quiet --format=pretty --ext .md .",
+   "lint:modern": "manager-lint --config eslint.config.mjs ./src",
+    "lint:modern:fix": "manager-lint --fix --config eslint.config.mjs ./src",
     "start": "vite",
     "test": "manager-test run"
   },
@@ -38,7 +30,6 @@
     "@ovh-ux/manager-react-components": "^2.39.0",
     "@ovh-ux/manager-react-core-application": "*",
     "@ovh-ux/manager-react-shell-client": "^0.9.1",
-    "@ovh-ux/manager-tailwind-config": "*",
     "@ovh-ux/request-tagger": "*",
     "@ovhcloud/ods-components": "^18.6.3",
     "@ovhcloud/ods-themes": "^18.6.3",
@@ -57,9 +48,13 @@
     "validator": "^13.15.15"
   },
   "devDependencies": {
-    "@testing-library/react": "*",
+    "@ovh-ux/manager-static-analysis-kit": "0.13.0",
+    "@ovh-ux/manager-tailwind-config": "*",
+    "@ovh-ux/manager-tests-setup": "0.4.7",
+    "@ovh-ux/manager-vite-config": "0.15.0",
+    "@tanstack/react-query-devtools": "5.51.21",
     "@types/validator": "^13.15.2",
-    "@vitest/coverage-v8": "^2.1.9",
+    "typescript": "5.9.3",
     "vite": "^5.3.3",
     "vitest": "^2.1.9"
   },

packages/manager/apps/pci-project/src/index.scss renamed to packages/manager/apps/pci-project/src/App.scss

@@ -26,11 +26,9 @@ ods-text.font-32::part(text) {
   font-size: 32px;
 }
 
-.contracts-agreements .contract-link:not(:last-child) {
-  &::after {
-    color: var(--ods-color-primary-500);
-    content: ',';
-  }
+.contracts-agreements .contract-link:not(:last-child)::after {
+  color: var(--ods-color-primary-500);
+  content: ',';
 }
 .contracts-agreements .contract-link::part(link) {
   padding: 0.2em;

packages/manager/apps/pci-project/src/App.tsx

@@ -1,23 +1,23 @@
-import React, { Suspense, useEffect, useContext } from 'react';
+import React, { Suspense, useContext, useEffect } from 'react';
+
+import { RouterProvider, createHashRouter, createRoutesFromElements } from 'react-router-dom';
+
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import {
-  RouterProvider,
-  createHashRouter,
-  createRoutesFromElements,
-} from 'react-router-dom';
-import Routes from './routes/routes';
-import queryClient from './queryClient';
+
 import FullPageSpinner from './components/full-page-spinner/FullPageSpinner';
+import queryClient from './queryClient';
+import Routes from './routes/routes';
 
 function App() {
   const { shell } = useContext(ShellContext);
   const router = createHashRouter(createRoutesFromElements(Routes));
 
   useEffect(() => {
     shell.ux.hidePreloader();
-  }, []);
+  }, [shell.ux]);
 
   return (
     <QueryClientProvider client={queryClient}>

packages/manager/apps/pci-project/src/components/activation-guard/ActivationGuard.tsx

@@ -1,10 +1,11 @@
+import { lazy, useMemo } from 'react';
+
 import { isDiscoveryProject, useProject } from '@ovh-ux/manager-pci-common';
 import { RedirectionGuard } from '@ovh-ux/manager-react-components';
-import { lazy, useMemo } from 'react';
 
-const ActivatePage = lazy(() =>
-  import('@/pages/detail/activate/Activate.page'),
-);
+import { TProject } from '@/types/pci-common.types';
+
+const ActivatePage = lazy(() => import('@/pages/detail/activate/Activate.page'));
 
 /**
  * ActivationGuard component that protects the activation page route.
@@ -13,21 +14,22 @@ const ActivatePage = lazy(() =>
  * @returns RedirectionGuard component with ActivatePage as child
  */
 export default function ActivationGuard() {
-  const { data: project, isLoading } = useProject();
+  const { data: project, isLoading } = (
+    useProject as unknown as () => {
+      data: TProject | undefined;
+      isLoading: boolean;
+    }
+  )();
 
   const isAlreadyActivated = useMemo(() => {
     if (!project) {
       return false;
     }
-    return !isDiscoveryProject(project);
+    return !(isDiscoveryProject as (project: TProject) => boolean)(project);
   }, [project]);
 
   return (
-    <RedirectionGuard
-      condition={isAlreadyActivated}
-      route=".."
-      isLoading={isLoading}
-    >
+    <RedirectionGuard condition={isAlreadyActivated} route=".." isLoading={isLoading}>
       <ActivatePage />
     </RedirectionGuard>
   );

packages/manager/apps/pci-project/src/components/activation-guard/ActivationGuard.spec.tsx renamed to packages/manager/apps/pci-project/src/components/activation-guard/__tests__/ActivationGuard.spec.tsx

@@ -1,18 +1,20 @@
-import {
-  isDiscoveryProject,
-  ResponseAPIError,
-  TProject,
-  useProject,
-} from '@ovh-ux/manager-pci-common';
+import { Navigate } from 'react-router-dom';
+
 import { UseQueryResult } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Navigate } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { isDiscoveryProject, useProject } from '@ovh-ux/manager-pci-common';
+
+import { ResponseAPIError, TProject } from '@/types/pci-common.types';
 import { createWrapper } from '@/wrapperRenders';
-import ActivationGuard from './ActivationGuard';
+
+import ActivationGuard from '../ActivationGuard';
 
 vi.mock('@ovh-ux/manager-pci-common', async (importOriginal) => {
-  const actual: typeof import('@ovh-ux/manager-pci-common') = await importOriginal();
+  const actual = (await importOriginal<
+    typeof import('@ovh-ux/manager-pci-common')
+  >()) as unknown as Record<string, unknown>;
   return {
     ...actual,
     useProject: vi.fn(),
@@ -38,7 +40,7 @@ describe('ActivationGuard', () => {
   });
 
   it('should show spinner when project data is loading', () => {
-    vi.mocked(useProject).mockReturnValue({
+    (useProject as unknown as Mock).mockReturnValue({
       data: undefined,
       isLoading: true,
     } as UseQueryResult<TProject, ResponseAPIError>);
@@ -55,19 +57,17 @@ describe('ActivationGuard', () => {
       planCode: 'project.discovery',
     } as TProject;
 
-    vi.mocked(useProject).mockReturnValue({
+    (useProject as unknown as Mock).mockReturnValue({
       data: discoveryProject,
       isLoading: false,
     } as UseQueryResult<TProject, ResponseAPIError>);
 
-    vi.mocked(isDiscoveryProject).mockReturnValue(true);
+    (isDiscoveryProject as unknown as Mock).mockReturnValue(true);
 
     render(<ActivationGuard />, { wrapper: createWrapper() });
 
     await waitFor(() => {
-      expect(
-        screen.queryByTestId('redirectionGuard_spinner'),
-      ).not.toBeInTheDocument();
+      expect(screen.queryByTestId('redirectionGuard_spinner')).not.toBeInTheDocument();
       expect(screen.getByTestId('activate-page')).toBeInTheDocument();
       expect(Navigate).not.toHaveBeenCalled();
     });
@@ -79,20 +79,20 @@ describe('ActivationGuard', () => {
       planCode: 'project.2018',
     } as TProject;
 
-    vi.mocked(useProject).mockReturnValue({
+    (useProject as unknown as Mock).mockReturnValue({
       data: activatedProject,
       isLoading: false,
     } as UseQueryResult<TProject, ResponseAPIError>);
 
-    vi.mocked(isDiscoveryProject).mockReturnValue(false);
+    (isDiscoveryProject as unknown as Mock).mockReturnValue(false);
 
     render(<ActivationGuard />, { wrapper: createWrapper() });
 
     expect(Navigate).toHaveBeenCalledWith({ to: '..' }, {});
   });
 
   it('should not redirect when project data is undefined', async () => {
-    vi.mocked(useProject).mockReturnValue({
+    (useProject as unknown as Mock).mockReturnValue({
       data: undefined,
       isLoading: false,
     } as UseQueryResult<TProject, ResponseAPIError>);

packages/manager/apps/pci-project/src/components/contracts/Contracts.tsx

@@ -1,11 +1,9 @@
-import {
-  OdsCheckbox,
-  OdsFormField,
-  OdsLink,
-  OdsText,
-} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
-import { CartContract } from '@/data/types/cart.type';
+
+import { OdsCheckbox, OdsFormField, OdsLink, OdsText } from '@ovhcloud/ods-components/react';
+
+import { CartContract } from '@/data/types/Cart.type';
+
 import ContractsSkeleton from './ContractsSkeleton';
 
 type ContractsProps = {
@@ -38,7 +36,7 @@ export default function Contracts({
         {isLoading ? (
           <ContractsSkeleton />
         ) : (
-          <ul className="flex flex-col list-none gap-[8px]">
+          <ul className="flex list-none flex-col gap-[8px]">
             {contracts.map((contract) => (
               <li key={contract.url}>
                 <OdsLink