DS-762: Рефакторинг компонентов

AGENTS.md

@@ -33,6 +33,9 @@ Do not load every skill preemptively; use the one matching the request.
   controlling prop changes.
 - In new source and test files, use `UpperPascalCase` `testID` values. Existing
   IDs are compatibility-sensitive; do not flag or rename them only for format.
+- Story files containing JSX must use the `.stories.tsx` extension and JSX. Do
+  not use `createElement` to keep them as `.stories.ts`; reserve `.stories.ts`
+  for stories without JSX.
 - A new public component or material variant normally needs typed source, a
   barrel export, focused tests, and representative Storybook states.
 

design-tokens/input/tokens.json

@@ -1331,14 +1331,14 @@
     },
     "avatar": {
       "extend": {
-        "borderColor": "{color.border.neutral.inverse}",
+        "borderColor": "{color.border.neutral.strong}",
         "circle": { "borderRadius": "{dimension.borderRadius.max}" }
       },
       "root": {
         "width": "{dimension.size.900}",
         "height": "{dimension.size.900}",
         "fontSize": "{fonts.fontSize.300}",
-        "color": "{color.fg.default}",
+        "color": "{color.fg.on.brand.default}",
         "background": "{color.bg.brand.strong.default}",
         "borderRadius": "{dimension.borderRadius.400}"
       },
@@ -1427,7 +1427,7 @@
             "color": "{color.fg.default}"
           },
           "success": {
-            "background": "{color.bg.brand.strong.active}",
+            "background": "{color.bg.status.success.strong.default}",
             "color": "{color.fg.on.status.success.default}"
           },
           "warn": {
@@ -2146,7 +2146,7 @@
       "icon": {
         "size": "{dimension.size.450}",
         "color": "{color.fg.active}",
-        "checkedColor": "{color.fg.inverse.default}",
+        "checkedColor": "{color.fg.on.fill.default}",
         "checkedHoverColor": "{color.fg.on.fill.hover}",
         "disabledColor": "{color.fg.muted}",
         "sm": { "size": "{dimension.size.350}" },
@@ -2679,10 +2679,10 @@
         "backdrop": "{color.bg.surface.backdrop}"
       },
       "root": {
-        "background": "{color.bg.surface.default.default}",
+        "background": "{color.bg.surface.raised.default}",
         "borderColor": "{color.border.neutral.default}",
         "color": "{color.fg.default}",
-        "borderRadius": "{dimension.borderRadius.500}",
+        "borderRadius": "{dimension.borderRadius.max}",
         "shadow": "{effects.elevation.400}"
       },
       "header": {
@@ -2716,7 +2716,7 @@
       },
       "content": {
         "background": "{color.bg.surface.default.default}",
-        "color": "{color.fg.muted}"
+        "color": "{color.fg.default}"
       },
       "root": { "borderColor": "{color.border.neutral.default}" }
     },
@@ -4444,7 +4444,7 @@
       },
       "root": { "transitionDuration": "{effects.transition.duration.200}" },
       "tablist": {
-        "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.200} {dimension.borderWidth.none}",
+        "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}",
         "background": "transparent",
         "borderColor": "{color.border.neutral.default}"
       },
