feat(web-hosting): add muk

ref: #PUWEPT-86

Signed-off-by: stif59100 <[email protected]>

Author: stif59100

packages/manager/apps/web-hosting/package.json

@@ -23,16 +23,16 @@
     "@hookform/resolvers": "^5.0.1",
     "@ovh-ux/manager-common-translations": "^0.21.0",
     "@ovh-ux/manager-config": "^8.6.7",
-    "@ovh-ux/manager-core-api": "^0.11.1",
+    "@ovh-ux/manager-core-api": "^0.19.0",
     "@ovh-ux/manager-core-utils": "^0.4.6",
-    "@ovh-ux/manager-react-components": "^2.43.1",
+    "@ovh-ux/muk": "^0.1.1",
     "@ovh-ux/manager-react-core-application": "^0.12.10",
     "@ovh-ux/manager-react-shell-client": "^0.11.1",
     "@ovh-ux/manager-tailwind-config": "^0.5.6",
     "@ovh-ux/request-tagger": "^0.5.6",
     "@ovh-ux/shell": "^4.7.12",
-    "@ovhcloud/ods-components": "^18.6.2",
-    "@ovhcloud/ods-themes": "^18.6.2",
+   "@ovhcloud/ods-react": "^19.2.1",
+    "@ovhcloud/ods-themes": "^19.2.1",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "clsx": "2.1.1",

packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.component.tsx

@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { BADGE_COLOR } from '@ovhcloud/ods-react';
 
-import { Badge } from '@ovh-ux/manager-react-components';
 import { ButtonType, PageLocation, useOvhTracking } from '@ovh-ux/manager-react-shell-client';
+import { Badge } from '@ovh-ux/muk';
 
 import { DnsStatus, GitStatus, ResourceStatus, ServiceStatus } from '@/data/types/status';
 import { DATAGRID_LINK, WEBSITE } from '@/utils/tracking.constants';
@@ -27,23 +27,23 @@ const getStatusColor = (status: Status) => {
     case ResourceStatus.READY:
     case ServiceStatus.ACTIVE:
     case DnsStatus.CONFIGURED:
-      return ODS_BADGE_COLOR.success;
+      return BADGE_COLOR.success;
     case GitStatus.CREATING:
     case GitStatus.DELETING:
     case GitStatus.DEPLOYING:
     case GitStatus.INITIALERROR:
     case DnsStatus.EXTERNAL:
-      return ODS_BADGE_COLOR.warning;
+      return BADGE_COLOR.warning;
     case GitStatus.DISABLED:
     case GitStatus.ERROR:
     case ResourceStatus.ERROR:
     case ResourceStatus.SUSPENDED:
     case ServiceStatus.NONE:
-      return ODS_BADGE_COLOR.critical;
+      return BADGE_COLOR.critical;
     case DnsStatus.NOT_CONFIGURED:
-      return ODS_BADGE_COLOR.neutral;
+      return BADGE_COLOR.neutral;
     default:
-      return ODS_BADGE_COLOR.information;
+      return BADGE_COLOR.information;
   }
 };
 
@@ -72,9 +72,10 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
       }}
       data-testid={`badge-status-${itemStatus}`}
       color={statusColor}
-      label={label || t(`web_hosting_status_${itemStatus.toLowerCase()}`)}
       className="mr-4 cursor-pointer inline-block"
       isLoading={isLoading}
-    />
+    >
+      {label || t(`web_hosting_status_${itemStatus.toLowerCase()}`)}
+    </Badge>
   );
 };

packages/manager/apps/web-hosting/src/components/badgeStatus/BadgeStatus.spec.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { ODS_BADGE_COLOR } from '@ovhcloud/ods-components';
+import { BADGE_COLOR } from '@ovhcloud/ods-react';
 
 import { DnsStatus, GitStatus, ServiceStatus } from '@/data/types/status';
 import { render, screen } from '@/utils/test.provider';
