feat(steps): удаление deprecated Badge [DS-10790]

.changeset/long-bats-attend.md

@@ -0,0 +1,8 @@
+---
+'@alfalab/core-components-steps': major
+'@alfalab/core-components': major
+---
+
+##### Steps
+
+- Убрали поддержку deprecated `Badge` в `Steps` и полностью перевели индикаторы шага на `StatusBadge`.

packages/steps/package.json

@@ -10,7 +10,6 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-badge": "^7.0.2",
         "@alfalab/core-components-shared": "^2.1.1",
         "@alfalab/core-components-status-badge": "^3.0.2",
         "@alfalab/hooks": "^1.13.1",

packages/steps/src/Component.test.tsx

@@ -63,7 +63,7 @@ describe('Steps', () => {
     });
 
     describe('Render tests', () => {
-        test('should render with default active step', () => {
+        it('should render with default active step', () => {
             const defaultActiveStep = 2;
 
             const { container } = render(
@@ -79,7 +79,7 @@ describe('Steps', () => {
             expect(steps[defaultActiveStep - 1]).toHaveClass('selected');
         });
 
-        test('should render ordered steps', () => {
+        it('should render ordered steps', () => {
             const { queryAllByText } = render(
                 <Steps>
                     <div>Подготовка</div>
@@ -93,7 +93,7 @@ describe('Steps', () => {
             expect(steps[1].innerHTML).toBe('2');
         });
 
-        test('should render unordered steps', () => {
+        it('should render unordered steps', () => {
             const { container } = render(
                 <Steps ordered={false}>
                     <div>Шаг 1</div>
@@ -107,7 +107,23 @@ describe('Steps', () => {
             expect(unorderedSteps.length).toBe(3);
         });
 
-        test('should unmount without errors', () => {
+        it('should render custom status badge indicator', () => {
+            const { queryByText, getByText } = render(
+                <Steps
+                    checkIsStepCustom={(stepNumber) =>
+                        stepNumber === 1 ? { view: 'negative-alert' } : null
+                    }
+                >
+                    <div>Первый шаг</div>
+                    <div>Второй шаг</div>
+                </Steps>,
+            );
+
+            expect(queryByText(/^1$/)).not.toBeInTheDocument();
+            expect(getByText(/^2$/)).toBeInTheDocument();
+        });
+
+        it('should unmount without errors', () => {
             const { unmount } = render(
                 <Steps>
                     <div>Шаг 1</div>

packages/steps/src/Component.tsx

@@ -7,7 +7,7 @@ import { type CommonProps } from './types/common-props';
 
 import styles from './index.module.css';
 
-export type StepsProps = {
+export interface StepsProps extends CommonProps {
     /**
      * Дополнительный класс
      */
@@ -76,7 +76,7 @@ export type StepsProps = {
     /**
      * Кастомный метод для установки кастомного индикатора шага
      * @param stepNumber - номер шага
-     * @return Объект StepIndicatorProps { className, content, iconColor } или null
+     * @return Объект StepIndicatorProps { view, className, colors } или null
      */
     checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;
 
@@ -85,7 +85,7 @@ export type StepsProps = {
      * @param stepNumber - номер активного шага
      */
     onChange?: (stepNumber: number) => void;
-} & CommonProps;
+}
 
 export const Steps: React.FC<StepsProps> = ({
     className,

packages/steps/src/components/step-indicator/Component.tsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
 
-import { type BadgeProps } from '@alfalab/core-components-badge';
 import { StatusBadge, type StatusBadgeProps } from '@alfalab/core-components-status-badge';
 
 import styles from './index.module.css';
 
-/** @description В `@alfalab/core-components@51.0.0` тип будет изменен на Pick<StatusBadgeProps, 'view' | 'className' | 'colors'> */
-export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+export type StepIndicatorProps = Pick<StatusBadgeProps, 'view' | 'className' | 'colors'>;
 
-type StatusBadgeIndicatorProps = Pick<StatusBadgeProps, 'view' | 'className' | 'colors'>;
-
-export const StepIndicator: React.FC<StatusBadgeIndicatorProps> = ({ view, className, colors }) => (
+export const StepIndicator: React.FC<StepIndicatorProps> = ({ view, className, colors }) => (
     <StatusBadge
         size={24}
         view={view}

packages/steps/src/components/step/Component.tsx

@@ -1,7 +1,6 @@
 import React, { type FC, useRef } from 'react';
 import cn from 'classnames';
 
-import { Badge } from '@alfalab/core-components-badge';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -121,7 +120,7 @@ export const Step: FC<StepProps> = ({
 
     const getStepIndicator = () => {
         if (customStepIndicator) {
-            return <Badge view='icon' size='l' {...customStepIndicator} />;
+            return <StepIndicator {...customStepIndicator} />;
         }
         if (isCriticalError) {
             return <StepIndicator view='negative-cross' />;

packages/steps/src/types/common-props.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 
 /** Обобщенный набор типов который подходит для Steps, но также прокинут в дочерний Step */
-export type CommonProps = {
+export interface CommonProps {
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
@@ -45,4 +45,4 @@ export type CommonProps = {
      * Цвет тире выполненного шага
      */
     completedDashColor?: string;
-};
+}

packages/steps/tsconfig.build.json

@@ -7,8 +7,6 @@
         "rootDir": "src",
         "outDir": "ts-dist",
         "paths": {
-            "@alfalab/core-components-badge": ["../badge/src"],
-            "@alfalab/core-components-badge/*": ["../badge/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"],
             "@alfalab/core-components-status-badge": ["../status-badge/src"],
@@ -18,7 +16,6 @@
         }
     },
     "references": [
-        { "path": "../badge/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../status-badge/tsconfig.build.json" }
     ]

packages/steps/tsconfig.json

@@ -6,8 +6,6 @@
         "rootDir": "src",
         "outDir": "no-dist",
         "paths": {
-            "@alfalab/core-components-badge": ["../badge/src"],
-            "@alfalab/core-components-badge/*": ["../badge/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -21,7 +19,6 @@
         }
     },
     "references": [
-        { "path": "../badge/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../status-badge/tsconfig.build.json" },

yarn.lock

@@ -1846,7 +1846,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@alfalab/core-components-steps@workspace:packages/steps"
   dependencies:
-    "@alfalab/core-components-badge": "npm:^7.0.2"
     "@alfalab/core-components-shared": "npm:^2.1.1"
     "@alfalab/core-components-status-badge": "npm:^3.0.2"
     "@alfalab/hooks": "npm:^1.13.1"