feat(pci-common)!: bump library to ODS18

ref: TAPC-2378 Signed-off-by: Frédéric Vilcot <[email protected]>
ovh · Dec 18, 2024 · dfcd6ef · dfcd6ef
1 parent 215321b
commit dfcd6ef
Show file tree

Hide file tree

Showing 45 changed files with 610 additions and 1,030 deletions.
diff --git a/lerna.json b/lerna.json
@@ -21,7 +21,10 @@
     },
     "version": {
       "allowBranch": "master",
-      "ignoreChanges": ["packages/manager-react-components/**"]
+      "ignoreChanges": [
+        "packages/manager-react-components/**",
+        "packages/modules/manager-pci-common/**"
+      ]
     }
   }
 }
diff --git a/packages/manager/modules/manager-pci-common/package.json b/packages/manager/modules/manager-pci-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/manager-pci-common",
-  "version": "0.14.2",
+  "version": "1.0.0",
   "private": false,
   "description": "Public Cloud Common components",
   "homepage": "https://github.com/ovh/manager/blob/master/packages/manager/modules/manager-pci-common/README.md",
@@ -21,34 +21,32 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "yarn run type:check && vite build",
     "clean": "rimraf node_modules && rimraf dist && yarn cache clean",
-    "dev": "vite build",
+    "dev": "yarn run type:check",
     "lint": "eslint ./src",
     "lint:fix": "eslint ./src --fix",
-    "prepare": "vite build",
+    "prepare": "yarn run type:check && vite build",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --watch",
     "type:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@ovh-ux/manager-core-utils": "^0.3.0",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "clsx": "2.1.1",
     "date-fns": "^3.6.0",
     "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@ovh-ux/manager-core-api": "^0.9.0",
-    "@ovh-ux/manager-react-components": "^1.43.0",
+    "@ovh-ux/manager-react-components": "^2.5.1",
     "@ovh-ux/manager-react-shell-client": "^0.8.4",
     "@ovh-ux/manager-vite-config": "^0.8.3",
-    "@ovhcloud/ods-common-core": "^17.2.2",
-    "@ovhcloud/ods-common-stencil": "^17.2.2",
-    "@ovhcloud/ods-common-theming": "^17.2.2",
-    "@ovhcloud/ods-components": "^17.2.2",
-    "@ovhcloud/ods-theme-blue-jeans": "^17.2.2",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "^5.51.21",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
@@ -73,15 +71,12 @@
   "peerDependencies": {
     "@ovh-ux/manager-config": "^7.3.2",
     "@ovh-ux/manager-core-api": "^0.9.0",
-    "@ovh-ux/manager-react-components": "^1.43.0",
+    "@ovh-ux/manager-react-components": "^2.5.1",
     "@ovh-ux/manager-react-shell-client": "^0.8.4",
     "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/shell": "^3.7.0",
-    "@ovhcloud/ods-common-core": "^17.2.2",
-    "@ovhcloud/ods-common-stencil": "^17.2.2",
-    "@ovhcloud/ods-common-theming": "^17.2.2",
-    "@ovhcloud/ods-components": "^17.2.2",
-    "@ovhcloud/ods-theme-blue-jeans": "^17.2.2",
+    "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-themes": "^18.4.1",
     "@tanstack/react-query": "^5.51.21",
     "i18next": "^23.8.2",
     "react": "^18.2.0",

diff --git a/packages/manager/modules/manager-pci-common/src/components/Pricing.tsx b/packages/manager/modules/manager-pci-common/src/components/Pricing.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import clsx from 'clsx';
-import { OsdsSkeleton } from '@ovhcloud/ods-components/react';
+import { OdsSkeleton } from '@ovhcloud/ods-components/react';
 import { TPricing } from '../api/data';
 import { usePricing } from '../hooks';
 import { PriceFormattingOptions } from '../hooks/usePricing';
@@ -16,7 +16,7 @@ export function Pricing({ pricing, options }: Readonly<PricingProps>) {
     pricing,
     options,
   ]);
