From 48019d1e174f7168a8f43234ddc1dfebc790a6eb Mon Sep 17 00:00:00 2001 From: Alex Boungnaseng Date: Fri, 17 Oct 2025 11:55:00 +0200 Subject: [PATCH] feat(muk): delete import of ods 18 ref: #MANAGER-20065 Signed-off-by: Alex Boungnaseng --- .../manager-tools/manager-muk-cli/README.md | 67 +++++++++++++------ packages/manager-ui-kit/package.json | 2 - packages/manager-ui-kit/setupTest.tsx | 4 +- .../__tests__/OnboardingLayout.spec.tsx | 6 +- .../OnboardingLayoutButton.component.tsx | 14 ++-- .../OnboardingLayoutButton.type.ts | 4 +- .../order-summary/OrderSummary.component.tsx | 8 +-- .../tiles-input/TilesInput.component.tsx | 10 +-- packages/manager-ui-kit/vite.config.mts | 2 - yarn.lock | 12 ---- 10 files changed, 70 insertions(+), 59 deletions(-) diff --git a/packages/manager-tools/manager-muk-cli/README.md b/packages/manager-tools/manager-muk-cli/README.md index 06ee1a3aa8d7..6d9accf4605c 100644 --- a/packages/manager-tools/manager-muk-cli/README.md +++ b/packages/manager-tools/manager-muk-cli/README.md @@ -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,7 +149,9 @@ GitHub tarball (.tar.gz) ``` ### 2.2 Core Streaming Functions + #### Stream Extraction + ```js pipeline( https.get(url), @@ -148,33 +159,41 @@ pipeline( 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 diff --git a/packages/manager-ui-kit/package.json b/packages/manager-ui-kit/package.json index cd19234e59ee..3eeef2a46cfa 100644 --- a/packages/manager-ui-kit/package.json +++ b/packages/manager-ui-kit/package.json @@ -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", diff --git a/packages/manager-ui-kit/setupTest.tsx b/packages/manager-ui-kit/setupTest.tsx index d5806adc66bc..c1d54e2fc8f3 100644 --- a/packages/manager-ui-kit/setupTest.tsx +++ b/packages/manager-ui-kit/setupTest.tsx @@ -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, }, }, }, diff --git a/packages/manager-ui-kit/src/components/onboarding-layout/__tests__/OnboardingLayout.spec.tsx b/packages/manager-ui-kit/src/components/onboarding-layout/__tests__/OnboardingLayout.spec.tsx index 66d6c51a93d4..4d6f32d5dad2 100644 --- a/packages/manager-ui-kit/src/components/onboarding-layout/__tests__/OnboardingLayout.spec.tsx +++ b/packages/manager-ui-kit/src/components/onboarding-layout/__tests__/OnboardingLayout.spec.tsx @@ -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', () => { + {descriptionText} - + } />, ); diff --git a/packages/manager-ui-kit/src/components/onboarding-layout/onboarding-layout-button/OnboardingLayoutButton.component.tsx b/packages/manager-ui-kit/src/components/onboarding-layout/onboarding-layout-button/OnboardingLayoutButton.component.tsx index d80643a3ada9..be1c58b6b180 100644 --- a/packages/manager-ui-kit/src/components/onboarding-layout/onboarding-layout-button/OnboardingLayoutButton.component.tsx +++ b/packages/manager-ui-kit/src/components/onboarding-layout/onboarding-layout-button/OnboardingLayoutButton.component.tsx @@ -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 = ({ {orderButtonLabel && (onOrderButtonClick || orderHref) && (