feat(manager-react-components): Bump ods version 18.3.0

docs/cli/prebuild.js

@@ -4,7 +4,7 @@ const path = require('path');
 const pick = require('lodash/pick');
 
 // Get all workspaces defined in the `package.json` file.
-const { workspaces } = require('./../../package.json');
+const { workspaces } = require('../../package.json');
 
 // Keep the bare minimum entries from all package.json files.
 const entries = ['name', 'version', 'description', 'repository'];
@@ -19,7 +19,7 @@ const packages = getMonorepoPackages(directoryPath).map(
 );
 
 // Group packages by their corresponding workspaces.
-const groupedWorkspaces = workspaces.map((workspace) => {
+const groupedWorkspaces = workspaces.packages.map((workspace) => {
   const packagesList = packages.filter((pkg) => {
     // Remove the pattern `/*` from the workspace name.
     if (

docs/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "docs:build": "yarn docs:build:manager-react-components && node cli/prebuild.js &&  vitepress build --base /manager/",
     "docs:build:manager-react-components": "cd ../packages/manager-react-components && yarn build:storybook && rm -rf ../../docs/docs/public/storybook-static && mkdir -p ../../docs/docs/public/storybook-static && cp -r ./storybook-static/* ../../docs/docs/public/storybook-static",
-    "docs:deploy": "yarn run docs:build && gh-pages -d .vitepress/dist -m \"docs: update documentation [skip ci]\"",
+    "docs:deploy": "yarn run docs:build && touch .vitepress/dist/storybook-static/.nojekyll && touch .vitepress/dist/.nojekyll  && gh-pages -d .vitepress/dist --dotfiles -m \"docs: update documentation [skip ci]\"",
     "docs:dev": "node cli/prebuild.js && vitepress dev",
     "docs:preview": "vitepress preview"
   },

packages/manager-react-components/.storybook/main.ts

@@ -1,4 +1,5 @@
 import { StorybookConfig } from '@storybook/react-vite';
+
 const config: StorybookConfig = {
   stories: [
     '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
@@ -10,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-styling',
-    '@storybook/addon-doc',
+    '@storybook/addon-docs',
   ],
   framework: {
     name: '@storybook/react-vite',

packages/manager-react-components/.storybook/ovh.theme.ts

@@ -4,11 +4,11 @@ export default create({
   base: 'light',
 
   // Brand
-  colorPrimary: '#004FD6',
-  colorSecondary: '#004FD6',
+  // colorPrimary: '#004FD6',
+  // colorSecondary: '#004FD6',
 
   // UI
-  appBg: '#FF3358',
+  // appBg: '#FF3358',
   appBorderColor: '#004FD6',
   appBorderRadius: 0,
   appContentBg: '#ffffff',
@@ -23,9 +23,9 @@ export default create({
   textInverseColor: 'rgba(255,255,255,0.9)',
 
   // Toolbar default and active colors
-  barBg: '#f3fcff',
-  barSelectedColor: '#004FD6',
-  barTextColor: '#202124',
+  // barBg: '#f3fcff',
+  // barSelectedColor: '#004FD6',
+  // barTextColor: '#202124',
 
   // Form colors
   inputBg: '#ffffff',

packages/manager-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovh-ux/manager-react-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "BSD-3-Clause",
   "author": "OVH SAS",
   "types": "dist/types/src/lib.d.ts",
@@ -36,8 +36,6 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@ovhcloud/ods-components": "18.0.0",
-    "@ovhcloud/ods-themes": "18.0.0",
     "@tanstack/react-query": "^5.51.21",
     "@tanstack/react-table": "^8.20.1",
     "clsx": "^2.1.1",
@@ -52,11 +50,12 @@
   "devDependencies": {
     "@babel/core": "7.22.10",
     "@mdx-js/react": "^3.0.1",
+    "@ovhcloud/ods-components": "^18.3.0",
+    "@ovhcloud/ods-themes": "^18.3.0",
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.8.1",
-    "@storybook/addon-a11y": "8.0.4",
     "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
@@ -115,6 +114,8 @@
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
+    "@ovhcloud/ods-components": "^18.3.0",
+    "@ovhcloud/ods-themes": "^18.3.0",
     "@ovh-ux/manager-core-api": "^0.9.0-alpha.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.0-alpha.3",
     "i18next": "^23.8.2",

packages/manager-react-components/src/components/ManagerButton/ManagerButton.tsx

@@ -44,8 +44,8 @@ export const ManagerButton = ({
     <>
       <div id={id} className="w-fit">
         <OdsButton
-          {...restProps}
           data-testid="manager-button-tooltip"
+          {...restProps}
           isDisabled={true}
           label={label}
           onClick={null}
@@ -57,8 +57,8 @@ export const ManagerButton = ({
     </>
   ) : (
     <OdsButton
-      {...restProps}
       data-testid="manager-button-without-tooltip"
+      {...restProps}
       isDisabled={true}
       onClick={null}
       label={label}

packages/manager-react-components/src/components/content/dashboard-tile/dashboard-tile.component.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { OdsDivider, OdsCard } from '@ovhcloud/ods-components/react';
+import { ODS_CARD_COLOR } from '@ovhcloud/ods-components';
 import { TileBlock } from './tile-block.component';
 
 export type DashboardTileBlockItem = {
@@ -11,13 +12,19 @@ export type DashboardTileBlockItem = {
 export type DashboardTileProps = {
   title?: string;
   items: DashboardTileBlockItem[];
+  'data-testid'?: string;
 };
 
 export const DashboardTile: React.FC<DashboardTileProps> = ({
   title,
   items,
+  ...props
 }) => (
-  <OdsCard className="w-full flex-col p-[1rem]" color="neutral">
+  <OdsCard
+    data-testid={props['data-testid']}
+    className="w-full flex-col p-[1rem]"
+    color={ODS_CARD_COLOR.neutral}
+  >
     <div className="flex flex-col w-full">
       {title && (
         <>

packages/manager-react-components/src/components/content/headers/headers.stories.tsx

@@ -46,7 +46,7 @@ const guideItems = [
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
   description: 'description for header',
-  headerButton: <ActionMenu items={actionItems} />,
+  headerButton: <ActionMenu id="1" items={actionItems} />,
 };
 const HeadingWithGuideButton: HeadersProps = {
   title: 'Example for header with guides',

packages/manager-react-components/src/components/navigation/menus/action/action.component.tsx

@@ -14,22 +14,22 @@ export interface ActionMenuItem {
   id: number;
   rel?: string;
   download?: string;
-  href?: string;
   target?: string;
   onClick?: () => void;
   label: string;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
   iamActions?: string[];
   urn?: string;
+  className?: string;
 }
 
 export interface ActionMenuProps {
   items: ActionMenuItem[];
   isCompact?: boolean;
   icon?: ODS_ICON_NAME;
   variant?: ODS_BUTTON_VARIANT;
-  disabled?: boolean;
+  id: string;
+  isDisabled?: boolean;
 }
 
 const MenuItem = ({
@@ -45,16 +45,13 @@ const MenuItem = ({
     size: ODS_BUTTON_SIZE.sm,
     variant: ODS_BUTTON_VARIANT.ghost,
     displayTooltip: false,
+    className: 'w-full action-menu-item',
     ...item,
   };
   return (
     <div className="-mx-[2px]">
       {!item?.iamActions || item?.iamActions?.length === 0 ? (
-        <OdsButton
-          {...buttonProps}
-          isDisabled={buttonProps.disabled}
-          label={item.label}
-        >
+        <OdsButton {...buttonProps} label={item.label}>
           <span slot="start">
             <span>{item.label}</span>
           </span>
@@ -66,7 +63,6 @@ const MenuItem = ({
           iamActions={item.iamActions}
           urn={item.urn}
           {...buttonProps}
-          isDisabled={buttonProps.disabled || undefined}
         >
           <span slot="start">
             <span>{item.label}</span>
@@ -82,19 +78,22 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
   isCompact,
   icon,
   variant = ODS_BUTTON_VARIANT.outline,
-  disabled,
+  isDisabled = false,
+  id,
 }) => {
   const { t } = useTranslation('buttons');
   const [isTrigger, setIsTrigger] = React.useState(false);
 
   return (
     <>
-      <div id="navigation-action-trigger">
+      <div key={id} id={`navigation-action-trigger-${id}`}>
         <OdsButton
           data-testid="navigation-action-trigger-action"
+          className="action-menu-btn"
           slot="menu-title"
+          id={id}
           variant={variant}
-          isDisabled={disabled}
+          isDisabled={isDisabled}
           size={ODS_BUTTON_SIZE.sm}
           onClick={() => setIsTrigger(true)}
           {...(!isCompact && { label: t('common_actions') })}
@@ -107,12 +106,17 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       </div>
       <OdsPopover
         className="py-[8px] px-0 overflow-hidden"
-        triggerId="navigation-action-trigger"
+        triggerId={`navigation-action-trigger-${id}`}
         with-arrow
       >
-        {items.map(({ id, ...item }) => {
+        {items.map(({ id: itemId, ...item }) => {
           return (
-            <MenuItem id={id} key={id} item={item} isTrigger={isTrigger} />
+            <MenuItem
+              id={itemId}
+              key={itemId}
+              item={item}
+              isTrigger={isTrigger}
+            />
           );
         })}
       </OdsPopover>

packages/manager-react-components/src/components/navigation/menus/action/action.spec.tsx

@@ -10,6 +10,7 @@ import { IamAuthorizationResponse } from '../../../../hooks/iam/iam.interface';
 vitest.mock('../../../../hooks/iam');
 
 const actionItems: ActionMenuProps = {
+  id: 'action-menu-test-id',
   items: [
     {
       id: 1,

packages/manager-react-components/src/components/typography/links/links.component.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import {
+  ODS_ICON_NAME,
+  ODS_LINK_COLOR,
+  ODS_LINK_ICON_ALIGNMENT,
+} from '@ovhcloud/ods-components';
 import { OdsLink } from '@ovhcloud/ods-components/react';
 
 export enum LinkType {
   back = 'back',
   next = 'next',
   external = 'external',
 }
+export enum IconLinkAlignmentType {
+  left = 'left',
+  right = 'right',
+}
 
 export interface LinksProps {
   className?: string;
+  color?: ODS_LINK_COLOR;
   download?: string;
   label?: string;
   href?: string;
   rel?: string;
   target?: string;
+  iconAlignment?: IconLinkAlignmentType;
   type?: LinkType;
   onClickReturn?: () => void;
 }
@@ -24,12 +34,19 @@ export const Links: React.FC<LinksProps> = ({
   onClickReturn,
   type,
   href,
+  color = ODS_LINK_COLOR.primary,
+  iconAlignment,
   ...props
 }: LinksProps) => (
   <OdsLink
     href={href}
     onClick={onClickReturn}
+    color={color}
+    {...(iconAlignment && {
+      iconAlignment: ODS_LINK_ICON_ALIGNMENT[iconAlignment],
+    })}
     {...props}
+    {...(type === LinkType.back && { icon: ODS_ICON_NAME.arrowLeft })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
     label={label}

packages/manager-react-components/src/components/typography/title/title.component.tsx

@@ -4,7 +4,7 @@ export const Title: React.FC<
   React.PropsWithChildren<{
     className?: string;
   }>
-> = ({ children, className }) => {
+> = ({ children, className = '' }) => {
   return (
     <div
       className={`${className} m-0 p-0 text-[--ods-color-heading] text-[36px] leading-[45px] font-bold mb-[24px]`}
@@ -18,7 +18,7 @@ export const Subtitle: React.FC<
   React.PropsWithChildren<{
     className?: string;
   }>
-> = ({ children, className }) => {
+> = ({ children, className = '' }) => {
   return (
     <div
       className={`${className} m-0 p-0 text-[--ods-color-heading] text-[24px] leading-[32px] font-bold`}

packages/manager-react-components/src/docs/introduction.mdx

@@ -1,18 +1,35 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { Links, LinkType } from './../index.ts';
+import { version, dependencies } from './../../package.json';
 
 <Meta title="Manager React Components/Introduction" />
 
 # Welcome to the Manager Component Storybook!
 
-<Links
-  type={LinkType.external}
-  label="Follow on Github"
-  href="https://github.com/ovh/manager/tree/master/packages/manager-react-components"
-  target="_blank"
-/>
+<div>
+  <Links
+    type={LinkType.external}
+    label={`Library package version ${version}`}
+    href="https://github.com/ovh/manager/tree/master/packages/manager-react-components"
+    target="_blank"
+  />
+  <br />
+</div>
 
-<img
-  src="https://th.bing.com/th/id/R.173e08cbab5c318ff60d0e2445c8aafd?rik=WDLPHDEItBd4Bw&pid=ImgRaw&r=0"
-  alt="welcome"
-/>
+<div>
+  <Links
+    type={LinkType.external}
+    label={`@ovhcloud/ods-components and @ovhcloud/ods-themes version ${dependencies['@ovhcloud/ods-components']}`}
+    href="https://ovh.github.io/design-system/v18.3.0/?path=/docs/ovhcloud-design-system-welcome--docs"
+    target="_blank"
+  />
+  <br />
+</div>
+
+<div>
+  <br />
+  <img
+    src="https://th.bing.com/th/id/R.173e08cbab5c318ff60d0e2445c8aafd?rik=WDLPHDEItBd4Bw&pid=ImgRaw&r=0"
+    alt="welcome"
+  />
+</div>