feat(*): replace name of manager components react lib

ref: MANAGER-14822

Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>

Author: aboungnaseng-ovhcloud

docs/docs/guide/manager-components.md

@@ -4,7 +4,7 @@ We use a library of super components in our react applications.
 
 ## The package is accessible on the monorepo
 
-- [@ovhcloud/manager-components](https://github.com/ovh/manager/blob/develop/packages/manager-components/README.md)
+- [@ovhcloud/manager-react-components](https://github.com/ovh/manager/blob/develop/packages/manager-components/README.md)
 
 ## The storybook :
 
@@ -14,7 +14,7 @@ The storybook is accessible on
 ## How to start the application?
 
 ```sh
-$ yarn workspace @ovhcloud/manager-components run start
+$ yarn workspace @ovhcloud/manager-react-components run start
 ```
 
 Go to `<http://localhost:6006>`
@@ -26,4 +26,4 @@ Go to `<http://localhost:6006>`
 ## Importation of a component on your react code application :
 
 The component is not builded so you can import directly the component named `Card` from the workspace like this :
-`import Card from '@ovhcloud/manager-components'`
+`import Card from '@ovhcloud/manager-react-components'`

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

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

packages/manager-components/.storybook/preview.tsx

@@ -29,6 +29,16 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    options: {
+      storySort: {
+        order: [
+          'Manager React Components',
+          ['Introduction', "What's new?", ['Changelog']],
+          '*',
+        ],
+      },
+      showPanel: true,
+    },
   },
 };
 

packages/manager-components/CHANGELOG.md

@@ -14,7 +14,7 @@ Keep it as simple as possible
 ## Import component to another project
 
 The component is not builded so you can import directly the component named `Card` from the workspace like this :
-`import Card from '@ovhcloud/manager-components'`
+`import Card from '@ovhcloud/manager-react-components'`
 
 ## Main Scripts
 

packages/manager-components/README.md