@@ -5077,11 +5077,11 @@
             "checkedHoverBackground": "{color.bg.neutral.strong.hover}"
           },
           "handle": {
-            "background": "{color.fg.on.fill.default}",
-            "hoverBackground": "{color.fg.on.fill.default}",
+            "background": "{color.bg.surface.raised.default}",
+            "hoverBackground": "{color.bg.surface.raised.default}",
             "disabledBackground": "{color.bg.neutral.medium.strong}",
-            "checkedBackground": "{color.fg.inverse.active}",
-            "checkedHoverBackground": "{color.fg.inverse.active}",
+            "checkedBackground": "{color.bg.surface.raised.default}",
+            "checkedHoverBackground": "{color.bg.surface.raised.default}",
             "color": "{color.fg.default}",
             "hoverColor": "{color.fg.default}",
             "checkedColor": "{color.fg.default}",
@@ -5090,22 +5090,22 @@
         },
         "dark": {
           "handle": {
-            "background": "{color.fg.on.fill.default}",
-            "checkedBackground": "{color.fg.inverse.active}",
+            "background": "{color.bg.surface.raised.default}",
+            "checkedBackground": "{color.bg.surface.raised.default}",
             "checkedColor": "{color.fg.inverse.focus}",
-            "checkedHoverBackground": "{color.fg.inverse.active}",
+            "checkedHoverBackground": "{color.bg.surface.raised.default}",
             "checkedHoverColor": "{color.fg.on.brand.hover}",
             "color": "{color.fg.inverse.default}",
-            "disabledBackground": "{color.bg.neutral.medium.strong}",
-            "hoverBackground": "{color.fg.on.fill.default}",
+            "disabledBackground": "{color.bg.surface.raised.active}",
+            "hoverBackground": "{color.bg.surface.raised.default}",
             "hoverColor": "{color.fg.on.brand.hover}"
           },
           "root": {
             "background": "{color.bg.neutral.medium.active}",
-            "checkedBackground": "{color.bg.neutral.strong.default}",
-            "checkedHoverBackground": "{color.bg.neutral.strong.hover}",
-            "disabledBackground": "{color.bg.surface.canvas.hover}",
-            "hoverBackground": "{color.bg.neutral.medium.strong}"
+            "checkedBackground": "{color.bg.surface.canvas.default}",
+            "checkedHoverBackground": "{color.bg.surface.canvas.hover}",
+            "disabledBackground": "{color.bg.neutral.strong.hover}",
+            "hoverBackground": "{color.bg.surface.raised.active}"
           }
         }
       },

src/components/Accordion/Accordion.tsx

