ovh · aboungnaseng-ovhcloud · Oct 20, 2025 · Oct 17, 2025
@@ -17,6 +17,7 @@ yarn muk-cli --check-versions
 ```
 
 **Example Output**
+
 ```
 ℹ 🔍 Checking ODS package versions...
 ⚠ Updates available:
@@ -36,6 +37,7 @@ yarn muk-cli --check-components
 ```
 
 **Example Output**
+
 ```
 ℹ 📁 Found 34 local components
 ℹ 📦 Fetching ODS React v19.2.0 tarball...
@@ -58,6 +60,7 @@ yarn muk-cli --update-versions
 ```
 
 **Example Output**
+
 ```
 ✔ Updated 3 ODS dependencies
 ✔ @ovhcloud/ods-components: 18.6.2 → 18.6.4
@@ -67,6 +70,7 @@ yarn muk-cli --update-versions
 ```
 
 If all are current:
+
 ```
 ✅ All ODS versions are already up to date!
 ✨ Done in 1.78s.
@@ -83,11 +87,12 @@ yarn muk-cli --add-components
 ```
 
 #### Supported Scenarios
-* Simple components (no children, e.g. `badge`, `progress-bar`)
-* Nested components (with subcomponents, e.g. `form-field`, `datepicker`, `range`)
-* Hook passthroughs (`useFormField`)
-* Constants passthroughs (`DatepickerConstants`)
-* External type re-exports
+
+- Simple components (no children, e.g. `badge`, `progress-bar`)
+- Nested components (with subcomponents, e.g. `form-field`, `datepicker`, `range`)
+- Hook passthroughs (`useFormField`)
+- Constants passthroughs (`DatepickerConstants`)
+- External type re-exports
 
 ---
 
@@ -100,6 +105,7 @@ yarn muk-cli --add-components-documentation
 ```
 
 #### 🧠 What It Does
+
 1. Detects the latest `@ovhcloud/ods-react` version from npm.
 2. Downloads (or reuses) the GitHub tarball for that version.
 3. Streams documentation files under `/storybook/stories/components/`.
@@ -113,10 +119,12 @@ yarn muk-cli --add-components-documentation
    packages/manager-wiki/stories/manager-ui-kit/base-documents/
    ```
 7. Rewrites imports:
-  - `../../../src/` → `../../../base-documents/`
-  - `ods-react/src/` → `@ovhcloud/ods-react`
+
+- `../../../src/` → `../../../base-documents/`
+- `ods-react/src/` → `@ovhcloud/ods-react`
 
 **Example Output**
+
 ```
 ℹ 📦 Starting Design System documentation sync…
 ℹ ℹ️ ODS React latest version: 19.2.1
@@ -130,6 +138,7 @@ yarn muk-cli --add-components-documentation
 ## ⚙️ 2. Streaming Architecture
 
 ### 2.1 High-Level Flow
+
 ```
 GitHub tarball (.tar.gz)
    │
@@ -140,41 +149,51 @@ GitHub tarball (.tar.gz)
 ```
 
 ### 2.2 Core Streaming Functions
+
 #### Stream Extraction
+
 ```js
 pipeline(
   https.get(url),
   zlib.createGunzip(),
   tar.extract({ onentry(entry) { ... } })
 );
 ```
+
 Each `entry` is processed **as it’s read** — no full buffering.
 
 #### Stream Bridge
+
 ```js
 const queue = createAsyncQueue();
 await extractDesignSystemDocs({ onFileStream: q.push });
 await streamComponentDocs(queue);
 ```
+
 Manages concurrency and backpressure.
 
 #### Stream Consumer
+
 ```js
 await pipeline(fileStream, fs.createWriteStream(destFile));
 ```
+
 Backpressure-safe, cleans up on error.
 
 #### Cache Layer
+
 ```
 target/.cache/ods-docs/
 ├── ods-docs-meta.json
 └── ods-docs-files.json
 ```
+
 TTL: 7 days — fully reusable offline.
 
 ---
 
 ## 🧱 3. Codebase Layout