@@ -1,5 +1,5 @@
 {
-  "name": "@ovhcloud/manager-components",
+  "name": "@ovhcloud/manager-react-components",
   "private": true,
   "version": "1.26.0",
   "main": "src/lib.ts",
@@ -51,8 +51,10 @@
   },
   "devDependencies": {
     "@babel/core": "7.22.10",
+    "@mdx-js/react": "^3.0.1",
     "@ovh-ux/manager-tailwind-config": "^0.2.0",
     "@ovh-ux/manager-vite-config": "^0.8.0",
+    "@storybook/addon-docs": "^7.5.3",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
     "@storybook/addon-links": "7.5.3",

packages/manager-components/package.json

@@ -1,27 +1,19 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import { OsdsLink, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { Links, LinkType } from '../../';
 
-<Meta title="Introduction" />
+<Meta title="Manager React Components/Introduction" />
 
 # Welcome to the Manager Component Storybook!
 
-This page presents the new features of each release.
+<Links
+  type={LinkType.external}
+  label="Follow on Github"
+  href="https://github.com/ovh/manager/tree/master/packages/manager-components"
+  target="_blank"
+/>
 
-## Release Notes
-
-> ### Version 1.25.0
->
-> > #### What's news ?
-> >
-> > - **BaseLayout** : Integration of a brand new component template for better visual consistency in the manager
->
-> > #### Feature updates:
-> >
-> > - **Onboarding** : Update of this existing component with the new specification of design team
->
-> > #### Bugfixes
-> >
-> > - ...
->
-> > #### Deprecated
-> >
-> > - **Dashboard** : Dashboard template componet is deprecated replace by the new BaseLayout component
+<img
+  src="https://th.bing.com/th/id/R.173e08cbab5c318ff60d0e2445c8aafd?rik=WDLPHDEItBd4Bw&pid=ImgRaw&r=0"
+  alt="welcome"
+/>

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

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Manager React Components/What's news ?/Changelog" />
+
+# Changelog
+
+## Release Notes
+
+> ### Version 1.26.0
+>
+> > #### What's news ?
+> >
+> > - **@manager-react-components** : Update a new package name for npm registry
+
+> ### Version 1.25.0
+>
+> > #### What's news ?
+> >
+> > - **BaseLayout** : Integration of a brand new component template for better visual consistency in the manager
+>
+> > #### Feature updates:
+> >
+> > - **Onboarding** : Update of this existing component with the new specification of design team
+>
+> > #### Bugfixes
+> >
+> > - ...
+>
+> > #### Deprecated
+> >
+> > - **Dashboard** : Dashboard template componet is deprecated replace by the new BaseLayout component

packages/manager-components/src/docs/whatsnew/changelog.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { OsdsLink, OsdsIcon } from '@ovhcloud/ods-components/react';
+import { Links, LinkType } from '../../../';
+
+<Meta title="Manager React Components/What's news/migration guide/1.25.0 to 1.26.0" />
+
+# Migration from 1.25.0 to 1.26.0
+
+<br />
+## Few steps to follow
+
+<br />
+1. Replace your dependancies in your **package.json**
+
+<div>
+  <strike>"@ovhcloud/manager-components": "^1.26.0"</strike>
+</div>
+<div>"@ovhcloud/manager-react-components": "^1.26.0"</div>
+<br />
+
+2. Replace your components **import**
+
+<div>
+  <strike>import \{card\} from  "@ovhcloud/manager-components"</strike>
+</div>
+<div>import \{card\} from "@ovhcloud/manager-react-components"</div>
+<br />
+
+> Next release **1.27.0**, we will publish the manager react component in the npm registry

packages/manager-components/src/docs/whatsnew/migration-guide/1.25-to-1.26.0.mdx

@@ -27,7 +27,7 @@
     "@ovh-ux/manager-react-core-application": "^0.10.0",
     "@ovh-ux/manager-react-shell-client": "^0.7.0",
     "@ovh-ux/shell": "^3.7.0",
-    "@ovhcloud/manager-components": "^1.26.0",
+    "@ovhcloud/manager-react-components": "^1.26.0",
     "@ovhcloud/ods-common-core": "17.2.2",
     "@ovhcloud/ods-common-theming": "17.2.2",
     "@ovhcloud/ods-components": "17.2.2",

packages/manager/apps/catalog/package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AxiosError } from 'axios';
-import { ErrorBanner, ErrorMessage } from '@ovhcloud/manager-components';
+import { ErrorBanner, ErrorMessage } from '@ovhcloud/manager-react-components';
 import { useSendErrorTracking } from '@/utils/trackingError';
 
 export interface ErrorObject {

packages/manager/apps/catalog/src/components/Error/Errors.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 
-import { Card } from '@ovhcloud/manager-components';
+import { Card } from '@ovhcloud/manager-react-components';
 import { OsdsText, OsdsDivider } from '@ovhcloud/ods-components/react';
 import {
   ODS_THEME_COLOR_INTENT,

packages/manager/apps/catalog/src/pages/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useLocation } from 'react-router-dom';
-import { ErrorMessage, TRACKING_LABELS } from '@ovhcloud/manager-components';
+import {
+  ErrorMessage,
+  TRACKING_LABELS,
+} from '@ovhcloud/manager-react-components';
 import { ErrorObject } from '@/components/Error/Errors';
 
 export function getTypology(error: ErrorMessage) {

packages/manager/apps/catalog/src/utils/trackingError.ts

@@ -5,7 +5,7 @@ module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     path.join(
-      path.dirname(require.resolve('@ovhcloud/manager-components')),
+      path.dirname(require.resolve('@ovhcloud/manager-react-components')),
       '**/*.{js,jsx,ts,tsx}',
     ),
   ],

packages/manager/apps/catalog/tailwind.config.js

@@ -36,7 +36,7 @@
     "@ovh-ux/request-tagger": "^0.3.0",
     "@ovh-ux/shell": "^3.7.0",
     "@ovh-ux/ui-kit": "^6.10.0",
-    "@ovhcloud/manager-components": "^1.26.0",
+    "@ovhcloud/manager-react-components": "^1.26.0",
     "@ovhcloud/ods-common-core": "17.2.2",
     "@ovhcloud/ods-common-theming": "17.2.2",
     "@ovhcloud/ods-components": "17.2.2",
@@ -93,4 +93,4 @@
     "EU",
     "US"
   ]
-}
+}

packages/manager/apps/container/package.json

@@ -9,7 +9,7 @@ import dedicatedShopConfig from '../order/shop-config/dedicated';
 import OrderTrigger from '../order/OrderTrigger';
 import { ShopItem } from '../order/OrderPopupContent';
 import { features } from './DedicatedSidebar';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 import constants from '../../account-sidebar/UsefulLinks/constants';
 
 const kycIndiaFeature = 'identity-documents';

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/AccountSidebar.tsx

