-
- {t('common_iam_actions_message')}
-
-
-
- {children}
-
-
-
-
-
- );
-};
diff --git a/packages/manager-react-components/src/components/ManagerLink/ManagerLink.spec.tsx b/packages/manager-react-components/src/components/ManagerLink/ManagerLink.spec.tsx
deleted file mode 100644
index 5ea7698d4fa8..000000000000
--- a/packages/manager-react-components/src/components/ManagerLink/ManagerLink.spec.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import AxiosMockAdapter from 'axios-mock-adapter';
-import apiClient from '@ovh-ux/manager-core-api';
-import { waitFor } from '@testing-library/react';
-import { render } from '../../utils/test.provider';
-import { ManagerLink } from './ManagerLink.component';
-
-const PROPS_LINK = {
- label: 'Link',
- href: 'https://www.example.com',
-};
-
-const mockAdapter = new AxiosMockAdapter(apiClient.v2);
-
-describe('Manager Links component', () => {
- it('renders a link correctly', () => {
- const { container } = render({t('iam_actions_message')}
- foo-manager-text
,
- });
- expect(screen.getAllByText('foo-manager-text')).not.toBeNull();
- });
- });
- describe('should display error manager text', () => {
- it('with false value for useAuthorizationIam', () => {
- mockedHook.mockReturnValue({
- isAuthorized: false,
- isLoading: true,
- isFetched: true,
- });
- renderComponent({
- urn: 'urn:v9:eu:resource:manager-react-components:vrz-a878-dsflkds-fdsfsd',
- iamActions: [
- 'manager-react-components:apiovh:manager-react-components/get-display',
- ],
- children: foo-manager-text
,
- });
- expect(screen.findByText(fr_FR.iam_hidden_text)).not.toBeNull();
- });
- });
-});
diff --git a/packages/manager-react-components/src/components/ManagerText/ManagerText.tsx b/packages/manager-react-components/src/components/ManagerText/ManagerText.tsx
deleted file mode 100644
index 1a6e5b9e869e..000000000000
--- a/packages/manager-react-components/src/components/ManagerText/ManagerText.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
-import { JSX } from '@ovhcloud/ods-components';
-import { OdsText, OdsTooltip } from '@ovhcloud/ods-components/react';
-import { StyleReactProps } from '@ovhcloud/ods-components/react/dist/types/react-component-lib/interfaces';
-import { useTranslation } from 'react-i18next';
-import './translations';
-
-import { useAuthorizationIam } from '../../hooks/iam';
-
-export type ManagerTextProps = PropsWithChildren<{
- iamActions?: string[];
- urn?: string;
-}>;
-
-export const ManagerText = ({
- children,
- iamActions,
- urn,
- ...restProps
-}: ManagerTextProps &
- Partial<
- JSX.OdsText &
- Omit
-
- {t('iam_hidden_text').toUpperCase()}
-
-
- {t('common_iam_get_message')}
-
-
- {heading}
-
- {Number.isInteger(step?.current) && Number.isInteger(step?.total) && (
-
- {t('stepPlaceholder', {
- current: step.current,
- total: step.total,
- })}
-
- )}
-
- )}
- {isLoading ? (
-
-
- ) : (
- <>
- {children}
- {secondaryLabel && (
- Example of content
,
-};
-
-export const actions = {
- primaryLabel: 'Confirm',
- isPrimaryButtonLoading: false,
- isPrimaryButtonDisabled: false,
- onPrimaryButtonClick: () => 'onPrimaryButtonClick',
- secondaryLabel: 'Cancel',
- isSecondaryButtonDisabled: false,
- isSecondaryButtonLoading: false,
- onSecondaryButtonClick: () => 'onSecondaryButtonClick',
- onDismiss: () => 'onDismiss',
-};
-
-export const type = {
- type: 'warning',
-};
-
-export const loading = {
- isLoading: true,
-};
-
-export const other = {
- isOpen: true,
-};
diff --git a/packages/manager-react-components/src/components/Modal/Modal.spec.tsx b/packages/manager-react-components/src/components/Modal/Modal.spec.tsx
deleted file mode 100644
index 38c8d8992154..000000000000
--- a/packages/manager-react-components/src/components/Modal/Modal.spec.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { vi } from 'vitest';
-import { ODS_MODAL_COLOR } from '@ovhcloud/ods-components';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { Modal } from './Modal.component';
-import {
- basic as basicMock,
- actions as actionsMock,
- loading as loadingMock,
-} from './Modal.mock';
-
-vi.mock('react-i18next', () => ({
- useTranslation: () => ({
- t: (key: string) => key,
- }),
-}));
-
-it('should display the basic modal', () => {
- const { getByTestId } = render(
-
-
-
- {onClick && (
-
-
- {isChecked ? (
-
-
-
- {order}
-
-
- )}
-
-
-
-
- {isOpen && (
- <>
- {subtitle &&
- {title}
- {skip?.hint &&
- {edit?.action && isLocked && (
- {skip.hint}
}
-
- {
- if (!edit.isDisabled) {
- edit.action(id);
- }
- }}
- />
-
- )}
- {subtitle}
}
-
-
- {!isLocked && (
-
- {next?.action && !isLocked && (
-
- )}
-
- )}
-
- {typeof next.label === 'string' ? (
- {
- next.action(id);
- }}
- className="w-fit"
- isDisabled={next.isDisabled || undefined}
- isLoading={next.isLoading || false}
- />
- ) : (
- next.label
- )}
-
- )}
- {skip?.action && (
-
- {
- skip.action(id);
- }}
- className="w-fit"
- isDisabled={skip.isDisabled || undefined}
- />
-
- )}
- {`title ${item}`}
,
- contentElement = (item) => {`content ${item}`}
,
- mobileBreakPoint,
- className,
- onChange,
-}: TProps-
- {state.items.map((item) => (
-
- - - - ))} - -
- {contentElement(state.selectedItem)}
-
-
-
- {Object.is(state.selectedItem, item) && (
-
- ))}
- {contentElement(item)}
- )}
- - {children}
{children}
-
- {title && (
- <>
-
-
- {item.value}
-
- {index < items.length - 1 &&
- ))}
-
- - {title} -
--
-
-
- {label && (
- -- )} -
{label} - {labelTooltip &&} -
- - {children} -
-
- );
-};
-
-export default Headers;
diff --git a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
deleted file mode 100644
index 659d04004192..000000000000
--- a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { vitest, vi } from 'vitest';
-import { waitFor, screen } from '@testing-library/react';
-import { render } from '../../../utils/test.provider';
-import { Headers } from './headers.component';
-import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
-import { useAuthorizationIam } from '../../../hooks/iam';
-import { GuideButton, ActionMenu } from '../../navigation';
-
-export const header = () => (
-
- {subtitle} }
- {description && (
-
- {description}
-
- )}
-
- {(headerButton || changelogButton) && (
-
- {title && {title} }
- {badge && (
-
- {subtitle &&
- {changelogButton}
- {headerButton}
-
- )}
-
-
- )}
- {filters?.filters.length > 0 && (
-
- {topbar && <>{topbar}}
-
-
-
-
- {isSearchable && (
-
- )}
- {filtersColumns?.length > 0 && (
-
-
-
- {
- filters.add({
- ...addedFilter,
- label: column.label,
- });
- filterPopoverRef.current?.hide();
- }}
- />
-
-
- )}
- {hasVisibilityFeature && (
- 0 ? 'ml-[10px]' : ''}>
-
- )}
-
-
- )}
-
- );
-};
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-topbar.spec.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-topbar.spec.tsx
deleted file mode 100644
index 083f667cc669..000000000000
--- a/packages/manager-react-components/src/components/datagrid/datagrid-topbar.spec.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { vitest } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { FilterCategories } from '@ovh-ux/manager-core-api';
-import { FilterProps } from './datagrid.component';
-import { DatagridTopbar } from './datagrid-topbar.component';
-
-vitest.mock('react-i18next', async () => {
- const originalModule = await vitest.importActual('react-i18next');
-
- return {
- ...originalModule,
- useTranslation: () => {
- return {
- t: (str: string) => str,
- i18n: {
- changeLanguage: () => new Promise(() => {}),
- },
- };
- },
- };
-});
-
-vitest.mock('@ovhcloud/ods-components/react', async () => {
- const originalModule = await vitest.importActual(
- '@ovhcloud/ods-components/react',
- );
-
- return {
- ...originalModule,
- OdsCheckbox: (column) => (
-
- ),
- };
-});
-
-const filtersColumns = [
- {
- id: 'ip',
- label: 'ip',
- comparators: FilterCategories.String,
- },
- {
- id: 'os',
- label: 'os',
- comparators: FilterCategories.String,
- },
- {
- id: 'name',
- label: 'name',
- comparators: FilterCategories.String,
- },
-];
-
-const filters = {
- filters: [
- {
- key: 'customName',
- comparator: 'includes',
- value: 'coucou',
- label: 'customName',
- },
- ],
- add: null,
- remove: null,
-} as FilterProps;
-
-const search = {
- searchInput: '',
- setSearchInput: () => {},
- onSearch: () => {},
-};
-
-describe('datagrid topbar', () => {
- it('should display the search bar component', async () => {
- render(CTA button
;
- render(
- {
- if (detail.current !== detail.oldCurrent) {
- onPaginationChange({
- ...pagination,
- pageIndex: detail.current - 1,
- pageSize: detail.itemPerPage,
- });
- }
- }}
- onOdsItemPerPageChange={({ detail }) => {
- if (detail.current !== pagination.pageSize)
- onPaginationChange({
- ...pagination,
- pageSize: detail.current,
- pageIndex: 0,
- });
- }}
- >
-
- {t('common_pagination_of')}
-
-
- {t('common_pagination_results')}
-
-
- ) : (
- <>
- )}
- {hasNextPage ? (
-
- );
-};
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.constants.ts b/packages/manager-react-components/src/components/datagrid/datagrid.constants.ts
deleted file mode 100644
index 89587becb640..000000000000
--- a/packages/manager-react-components/src/components/datagrid/datagrid.constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { PaginationState } from '@tanstack/react-table';
-
-/* List of allowed page sizes */
-export const PAGE_SIZES = [10, 25, 50, 100, 300];
-
-export const DEFAULT_PAGINATION: PaginationState = {
- pageIndex: 0,
- pageSize: PAGE_SIZES[0],
-};
-
-export const defaultNumberOfLoadingRows = 5;
-
-export const INTERNAL_COLUMNS = ['expander', 'actions'];
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
deleted file mode 100644
index 420ca197d8b5..000000000000
--- a/packages/manager-react-components/src/components/datagrid/datagrid.mock.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { FilterCategories } from '@ovh-ux/manager-core-api';
-import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { DataGridTextCell } from './text-cell.component';
-import { ActionMenu } from '../navigation';
-import { DatagridColumn, DatagridColumnTypes } from './datagrid.component';
-import { IamObject } from '../../hooks';
-
-export interface Item {
- label: string;
- price: number;
- status: string;
- anotherStatus: string;
- iam: IamObject;
-}
-
-export const columns = [
- {
- id: 'label',
- cell: (item: Item) => {
- return
-
-
- {!hideHeader && (
-
- {table.getHeaderGroups().map((headerGroup) => (
-
-
-
- {!onFetchNextPage && items?.length > 0 && pagination ? (
- | {
- headerRefs.current[header.id] = el;
- }}
- className={`${
- contentAlignLeft ? 'text-left pl-4' : 'text-center'
- } h-11 whitespace-nowrap ${
- onSortChange && header.column.getCanSort()
- ? 'cursor-pointer'
- : ''
- }`}
- {...{
- ...(onSortChange && {
- onClick: header.column.getToggleSortingHandler(),
- }),
- }}
- >
- {header.isPlaceholder ? null : (
-
-
- <>
- {flexRender(
- header.column.columnDef.header,
- header.getContext(),
- )}
-
-
-
-
- )}
- |
- ))}
-
|---|
| - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - | - ))} -
| - {renderSubComponent(row, headerRefs)} - | -
|
- |
-
|
- |
- ) : null,
- )}
-
-
- ) : null}
-
- console.log(`Action on ${item.label}`),
- label: `Action on ${item.label}`,
- },
- ]}
- variant={ODS_BUTTON_VARIANT.ghost}
- isCompact
- />
-
- );
- },
- label: '',
- enableHiding: false,
- },
-];
-
-export const columnsSearchAndFilters = [
- {
- id: 'label',
- cell: (item: Item) => {
- return
-
-
- ))}
-
-
- toggleAllColumnsVisible(!isAllColumnsVisible)}
- ariaLabel={t('common_topbar_columns_select_all')}
- isIndeterminate={!isAllColumnsVisible && isSomeColumnsVisible}
- />
-
-
- {eligibleColumns.map((column) => (
-
-
-
-
- );
-};
diff --git a/packages/manager-react-components/src/components/drawer/Drawer.spec.tsx b/packages/manager-react-components/src/components/drawer/Drawer.spec.tsx
deleted file mode 100644
index 482bbd137a3f..000000000000
--- a/packages/manager-react-components/src/components/drawer/Drawer.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { act, render, screen } from '@testing-library/react';
-import { mockedProps } from './DrawerBase.mock';
-import { Drawer } from './Drawer.component';
-
-it('should display a backdrop overlay', async () => {
- const user = userEvent.setup();
- render(
-
-
-
- {isLoading && (
-
- {children}
-
-
- {(primaryButtonLabel || secondaryButtonLabel) && (
-
- )}
-
- )}
-
-
- {!isLoading && (
- {heading}
- )}
-
-
-
- )}
-
- {!isLoading && (
- <>
-
- {children}
-
- )),
- };
-});
-
-export const mockedProps: DrawerBaseProps = {
- heading: 'Drawer heading',
- isOpen: true,
- children: Drawer content
,
- primaryButtonLabel: 'Confirm',
- isPrimaryButtonLoading: false,
- isPrimaryButtonDisabled: false,
- onPrimaryButtonClick: vi.fn(),
- secondaryButtonLabel: 'Cancel',
- isSecondaryButtonDisabled: false,
- isSecondaryButtonLoading: false,
- onSecondaryButtonClick: vi.fn(),
- onDismiss: vi.fn(),
-};
diff --git a/packages/manager-react-components/src/components/drawer/DrawerBase.spec.tsx b/packages/manager-react-components/src/components/drawer/DrawerBase.spec.tsx
deleted file mode 100644
index b43fcb51e656..000000000000
--- a/packages/manager-react-components/src/components/drawer/DrawerBase.spec.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { getOdsButtonByLabel } from '@ovh-ux/manager-core-test-utils';
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { mockedProps } from './DrawerBase.mock';
-import { DrawerBase } from './DrawerBase.component';
-
-it('should display the drawer', async () => {
- const { container } = render(
-
- );
-};
diff --git a/packages/manager-react-components/src/components/drawer/DrawerCollapsible.spec.tsx b/packages/manager-react-components/src/components/drawer/DrawerCollapsible.spec.tsx
deleted file mode 100644
index bc60c8bf34e3..000000000000
--- a/packages/manager-react-components/src/components/drawer/DrawerCollapsible.spec.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { mockedProps } from './DrawerBase.mock';
-import { DrawerCollapsible } from './DrawerCollapsible.component';
-
-it('should display the drawer in its collapsible variant', () => {
- render(
-
- );
-};
-
-export default DrawerHandle;
diff --git a/packages/manager-react-components/src/components/drawer/readme.md b/packages/manager-react-components/src/components/drawer/readme.md
deleted file mode 100644
index ad83405f5437..000000000000
--- a/packages/manager-react-components/src/components/drawer/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Drawer Component
-
-## Current Implementation
-
-The drawer component comes in two variants, accessible via two separate components: `Drawer` and `DrawerCollapsible`.
-
-Both components use the `DrawerBase` component.
-
-- `DrawerBase` should not be exposed to library consumers.
-- `DrawerBase` implements all shared behaviors for the two exported components.
-
-## Where to Add New Features
-
-When adding a feature to the drawer:
-
-- If it is shared by both variants, add it to `DrawerBase`.
-- If it is specific to one component, add it to the relevant component.
-- If it is specific to one component but cannot be implemented outside of `DrawerBase`, add it to `DrawerBase` but only expose the related props in the relevant component.
-- If it diverges too much from the existing variants, consider creating a new one.
diff --git a/packages/manager-react-components/src/components/filters/filter-add.component.tsx b/packages/manager-react-components/src/components/filters/filter-add.component.tsx
deleted file mode 100644
index 11affc282293..000000000000
--- a/packages/manager-react-components/src/components/filters/filter-add.component.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import {
- Filter,
- FilterComparator,
- FilterTypeCategories,
-} from '@ovh-ux/manager-core-api';
-import { ODS_BUTTON_SIZE, ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
-
-import {
- OdsButton,
- OdsDatepicker,
- OdsFormField,
- OdsInput,
- OdsSelect,
-} from '@ovhcloud/ods-components/react';
-import { useTranslation } from 'react-i18next';
-import './translations';
-import { TagsFilterForm } from './tags-filter-form.component';
-
-export type Option = {
- label: string;
- value: string;
-};
-
-export type ColumnFilter = {
- id: string;
- label: string;
- comparators: FilterComparator[];
- type?: FilterTypeCategories;
- options?: Option[];
-};
-
-export type FilterAddProps = {
- columns: ColumnFilter[];
- resourceType?: string;
- onAddFilter: (filter: Filter, column: ColumnFilter) => void;
-};
-
-export function FilterAdd({
- columns,
- onAddFilter,
- resourceType,
-}: Readonly
-
-
-
-
-
- setSelectedId(event.detail.value as string)}
- >
- {columns.map(({ id, label }) => (
-
- ))}
-
-
-
-
-
- {t('common_criteria_adder_column_label')}
-
-
-
-
-
-
- {selectedColumn?.type !== FilterTypeCategories.Tags && (
-
-
- {t('common_criteria_adder_operator_label')}
-
-
- {selectedColumn && (
-
- {
- setSelectedComparator(event.detail.value as FilterComparator);
- }}
- data-testid={`add-operator-${selectedColumn.id}`}
- >
- {selectedColumn.comparators?.map((comp) => (
-
- ))}
-
-
- )}
-
-
-
-
- )}
- {selectedColumn?.type === FilterTypeCategories.Tags && (
-
-
- {t('common_criteria_adder_value_label')}
-
-
- {inputComponent}
-
-
-
- );
-}
diff --git a/packages/manager-react-components/src/components/filters/filter-add.spec.tsx b/packages/manager-react-components/src/components/filters/filter-add.spec.tsx
deleted file mode 100644
index acfecd26e779..000000000000
--- a/packages/manager-react-components/src/components/filters/filter-add.spec.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-import React, { useState } from 'react';
-import { vi, vitest } from 'vitest';
-import { act, fireEvent, waitFor } from '@testing-library/react';
-import { FilterAdd, FilterAddProps } from './filter-add.component';
-import { render } from '../../utils/test.provider';
-
-vi.mock('./tags-filter-form.component', () => {
- return {
- TagsFilterForm: ({ setTagKey }) => {
- setTagKey('tagKey');
- return ;
- },
- };
-});
-
-const renderComponent = (props: FilterAddProps) => {
- return render(
-
- {
- setTagKey(event.detail.value);
- }}
- data-testid="tags-filter-form-key-field"
- >
- {!isTagsError &&
- tags?.map((tag) => (
-
- {tag.key}
-
- ))}
-
- )}
-
-
- {
- setValue(event.detail.value);
- }}
- data-testid="tags-filter-form-value-field"
- >
- {tags
- ?.find((tag) => tag.key === tagKey)
- ?.values?.map((tagValue) => (
-
- {tagValue}
-
- ))}
-
- )}
-
-
- );
-}
diff --git a/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx b/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx
deleted file mode 100644
index 924d80052d48..000000000000
--- a/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @deprecated Use useFormatDate with date fns format instead
- */
-import {
- FormattedDateProps,
- useFormattedDate,
-} from '../../hooks/date/useFormattedDate';
-
-/**
- * @deprecated Use useFormatDate with date fns format instead
- */
-export const FormattedDate = (props: FormattedDateProps) => {
- const formattedDate = useFormattedDate(props);
-
- return <>{formattedDate};
-};
diff --git a/packages/manager-react-components/src/components/guides-header/guides-header-item.component.tsx b/packages/manager-react-components/src/components/guides-header/guides-header-item.component.tsx
deleted file mode 100644
index a8fd98d16c4e..000000000000
--- a/packages/manager-react-components/src/components/guides-header/guides-header-item.component.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { OdsLink } from '@ovhcloud/ods-components/react';
-import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
-import { Guide } from './interface';
-
-interface GuidesHeaderItemProps {
- guide: Guide;
- href: string;
- label: string;
- tracking?: string;
- onClick?: (guide: Guide) => void;
-}
-
-export function GuidesHeaderItem({
- guide,
- href,
- label,
- onClick,
-}: GuidesHeaderItemProps) {
- return (
-
-
- {t('common_criteria_adder_key_label')}
-
-
- {isTagsLoading &&
-
- {t('common_criteria_adder_value_label')}
-
-
- {isTagsLoading &&
- {
- if (onClick) {
- onClick(guide);
- }
- }}
- label={label}
- />
-
- );
-}
diff --git a/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx b/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx
deleted file mode 100644
index 951cd5e0107d..000000000000
--- a/packages/manager-react-components/src/components/guides-header/guides-header.component.spec.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { vitest } from 'vitest';
-import { fireEvent } from '@testing-library/react';
-import { GuidesHeader, GuidesHeaderProps } from './guides-header.component';
-import { render } from '../../utils/test.provider';
-
-const renderComponent = (props: GuidesHeaderProps) => {
- return render(
-
-
-
- );
-};
diff --git a/packages/manager-react-components/src/components/navigation/card/card.component.tsx b/packages/manager-react-components/src/components/navigation/card/card.component.tsx
deleted file mode 100644
index d00b79a6c254..000000000000
--- a/packages/manager-react-components/src/components/navigation/card/card.component.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { OdsBadge, OdsCard } from '@ovhcloud/ods-components/react';
-import { LinkType, Links } from '../../typography';
-import './translations/translations';
-
-export interface IBadge {
- text: string;
-}
-
-export interface ImageDetails {
- src?: string;
- alt?: string;
-}
-
-export interface CardProps {
- href: string;
- isExternalHref?: boolean;
- hrefLabel?: string;
- img?: ImageDetails;
- texts: {
- title: string;
- description?: string;
- category: string;
- };
- badges?: IBadge[];
- hoverable?: boolean;
- onClick?: (event: React.MouseEvent) => void;
- trackingLabel?: string;
-}
-
-export const Card: React.FC-
- {stack
- ? [...state.stacks.keys()].map((key) => (
-
-
-
- is.stack.singleton(key) - ? set.value(state.stacks.get(key)[0]) - : set.selectedStack(key) - } - className={`${clsx( - is.stack.checked(key) - ? state.activeClass - : state.inactiveClass, - )} w-full px-[24px] py-[16px]`} - > - {is.stack.singleton(key) - ? label(state.stacks.get(key)[0]) - : stack?.label(key, state.stacks.get(key))} - -
- ))
- : items.map((item: T) => (
- -
-
set.value(item)} - className={`${clsx( - isEqual(value, item) - ? state.activeClass - : state.inactiveClass, - )} w-full px-[24px] py-[16px]`} - > - {label(item)} - -
- ))}
-
-
- {stack.title(
- state.selectedStack,
- state.stacks.get(state.selectedStack),
- )}
-
-
-
- {img?.src && (
- 
- )}
-
-
-
- {category}
-
-
- {badges?.map((b) => (
-
-
-
- {title}
-
- {description && (
- - {description} -
- )} -
-
-
- {items.map(({ id: itemId, ...item }) => (
-
- ))}
-
-
-
- trackClick({
- actionType: 'navigation',
- actions: [
- ...chapters,
- ...(prefixes || CHANGELOG_PREFIXES),
- GO_TO(key),
- ],
- })
- }
- />
-
- ))}
-
- {items.map(({ id, onClick, ...rest }) => (
-
- Order steps
-
- {
- onConfirm();
- setIsOrderInitialized(true);
- }}
- icon={ODS_ICON_NAME.externalLink}
- iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.left}
- label={t('order_configuration_order')}
- data-testid="cta-order-configuration-order"
- />
-
-
- );
-};
diff --git a/packages/manager-react-components/src/components/order/OrderSummary.component.tsx b/packages/manager-react-components/src/components/order/OrderSummary.component.tsx
deleted file mode 100644
index c4b21084fe37..000000000000
--- a/packages/manager-react-components/src/components/order/OrderSummary.component.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
- ODS_BUTTON_COLOR,
- ODS_BUTTON_SIZE,
- ODS_TEXT_PRESET,
-} from '@ovhcloud/ods-components';
-import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
-import { Trans, useTranslation } from 'react-i18next';
-import React, { useEffect } from 'react';
-import { useOrderContext } from './Order.context';
-import { Links, LinkType } from '../typography';
-
-export type TOrderSummary = {
- onFinish: () => void;
- onClickLink?: () => void;
- orderLink: string;
- productName?: string;
-};
-
-export const OrderSummary: React.FC
- {
- onFinish();
- setIsOrderInitialized(false);
- }}
- label={t('order_summary_finish')}
- />
-
- );
-};
diff --git a/packages/manager-react-components/src/components/order/index.ts b/packages/manager-react-components/src/components/order/index.ts
deleted file mode 100644
index d86520124e6f..000000000000
--- a/packages/manager-react-components/src/components/order/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Order.component';
-export { useOrderContext } from './Order.context';
diff --git a/packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json
deleted file mode 100644
index 3e2e69d9b9e2..000000000000
--- a/packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "order_configuration_cancel": "Annuler",
- "order_configuration_order": "Commander",
- "order_summary_finish": "Terminer",
- "order_summary_product_default_label": "service",
- "order_summary_order_initiated_title": "Commande de votre {{product}} initiée",
- "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le
-
- {t('order_summary_order_initiated_title', { product })}
-
-
-
-
- {t('order_summary_order_initiated_info', { product })}
-
-
- Test Child
- Test Child
- Test Child
- Test Child
-
- {truncate ? (
- {
- tagRefs.current[index] = el!;
- }}
- color={color}
- label={tag}
- />
- );
- })
- )}
-
- {visibleCount < filteredTags.length && (
- {
- if (onClick) onClick();
- e.preventDefault();
- }}
- icon={ODS_ICON_NAME.chevronDoubleRight}
- />
- )}
-
- )
- );
-};
diff --git a/packages/manager-react-components/src/components/tags-list/tags-list.spec.tsx b/packages/manager-react-components/src/components/tags-list/tags-list.spec.tsx
deleted file mode 100644
index 0f99b76d02fc..000000000000
--- a/packages/manager-react-components/src/components/tags-list/tags-list.spec.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import { describe, it, expect, beforeAll } from 'vitest';
-import { TagsList } from './tags-list.component';
-
-describe('TagsList', () => {
- const tags = {
- tag1: 'value1',
- tag2: 'value2',
- tag3: 'value3',
- tag4: 'value4',
- tag5: 'value5',
- };
- let resizeCallback: ResizeObserverCallback;
- let originalOffsetWidth: any;
- let originalOffsetHeight: any;
- let originBoundingClientRect: any;
-
- beforeAll(() => {
- originalOffsetWidth = Object.getOwnPropertyDescriptor(
- HTMLElement.prototype,
- 'offsetWidth',
- );
- originalOffsetHeight = Object.getOwnPropertyDescriptor(
- HTMLElement.prototype,
- 'offsetHeight',
- );
-
- originBoundingClientRect = Object.getOwnPropertyDescriptor(
- HTMLElement.prototype,
- 'getBoundingClientRect',
- );
-
- global.ResizeObserver = class {
- constructor(callback: ResizeObserverCallback) {
- resizeCallback = callback;
- }
-
- // eslint-disable-next-line class-methods-use-this
- observe() {}
-
- // eslint-disable-next-line class-methods-use-this
- unobserve() {}
-
- // eslint-disable-next-line class-methods-use-this
- disconnect() {}
- } as any;
- });
-
- afterEach(() => {
- if (originalOffsetWidth) {
- Object.defineProperty(
- HTMLElement.prototype,
- 'offsetWidth',
- originalOffsetWidth,
- );
- }
- if (originalOffsetHeight) {
- Object.defineProperty(
- HTMLElement.prototype,
- 'offsetHeight',
- originalOffsetHeight,
- );
- }
- if (originBoundingClientRect) {
- Object.defineProperty(
- HTMLElement.prototype,
- 'getBoundingClientRect',
- originalOffsetHeight,
- );
- }
- });
-
- it('renders all badges when container is large enough (no truncate)', () => {
- const { container } = render(
- {
- setSearch(event.detail.value as string);
- }}
- />
-
-
-
- {results && (
-
-
- {isEmptyTags && {t('tags_tile_empty')}}
- {!isEmptyTags && (
-
- {breadcrumb}
- {header && (
-
-
- )}
- {backLinkLabel && (onClickReturn || hrefPrevious) && (
-
-
- )}
- {description && (
- {message}
}
- {subtitle && {tabs}
}
- {children}
- | Nom | -Description | -Status | -
|---|---|---|
| {element.name} | -{element.description} | -
- |
-
-
- Résilier serviceType ?
-
-
- La résiliation de votre service effacera définitivement toutes les données correspondantes. Souhaitez-vous procéder à la résiliation de votre service ?
-
-
-
-
-
-
- {t('deleteModalHeadline', {
- serviceType: serviceTypeName || t('deleteModalHeadlineService'),
- })}
-
- {!!error && (
-
- {t('deleteModalError', { error })}
-
- )}
-
- {t('deleteModalDescription')}
-
- {children}
-
-
- {
- onConfirmDelete();
- })}
- color={ODS_BUTTON_COLOR.critical}
- label={t('deleteModalDeleteButton')}
- />
-
-
- 
-
- );
-};
diff --git a/packages/manager-react-components/src/components/templates/error/error.scss b/packages/manager-react-components/src/components/templates/error/error.scss
deleted file mode 100644
index 27e86b5453ad..000000000000
--- a/packages/manager-react-components/src/components/templates/error/error.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.error-template-actions::part(button) {
- width: 100%;
- margin-bottom: 10px;
-}
diff --git a/packages/manager-react-components/src/components/templates/error/error.spec.tsx b/packages/manager-react-components/src/components/templates/error/error.spec.tsx
deleted file mode 100644
index e6898eb3cca3..000000000000
--- a/packages/manager-react-components/src/components/templates/error/error.spec.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { waitFor } from '@testing-library/react';
-import { render } from '../../../utils/test.provider';
-import { ErrorBanner } from './error.component';
-import userEvent from '@testing-library/user-event';
-import tradFr from './translations/Messages_fr_FR.json';
-import { ErrorObject, ErrorBannerProps } from './error.types';
-import { vitest } from 'vitest';
-
-export const defaultProps: ErrorBannerProps = {
- error: {
- headers: { 'x-ovh-queryid': '123456789' },
- data: { message: "Votre requête n'a pas abouti" },
- status: 404,
- },
-};
-
-const setupSpecTest = async (
- customProps?: Partial
-
- {t('manager_error_page_title')}
-
-
-
-
-
-
-
-
- {t('manager_error_page_default')}
-
- {error?.data?.message && {error.data.message}}
-
-
- {error?.headers?.['x-ovh-queryid'] && (
-
- - {t('manager_error_page_detail_code')} - {error.headers['x-ovh-queryid']} -
- )} -
-
-
-
-
-
- {children}
-);
-
-export const DashboardGridLayout: React.FC
-
-);
diff --git a/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx b/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
deleted file mode 100644
index dfaaac0dbda8..000000000000
--- a/packages/manager-react-components/src/components/templates/onboarding/onboarding.component.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import {
- ODS_BUTTON_ICON_ALIGNMENT,
- ODS_BUTTON_SIZE,
- ODS_BUTTON_VARIANT,
- ODS_ICON_NAME,
- ODS_TEXT_PRESET,
-} from '@ovhcloud/ods-components';
-import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
-import { ManagerButton } from '../../ManagerButton/ManagerButton';
-import React, { PropsWithChildren } from 'react';
-
-import placeholderSrc from '../../../../public/assets/placeholder.png';
-
-type OnboardingLayoutButtonProps = {
- orderButtonLabel?: string;
- orderHref?: string;
- onOrderButtonClick?: () => void;
- isActionDisabled?: boolean;
- orderIam?: {
- urn: string;
- iamActions: string[];
- displayTooltip?: boolean;
- };
- moreInfoHref?: string;
- moreInfoButtonIcon?: ODS_ICON_NAME;
- moreInfoButtonLabel?: string;
- /**
- * @deprecated use onMoreInfoButtonClick
- */
- onmoreInfoButtonClick?: () => void;
- onMoreInfoButtonClick?: () => void;
- isMoreInfoButtonDisabled?: boolean;
-};
-
-export type OnboardingLayoutProps = OnboardingLayoutButtonProps &
- PropsWithChildren<{
- hideHeadingSection?: boolean;
- title: string;
- description?: React.ReactNode;
- img?: React.ComponentProps<'img'>;
- }>;
-
-const OnboardingLayoutButton: React.FC
- {children}
-
-
- {orderButtonLabel && (onOrderButtonClick || orderHref) && (
- {
- onOrderButtonClick?.();
- if (orderHref) {
- window.open(orderHref, '_blank');
- }
- }}
- label={orderButtonLabel}
- isDisabled={isActionDisabled}
- {...(orderIam || {})}
- />
- )}
- {moreInfoButtonLabel &&
- (onmoreInfoButtonClick || onMoreInfoButtonClick || moreInfoHref) && (
- {
- if (!isMoreInfoButtonDisabled) {
- // TODO: to delete on next major version
- onmoreInfoButtonClick?.();
- onMoreInfoButtonClick?.();
- if (moreInfoHref) {
- window.open(moreInfoHref, '_blank');
- }
- }
- }}
- label={moreInfoButtonLabel}
- icon={moreInfoButtonIcon}
- iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
- isDisabled={isMoreInfoButtonDisabled}
- />
- )}
-
- );
-};
-
-export const OnboardingLayout: React.FC
- {!hideHeadingSection && (
-
- {(img?.src || placeholderSrc) && (
-
- {title}
-
- {description}
-
- )}
- {children && (
-
- )}
-
- );
-};
diff --git a/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx b/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx
deleted file mode 100644
index a46c2dfdd7d6..000000000000
--- a/packages/manager-react-components/src/components/templates/onboarding/onboarding.spec.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React from 'react';
-import { vi, vitest } from 'vitest';
-import { waitFor, fireEvent } from '@testing-library/react';
-import { render } from '../../../utils/test.provider';
-import {
- OnboardingLayout,
- OnboardingLayoutProps,
-} from './onboarding.component';
-import { OdsText } from '@ovhcloud/ods-components/react';
-import placeholderSrc from './../../../../public/assets/placeholder.png';
-import { Card } from '../../navigation/card/card.component';
-import { useAuthorizationIam } from '../../../hooks/iam';
-import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
-
-const setupSpecTest = async (props: OnboardingLayoutProps) =>
- waitFor(() => render(
- 
-
- )}
-
- {headline}
- {!!error && (
-
- {t('updateModalError', { error })}
-
- )}
- {description && (
- {description}
- )}
-
-
- setDisplayName(e.detail.value as string)}
- />
- {patternMessage && (
-
- {patternMessage}
-
- )}
-
-
-
- updateDisplayName(displayName))}
- label={confirmButtonLabel || t('updateModalConfirmButton')}
- />
-
-
- {children}
-
- );
-};
-
-/**
- * @deprecated Use `Text` component from `@ovhcloud/ods-react` with the preset `heading-3` instead.
- */
-export const Subtitle: React.FC<
- React.PropsWithChildren<{
- className?: string;
- }>
-> = ({ children, className = '' }) => {
- return (
-
- {children}
-
- );
-};
-
-export default Title;
diff --git a/packages/manager-react-components/src/enumTypes/playwright.ts b/packages/manager-react-components/src/enumTypes/playwright.ts
deleted file mode 100644
index 2a2a1989655c..000000000000
--- a/packages/manager-react-components/src/enumTypes/playwright.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * @deprecated Handler type will be removed in @ovh-ux/manager-react-components v3
- */
-export type Handler
{tiles.map((tile) => (
-
+
{tile.title}
- {item.label}
- {item.value}
+
+ {item.label}
+
+
+ {item.value}
+
))}
diff --git a/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.spec.ts b/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.spec.ts
index fa5117abc64f..03107fa30513 100644
--- a/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.spec.ts
+++ b/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.spec.ts
@@ -15,7 +15,7 @@ async function loadSubject(listingApi: 'v6Iceberg' | 'v2' | 'v6' | undefined) {
const useResourcesIcebergV6 = vi.fn();
const useResourcesV6 = vi.fn();
- vi.doMock('@ovh-ux/manager-react-components', () => ({
+ vi.doMock('@ovh-ux/muk', () => ({
useResourcesIcebergV2,
useResourcesIcebergV6,
useResourcesV6,
@@ -24,12 +24,12 @@ async function loadSubject(listingApi: 'v6Iceberg' | 'v2' | 'v6' | undefined) {
// Import the subject AFTER mocks are set
const mod = await import('./useResources'); // <-- ← adjust to your real path
- return {
+ return ({
...mod,
mocks: { useResourcesIcebergV2, useResourcesIcebergV6, useResourcesV6 },
- } as unknown as {
- useResources: (typeof import('./useResources'))['useResources'];
- useListingData: (typeof import('./useResources'))['useListingData'];
+ } as unknown) as {
+ useResources: typeof import('./useResources')['useResources'];
+ useListingData: typeof import('./useResources')['useListingData'];
mocks: {
useResourcesIcebergV2: ReturnType;
useResourcesIcebergV6: ReturnType;
@@ -53,7 +53,10 @@ describe('useResources', () => {
mocks.useResourcesIcebergV6.mockReturnValue(sample);
const { result } = renderHook(() =>
- useResources<{ id: number }>({ route: '/things', queryKey: ['listing', '/things'] }),
+ useResources<{ id: number }>({
+ route: '/things',
+ queryKey: ['listing', '/things'],
+ }),
);
expect(mocks.useResourcesIcebergV6).toHaveBeenCalledWith({
@@ -78,7 +81,10 @@ describe('useResources', () => {
mocks.useResourcesIcebergV2.mockReturnValue(sample);
const { result } = renderHook(() =>
- useResources<{ id: string }>({ route: '/legacy', queryKey: ['listing', '/legacy'] }),
+ useResources<{ id: string }>({
+ route: '/legacy',
+ queryKey: ['listing', '/legacy'],
+ }),
);
expect(mocks.useResourcesIcebergV2).toHaveBeenCalled();
@@ -102,7 +108,11 @@ describe('useResources', () => {
mocks.useResourcesV6.mockReturnValue(sample);
const { result } = renderHook(() =>
- useResources<{ id: number }>({ route: '/new', queryKey: ['listing', '/new'], columns: [] }),
+ useResources<{ id: number }>({
+ route: '/new',
+ queryKey: ['listing', '/new'],
+ columns: [],
+ }),
);
expect(mocks.useResourcesV6).toHaveBeenCalledWith({
@@ -130,7 +140,9 @@ describe('useListingData', () => {
status: 'success' as const,
});
- const { result } = renderHook(() => useListingData<{ id: number }>('/things'));
+ const { result } = renderHook(() =>
+ useListingData<{ id: number }>('/things'),
+ );
expect(result.current.items).toEqual([{ id: 1 }, { id: 2 }]);
expect(result.current.total).toBe(999); // uses totalCount when present
@@ -154,7 +166,9 @@ describe('useListingData', () => {
status: 'pending' as const,
});
- const { result } = renderHook(() => useListingData<{ id: string }>('/legacy'));
+ const { result } = renderHook(() =>
+ useListingData<{ id: string }>('/legacy'),
+ );
expect(result.current.items).toHaveLength(3);
expect(result.current.total).toBe(3); // fallback to items.length
@@ -174,7 +188,9 @@ describe('useListingData', () => {
status: 'success' as const,
});
- const { result } = renderHook(() => useListingData>('/empty'));
+ const { result } = renderHook(() =>
+ useListingData>('/empty'),
+ );
expect(result.current.items).toEqual([]);
expect(result.current.total).toBe(0);
diff --git a/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.ts b/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.ts
index 87ee6a2c7f30..5ae7f9bef50a 100644
--- a/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.ts
+++ b/packages/manager-tools/manager-generator/template/src/data/hooks/useResources.ts
@@ -5,10 +5,13 @@ import {
useResourcesIcebergV2,
useResourcesIcebergV6,
useResourcesV6,
-} from '@ovh-ux/manager-react-components';
+} from '@ovh-ux/muk';
import { APP_FEATURES } from '@/App.constants';
-import { ResourcesFacadeResult, UseResourcesParams } from '@/types/ClientApi.type';
+import {
+ ResourcesFacadeResult,
+ UseResourcesParams,
+} from '@/types/ClientApi.type';
import { ListingDataResultType } from '@/types/Listing.type';
function mapResponseWithTotal(response: {
@@ -82,9 +85,9 @@ function createResourcesFactory>() {
};
}
-export function useResources = Record>(
- params: UseResourcesParams,
-): ResourcesFacadeResult {
+export function useResources<
+ T extends Record = Record
+>(params: UseResourcesParams): ResourcesFacadeResult {
const resourcesFactory = createResourcesFactory();
const api = APP_FEATURES.listingApi;
@@ -93,9 +96,9 @@ export function useResources = Record = Record>(
- route: string,
-): ListingDataResultType {
+export function useListingData<
+ T extends Record = Record
+>(route: string): ListingDataResultType {
const raw = useResources({
route,
queryKey: ['listing', route],
@@ -103,7 +106,8 @@ export function useListingData = Record>(() => {
const items = raw?.flattenData ?? [];
- const total = typeof raw?.totalCount === 'number' ? raw.totalCount : items.length;
+ const total =
+ typeof raw?.totalCount === 'number' ? raw.totalCount : items.length;
const fetchNextPage =
raw?.hasNextPage && raw?.fetchNextPage
diff --git a/packages/manager-tools/manager-generator/template/src/hooks/layout/useBreadcrumb.tsx b/packages/manager-tools/manager-generator/template/src/hooks/layout/useBreadcrumb.tsx
index 51965f2dad5c..15523a03024f 100644
--- a/packages/manager-tools/manager-generator/template/src/hooks/layout/useBreadcrumb.tsx
+++ b/packages/manager-tools/manager-generator/template/src/hooks/layout/useBreadcrumb.tsx
@@ -4,7 +4,7 @@ import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { useProject } from '@ovh-ux/manager-pci-common';
-import { useProjectUrl } from '@ovh-ux/manager-react-components';
+import { useProjectUrl } from '@ovh-ux/muk';
import { ShellContext } from '@ovh-ux/manager-react-shell-client';
import { BreadcrumbItem, BreadcrumbProps } from '@/types/Breadcrumb.type';
@@ -56,7 +56,11 @@ export const useBreadcrumb = ({ rootLabel, appName }: BreadcrumbProps) => {
useEffect(() => {
const fetchRoot = async () => {
try {
- const response = await shell?.navigation.getURL(appName as string, '#/', {});
+ const response = await shell?.navigation.getURL(
+ appName as string,
+ '#/',
+ {},
+ );
const rootItem = {
label: rootLabel,
href: String(response),
diff --git a/packages/manager-tools/manager-generator/template/src/hooks/listing/useListingColumns.tsx b/packages/manager-tools/manager-generator/template/src/hooks/listing/useListingColumns.tsx
index 660c8a3e6d1b..547ed6383875 100644
--- a/packages/manager-tools/manager-generator/template/src/hooks/listing/useListingColumns.tsx
+++ b/packages/manager-tools/manager-generator/template/src/hooks/listing/useListingColumns.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { OdsText } from '@ovhcloud/ods-components/react';
-import type { DatagridColumn } from '@ovh-ux/manager-react-components';
+import type { DatagridColumn } from '@ovh-ux/muk';
import { DefaultListingItemType } from '@/types/Listing.type';
diff --git a/packages/manager-tools/manager-generator/template/src/index.scss b/packages/manager-tools/manager-generator/template/src/index.scss
index a5c684d9dcdd..c40d7f03465d 100644
--- a/packages/manager-tools/manager-generator/template/src/index.scss
+++ b/packages/manager-tools/manager-generator/template/src/index.scss
@@ -1,7 +1,7 @@
@tailwind utilities;
@import '@ovhcloud/ods-themes/default';
-@import '@ovh-ux/manager-react-components/dist/style.css';
+@import '@ovh-ux/muk/dist/style.css';
html {
font-family: var(--ods-font-family-default);
diff --git a/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.page.tsx b/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.page.tsx
index d9136a254042..e5a54c49e489 100644
--- a/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.page.tsx
+++ b/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.page.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
import { OdsTab, OdsTabs } from '@ovhcloud/ods-components/react';
-import { BaseLayout } from '@ovh-ux/manager-react-components';
+import { BaseLayout } from '@ovh-ux/muk';
import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
import { appName } from '@/App.constants';
@@ -61,11 +61,15 @@ export default function DashboardPage() {
}
}}
>
- {t(tab.title)}
+
+ {t(tab.title)}
+
))}
- ) : undefined
+ ) : (
+ undefined
+ )
}
/>
diff --git a/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.spec.tsx b/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.spec.tsx
index 257e72748f78..88aa43e3ba93 100644
--- a/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.spec.tsx
+++ b/packages/manager-tools/manager-generator/template/src/pages/dashboard/Dashboard.spec.tsx
@@ -44,7 +44,7 @@ interface BaseLayoutProps {
breadcrumb: ReactNode;
tabs: ReactNode;
}
-vi.mock('@ovh-ux/manager-react-components', () => ({
+vi.mock('@ovh-ux/muk', () => ({
BaseLayout: ({ header, backLinkLabel, onClickReturn, breadcrumb, tabs }: BaseLayoutProps) => (
Hosted Private Cloud – VMware vSphere service running in GRA region.
+
+ Hosted Private Cloud – VMware vSphere service running in GRA
+ region.
+
),
},
{
id: 'api-url',
label: 'API URL',
- value: ();
+vi.mock('@ovh-ux/muk', async (importOriginal) => {
+ const actual = await importOriginal();
return {
...actual,
Clipboard: ({ value }: ClipboardProps) => (
@@ -49,14 +49,16 @@ describe('GeneralInformationPage', () => {
it('renders service details and allows clipboard copy', () => {
const writeText = vi.fn<() => Promise>();
- Object.assign(navigator, {
+ Object.assign(navigator, ({
clipboard: { writeText },
- } as unknown as Navigator);
+ } as unknown) as Navigator);
render((
- APP_FEATURES.listingEndpoint,
- );
+ const {
+ items,
+ total,
+ isLoading,
+ hasNextPage,
+ fetchNextPage,
+ } = useListingData(APP_FEATURES.listingEndpoint);
const baseColumns = useListingColumns();
@@ -49,13 +53,18 @@ export default function ListingPage() {
label: t('listing:auto_column', 'Result'),
isSortable: false,
cell: (row: ListingItemType) => (
- {row ? JSON.stringify(row) : EMPTY}
+
+ {row ? JSON.stringify(row) : EMPTY}
+
),
},
];
}, [baseColumns, t]);
- const initialSort = useMemo(() => ({ id: columns[0]?.id ?? 'auto', desc: false }), [columns]);
+ const initialSort = useMemo(
+ () => ({ id: columns[0]?.id ?? 'auto', desc: false }),
+ [columns],
+ );
const { sorting, setSorting } = useDataGrid(initialSort);
const totalItems = Number.isFinite(total) ? total : items.length;
diff --git a/packages/manager-tools/manager-generator/template/src/pages/listing/Listing.spec.tsx b/packages/manager-tools/manager-generator/template/src/pages/listing/Listing.spec.tsx
index ea90b219c569..db7820578e99 100644
--- a/packages/manager-tools/manager-generator/template/src/pages/listing/Listing.spec.tsx
+++ b/packages/manager-tools/manager-generator/template/src/pages/listing/Listing.spec.tsx
@@ -23,7 +23,12 @@ interface BaseLayoutProps {
interface DataGridProps {
topbar?: ReactNode;
- columns: { id: string; label: string; isSortable?: boolean; cell?: (row: T) => ReactNode }[];
+ columns: {
+ id: string;
+ label: string;
+ isSortable?: boolean;
+ cell?: (row: T) => ReactNode;
+ }[];
items: T[];
totalItems: number;
hasNextPage: boolean;
@@ -31,7 +36,7 @@ interface DataGridProps {
isLoading: boolean;
}
-vi.mock('@ovh-ux/manager-react-components', () => ({
+vi.mock('@ovh-ux/muk', () => ({
BaseLayout: ({ header, children, breadcrumb }: BaseLayoutProps) => (
),
// eslint-disable-next-line react/no-multi-comp
- DataGridTextCell: ({ children }: { children: ReactNode }) => {children},
+ DataGridTextCell: ({ children }: { children: ReactNode }) => (
+ {children}
+ ),
useDataGrid: () => ({ sorting: [] as string[], setSorting: vi.fn() }),
}));
@@ -85,7 +92,12 @@ vi.mock('@/hooks/layout/useBreadcrumb', () => ({
}));
vi.mock('@/hooks/listing/useListingColumns', () => ({
useListingColumns: () => [
- { id: 'id', label: 'listing:id', isSortable: true, cell: (row: { id: string }) => row.id },
+ {
+ id: 'id',
+ label: 'listing:id',
+ isSortable: true,
+ cell: (row: { id: string }) => row.id,
+ },
],
}));
vi.mock('@/data/hooks/useResources', () => ({
@@ -158,6 +170,8 @@ describe('ListingPage', () => {
const { default: Page } = await import('./Listing.page');
render( =>
waitFor(() => screen.getAllByTestId(testId), options).then(
- (response) => response[index],
+ (response) => response[index]!,
);
diff --git a/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/msw.ts b/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/msw.ts
index 1a6075f29124..a0224cba93ff 100644
--- a/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/msw.ts
+++ b/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/msw.ts
@@ -22,7 +22,7 @@ export const toMswHandlers = (handlers: Handler[] = []): RequestHandler[] =>
once,
}: Handler) =>
http[method](
- `${baseUrl ?? apiClient?.[api]?.getUri?.()}${
+ `${baseUrl ?? apiClient[api]?.getUri() ?? ''}${
url.startsWith('/') ? '' : '/'
}${url}`,
async ({ request, params, cookies }) => {
diff --git a/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/ui-test-helpers-ods18.ts b/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/ui-test-helpers-ods18.ts
index 945b14779185..7daad219d481 100644
--- a/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/ui-test-helpers-ods18.ts
+++ b/packages/manager-tools/manager-legacy-tools/test-utils/src/utils/ui-test-helpers-ods18.ts
@@ -40,7 +40,7 @@ export const assertOdsModalText = ({
waitFor(
() =>
expect(
- within(container.querySelector('ods-modal')).getByText(text, {
+ within(container.querySelector('ods-modal')!).getByText(text, {
exact: false,
}),
).toBeVisible(),
@@ -67,7 +67,7 @@ const getOdsButton = async ({
nth = 0,
...options
}: GetOdsButtonParams) => {
- let button: HTMLElement;
+ let button: HTMLElement | undefined;
await waitFor(
() => {
const htmlTag = isLink ? 'ods-link' : 'ods-button';
@@ -77,12 +77,12 @@ const getOdsButton = async ({
// filter by icon
button = Array.from(buttonList).filter(
(btn) => btn.getAttribute('icon') === iconName,
- )[nth];
+ )[nth]!;
} else {
// filter by label or altLabel
button = Array.from(buttonList).filter((btn) =>
- [label, altLabel].includes(btn.getAttribute('label')),
- )[nth];
+ [label, altLabel].includes(btn.getAttribute('label') ?? ''),
+ )[nth]!;
}
if (isLink) {
@@ -96,7 +96,7 @@ const getOdsButton = async ({
},
{ ...WAIT_FOR_DEFAULT_OPTIONS, ...options },
);
- return button;
+ return button!;
};
type GetOdsButtonByLabelParams = Omit & {
@@ -168,5 +168,5 @@ export const selectOdsSelectOption = async ({
const event = new CustomEvent('odsChange', {
detail: { value },
});
- waitFor(() => fireEvent(select, event));
+ return waitFor(() => fireEvent(select, event));
};
diff --git a/packages/manager-tools/manager-muk-cli/README.md b/packages/manager-tools/manager-muk-cli/README.md
new file mode 100644
index 000000000000..6d9accf4605c
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/README.md
@@ -0,0 +1,266 @@
+# 🧩 manager-muk-cli
+
+A Node.js CLI designed to **automate maintenance, synchronization, and documentation** of the `@ovh-ux/manager-ui-kit` with the **OVHcloud Design System (ODS)**.
+
+It checks ODS versions, detects missing components, generates passthroughs (hooks, constants, types), and **synchronizes ODS component documentation** directly from GitHub, using a fully-streamed, cache-aware architecture.
+
+---
+
+## 🚀 1. Features Overview
+
+### 1.1 `--check-versions`
+
+Checks npm for new ODS package releases and compares them with the versions declared in `manager-ui-kit/package.json`.
+
+```bash
+yarn muk-cli --check-versions
+```
+
+**Example Output**
+
+```
+ℹ 🔍 Checking ODS package versions...
+⚠ Updates available:
+ℹ @ovhcloud/ods-components: 18.6.2 → 18.6.4
+ℹ @ovhcloud/ods-react: 19.0.1 → 19.1.0
+ℹ @ovhcloud/ods-themes: 19.0.1 → 19.1.0
+```
+
+---
+
+### 1.2 `--check-components`
+
+Compares ODS React components with those in `manager-ui-kit/src/components`, identifying missing or outdated ones.
+
+```bash
+yarn muk-cli --check-components
+```
+
+**Example Output**
+
+```
+ℹ 📁 Found 34 local components
+ℹ 📦 Fetching ODS React v19.2.0 tarball...
+⚠ Missing 8 ODS components:
+ℹ • form-field
+ℹ • form-field-label
+ℹ • range
+ℹ • range-thumb
+ℹ • range-track
+```
+
+---
+
+### 1.3 `--update-versions`
+
+Automatically updates all ODS dependencies in `package.json` to their latest versions, validates, and runs post-update checks.
+
+```bash
+yarn muk-cli --update-versions
+```
+
+**Example Output**
+
+```
+✔ Updated 3 ODS dependencies
+✔ @ovhcloud/ods-components: 18.6.2 → 18.6.4
+✔ @ovhcloud/ods-react: 19.0.1 → 19.2.0
+✔ @ovhcloud/ods-themes: 19.0.1 → 19.2.0
+✔ package.json successfully updated.
+```
+
+If all are current:
+
+```
+✅ All ODS versions are already up to date!
+✨ Done in 1.78s.
+```
+
+---
+
+### 1.4 `--add-components`
+
+Generates **missing ODS components** from the ODS React source tarball, preserving hooks, constants, and external types.
+
+```bash
+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
+
+---
+
+### 1.5 `--add-components-documentation`
+
+Fetches and synchronizes **official ODS component documentation** (`.mdx` files) from the [ovh/design-system](https://github.com/ovh/design-system) repository directly into `manager-wiki`.
+
+```bash
+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/`.
+4. Extracts per-component documentation and writes it to:
+ ```
+ packages/manager-wiki/stories/manager-ui-kit/components//base-component-doc/
+ ```
+5. Caches the tarball for **7 days** to avoid redundant downloads.
+6. Synchronizes Storybook base-documents:
+ ```
+ packages/manager-wiki/stories/manager-ui-kit/base-documents/
+ ```
+7. Rewrites imports:
+
+- `../../../src/` → `../../../base-documents/`
+- `ods-react/src/` → `@ovhcloud/ods-react`
+
+**Example Output**
+
+```
+ℹ 📦 Starting Design System documentation sync…
+ℹ ℹ️ ODS React latest version: 19.2.1
+✔ 💾 Served 85 documentation files from cache.
+ℹ 📁 Found existing component: 'accordion'
+✔ ✅ Sync complete — 45 new, 42 updated, 171 files streamed.
+```
+
+---
+
+## ⚙️ 2. Streaming Architecture
+
+### 2.1 High-Level Flow
+
+```
+GitHub tarball (.tar.gz)
+ │
+ ├─▶ streamTarGz()
+ ├─▶ extractDesignSystemDocs()
+ ├─▶ createAsyncQueue()
+ └─▶ streamComponentDocs()
+```
+
+### 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/
+│ ├─ commands/
+│ ├─ core/
+│ ├─ config/
+└─ target/.cache/ods-docs/
+```
+
+---
+
+## 🧠 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` |
+
+---
+
+## ✅ 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
+
+---
+
+## 🧩 6. Cache Troubleshooting
+
+```bash
+rm -rf packages/manager-tools/manager-muk-cli/target/.cache/ods-docs
+```
+
+Rebuilds clean cache on rerun.
+
+---
+
+## 🧩 7. Configuration Extraction
+
+`muk-config.js` centralizes regex, rewrite, and Storybook folder logic.
+
+```js
+export const MUK_IMPORT_REWRITE_RULES = [
+ {
+ name: 'base-documents',
+ pattern: /((?:\..\/){2,3})src\//g,
+ replacer: (_, prefix) => `${prefix}base-documents/`,
+ },
+ {
+ name: 'ods-react',
+ pattern: /(['"])[^'"]*ods-react\/src[^'"]*/g,
+ replacer: (_, quote) => `${quote}@ovhcloud/ods-react`,
+ },
+];
+```
+
+---
+
+## 🪪 8. License
+
+BSD-3-Clause © OVH SAS
diff --git a/packages/manager-tools/manager-muk-cli/eslint.config.mjs b/packages/manager-tools/manager-muk-cli/eslint.config.mjs
new file mode 100644
index 000000000000..f86179cef392
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/eslint.config.mjs
@@ -0,0 +1,15 @@
+import {
+ complexityJsxTsxConfig,
+ complexityTsJsConfig,
+} from '@ovh-ux/manager-static-analysis-kit/eslint/complexity';
+import { javascriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/javascript';
+import { prettierEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/prettier';
+import { vitestEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tests';
+
+export default [
+ javascriptEslintConfig,
+ vitestEslintConfig,
+ prettierEslintConfig,
+ complexityJsxTsxConfig,
+ complexityTsJsConfig,
+];
diff --git a/packages/manager-tools/manager-muk-cli/package.json b/packages/manager-tools/manager-muk-cli/package.json
new file mode 100644
index 000000000000..4c3a5532eab6
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "@ovh-ux/manager-muk-cli",
+ "version": "0.0.1",
+ "private": true,
+ "description": "",
+ "license": "BSD-3-Clause",
+ "author": "OVH SAS",
+ "type": "module",
+ "bin": {
+ "muk-cli": "src/index.js"
+ },
+ "scripts": {
+ "lint:modern": "manager-lint --config eslint.config.mjs './src/**/*.js'",
+ "lint:modern:fix": "manager-lint --fix --config eslint.config.mjs './src/**/*.js'"
+ },
+ "dependencies": {
+ "pacote": "^21.0.3",
+ "tar-stream": "^3.1.7",
+ "semver": "^7.7.3"
+ },
+ "devDependencies": {
+ "@ovh-ux/manager-static-analysis-kit": "*",
+ "typescript": "^5.9.2"
+ }
+}
diff --git a/packages/manager-tools/manager-muk-cli/src/commands/add-components-documentation.js b/packages/manager-tools/manager-muk-cli/src/commands/add-components-documentation.js
new file mode 100644
index 000000000000..b7894972e578
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/src/commands/add-components-documentation.js
@@ -0,0 +1,54 @@
+import { EMOJIS, MUK_WIKI_COMPONENTS } from '../config/muk-config.js';
+import {
+ rewriteWikiComponentImports,
+ syncComponentDocs,
+ syncStorybookBaseDocuments,
+} from '../core/component-documentation-utils.js';
+import { aggregateOperationsStats, runPostUpdateChecks, safeSync } from '../core/tasks-utils.js';
+import { logger } from '../utils/log-manager.js';
+
+/**
+ * CLI Command: addComponentsDocumentation
+ *
+ * Synchronizes all Design System documentation artifacts into the Manager Wiki.
+ *
+ * This process performs two major synchronization operations:
+ *
+ * 1. **Component Base Documentation** — retrieves and updates
+ * each component’s `base-component-doc` folder in the Wiki.
+ *
+ * 2. **Storybook Source Documentation** — downloads and mirrors all
+ * Storybook `components`, `constants`, and `helpers` under:
+ * `packages/manager-wiki/stories/manager-ui-kit/base-documents/`
+ *
+ * Both steps use streaming extraction from the ODS tarball,
+ * ensuring minimal memory usage and safe incremental updates.
+ *
+ * @async
+ * @returns {Promise} Completes when both synchronizations finish.
+ */
+export async function addComponentsDocumentation() {
+ logger.info(`${EMOJIS.package} Starting Design System documentation sync…`);
+
+ // 1 Components
+ const componentResult = await safeSync('component base-docs', syncComponentDocs);
+
+ // 2 Storybook base-documents
+ const storybookResult = await safeSync('storybook base-documents', syncStorybookBaseDocuments);
+
+ // 3 Rewrite imports
+ rewriteWikiComponentImports(MUK_WIKI_COMPONENTS);
+
+ // 4 Aggregate
+ const stats = aggregateOperationsStats([componentResult, storybookResult]);
+ logger.success(
+ `${EMOJIS.check} Sync complete — ${stats.created} new, ${stats.updated} updated, ${stats.total} files streamed.`,
+ );
+
+ // Run validation tasks (install, build, tests) after workspace updates
+ runPostUpdateChecks();
+
+ logger.info(
+ `${EMOJIS.rocket} Components updated and imports normalized under 'stories/manager-ui-kit'.`,
+ );
+}
diff --git a/packages/manager-tools/manager-muk-cli/src/commands/add-components.js b/packages/manager-tools/manager-muk-cli/src/commands/add-components.js
new file mode 100644
index 000000000000..53a69bbee504
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/src/commands/add-components.js
@@ -0,0 +1,364 @@
+#!/usr/bin/env node
+import path from 'node:path';
+
+import { EMOJIS, MUK_COMPONENTS_SRC, ODS_EXCLUDED_COMPONENTS } from '../config/muk-config.js';
+import {
+ buildComponentsIndexTemplate,
+ buildSubcomponentPropsTemplate,
+ buildSubcomponentSpecTemplate,
+ buildSubcomponentTemplate,
+ getComponentTemplates,
+} from '../config/muk-template-config.js';
+import { groupComponentsDynamically } from '../core/component-utils.js';
+import {
+ createFile,
+ ensureDir,
+ readFile,
+ toKebabCase,
+ toPascalCase,
+ writeFile,
+} from '../core/file-utils.js';
+import {
+ detectHasChildrenFromTarball,
+ detectHasTypeExportFromIndex,
+ extractOdsComponentsExportsByCategory,
+} from '../core/ods-components-tarball-utils.js';
+import { runPostUpdateChecks } from '../core/tasks-utils.js';
+import { logger } from '../utils/log-manager.js';
+import { checkComponents } from './check-components.js';
+
+/**
+ * Builds all necessary file and directory metadata for a given component.
+ * Generates standard paths and template contents for component, props, tests, and index files.
+ *
+ * @param {string} componentName - The name of the ODS component (e.g. "FormField").
+ * @param {boolean} [hasChildren=false] - Whether the component has nested subcomponents.
+ * @returns {{
+ * componentName: string,
+ * folderName: string,
+ * paths: { base: string, tests: string },
+ * files: Record
+ * }} A metadata object describing directories and files to create.
+ */
+function buildComponentFiles(componentName, hasChildren = false) {
+ const folderName = toKebabCase(componentName);
+ const pascalName = toPascalCase(componentName);
+
+ const componentDir = path.join(MUK_COMPONENTS_SRC, folderName);
+ const testsDir = path.join(componentDir, '__tests__');
+ const templates = getComponentTemplates(pascalName, hasChildren);
+
+ return {
+ componentName: pascalName,
+ folderName,
+ paths: { base: componentDir, tests: testsDir },
+ files: {
+ component: {
+ path: path.join(componentDir, `${pascalName}.component.tsx`),
+ content: templates.component,
+ },
+ props: { path: path.join(componentDir, `${pascalName}.props.ts`), content: templates.props },
+ test: {
+ path: path.join(testsDir, `${pascalName}.snapshot.test.tsx`),
+ content: templates.test,
+ },
+ index: { path: path.join(componentDir, 'index.ts'), content: templates.index },
+ },
+ };
+}
+
+/**
+ * Generates all subcomponents for a parent component, including folders, props, component, and test files.
+ *
+ * @async
+ * @param {string} parentName - The name of the parent ODS component (e.g. "FormField").
+ * @param {string} parentPascal - The parent component name in PascalCase.
+ * @param {string} basePath - Path to the parent component directory.
+ * @param {string[]} subcomponents - List of subcomponent names to generate.
+ * @returns {Promise} Resolves when all subcomponents are created.
+ */
+async function createSubcomponents(parentName, parentPascal, basePath, subcomponents) {
+ if (!subcomponents.length) return;
+
+ for (const subName of subcomponents) {
+ const kebabSubName = toKebabCase(subName);
+ const subPascal = toPascalCase(subName);
+
+ const subDir = path.join(basePath, kebabSubName);
+ const subTestsDir = path.join(subDir, '__tests__');
+ ensureDir(subDir);
+ ensureDir(subTestsDir);
+
+ const hasChildren = await detectHasChildrenFromTarball(parentName, subName);
+ const hasOwnType = await detectHasTypeExportFromIndex(parentName, subName);
+
+ createFile(
+ path.join(subDir, `${subPascal}.props.ts`),
+ buildSubcomponentPropsTemplate(subPascal, parentPascal, hasOwnType, hasChildren),
+ );
+ createFile(
+ path.join(subDir, `${subPascal}.component.tsx`),
+ buildSubcomponentTemplate(subPascal, hasChildren),
+ );
+ createFile(
+ path.join(subTestsDir, `${subPascal}.component.spec.tsx`),
+ buildSubcomponentSpecTemplate(subPascal),
+ );
+
+ logger.info(
+ `${EMOJIS.folder} Created subcomponent '${subName}' (${hasOwnType ? '🧩 own type' : '↩ parent type'}, ${hasChildren ? '👶 has children' : '🚫 stateless'})`,
+ );
+ }
+}
+
+/**
+ * Appends external type imports and exports to a component's props file.
+ *
+ * @param {string} propsPath - Absolute path to the component’s props file.
+ * @param {string[]} externalTypes - List of type identifiers to import/export.
+ * @returns {void}
+ */
+function appendExternalTypesToProps(propsPath, externalTypes) {
+ if (!externalTypes.length) return;
+
+ const existing = readFile(propsPath, false);
+ const alreadyPresent = externalTypes.some((type) => existing.includes(type));
+ if (alreadyPresent) return;
+
+ const typeImports = externalTypes.map((t) => `type ${t}`).join(',\n ');
+ const snippet = `
+/**
+ * External types (from contexts, utils, or shared ODS exports)
+ */
+import {
+ ${typeImports}
+} from '@ovhcloud/ods-react';
+
+export type { ${externalTypes.join(', ')} };
+`;
+
+ writeFile(propsPath, `${existing.trim()}\n${snippet}\n`);
+ logger.info(`🧩 Added ${externalTypes.length} external types to props`);
+}
+
+/**
+ * Creates passthroughs for hooks and constants, and appends external types.
+ *
+ * @async
+ * @param {string} componentName - PascalCase name of the component.
+ * @param {string} baseDir - Absolute path to the component directory.
+ * @param {string} odsName - Original ODS package name (used for import extraction).
+ * @param {string} propsPath - Path to the props file where external types may be added.
+ * @returns {Promise<{ hasHooks: boolean, hasConstants: boolean }>} Whether hooks/constants were created.
+ */
+async function createHooksAndConstants(componentName, baseDir, odsName, propsPath) {
+ const { hooks, constants, externalTypes } = await extractOdsComponentsExportsByCategory(odsName);
+
+ // 🪝 Hooks passthrough
+ if (hooks.length) {
+ const hooksDir = path.join(baseDir, 'hooks');
+ ensureDir(hooksDir);
+
+ const hookFile = path.join(hooksDir, `use${componentName}.ts`);
+ const hookImports = hooks.map((h) => (h.startsWith('use') ? h : `type ${h}`)).join(', ');
+ const hookContent = `import { ${hookImports} } from '@ovhcloud/ods-react';
+
+export { ${hooks.join(', ')} };
+`;
+ createFile(hookFile, hookContent);
+ logger.info(`🪝 Created hook passthrough for ${componentName} (${hooks.length} identifiers)`);
+ }
+
+ // ⚙️ Constants passthrough
+ if (constants.length) {
+ const constantsDir = path.join(baseDir, 'constants');
+ ensureDir(constantsDir);
+
+ const constFile = path.join(constantsDir, `${componentName}Constants.ts`);
+ const constContent = `import {
+ ${constants.join(',\n ')}
+} from '@ovhcloud/ods-react';
+
+export {
+ ${constants.join(',\n ')}
+};
+`;
+ createFile(constFile, constContent);
+ logger.info(
+ `⚙️ Created constants passthrough for ${componentName} (${constants.length} identifiers)`,
+ );
+ }
+
+ // 🧩 External types passthrough
+ appendExternalTypesToProps(propsPath, externalTypes);
+
+ return { hasHooks: hooks.length > 0, hasConstants: constants.length > 0 };
+}
+
+/**
+ * Updates the component’s index.ts to export subcomponents, hooks, and constants.
+ *
+ * @param {{
+ * indexPath: string,
+ * subcomponents: string[],
+ * hasHooks: boolean,
+ * hasConstants: boolean,
+ * componentName: string
+ * }} params - Configuration for index file updates.
+ * @returns {void}
+ */
+function updateComponentIndex({ indexPath, subcomponents, hasHooks, hasConstants, componentName }) {
+ let content = readFile(indexPath, false).trimEnd();
+ const additions = [];
+
+ for (const sub of subcomponents) {
+ const subPascal = toPascalCase(sub);
+ additions.push(`export { ${subPascal} } from './${toKebabCase(sub)}/${subPascal}.component';`);
+ }
+
+ if (hasHooks) additions.push(`export * from './hooks/use${componentName}';`);
+ if (hasConstants) additions.push(`export * from './constants/${componentName}Constants';`);
+
+ if (additions.length) {
+ writeFile(indexPath, `${content}\n\n${additions.join('\n')}\n`);
+ logger.info(`🔗 Updated index.ts with ${additions.length} new exports`);
+ }
+}
+
+/**
+ * Generates the full directory and file structure for a component and its subcomponents.
+ *
+ * @async
+ * @param {string} parentName - The main ODS component name.
+ * @param {string[]} [subcomponents=[]] - Optional list of subcomponents to generate.
+ * @returns {Promise}
+ */
+async function generateComponentStructure(parentName, subcomponents = []) {
+ const hasChildren = await detectHasChildrenFromTarball(parentName);
+
+ // 🛑 Skip abstract or invalid components that have neither source nor subcomponents
+ if (hasChildren === null && !subcomponents.length) {
+ logger.warn(`⚠ Skipping '${parentName}' — not a valid ODS component.`);
+ return;
+ }
+
+ const { componentName, paths, files } = buildComponentFiles(parentName, hasChildren);
+
+ Object.values(paths).forEach(ensureDir);
+ Object.values(files).forEach(({ path: p, content }) => createFile(p, content));
+
+ await createSubcomponents(parentName, componentName, paths.base, subcomponents);
+
+ const { hasHooks, hasConstants } = await createHooksAndConstants(
+ componentName,
+ paths.base,
+ parentName,
+ files.props.path,
+ );
+
+ updateComponentIndex({
+ indexPath: files.index.path,
+ subcomponents,
+ hasHooks,
+ hasConstants,
+ componentName,
+ });
+
+ logger.success(`✔ Component structure ready for ${componentName}`);
+}
+
+/**
+ * Detects missing ODS components and generates their folder structures in Manager UI Kit.
+ *
+ * @async
+ * @returns {Promise} List of parent components that were created.
+ */
+async function createComponentsStructure() {
+ logger.info(`${EMOJIS.info} Starting ODS → Manager UI Kit component sync...`);
+
+ const { missingComponents = [] } = await checkComponents({ returnOnly: true });
+ const relevant = missingComponents.filter((name) => !ODS_EXCLUDED_COMPONENTS.includes(name));
+ // .filter((name) => ['form-field', 'range'].some((k) => name.includes(k)));
+
+ if (!relevant.length) {
+ logger.success('✅ All relevant ODS components are already present.');
+ return [];
+ }
+
+ const grouped = await groupComponentsDynamically(relevant);
+ const created = [];
+
+ for (const [parent, children] of Object.entries(grouped)) {
+ await generateComponentStructure(parent, children);
+ created.push(parent);
+ }
+
+ logger.success(`🎉 Created folder structure for ${created.length} components.`);
+ return created;
+}
+
+/**
+ * Updates the root Manager UI Kit index.ts to include newly created components.
+ *
+ * @param {string[]} newComponents - List of component names to export.
+ * @returns {void}
+ */
+function updateComponentsIndexExports(newComponents) {
+ if (!newComponents?.length) return;
+
+ const indexPath = path.join(MUK_COMPONENTS_SRC, 'index.ts');
+ let content = readFile(indexPath, false);
+ if (!content.trim()) content = buildComponentsIndexTemplate();
+
+ const additions = [];
+
+ for (const name of newComponents) {
+ const folder = toKebabCase(name);
+ const line = `export * from './${folder}';`;
+ if (!content.includes(line)) additions.push(line);
+ }
+
+ if (additions.length) {
+ writeFile(indexPath, `${content.trimEnd()}\n${additions.join('\n')}\n`);
+ logger.success(
+ `${EMOJIS.check} Added ${additions.length} new export${additions.length > 1 ? 's' : ''}`,
+ );
+ } else {
+ logger.info(`${EMOJIS.info} No new exports required in index.ts`);
+ }
+}
+
+/**
+ * CLI entrypoint — synchronizes and scaffolds missing ODS components.
+ *
+ * Public command — updateComponents
+ * - Step 1: Create missing component structures
+ * - Step 2: Populate base templates
+ * - Step 3: Update UI Kit index exports
+ * - Step 4: Run validation tasks
+ *
+ * @async
+ * @returns {Promise}
+ */
+export async function addComponents() {
+ logger.info(`${EMOJIS.info} Running component synchronization pipeline...`);
+
+ // Create missing component structures
+ // Populate base templates
+ const created = await createComponentsStructure();
+
+ if (!created.length) {
+ logger.success('✅ No new components to add.');
+ return;
+ }
+
+ // Update UI Kit index exports
+ await updateComponentsIndexExports(created);
+
+ // Run validation tasks (install, build, tests) after workspace updates
+ runPostUpdateChecks();
+
+ logger.success(
+ `🏁 Component sync completed — ${created.length} new folder${created.length > 1 ? 's' : ''} created.`,
+ );
+}
diff --git a/packages/manager-tools/manager-muk-cli/src/commands/check-components.js b/packages/manager-tools/manager-muk-cli/src/commands/check-components.js
new file mode 100644
index 000000000000..53cdf0b8453d
--- /dev/null
+++ b/packages/manager-tools/manager-muk-cli/src/commands/check-components.js
@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+import { promises as fs } from 'node:fs';
+
+import { EMOJIS, MUK_COMPONENTS_SRC } from '../config/muk-config.js';
+import {
+ extractOdsComponentsTarball,
+ getOdsComponentsPackageMetadata,
+} from '../core/ods-components-tarball-utils.js';
+import { logger } from '../utils/log-manager.js';
+
+/**
+ * Retrieve all local Manager UI Kit (MUK) components.
+ *
+ * @returns {Promise} - A list of local component folder names.
+ */
+async function getLocalComponents() {
+ const entries = await fs.readdir(MUK_COMPONENTS_SRC, { withFileTypes: true });
+ const componentDirs = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+
+ logger.info(`${EMOJIS.folder} Found ${componentDirs.length} local components`);
+ return componentDirs;
+}
+
+/**
+ * Extract exported ODS React components by analyzing index.ts files.
+ * Only considers exports from `./components/...`, excluding contexts, constants, and utils.
+ *
+ * Handles:
+ * - Multi-line exports
+ * - Type exports
+ * - Redundant prefixes (e.g., combobox-combobox-item)
+ * - Root component fallback
+ */
+export async function getRemoteOdsComponents() {
+ const { version, tarball } = await getOdsComponentsPackageMetadata();
+ logger.info(`${EMOJIS.package} Fetching ODS React v${version} tarball: ${tarball}`);
+
+ const files = await extractOdsComponentsTarball();
+ const components = new Set();
+
+ // Locate index.ts files under src/components/