feat(status-badge): add StatusBadgeBlank; without preload icons

.changeset/honest-dryers-speak.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-status-badge': minor
+---
+
+   - Добавлен StatusBadgeBlank, без предзагрузки иконок
+   - Расширен пропс customIcons, теперь он принимает не только структуру иконок, но и массив таких структур

packages/status-badge/package.json

@@ -10,6 +10,7 @@
         "access": "public",
         "directory": "dist"
     },
+    "sideEffects": false,
     "peerDependencies": {
         "react": ">=16.8.0"
     },

packages/status-badge/src/Component.base.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import cn from 'classnames';
+
+import type { IconMap } from './consts/iconMap';
+import { useStatusBadgeIcon } from './hooks/useStatusBadgeIcon';
+import {
+    StatusBadgeCustomIcon,
+    StatusBadgeSizes,
+    StatusBadgeViews,
+} from './types/statusBadgePropTypes';
+
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+export type StatusBadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Размер компонента
+     * @default 24
+     */
+    size?: StatusBadgeSizes;
+
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+
+    /**
+     * Вид бейджа.
+     */
+    view: StatusBadgeViews;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Кастомные иконки
+     */
+    customIcons?: StatusBadgeCustomIcon | StatusBadgeCustomIcon[];
+};
+
+type StatusBadgePrivateProps = {
+    /**
+     * Базовый набор иконок
+     */
+    iconMap: IconMap;
+};
+
+export const StatusBadgeBase = ({
+    className,
+    dataTestId,
+    size = 24,
+    view,
+    colors = 'default',
+    customIcons,
+    iconMap,
+}: StatusBadgeProps & StatusBadgePrivateProps) => {
+    const { Icon } = useStatusBadgeIcon(view, size, iconMap, customIcons);
+
+    return (
+        <div
+            className={cn(
+                styles.component,
+                className,
+                styles[`size-${size}`],
+                colorStyles[colors].component,
+                colorStyles[colors][view],
+            )}
+            data-test-id={dataTestId}
+        >
+            <Icon />
+        </div>
+    );
+};

packages/status-badge/src/Component.blank.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { ICON_MAP_BLANK } from './consts/iconMap.blank';
+import { type StatusBadgeProps, StatusBadgeBase } from './Component.base';
+
+export const StatusBadgeBlank = (props: StatusBadgeProps) => (
+    <StatusBadgeBase {...props} iconMap={ICON_MAP_BLANK} />
+);

packages/status-badge/src/Component.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { StatusBadge, StatusBadgeProps } from '.';
+import { StatusBadge, type StatusBadgeProps } from '.';
 
 const viewOptions: StatusBadgeProps['view'][] = [
     'positive-checkmark',

packages/status-badge/src/Component.tsx

@@ -1,77 +1,8 @@
 import React from 'react';
-import cn from 'classnames';
 
-import { useStatusBadgeIcon } from './hooks/useStatusBadgeIcon';
-import {
-    StatusBadgeCustomIcon,
-    StatusBadgeSizes,
-    StatusBadgeViews,
-} from './types/statusBadgePropTypes';
+import { ICON_MAP } from './consts/iconMap';
+import { type StatusBadgeProps, StatusBadgeBase } from './Component.base';
 
-import defaultColors from './default.module.css';
-import styles from './index.module.css';
-import invertedColors from './inverted.module.css';
-
-const colorStyles = {
-    default: defaultColors,
-    inverted: invertedColors,
-};
-
-export type StatusBadgeProps = {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
-    /**
-     * Размер компонента
-     * @default 24
-     */
-    size?: StatusBadgeSizes;
-
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: 'default' | 'inverted';
-
-    /**
-     * Вид бейджа.
-     */
-    view: StatusBadgeViews;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-
-    /**
-     * Кастомные иконки
-     */
-    customIcons?: StatusBadgeCustomIcon;
-};
-
-export const StatusBadge = ({
-    className,
-    dataTestId,
-    size = 24,
-    view,
-    colors = 'default',
-    customIcons,
-}: StatusBadgeProps) => {
-    const { Icon } = useStatusBadgeIcon(view, size, customIcons);
-
-    return (
-        <div
-            className={cn(
-                styles.component,
-                className,
-                styles[`size-${size}`],
-                colorStyles[colors].component,
-                colorStyles[colors][view],
-            )}
-            data-test-id={dataTestId}
-        >
-            <Icon />
-        </div>
-    );
-};
+export const StatusBadge = (props: StatusBadgeProps) => (
+    <StatusBadgeBase {...props} iconMap={ICON_MAP} />
+);

packages/status-badge/src/consts/iconMap.blank.ts

@@ -0,0 +1,15 @@
+import type { IconMap } from './iconMap';
+
+/**
+ * Базовая структура, без иконок
+ */
+export const ICON_MAP_BLANK: IconMap = {
+    'positive-checkmark': {},
+    'negative-cross': {},
+    'negative-alert': {},
+    'negative-block': {},
+    'attention-alert': {},
+    'neutral-information': {},
+    'neutral-operation': {},
+    'neutral-cross': {},
+} as IconMap;