@@ -11,7 +11,7 @@ import getIcon from './GetIcon';
 import { OsdsIcon } from '@ovhcloud/ods-components/react';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 
 export const features = [
   'dedicated-server',

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/DedicatedSidebar.tsx

@@ -11,7 +11,7 @@ import  getIcon  from './GetIcon';
 import { OsdsIcon } from '@ovhcloud/ods-components/react';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 
 const features = [
   'dedicated-cloud',

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/HostedPrivateCloudSidebar.tsx

@@ -12,7 +12,7 @@ import telecomShopConfig from '../order/shop-config/telecom';
 import OrderTrigger from '../order/OrderTrigger';
 import { ShopItem } from '../order/OrderPopupContent';
 import  getIcon  from './GetIcon';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 
 
 

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/TelecomSidebar.tsx

@@ -8,7 +8,7 @@ import OrderTrigger from '../order/OrderTrigger';
 import webShopConfig from '../order/shop-config/web';
 import { ShopItem } from '../order/OrderPopupContent';
 import getIcon  from './GetIcon';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 
 export const webFeatures = [
   'web:domains',

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/WebSidebar.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useFeatureAvailability } from '@ovhcloud/manager-components';
+import { useFeatureAvailability } from '@ovhcloud/manager-react-components';
 import { useLegacyContainer } from '@/container/legacy/context';
 import { useShell } from '@/context';
 import useProjects from './useProjects';

packages/manager/apps/container/src/container/legacy/server-sidebar/universe/public-cloud/PublicCloudSidebar.tsx

@@ -17,7 +17,7 @@ import {
   ODS_ICON_SIZE,
 } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { Subtitle } from '@ovhcloud/manager-components';
+import { Subtitle } from '@ovhcloud/manager-react-components';
 
 type MfaEnrollmentProps = {
   forced?: boolean;

packages/manager/apps/container/src/container/mfa-enrollment/MfaEnrollment.tsx

@@ -9,7 +9,7 @@ import { useShell } from '@/context';
 import useProductNavReshuffle from '@/core/product-nav-reshuffle';
 import { OsdsChip } from '@ovhcloud/ods-components/react';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { fetchFeatureAvailabilityData } from '@ovhcloud/manager-components';
+import { fetchFeatureAvailabilityData } from '@ovhcloud/manager-react-components';
 
 import { useReket } from '@ovh-ux/ovh-reket';
 import { UserLink } from './UserLink';

packages/manager/apps/container/src/container/nav-reshuffle/header/user-account-menu/Content.tsx

@@ -24,7 +24,7 @@ import {
 } from './utils';
 import { Node } from './navigation-tree/node';
 import useProductNavReshuffle from '@/core/product-nav-reshuffle';
-import { fetchFeatureAvailabilityData } from '@ovhcloud/manager-components';
+import { fetchFeatureAvailabilityData } from '@ovhcloud/manager-react-components';
 
 interface ServicesCountError {
   url: string;

packages/manager/apps/container/src/container/nav-reshuffle/sidebar/index.tsx

@@ -6,7 +6,7 @@ import { User } from '@ovh-ux/manager-config';
 import ovhCloudLogo from './assets/logo-ovhcloud.png';
 import links from './links';
 import { useApplication } from '@/context';
-import { Subtitle, Links, LinksProps } from '@ovhcloud/manager-components';
+import { Subtitle, Links, LinksProps } from '@ovhcloud/manager-react-components';
 import {
   OsdsButton,
   OsdsModal,

packages/manager/apps/container/src/cookie-policy/CookiePolicy.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useReket } from '@ovh-ux/ovh-reket';
 import { Application } from '@ovh-ux/manager-config';
-import {fetchFeatureAvailabilityData} from '@ovhcloud/manager-components'
+import {fetchFeatureAvailabilityData} from '@ovhcloud/manager-react-components'
 import {
   getBetaAvailabilityFromLocalStorage,
   setBetaAvailabilityToLocalStorage,

packages/manager/apps/container/src/core/container/ContainerProvider.tsx

@@ -24,7 +24,7 @@ import {
   ODS_CHIP_SIZE,
 } from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { Subtitle } from '@ovhcloud/manager-components';
+import { Subtitle } from '@ovhcloud/manager-react-components';
 import {
   connectedToDisconnected,
   connectedToOther,

packages/manager/apps/container/src/sso-auth-modal/SSOAuthModal.tsx

@@ -28,7 +28,7 @@
     "@ovh-ux/manager-react-core-application": "^0.10.0",
     "@ovh-ux/manager-react-shell-client": "^0.7.0",
     "@ovh-ux/manager-tailwind-config": "*",
-    "@ovhcloud/manager-components": "^1.26.0",
+    "@ovhcloud/manager-react-components": "^1.26.0",
     "@ovhcloud/ods-common-core": "17.2.2",
     "@ovhcloud/ods-common-theming": "17.2.2",
     "@ovhcloud/ods-components": "17.2.2",

packages/manager/apps/key-management-service/package.json

@@ -4,8 +4,8 @@ import { useShell } from '@ovh-ux/manager-react-shell-client';
 import {
   ErrorMessage,
   TRACKING_LABELS,
-} from '@ovhcloud/manager-components/src/components/';
-import { ErrorBanner } from '@ovhcloud/manager-components';
+} from '@ovhcloud/manager-react-components/src/components/';
+import { ErrorBanner } from '@ovhcloud/manager-react-components';
 
 interface ErrorObject {
   [key: string]: any;

packages/manager/apps/key-management-service/src/components/Error/Error.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
-import { GuideButton } from '@ovhcloud/manager-components';
+import { GuideButton } from '@ovhcloud/manager-react-components';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
 
 export default function KmsGuidesHeader() {

packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx

@@ -3,7 +3,7 @@ import {
   DataGridClipboardCell,
   DataGridTextCell,
   useNotifications,
-} from '@ovhcloud/manager-components';
+} from '@ovhcloud/manager-react-components';
 import { OsdsLink } from '@ovhcloud/ods-components/react';
 import { ODS_TEXT_COLOR_INTENT } from '@ovhcloud/ods-components';
 import { useNavigate } from 'react-router-dom';