+
 ```
 manager-muk-cli/
 ├─ src/
@@ -188,32 +207,35 @@ manager-muk-cli/
 
 ## 🧠 4. Design Principles
 
-| Principle | Description |
-|------------|--------------|
-| **Streaming-first** | All I/O ops use Node streams |
-| **Memory-safe** | Constant memory footprint |
-| **Composable** | Modular, small functions |
-| **Idempotent** | Deterministic results |
-| **Offline-safe** | Cache-first retry |
-| **Verbose logging** | Emoji logs for visibility |
-| **Configurable** | Rewrite rules in `muk-config.js` |
+| Principle           | Description                      |
+| ------------------- | -------------------------------- |
+| **Streaming-first** | All I/O ops use Node streams     |
+| **Memory-safe**     | Constant memory footprint        |
+| **Composable**      | Modular, small functions         |
+| **Idempotent**      | Deterministic results            |
+| **Offline-safe**    | Cache-first retry                |
+| **Verbose logging** | Emoji logs for visibility        |
+| **Configurable**    | Rewrite rules in `muk-config.js` |
 
 ---
 
 ## ✅ 5. Advantages
-* 🔁 Auto-synced ODS documentation and base-docs
-* ⚡ Cached and resumable (7-day TTL)
-* 🧩 Full parity with ODS React components
-* 🧠 Low-memory async pipeline
-* 🧱 Modular, testable, CI-ready
-* 🔧 Configurable rewriting rules
+
+- 🔁 Auto-synced ODS documentation and base-docs
+- ⚡ Cached and resumable (7-day TTL)
+- 🧩 Full parity with ODS React components
+- 🧠 Low-memory async pipeline
+- 🧱 Modular, testable, CI-ready
+- 🔧 Configurable rewriting rules
 
 ---
 
 ## 🧩 6. Cache Troubleshooting
+
 ```bash
 rm -rf packages/manager-tools/manager-muk-cli/target/.cache/ods-docs
 ```
+
 Rebuilds clean cache on rerun.
 
 ---
@@ -240,4 +262,5 @@ export const MUK_IMPORT_REWRITE_RULES = [
 ---
 
 ## 🪪 8. License
+
 BSD-3-Clause © OVH SAS
@@ -59,7 +59,6 @@
     "@ovh-ux/manager-vite-config": "^0.13.3",
     "@ovh-ux/manager-static-analysis-kit": "*",
     "@ovh-ux/manager-tests-setup": "^0.2.0",
-    "@ovhcloud/ods-components": "^18.6.2",
     "@ovhcloud/ods-react": "^19.0.1",
     "@ovhcloud/ods-themes": "^19.0.1",
     "@types/lodash.isdate": "^4.0.9",
@@ -106,7 +105,6 @@
     "@ovh-ux/manager-core-api": "^0.10.0",
     "@ovh-ux/manager-core-utils": "*",
     "@ovh-ux/manager-react-shell-client": "^0.9.1",
-    "@ovhcloud/ods-components": "^18.6.2",
     "@ovhcloud/ods-react": "^19.1.0",
     "@ovhcloud/ods-themes": "^19.0.1",
     "date-fns": "~4.1.0",

@@ -14,7 +14,7 @@ import { vi } from 'vitest';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import ActionMenuTransFR from './src/components/action-menu/translations/Messages_fr_FR.json';
 import DatagridTransFR from './src/components/datagrid/translations/Messages_fr_FR.json';
-import FiltersransFR from './src/components/filters/translations/Messages_fr_FR.json';
+import FiltersTransFR from './src/components/filters/translations/Messages_fr_FR.json';
 
 i18n.use(initReactI18next).init({
   fallbackLng: 'fr_FR',
@@ -30,7 +30,7 @@ i18n.use(initReactI18next).init({
         ...DatagridTransFR,
       },
       filterAdd: {
-        ...FiltersransFR,
+        ...FiltersTransFR,
       },
     },
   },

@@ -1,7 +1,7 @@
 import { vi, vitest } from 'vitest';
-import { OdsText } from '@ovhcloud/ods-components/react';
 import { fireEvent, screen, act } from '@testing-library/react';
 import { render } from '@/setupTest';
+import { Text } from '../../text';
 import { OnboardingLayout } from '../index';
 import placeholderSrc from '../../../../public/assets/placeholder.png';
 import { useAuthorizationIam } from '../../../hooks/iam';
@@ -38,9 +38,9 @@ describe('specs:onboarding', () => {
         <OnboardingLayout
           title={customTitle}
           description={
-            <OdsText preset="paragraph" className="text-center">
+            <Text preset="paragraph" className="text-center">
               {descriptionText}
-            </OdsText>
+            </Text>
           }
         />,
       );

@@ -1,6 +1,10 @@
 import { FC } from 'react';
-import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { Icon, ICON_NAME } from '@ovhcloud/ods-react';
+import {
+  Icon,
+  ICON_NAME,
+  BUTTON_SIZE,
+  BUTTON_VARIANT,
+} from '@ovhcloud/ods-react';
 import { Button } from '../../button';
 import { OnboardingLayoutButtonProps } from './OnboardingLayoutButton.type';
 
@@ -24,7 +28,7 @@ const OnboardingLayoutButton: FC<OnboardingLayoutButtonProps> = ({
       {orderButtonLabel && (onOrderButtonClick || orderHref) && (
         <Button
           className="[&::part(button)]:w-full sm:w-auto"
-          size={ODS_BUTTON_SIZE.md}
+          size={BUTTON_SIZE.md}
           onClick={() => {
             onOrderButtonClick?.();
             if (orderHref) {
@@ -40,8 +44,8 @@ const OnboardingLayoutButton: FC<OnboardingLayoutButtonProps> = ({
       {moreInfoButtonLabel && moreInfoHref && (
         <Button
           className="[&::part(button)]:w-full sm:w-auto"
-          size={ODS_BUTTON_SIZE.md}
-          variant={ODS_BUTTON_VARIANT.outline}
+          size={BUTTON_SIZE.md}
+          variant={BUTTON_VARIANT.outline}
           onClick={() => {
             if (!isMoreInfoButtonDisabled) {
               if (moreInfoHref) {

@@ -1,4 +1,4 @@
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { ICON_NAME } from '@ovhcloud/ods-react';
 
 export type OnboardingLayoutButtonProps = {
   orderButtonLabel?: string;
@@ -11,7 +11,7 @@ export type OnboardingLayoutButtonProps = {
     displayTooltip?: boolean;
   };
   moreInfoHref?: string;
-  moreInfoButtonIcon?: ODS_ICON_NAME;
+  moreInfoButtonIcon?: ICON_NAME;
   moreInfoButtonLabel?: string;
   isMoreInfoButtonDisabled?: boolean;
 };
@@ -1,6 +1,6 @@
 import { useEffect, FC } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
+import { TEXT_PRESET } from '@ovhcloud/ods-react';
 import { useOrderContext } from '../Order.context';
 import { Link, LinkType } from '../../Link';
 import { Button } from '../../button';
@@ -31,10 +31,10 @@ export const OrderSummary: FC<OrderSummaryProps> = ({
 
   return (
     <section className="flex flex-col gap-4">
-      <Text preset={ODS_TEXT_PRESET.heading2} data-testid="order-summary-title">
+      <Text preset={TEXT_PRESET.heading2} data-testid="order-summary-title">
         {t('order_summary_order_initiated_title', { product })}
       </Text>
-      <Text preset={ODS_TEXT_PRESET.paragraph}>
+      <Text preset={TEXT_PRESET.paragraph}>
         <Trans
           t={t}
           i18nKey="order_summary_order_initiated_subtitle"
@@ -51,7 +51,7 @@ export const OrderSummary: FC<OrderSummaryProps> = ({
           }}
         />
       </Text>
-      <Text preset={ODS_TEXT_PRESET.paragraph}>
+      <Text preset={TEXT_PRESET.paragraph}>
         {t('order_summary_order_initiated_info', { product })}
       </Text>
       <Button

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { OdsCard } from '@ovhcloud/ods-components/react';
+import { Card } from '@ovhcloud/ods-react';
 import { clsx } from 'clsx';
 import isEqual from 'lodash.isequal';
 import { hashCode } from '../../utils';
@@ -107,7 +107,7 @@ export const TilesInputComponent = <T, S>({
 
               return (
                 <li className="w-full px-1" key={hashCode(key)}>
-                  <OdsCard
+                  <Card
                     onClick={() =>
                       is.stack.singleton(key)
                         ? set.value(stackItem[0] as T)
@@ -122,13 +122,13 @@ export const TilesInputComponent = <T, S>({
                     {is.stack.singleton(key)
                       ? label(stackItem[0] as T)
                       : key !== undefined && stack?.label(key, stackItem)}
-                  </OdsCard>
+                  </Card>
                 </li>
               );
             })
           : items.map((item: T) => (
               <li className="w-full px-1" key={hashCode(item)}>
-                <OdsCard
+                <Card
                   onClick={() => set.value(item)}
                   className={`${clsx(
                     isEqual(value, item)
@@ -137,7 +137,7 @@ export const TilesInputComponent = <T, S>({
                   )} w-full px-[24px] py-[16px]`}
                 >
                   {label(item)}
-                </OdsCard>
+                </Card>
               </li>
             ))}
       </ul>

@@ -66,8 +66,6 @@ export default defineConfig({
         'zustand',
         '@ovhcloud/ods-common-core',
         '@ovhcloud/ods-common-theming',
-        '@ovhcloud/ods-components',
-        '@ovhcloud/ods-components/react',
         '@ovhcloud/ods-theme-blue-jeans',
         '@ovhcloud/ods-react',
       ],

@@ -10530,13 +10530,6 @@
   dependencies:
     "@tanstack/virtual-core" "3.2.0"
 
-"@tanstack/react-virtual@^3.10.0":
-  version "3.13.12"
-  resolved "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz#d372dc2783739cc04ec1a728ca8203937687a819"
-  integrity sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==
-  dependencies:
-    "@tanstack/virtual-core" "3.13.12"
-
 "@tanstack/react-virtual@^3.10.9":
   version "3.10.9"
   resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz#40606b6dd8aba8e977f576d8f7df07f69ca63eea"
@@ -10564,11 +10557,6 @@
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz#55710c92b311fdaa8d8c66682a0dbdd684bc77c4"
   integrity sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==
 
-"@tanstack/[email protected]":
-  version "3.13.12"
-  resolved "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
-  integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
-
 "@tanstack/[email protected]":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz#874d36135e4badce2719e7bdc556ce240cbaff14"