@@ -39,6 +39,7 @@ export interface AccordionProps extends ViewProps {
  * @param withSeparator - Наличие разделитель. Когда true, верхняя граница заголовка становится разделителем
  * @param disabled - Отключенное состояние. Когда true компонент рендерится в соответствии со значением isInitiallyExpanded и не реагирует на нажатия
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace--DS-?node-id=1207-1852&m=dev
+ * @link https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24043-1592
  */
 export const Accordion: React.FC<AccordionProps> = ({
   Icon,

src/components/Avatar/Avatar.tsx

@@ -122,6 +122,7 @@ const ICON_MULTIPLIER = 0.43
  * @param badge - Компонент бейджа
  * @param showBadge - Показывать бейдж или нет
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4972&m=dev
+ * @link https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24043-14161
  */
 export const Avatar = memo<AvatarProps>(
   ({

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StyleSheet, View } from 'react-native'
+
+import { Body } from '../Typography'
+
+import { Badge } from './Badge'
+
+const styles = StyleSheet.create({
+  container: { gap: 16 },
+  example: { gap: 8 },
+})
+
+const meta: Meta<typeof Badge> = {
+  title: 'Misc/Badge',
+  component: Badge,
+  args: { children: 'Badge', severity: 'basic', size: 'base' },
+  argTypes: {
+    children: { control: 'text' },
+    severity: {
+      control: 'radio',
+      options: ['basic', 'info', 'success', 'warning', 'danger'],
+    },
+    size: { control: 'radio', options: ['base', 'large', 'xlarge'] },
+  },
+  parameters: { controls: { exclude: ['dot'] } },
+  render: ({ children = 'Badge', severity, size }) => (
+    <View style={styles.container}>
+      <View style={styles.example}>
+        <Body>Severity</Body>
+        <Badge severity={severity} size={size}>
+          {children}
+        </Badge>
+      </View>
+      <View style={styles.example}>
+        <Body>Dot</Body>
+        <Badge dot severity={severity} size={size} />
+      </View>
+    </View>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof Badge>
+
+const BadgeStory: Story = {}
+
+export { BadgeStory as Badge }

src/components/Badge/Badge.tsx

@@ -22,6 +22,11 @@ export interface BadgeBase
    * @default 'basic'
    */
   severity?: BadgeSeverity
+  /**
+   * Выбор размера компонента
+   * @default 'base'
+   */
+  size?: 'base' | 'large' | 'xlarge'
   /** Дополнительная стилизация для контейнера компонента */
   style?: StyleProp<ViewStyle>
 }
@@ -46,13 +51,22 @@ export type BadgeProps = BadgeText | BadgeDot
  * Компонент Badge
  * @param children - Текст внутри бейджа
  * @param dot - Отображать бейдж в форме точки
- * @param severiy - Выбор варианта стиля компонента
+ * @param severity - Выбор варианта стиля компонента
+ * @param size - Выбор размера компонента
  * @param style - Дополнительная стилизация для контейнера компонента
- * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-4871&m=dev
+ * @link https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=24043-13668
  */
 export const Badge = memo<BadgeProps>(
-  ({ children, dot, severity = 'basic', style, testID, ...rest }) => {
-    badgeStyles.useVariants({ severity })
+  ({
+    children,
+    dot,
+    severity = 'basic',
+    size = 'base',
+    style,
+    testID,
+    ...rest
+  }) => {
+    badgeStyles.useVariants({ severity, size })
     const [textLayout, setTextLayout] = useState<LayoutRectangle>()
 
     const onTextLayout = useCallback((e: LayoutChangeEvent) => {
@@ -68,10 +82,7 @@ export const Badge = memo<BadgeProps>(
           />
         ) : (
           <>
-            <View
-              style={[badgeStyles.dot, badgeStyles.textBadgeContainer]}
-              testID={testID}
-            >
+            <View style={badgeStyles.textBadgeContainer} testID={testID}>
               <Text
                 numberOfLines={1}
                 style={[badgeStyles.textBadge, { minWidth: textLayout?.width }]}
@@ -129,20 +140,83 @@ const badgeStyles = StyleSheet.create(({ components, semantic, fonts }) => ({
   dotShape: {
     width: components.badge.dot.size,
     height: components.badge.dot.size,
-    borderRadius: components.badge.root.borderRadius,
+    borderRadius: semantic.dimension.borderRadius.max,
+    borderWidth: components.overlaybadge.root.outline.width,
+    borderColor: components.overlaybadge.root.outline.color,
+    variants: {
+      size: {
+        base: {},
+        large: {
+          width: components.badge.extend.extDot.lg.size,
+          height: components.badge.extend.extDot.lg.size,
+        },
+        xlarge: {
+          width: components.badge.extend.extDot.xlg.size,
+          height: components.badge.extend.extDot.xlg.size,
+        },
+      },
+    },
   },
   textBadgeContainer: {
     height: components.badge.root.height,
+    minWidth: components.badge.root.minWidth,
     paddingHorizontal: components.badge.root.padding,
     justifyContent: 'center',
-    borderRadius: semantic.dimension.borderRadius.max,
+    borderRadius: components.badge.root.borderRadius,
+    borderWidth: components.overlaybadge.root.outline.width,
+    borderColor: components.overlaybadge.root.outline.color,
+    variants: {
+      severity: {
+        basic: {
+          backgroundColor: components.badge.colorScheme.primary.background,
+        },
+        info: { backgroundColor: components.badge.colorScheme.info.background },
+        success: {
+          backgroundColor: components.badge.colorScheme.success.background,
+        },
+        warning: {
+          backgroundColor: components.badge.colorScheme.warn.background,
+        },
+        danger: {
+          backgroundColor: components.badge.colorScheme.danger.background,
+        },
+      },
+      size: {
+        base: {},
+        large: {
+          height: components.badge.lg.height,
+          minWidth: components.badge.lg.minWidth,
+        },
+        xlarge: {
+          height: components.badge.xl.height,
+          minWidth: components.badge.xl.minWidth,
+        },
+      },
+    },
   },
   textBadge: {
     color: components.badge.colorScheme.primary.color,
     fontSize: components.badge.root.fontSize,
+    fontWeight: fonts.fontWeight.regular,
+    lineHeight: fonts.lineHeight[100],
+    letterSpacing: fonts.letterSpacing[500],
     includeFontPadding: false,
     verticalAlign: 'middle',
     fontFamily: fonts.fontFamily.heading,
+    variants: {
+      severity: {
+        basic: { color: components.badge.colorScheme.primary.color },
+        info: { color: components.badge.colorScheme.info.color },
+        success: { color: components.badge.colorScheme.success.color },
+        warning: { color: components.badge.colorScheme.warn.color },
+        danger: { color: components.badge.colorScheme.danger.color },
+      },
+      size: {
+        base: {},
+        large: {},
+        xlarge: { lineHeight: fonts.lineHeight[350] },
+      },
+    },
   },
   hiddenContainer: {
     width: Dimensions.get('window').width,