-  if (!price) return <OsdsSkeleton />;
+  if (!price) return <OdsSkeleton />;
   return (
     <span>
       <span className={clsx(price?.secondary && 'font-bold')}>

diff --git a/packages/manager/modules/manager-pci-common/src/components/accordion/Accordion.component.tsx b/packages/manager/modules/manager-pci-common/src/components/accordion/Accordion.component.tsx
@@ -1,12 +1,6 @@
-import React, { ReactNode, useEffect, useState } from 'react';
-import { OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
-import {
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { OdsText, OdsIcon } from '@ovhcloud/ods-components/react';
+import { ReactNode, useEffect, useState } from 'react';
 
 export const AccordionComponent = ({
   title,
@@ -44,24 +38,17 @@ export const AccordionComponent = ({
           onClick={() => toggle()}
         >
           <div className="w-full text-left">
-            <OsdsText
-              size={ODS_TEXT_SIZE._400}
-              level={ODS_TEXT_LEVEL.body}
-              color={ODS_THEME_COLOR_INTENT.text}
-            >
-              {title}
-            </OsdsText>
+            <OdsText preset="span">{title}</OdsText>
           </div>
           <div className="w-fit flex items-center">
-            <OsdsIcon
+            <OdsIcon
+              className="text-[--ods-color-primary-500] text-[16px]"
               name={
                 state.isOpen
-                  ? ODS_ICON_NAME.CHEVRON_UP
-                  : ODS_ICON_NAME.CHEVRON_DOWN
+                  ? ODS_ICON_NAME.chevronUp
+                  : ODS_ICON_NAME.chevronDown
               }
-              size={ODS_ICON_SIZE.xxs}
-              color={ODS_THEME_COLOR_INTENT.primary}
-            ></OsdsIcon>
+            />
           </div>
         </button>
       </div>

diff --git a/...es/manager-pci-common/src/components/banner/announcement-banner/PciAnnouncementBanner.tsx b/...es/manager-pci-common/src/components/banner/announcement-banner/PciAnnouncementBanner.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigation } from '@ovh-ux/manager-react-shell-client';
 import { ActionBanner } from '@ovh-ux/manager-react-components';

diff --git a/.../modules/manager-pci-common/src/components/banner/discovery-banner/PciDiscoveryBanner.tsx b/.../modules/manager-pci-common/src/components/banner/discovery-banner/PciDiscoveryBanner.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigation } from '@ovh-ux/manager-react-shell-client';
-import { ODS_MESSAGE_TYPE } from '@ovhcloud/ods-components';
+import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
 import { ActionBanner } from '@ovh-ux/manager-react-components';
 import { TProject } from '../../../api/data';
 
@@ -39,7 +38,7 @@ export function PciDiscoveryBanner({
         <ActionBanner
           message={t('pci_projects_project_activate_project_banner_message')}
           cta={t('pci_projects_project_activate_project_banner_cta')}
-          type={ODS_MESSAGE_TYPE.warning}
+          color={ODS_MESSAGE_COLOR.warning}
           onClick={activateDiscoveryProject}
           className={className}
         />

diff --git a/...pci-common/src/components/banner/free-local-zones-banner/PciFreeLocalZonesBanner.spec.tsx b/...pci-common/src/components/banner/free-local-zones-banner/PciFreeLocalZonesBanner.spec.tsx
@@ -14,7 +14,7 @@ describe('PciFreeLocalZonesBanner tests', () => {
         />,
       );
 
-      expect(container.querySelector('osds-link')).toHaveAttribute(
+      expect(container.querySelector('ods-link')).toHaveAttribute(
         'href',
         URLs[subsidiary],
       );

diff --git a/...ager-pci-common/src/components/banner/free-local-zones-banner/PciFreeLocalZonesBanner.tsx b/...ager-pci-common/src/components/banner/free-local-zones-banner/PciFreeLocalZonesBanner.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionBanner } from '@ovh-ux/manager-react-components';
 

diff --git a/...les/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx b/...les/manager-pci-common/src/components/banner/trusted-zone-banner/PciTrustedZoneBanner.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ODS_MESSAGE_TYPE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { OsdsMessage, OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_MESSAGE_COLOR } from '@ovhcloud/ods-components';
+import { OdsText, OdsMessage } from '@ovhcloud/ods-components/react';
 import { useTrustedZoneBanner } from './useTrustedZoneBanner.hook';
 
 import '../../../translations/trusted-zone-banner';
@@ -19,15 +13,11 @@ export function PciTrustedZoneBanner() {
   return (
     <>
       {isBannerVisible && (
-        <OsdsMessage type={ODS_MESSAGE_TYPE.info}>
-          <OsdsText
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._400}
-            color={ODS_THEME_COLOR_INTENT.text}
-          >
+        <OdsMessage color={ODS_MESSAGE_COLOR.information}>
+          <OdsText preset="span">
             {t('pci_projects_trusted_zone_banner_info')}
-          </OsdsText>
-        </OsdsMessage>
+          </OdsText>
+        </OdsMessage>
       )}
     </>
   );

diff --git a/...manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx b/...manager/modules/manager-pci-common/src/components/flavor-selector/FlavorLocalzoneChip.tsx
@@ -1,23 +1,10 @@
-import {
-  OsdsChip,
-  OsdsIcon,
-  OsdsPopover,
-  OsdsPopoverContent,
-  OsdsText,
-} from '@ovhcloud/ods-components/react';
 import { useTranslation } from 'react-i18next';
-import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import {
-  ODS_CHIP_SIZE,
-  ODS_ICON_NAME,
-  ODS_ICON_SIZE,
-  ODS_TEXT_LEVEL,
-  ODS_TEXT_SIZE,
-} from '@ovhcloud/ods-components';
 import { Links, LinkType } from '@ovh-ux/manager-react-components';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { OdsTag, OdsText, OdsPopover } from '@ovhcloud/ods-components/react';
+import { ODS_ICON_NAME, ODS_TAG_COLOR } from '@ovhcloud/ods-components';
+import clsx from 'clsx';
 import {
   GLOBAL_REGIONS_INFO_URL,
   LOCAL_ZONE_INFO_URL,
@@ -30,10 +17,12 @@ const URL_INFO = {
 
 export type TFlavorLocalzoneChip = {
   isLocalZone: boolean;
+  id: string;
 };
 
 export function FlavorLocalzoneChip({
   isLocalZone,
+  id,
 }: Readonly<TFlavorLocalzoneChip>) {
   const { t } = useTranslation('pci-flavors');
   const { ovhSubsidiary } = useContext(ShellContext).environment.getUser();
@@ -43,56 +32,46 @@ export function FlavorLocalzoneChip({
     URL_INFO[linkType as keyof typeof URL_INFO].DEFAULT;
 
   return (
-    <OsdsPopover>
-      <span slot="popover-trigger">
-        <OsdsChip
-          color={
+    <>
+      <div id={id}>
+        <OdsTag
+          className={clsx(
+            'text-[--ods-color-primary-500] font-bold text-[14px]',
             isLocalZone
-              ? ODS_THEME_COLOR_INTENT.error
-              : ODS_THEME_COLOR_INTENT.primary
+              ? 'bg-[--ods-color-critical-100]'
+              : 'bg-[--ods-color-primary-100]',
+          )}
+          label={
+            isLocalZone
+              ? t('pci_project_flavors_zone_localzone')
+              : t('pci_project_flavors_zone_global_region')
+          }
+          icon={ODS_ICON_NAME.question}
+          color={
+            isLocalZone ? ODS_TAG_COLOR.critical : ODS_TAG_COLOR.information
           }
-          size={ODS_CHIP_SIZE.sm}
           onClick={(event) => event.stopPropagation()}
-        >
-          <OsdsText
-            color={ODS_THEME_COLOR_INTENT.primary}
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._200}
-          >
-            {isLocalZone
-              ? t('pci_project_flavors_zone_localzone')
-              : t('pci_project_flavors_zone_global_region')}
-          </OsdsText>
-          <OsdsIcon
-            name={ODS_ICON_NAME.HELP}
-            size={ODS_ICON_SIZE.xxs}
-            className="ml-2"
-            color={ODS_THEME_COLOR_INTENT.primary}
-          />
-        </OsdsChip>
-      </span>
-      <OsdsPopoverContent>
-        <OsdsText
-          color={ODS_THEME_COLOR_INTENT.text}
-          level={ODS_TEXT_LEVEL.body}
-        >
+        />
+      </div>
+      <OdsPopover triggerId={id}>
+        <OdsText preset="span">
           {isLocalZone
             ? t('pci_project_flavors_zone_localzone_tooltip')
             : t('pci_project_flavors_zone_globalregions_tooltip')}
-        </OsdsText>
+        </OdsText>
         &nbsp;
         <Links
           tab-index="-1"
           label={t('pci_project_flavors_zone_tooltip_link')}
           type={LinkType.external}
-          target={OdsHTMLAnchorElementTarget._blank}
+          target="_blank"
           href={
             isLocalZone
               ? getDocumentUrl('LOCAL_ZONE')
               : getDocumentUrl('GLOBAL_REGIONS')
           }
         />
-      </OsdsPopoverContent>
-    </OsdsPopover>
+      </OdsPopover>
+    </>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ describe('PciFreeLocalZonesBanner tests', () => { @@
             />,
           );
-          expect(container.querySelector('osds-link')).toHaveAttribute(
+          expect(container.querySelector('ods-link')).toHaveAttribute(
             'href',
             URLs[subsidiary],
           );
@@ Expand Down @@