@@ -19,14 +19,14 @@ describe('BadgeStatus component', () => {
 
   it('should render with all possible colors', () => {
     const testCases = [
-      { status: DnsStatus.CONFIGURED, color: ODS_BADGE_COLOR.success },
-      { status: DnsStatus.EXTERNAL, color: ODS_BADGE_COLOR.warning },
-      { status: DnsStatus.NOT_CONFIGURED, color: ODS_BADGE_COLOR.neutral },
-      { status: GitStatus.CREATED, color: ODS_BADGE_COLOR.success },
-      { status: GitStatus.DELETING, color: ODS_BADGE_COLOR.warning },
-      { status: GitStatus.ERROR, color: ODS_BADGE_COLOR.critical },
-      { status: ServiceStatus.ACTIVE, color: ODS_BADGE_COLOR.success },
-      { status: ServiceStatus.NONE, color: ODS_BADGE_COLOR.critical },
+      { status: DnsStatus.CONFIGURED, color: BADGE_COLOR.success },
+      { status: DnsStatus.EXTERNAL, color: BADGE_COLOR.warning },
+      { status: DnsStatus.NOT_CONFIGURED, color: BADGE_COLOR.neutral },
+      { status: GitStatus.CREATED, color: BADGE_COLOR.success },
+      { status: GitStatus.DELETING, color: BADGE_COLOR.warning },
+      { status: GitStatus.ERROR, color: BADGE_COLOR.critical },
+      { status: ServiceStatus.ACTIVE, color: BADGE_COLOR.success },
+      { status: ServiceStatus.NONE, color: BADGE_COLOR.critical },
     ];
 
     testCases.forEach(({ status, color }) => {

packages/manager/apps/web-hosting/src/components/breadcrumb/Breadcrumb.component.tsx

@@ -4,24 +4,28 @@ import { useMatches } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
 
-import { ODS_ICON_NAME, ODS_LINK_COLOR } from '@ovhcloud/ods-components';
-import { OdsBreadcrumb, OdsBreadcrumbItem } from '@ovhcloud/ods-components/react';
+import {
+  BreadcrumbItem as BreadcrumbItemMuk,
+  BreadcrumbLink,
+  Breadcrumb as BreadcrumbMuk,
+  ICON_NAME,
+} from '@ovhcloud/ods-react';
 
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 
 export type BreadcrumbItem = {
   label?: string;
-  icon?: ODS_ICON_NAME;
+  icon?: ICON_NAME;
   href: string;
 };
 
-export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
-  { namespace } = { namespace: 'common' },
-) => {
+export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = ({
+  namespace = 'common',
+}) => {
   const { t } = useTranslation(namespace);
   const matches = useMatches();
   const { shell } = useContext(ShellContext);
-  const [href, setHref] = React.useState('#');
+  const [, setHref] = React.useState('#');
 
   useEffect(() => {
     const fetchUrl = async () => {
@@ -35,11 +39,6 @@ export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
     void fetchUrl();
   }, [shell.navigation]);
 
-  const rootItem = {
-    label: t('hosting'),
-    href,
-  };
-
   const items = useMemo(() => {
     let crumbs = matches.reduce((acc, match) => {
       const handle = match.handle as Record<string, string>;
@@ -69,20 +68,18 @@ export const Breadcrumb: React.FC<{ namespace?: string | string[] }> = (
         ...crumbs,
       ];
     }
+
     return crumbs;
   }, [matches, t]);
 
   return (
-    <OdsBreadcrumb data-testid="breadcrumb">
-      {[rootItem, ...items].map((item, index) => (
-        <OdsBreadcrumbItem
-          {...item}
-          color={ODS_LINK_COLOR.primary}
-          target="_self"
-          key={`${item.label}-${index}`}
-        />
+    <BreadcrumbMuk data-testid="breadcrumb">
+      {items.map((item, index) => (
+        <BreadcrumbItemMuk key={`${item.label}-${index}`}>
+          <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+        </BreadcrumbItemMuk>
       ))}
-    </OdsBreadcrumb>
+    </BreadcrumbMuk>
   );
 };
 

packages/manager/apps/web-hosting/src/components/expirationDate/ExpirationDate.component.tsx

@@ -2,9 +2,7 @@ import { useParams } from 'react-router-dom';
 
 import { Trans, useTranslation } from 'react-i18next';
 
-import { OdsText } from '@ovhcloud/ods-components/react';
-
-import { useFormatDate } from '@ovh-ux/manager-react-components';
+import { Text, useFormatDate } from '@ovh-ux/muk';
 
 import { useGetServiceInfos } from '@/data/hooks/webHostingDashboard/useWebHostingDashboard';
 import { SERVICE_INFOS_STATUS } from '@/data/types/product/ssl';
@@ -26,13 +24,13 @@ export default function ExpirationDate() {
       {!isExpired &&
         isInAutoRenew &&
         (data?.renew?.deleteAtExpiration ? (
-          <OdsText className="mb-7">
+          <Text className="mb-7">
             <Trans t={t} i18nKey="expiration_resiliation_date" values={{ expirationDate }}></Trans>
-          </OdsText>
+          </Text>
         ) : (
-          <OdsText className="mb-7">
+          <Text className="mb-7">
             <Trans t={t} i18nKey="expiration_renew_date" values={{ expirationDate }}></Trans>
-          </OdsText>
+          </Text>
         ))}
     </>
   );

packages/manager/apps/web-hosting/src/components/expirationDate/ExpirationDate.spec.tsx

@@ -29,7 +29,7 @@ vi.mock('react-i18next', async (importActual) => {
   };
 });
 
-vi.mock('@ovh-ux/manager-react-components', () => ({
+vi.mock('@ovh-ux/muk', () => ({
   useFormatDate: () => (date: string) => {
     if (date === '2026-02-18') return '18 févr. 2026';
     return `formatted-${date}`;

packages/manager/apps/web-hosting/src/components/loading/Loading.component.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
-
-import { ODS_SPINNER_SIZE } from '@ovhcloud/ods-components';
-import { OdsSpinner } from '@ovhcloud/ods-components/react';
+import { SPINNER_SIZE, Spinner } from '@ovhcloud/ods-react';
 
 export default function Loading() {
   return (
     <div data-testid="spinner" className="flex justify-center my-5">
-      <OdsSpinner size={ODS_SPINNER_SIZE.md} inline-block></OdsSpinner>
+      <Spinner size={SPINNER_SIZE.md} inline-block></Spinner>
     </div>
   );
 }