@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/AvatarStack/stories/__mock__/index.ts

@@ -0,0 +1,29 @@
+const avatarsListMock = [
+  {
+    id: '1',
+    firstName: 'firstName',
+    lastName: 'lastName',
+  },
+  {
+    id: '2',
+    firstName: 'firstName',
+    lastName: 'lastName',
+  },
+  {
+    id: '3',
+    firstName: 'firstName',
+    lastName: 'lastName',
+  },
+  {
+    id: '4',
+    firstName: 'firstName',
+    lastName: 'lastName',
+  },
+  {
+    id: '5',
+    firstName: 'firstName',
+    lastName: 'lastName',
+  },
+]
+
+export { avatarsListMock }

package/src/components/AvatarStack/styles/avatarStack.ts

@@ -4,11 +4,13 @@ const avatarStackStyles = StyleSheet.create({
   avatarStack: {
     alignItems: 'center',
   },
-  avatarStack__leftover: {
+  avatarStack__item: {
+    position: 'relative',
+  },
+  avatarStack__item_text: {
     justifyContent: 'center',
     alignItems: 'center',
     borderColor: 'transparent',
-    borderRadius: 120,
     borderWidth: 2,
     overflow: 'hidden',
   },

package/src/components/AvatarStack/styles/avatarStackSize.ts

@@ -1,76 +1,35 @@
 import { StyleSheet } from 'react-native'
 
-const avatarStackSizeStyles = StyleSheet.create({
-  avatarStack_size_32__item_horizontal: {
-    marginLeft: -6,
-  },
-  avatarStack_size_32__item_vertical: {
-    marginTop: -6,
-  },
-  avatarStack_size_32__leftover: {
-    width: 32,
-    height: 32,
-  },
-  avatarStack_size_40__item_horizontal: {
-    marginLeft: -8,
-  },
-  avatarStack_size_40__item_vertical: {
-    marginTop: -8,
-  },
-  avatarStack_size_40__leftover: {
-    width: 40,
-    height: 40,
-  },
-  avatarStack_size_60__item_horizontal: {
-    marginLeft: -10,
-  },
-  avatarStack_size_60__item_vertical: {
-    marginTop: -10,
-  },
-  avatarStack_size_60__leftover: {
-    width: 60,
-    height: 60,
-  },
-  avatarStack_size_72__item_horizontal: {
-    marginLeft: -12,
-  },
-  avatarStack_size_72__item_vertical: {
-    marginTop: -12,
-  },
-  avatarStack_size_72__leftover: {
-    width: 72,
-    height: 72,
-  },
-  avatarStack_size_96__item_horizontal: {
-    marginLeft: -16,
-  },
-  avatarStack_size_96__item_vertical: {
-    marginTop: -16,
-  },
-  avatarStack_size_96__leftover: {
-    width: 96,
-    height: 96,
-  },
-  avatarStack_size_144__item_horizontal: {
-    marginLeft: -24,
-  },
-  avatarStack_size_144__item_vertical: {
-    marginTop: -24,
-  },
-  avatarStack_size_144__leftover: {
-    width: 144,
-    height: 144,
-  },
-  avatarStack_size_240__item_horizontal: {
-    marginLeft: -40,
-  },
-  avatarStack_size_240__item_vertical: {
-    marginTop: -40,
-  },
-  avatarStack_size_240__leftover: {
-    width: 240,
-    height: 240,
-  },
-})
+const AVATAR_STACK_SIZES = [16, 20, 24, 32, 40, 56] as const
 
-export { avatarStackSizeStyles }
+const AVATAR_STACK_GAPS = {
+  16: 2,
+  20: 4,
+  24: 4,
+  32: 6,
+  40: 8,
+  56: 8,
+} as const satisfies Record<(typeof AVATAR_STACK_SIZES)[number], number>
+
+const avatarStackSizeStyles = StyleSheet.create(
+  Object.fromEntries(
+    AVATAR_STACK_SIZES.flatMap((size) => {
+      const gap = AVATAR_STACK_GAPS[size]
+
+      return [
+        [`avatarStack_size_${size}__item_horizontal`, { marginLeft: -gap }],
+        [`avatarStack_size_${size}__item_vertical`, { marginTop: -gap }],
+        [
+          `avatarStack_size_${size}__leftover`,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+          },
+        ],
+      ]
+    }),
+  ),
+)
+
+export { AVATAR_STACK_SIZES, avatarStackSizeStyles }

package/src/components/Badge/Badge.appearance.ts

@@ -1,14 +1,30 @@
 import { badgeAppearanceAccent } from './appearance/badgeAccent'
 import { badgeAppearanceDanger } from './appearance/badgeDanger'
+import { badgeAppearanceDisabled } from './appearance/badgeDisabled'
 import { badgeAppearanceExtra } from './appearance/badgeExtra'
+import { badgeAppearanceInfo } from './appearance/badgeInfo'
 import { badgeAppearanceShape } from './appearance/badgeShape'
+import { badgeAppearanceSize } from './appearance/badgeSize'
+import { badgeAppearanceSpecial } from './appearance/badgeSpecial'
+import { badgeAppearanceStyle } from './appearance/badgeStyle'
+import { badgeAppearanceSuccess } from './appearance/badgeSuccess'
+import { badgeAppearanceSurface } from './appearance/badgeSurface'
+import { badgeAppearanceWarning } from './appearance/badgeWarning'
 import type { BadgeAppearance } from './Badge.interface'
 
 const badgeAppearance = {
+  ...badgeAppearanceSize,
+  ...badgeAppearanceShape,
+  ...badgeAppearanceStyle,
   ...badgeAppearanceAccent,
   ...badgeAppearanceDanger,
+  ...badgeAppearanceDisabled,
   ...badgeAppearanceExtra,
-  ...badgeAppearanceShape,
+  ...badgeAppearanceInfo,
+  ...badgeAppearanceSpecial,
+  ...badgeAppearanceSuccess,
+  ...badgeAppearanceSurface,
+  ...badgeAppearanceWarning,
 } satisfies BadgeAppearance
 
 export { badgeAppearance }

package/src/components/Badge/Badge.interface.ts

@@ -3,7 +3,12 @@ import type { StyleProp, TextStyle } from 'react-native'
 import type {
   AppearanceConfig,
   AppearanceKeysDefault,
+  AppearancePartialRecord,
+  AppearanceRecord,
   AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
   CompositeAppearanceKeys,
   FillProps,
   ShapeProps,
@@ -12,16 +17,27 @@ import type {
   TextWeightProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { badgeShapePropsType } from './styles/badgeShape'
 import type { badgeSizePropsType } from './styles/badgeSize'
 import type { badgeTypePropsType } from './styles/badgeType'
 
+type BadgeIconProp = false | SvgIconComponent
+
 interface BadgeAppearanceProps {
   badgeTextColor?: TextColorProps
   badgeTextSize?: TextSizeProps
   badgeTextWeight?: TextWeightProps
+  borderColor?: BorderColorProps
+  dotFill?: IconProps['iconFill']
   fill?: FillProps
+  iconAppearance?: IconProps['appearance']
+  iconFill?: IconProps['iconFill']
+  iconShape?: IconProps['shape']
+  iconSize?: IconProps['iconSize']
   shape?: ShapeProps
+  size?: badgeSizePropsType
 }
 
 type BadgeConfig = AppearanceConfig<AppearanceKeysDefault, BadgeAppearanceProps>
@@ -29,22 +45,50 @@ type BadgeAppearance = BadgeConfig['appearance']
 type BadgeAppearanceShape = Partial<
   Record<AppearanceShapeKey, Partial<Pick<BadgeAppearanceProps, 'shape'>>>
 >
-type BadgeAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
-
+type BadgeAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  BadgeAppearanceProps,
+  'borderColor' | 'fill'
+>
+type BadgeAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  BadgeAppearanceProps,
+  'badgeTextSize' | 'iconSize' | 'size'
+>
 interface BadgeProps extends BadgeAppearanceProps {
-  appearance?: BadgeAppearanceKey
+  appearance?: CompositeAppearanceKeys
+  dot?: boolean
+  icon?: BadgeIconProp
   shape?: badgeShapePropsType
-  size?: badgeSizePropsType
   style?: StyleProp<TextStyle>
   text?: number | string
   type?: badgeTypePropsType
 }
 
+type BadgeAppearanceKey = NonNullable<BadgeProps['appearance']>
+
+type BadgeGalleryStory = ComponentGalleryArgs &
+  Pick<BadgeProps, 'dot' | 'text'> & {
+    icon?: boolean
+  }
+
+type BadgeStoryArgs = Omit<BadgeProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   BadgeAppearance,
   BadgeAppearanceKey,
   BadgeAppearanceProps,
   BadgeAppearanceShape,
+  BadgeAppearanceSize,
+  BadgeAppearanceStyle,
   BadgeConfig,
+  BadgeGalleryStory,
+  BadgeIconProp,
   BadgeProps,
+  BadgeStoryArgs,
 }

package/src/components/Badge/Badge.tsx

@@ -1,14 +1,18 @@
-import { useMemo } from 'react'
 import { View } from 'react-native'
 
+import Svg, { Rect } from 'react-native-svg'
+
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
+import { colorTheme } from '../../utils'
+import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { badgeAppearance } from './Badge.appearance'
-import type {
-  BadgeAppearanceProps,
-  BadgeConfig,
-  BadgeProps,
-} from './Badge.interface'
+import type { BadgeConfig, BadgeProps } from './Badge.interface'
 import { styles } from './Badge.styles'
 
 const badgeConfig: BadgeConfig = {
@@ -20,68 +24,80 @@ const badgeConfig: BadgeConfig = {
 
 badgeConfig.setAppearance(badgeAppearance)
 
+function getDotFillColor(
+  dotFill?: BadgeProps['dotFill'],
+  iconFill?: BadgeProps['iconFill'],
+) {
+  const fillKey = dotFill || iconFill
+
+  if (!fillKey || fillKey === 'none') {
+    return undefined
+  }
+
+  return colorTheme[fillKey]
+}
+
 function Badge(props: BadgeProps) {
+  const { appearance, type, text, dot, icon, style } = props
+
+  const hasText = text != null && text !== ''
+
+  const appearanceConfig = useAppearanceConfig(appearance, badgeConfig)
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
   const {
-    appearance,
-    type,
     size,
     fill,
-    text,
+    borderColor,
     badgeTextColor,
     badgeTextSize,
     badgeTextWeight,
+    dotFill,
+    iconAppearance,
+    iconFill,
+    iconShape,
+    iconSize,
     shape,
-    style,
-  } = props
+  } = propsGenerator
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !badgeConfig.appearance) {
-      return undefined
-    }
-
-    const appearanceKeysList = appearance.split(' ')
-
-    return appearanceKeysList.reduce<BadgeAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        const appearanceMap = badgeConfig.appearance
-
-        if (!appearanceMap) {
-          return resultConfig
-        }
-
-        const appearanceEntry = Object.entries(appearanceMap).find((entry) => {
-          return entry[0] === appearanceKey
-        })
-
-        if (!appearanceEntry) {
-          return resultConfig
-        }
-
-        return Object.assign(resultConfig, appearanceEntry[1])
-      },
-      {},
-    )
-  }, [appearance])
-
-  const fillKey = fill || appearanceConfig?.fill
-  const shapeKey = shape || appearanceConfig?.shape
+  const isIconOnly = Boolean(icon) && !hasText
+  const dotFillColor = getDotFillColor(dotFill, iconFill)
 
   return (
     <View
       style={[
         styles.badge,
-        fillKey && tokens[`fill_${fillKey}`],
+        fill && tokens[`fill_${fill}`],
+        borderColor && tokens[`border_color_${borderColor}`],
         size && styles[`badge_size_${size}`],
-        shapeKey && styles[`badge_shape_${shapeKey}`],
-        type && styles[`badge_type_${type}`],
+        isIconOnly && size && styles[`badge_icon_size_${size}`],
+        shape && styles[`badge_shape_${shape}`],
+        type === 'status' && styles.badge_type_status,
         style && style,
       ]}
     >
-      {text && (
+      {dot && (
+        <View style={styles.badge__dot}>
+          <Svg width={6} height={6} viewBox="0 0 6 6">
+            <Rect width={6} height={6} fill={dotFillColor} rx={3} />
+          </Svg>
+        </View>
+      )}
+      {icon && (
+        <Icon
+          appearance={iconAppearance}
+          size={iconSize}
+          iconFill={iconFill}
+          iconSize={iconSize}
+          shape={iconShape}
+          SVGIcon={icon}
+        />
+      )}
+      {hasText && (
         <Text
-          size={badgeTextSize || appearanceConfig?.badgeTextSize}
-          textColor={badgeTextColor || appearanceConfig?.badgeTextColor}
-          weight={badgeTextWeight || appearanceConfig?.badgeTextWeight}
+          size={badgeTextSize}
+          textColor={badgeTextColor}
+          weight={badgeTextWeight}
         >
           {text}
         </Text>

package/src/components/Badge/appearance/badgeAccent.ts

@@ -3,7 +3,19 @@ import type { BadgeAppearance } from '../Badge.interface'
 const badgeAppearanceAccent = {
   accentPrimary: {
     fill: 'accentPrimary',
+    borderColor: 'accentBorderQuaternary',
     badgeTextColor: 'accentTextPrimary',
+    dotFill: 'accentItemPrimary',
+    iconAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconFill: 'accentItemPrimary',
+  },
+  accentSecondary: {
+    fill: 'accentSecondary',
+    borderColor: 'accentBorderQuaternary',
+    badgeTextColor: 'accentTextQuaternary',
+    dotFill: 'accentItemQuaternary',
+    iconAppearance: 'accentSecondary size16_16 ghost rounded',
+    iconFill: 'accentItemQuaternary',
   },
 } satisfies BadgeAppearance
 

package/src/components/Badge/appearance/badgeDanger.ts

@@ -3,7 +3,11 @@ import type { BadgeAppearance } from '../Badge.interface'
 const badgeAppearanceDanger = {
   dangerPrimary: {
     fill: 'dangerPrimary',
+    borderColor: 'dangerBorderPrimary',
     badgeTextColor: 'accentTextPrimary',
+    dotFill: 'dangerItemPrimary',
+    iconAppearance: 'dangerPrimary size16_16 ghost rounded',
+    iconFill: 'dangerItemPrimary',
   },
 } satisfies BadgeAppearance
 

package/src/components/Badge/appearance/badgeDisabled.ts

@@ -0,0 +1,13 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    borderColor: 'surfaceBorderPrimary',
+    badgeTextColor: 'surfaceTextDisabled',
+    iconAppearance: 'disabledPrimary size16_16 ghost rounded',
+    iconFill: 'surfaceItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceDisabled }

package/src/components/Badge/appearance/badgeExtra.ts

@@ -2,8 +2,12 @@ import type { BadgeAppearance } from '../Badge.interface'
 
 const badgeAppearanceExtra = {
   extraPrimary: {
-    fill: 'specialPrimary',
+    fill: 'extraPrimary',
+    borderColor: 'extraBorderSecondary',
     badgeTextColor: 'accentTextPrimary',
+    dotFill: 'extraItemPrimary',
+    iconAppearance: 'extraPrimary size16_16 ghost rounded',
+    iconFill: 'extraItemPrimary',
   },
 } satisfies BadgeAppearance
 

package/src/components/Badge/appearance/badgeInfo.ts

@@ -0,0 +1,14 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceInfo = {
+  infoPrimary: {
+    fill: 'infoPrimary',
+    borderColor: 'infoBorderSecondary',
+    badgeTextColor: 'infoTextPrimary',
+    dotFill: 'infoItemPrimary',
+    iconAppearance: 'infoPrimary size16_16 ghost rounded',
+    iconFill: 'infoItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceInfo }

package/src/components/Badge/appearance/badgeSize.ts

@@ -0,0 +1,41 @@
+import type { BadgeAppearanceSize } from '../Badge.interface'
+
+const badgeAppearanceSize = {
+  sizeXXL: {
+    size: 'xxl',
+    badgeTextSize: 'xl',
+    iconSize: '24',
+  },
+  sizeXL: {
+    size: 'xl',
+    badgeTextSize: 'l',
+    iconSize: '24',
+  },
+  sizeL: {
+    size: 'l',
+    badgeTextSize: 'l',
+    iconSize: '20',
+  },
+  sizeM: {
+    size: 'm',
+    badgeTextSize: 'm',
+    iconSize: '16',
+  },
+  sizeS: {
+    size: 's',
+    badgeTextSize: 's',
+    iconSize: '16',
+  },
+  sizeXS: {
+    size: 'xs',
+    badgeTextSize: 'xxs',
+    iconSize: '16',
+  },
+  sizeXXS: {
+    size: 'xxs',
+    badgeTextSize: 'xxs',
+    iconSize: '14',
+  },
+} satisfies BadgeAppearanceSize
+
+export { badgeAppearanceSize }

package/src/components/Badge/appearance/badgeSpecial.ts

@@ -0,0 +1,14 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceSpecial = {
+  specialPrimary: {
+    fill: 'specialPrimary',
+    borderColor: 'specialBorderSecondary',
+    badgeTextColor: 'specialTextPrimary',
+    dotFill: 'specialItemPrimary',
+    iconAppearance: 'specialPrimary size16_16 ghost rounded',
+    iconFill: 'specialItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceSpecial }

package/src/components/Badge/appearance/badgeStyle.ts

@@ -0,0 +1,17 @@
+import type { BadgeAppearanceStyle } from '../Badge.interface'
+
+const badgeAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies BadgeAppearanceStyle
+
+export { badgeAppearanceStyle }

package/src/components/Badge/appearance/badgeSuccess.ts

@@ -0,0 +1,14 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successPrimary',
+    borderColor: 'successBorderPrimary',
+    badgeTextColor: 'successTextPrimary',
+    dotFill: 'successItemPrimary',
+    iconAppearance: 'successPrimary size16_16 ghost rounded',
+    iconFill: 'successItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceSuccess }

package/src/components/Badge/appearance/badgeSurface.ts

@@ -0,0 +1,30 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    badgeTextColor: 'surfaceTextPrimary',
+    dotFill: 'surfaceItemPrimary',
+    iconAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconFill: 'surfaceItemPrimary',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderSecondary',
+    badgeTextColor: 'surfaceTextPrimary',
+    dotFill: 'surfaceItemPrimary',
+    iconAppearance: 'surfaceSecondary size16_16 ghost rounded',
+    iconFill: 'surfaceItemPrimary',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    borderColor: 'surfaceBorderTertiary',
+    badgeTextColor: 'surfaceTextPrimary',
+    dotFill: 'surfaceItemPrimary',
+    iconAppearance: 'surfaceTertiary size16_16 ghost rounded',
+    iconFill: 'surfaceItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceSurface }

package/src/components/Badge/appearance/badgeWarning.ts

@@ -0,0 +1,14 @@
+import type { BadgeAppearance } from '../Badge.interface'
+
+const badgeAppearanceWarning = {
+  warningPrimary: {
+    fill: 'warningPrimary',
+    borderColor: 'warningBorderPrimary',
+    badgeTextColor: 'warningTextPrimary',
+    dotFill: 'warningItemPrimary',
+    iconAppearance: 'warningPrimary size16_16 ghost rounded',
+    iconFill: 'warningItemPrimary',
+  },
+} satisfies BadgeAppearance
+
+export { badgeAppearanceWarning }

package/src/components/Badge/index.ts

@@ -4,6 +4,7 @@ import type {
   BadgeAppearance,
   BadgeAppearanceKey,
   BadgeAppearanceShape,
+  BadgeAppearanceSize,
   BadgeConfig,
   BadgeProps,
 } from './Badge.interface'
@@ -26,6 +27,7 @@ export type {
   BadgeAppearance,
   BadgeAppearanceKey,
   BadgeAppearanceShape,
+  BadgeAppearanceSize,
   BadgeConfig,
   BadgeProps,
   badgeShapePropsType,