@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Icon/Icon.interface.ts

@@ -6,37 +6,125 @@ import type {
   ViewStyle,
 } from 'react-native'
 
-import type { FillProps, ItemFillActiveProps } from '@itcase/types-ui'
+import type {
+  AppearanceConfig,
+  AppearanceIconSizeKey,
+  AppearanceKeysDefault,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillHoverProps,
+  FillProps,
+  FillSizeProps,
+  ItemFillActiveProps,
+  ShapeProps,
+} from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { BadgeProps } from '../Badge/Badge.interface'
 import type { badgeTypePropsType } from '../Badge/styles/badgeType'
 import type { iconShapePropsType } from './styles/iconShape'
-import type { iconSizePropsType } from './styles/iconSize'
+import type {
+  iconFillSizePropsType,
+  iconGlyphSizePropsType,
+  iconSizePropsType,
+} from './styles/iconSize'
 
 type SvgIconComponent = ComponentType<{
+  color?: ColorValue
   fill?: string
   height?: number | string
   style?: object
   width?: number | string
 }>
 
-interface IconProps {
+interface IconAppearanceProps {
+  badgeAppearance?: BadgeProps['appearance']
+  badgeAppearanceSize?: AppearanceSizeKey
+  badgeShape?: BadgeProps['shape']
+  badgeSize?: BadgeProps['size']
+  badgeTextColor?: BadgeProps['badgeTextColor']
+  badgeTextSize?: BadgeProps['badgeTextSize']
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillHover?: FillHoverProps
+  fillSize?: FillSizeProps | iconSizePropsType
+  iconFill?: ItemFillActiveProps
+  iconFillActive?: ItemFillActiveProps
+  iconFillDisabled?: ItemFillActiveProps
+  iconSize?: iconGlyphSizePropsType
+  shape?: ShapeProps
+  size?: iconFillSizePropsType | iconGlyphSizePropsType
+}
+
+type IconConfig = AppearanceConfig<AppearanceKeysDefault, IconAppearanceProps>
+type IconAppearance = IconConfig['appearance']
+type IconAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  IconAppearanceProps,
+  'borderColor' | 'fill'
+>
+type IconAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<IconAppearanceProps, 'shape'>>>
+>
+type IconAppearanceSize = AppearancePartialRecord<
+  AppearanceIconSizeKey,
+  IconAppearanceProps,
+  Extract<
+    keyof IconAppearanceProps,
+    'badgeAppearanceSize' | 'badgeSize' | 'fillSize' | 'iconSize'
+  >
+>
+
+interface IconProps extends IconAppearanceProps {
   isActive?: boolean
   isDisabled?: boolean
+  isSkeleton?: boolean
+  onClick?: (event?: GestureResponderEvent) => void
   onPress?: (event: GestureResponderEvent) => void
+  appearance?: string | AppearanceKeysDefault | CompositeAppearanceKeys
   badgeCount?: number | string
   badgeType?: badgeTypePropsType
-  fill?: FillProps
+  badgeValue?: number | string
+  dataTestId?: string
   fillColor?: ColorValue
   iconColor?: ColorValue
-  iconFill?: ItemFillActiveProps
-  iconFillActive?: ItemFillActiveProps
-  iconFillDisabled?: ItemFillActiveProps
-  iconSize?: iconSizePropsType
   iconUrl?: string
+  imageSrc?: string
   shape?: iconShapePropsType
-  size?: iconSizePropsType
   style?: StyleProp<ViewStyle>
   SVGIcon?: SvgIconComponent
+  SvgImage?: SvgIconComponent
 }
 
-export type { IconProps, SvgIconComponent }
+type IconAppearanceKey = NonNullable<IconProps['appearance']>
+
+type IconGalleryStory = ComponentGalleryArgs &
+  Pick<IconProps, 'badgeValue' | 'isDisabled' | 'isSkeleton'> & {
+    showIcon?: boolean
+  }
+
+type IconStoryArgs = Omit<IconProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
+export type {
+  IconAppearance,
+  IconAppearanceKey,
+  IconAppearanceProps,
+  IconAppearanceShape,
+  IconAppearanceSize,
+  IconAppearanceStyle,
+  IconConfig,
+  IconGalleryStory,
+  IconProps,
+  IconStoryArgs,
+  SvgIconComponent,
+}

package/src/components/Icon/Icon.styles.ts

@@ -1,11 +1,18 @@
 import { iconStyles as iconBaseStyles } from './styles/icon'
+import { iconBadgePositionStyles } from './styles/iconBadge'
 import { iconShapeStyles } from './styles/iconShape'
-import { iconSizeStyles } from './styles/iconSize'
+import { iconFillSizeStyles, iconGlyphSizeStyles } from './styles/iconSize'
 
 const styles = {
   ...iconBaseStyles,
   ...iconShapeStyles,
-  ...iconSizeStyles,
-}
+  ...iconFillSizeStyles,
+  ...iconGlyphSizeStyles,
+  ...iconBadgePositionStyles,
+} as typeof iconBadgePositionStyles &
+  typeof iconBaseStyles &
+  typeof iconFillSizeStyles &
+  typeof iconGlyphSizeStyles &
+  typeof iconShapeStyles
 
 export { styles }

package/src/components/Icon/Icon.tsx

@@ -1,96 +1,218 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
 
 import { SvgUri } from 'react-native-svg'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
+
 import { tokens } from '../../styles/tokens'
+import { colorTheme } from '../../utils'
 import { Badge } from '../Badge'
-import type { IconProps } from './Icon.interface'
+import { iconAppearance } from './Icon.appearance'
+import type {
+  IconAppearanceProps,
+  IconConfig,
+  IconProps,
+} from './Icon.interface'
 import { styles } from './Icon.styles'
 
-const Icon: React.FC<IconProps> = (props) => {
+const iconConfig: IconConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    iconConfig.appearance = newComponent
+  },
+}
+
+iconConfig.setAppearance(iconAppearance)
+
+function getTokenIconFillColor(
+  iconFillKey?: IconAppearanceProps['iconFill'],
+  iconColor?: ColorValue,
+) {
+  if (iconColor) {
+    return iconColor
+  }
+
+  if (!iconFillKey || iconFillKey === 'none') {
+    return undefined
+  }
+
+  return colorTheme[iconFillKey]
+}
+
+function Icon(props: IconProps) {
   const {
+    appearance = 'surfacePrimary size24_24 ghost rounded',
+    dataTestId,
     size,
     fill,
     fillColor,
     badgeCount,
     badgeType,
+    badgeValue,
     iconColor,
     iconFill,
     iconFillActive,
     iconFillDisabled,
-    iconSize,
     iconUrl,
+    imageSrc,
     shape,
     style,
     SVGIcon,
+    SvgImage,
     isActive,
     isDisabled,
+    isSkeleton,
+    onClick,
     onPress,
   } = props
 
+  const resolvedSvgIcon = SvgImage || SVGIcon
+  const resolvedBadgeValue = badgeValue ?? badgeCount
+  const resolvedIconUrl = iconUrl || imageSrc
+  const handlePress = onPress || onClick
+
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    iconConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    size: appearanceSize,
+    fill: appearanceFill,
+    fillSize,
+    borderColor,
+    badgeAppearance,
+    badgeAppearanceSize,
+    badgeShape,
+    badgeSize,
+    badgeTextColor,
+    badgeTextSize,
+    iconFill: appearanceIconFill,
+    iconFillActive: appearanceIconFillActive,
+    iconFillDisabled: appearanceIconFillDisabled,
+    iconSize,
+    shape: appearanceShape,
+  } = propsGenerator
+
+  const fillKey = fill || appearanceFill
+  const fillSizeKey = fillSize ?? appearanceSize ?? size
+  const shapeKey = shape || appearanceShape
+  const iconSizeKey = iconSize ?? appearanceSize ?? size
+  const iconSizePx = iconSizeKey ? Number(iconSizeKey) : undefined
+  const hasBadge =
+    !isSkeleton && resolvedBadgeValue != null && resolvedBadgeValue !== ''
+
+  const resolvedIconFill = isDisabled
+    ? iconFillDisabled ||
+      appearanceIconFillDisabled ||
+      iconFill ||
+      appearanceIconFill
+    : isActive
+      ? iconFillActive ||
+        appearanceIconFillActive ||
+        iconFill ||
+        appearanceIconFill
+      : iconFill || appearanceIconFill
+
+  const glyphFill = getTokenIconFillColor(resolvedIconFill, iconColor)
+  const SvgComponent = resolvedSvgIcon
+
   const WrapperComponent = useMemo(() => {
-    if (onPress) {
+    if (handlePress) {
       return Pressable
     }
     return View
-  }, [onPress])
-
-  const resolvedIconFill = isDisabled
-    ? iconFillDisabled || iconFill
-    : isActive
-      ? iconFillActive || iconFill
-      : iconFill
+  }, [handlePress])
 
   const iconGlyphStyle = {
     ...(resolvedIconFill ? tokens[`icon_fill_${resolvedIconFill}`] : {}),
-    ...(iconColor ? { color: iconColor } : {}),
+    ...(glyphFill ? { color: glyphFill } : {}),
   }
 
+  const wrapperStyle = [
+    styles.icon_wrapper,
+    !isSkeleton && fillKey && fillKey !== 'none' && tokens[`fill_${fillKey}`],
+    isSkeleton && tokens['fill_surfaceSecondary'],
+    fillColor != null &&
+      fillColor !== '' &&
+      !isSkeleton && { backgroundColor: fillColor },
+    !isSkeleton && borderColor && tokens[`border_color_${borderColor}`],
+    fillSizeKey && styles[`icon_fill_size_${fillSizeKey}`],
+    shapeKey && styles[`icon_shape_${shapeKey}`],
+    shapeKey &&
+      fillKey &&
+      fillKey !== 'none' &&
+      !hasBadge && { overflow: 'hidden' },
+    isSkeleton && styles.icon_skeleton,
+    isDisabled && styles.icon_state_disabled,
+  ]
+
+  const itemStyle = [
+    styles.icon__item,
+    iconSizeKey && styles[`icon_size_${iconSizeKey}`],
+  ]
+
+  const badgeStyle =
+    iconSizeKey && styles[`icon__badge_size_${iconSizeKey}`]
+      ? styles[`icon__badge_size_${iconSizeKey}`]
+      : styles.icon__badge_size_24
+
   return (
-    <WrapperComponent style={[styles.icon, style]} onPress={onPress}>
-      <View
-        style={[
-          styles.icon_wrapper,
-          fill && tokens[`fill_${fill}`],
-          fillColor && { backgroundColor: fillColor },
-          size && styles[`icon_size_${size}`],
-          shape && styles[`icon_shape_${shape}`],
-          style && style,
-        ]}
-      >
-        {SVGIcon && (
-          <SVGIcon
-            width={iconSize}
-            height={iconSize}
-            fill={'currentColor'}
-            style={iconGlyphStyle}
-          />
-        )}
-        {iconUrl && (
-          <SvgUri
-            width={iconSize}
-            height={iconSize}
-            fill={'currentColor'}
-            style={iconGlyphStyle}
-            uri={iconUrl}
-          />
-        )}
-
-        {badgeCount && (
-          <Badge
-            appearance="accentPrimary"
-            type={badgeType}
-            size="s"
-            text={badgeCount}
-            badgeTextSize="xs"
-            shape="circular"
-            style={styles.icon__badge}
-          />
-        )}
+    <WrapperComponent style={[styles.icon, style]} onPress={handlePress}>
+      <View style={wrapperStyle as StyleProp<ViewStyle>} testID={dataTestId}>
+        <View style={itemStyle}>
+          {!isSkeleton && SvgComponent && (
+            <SvgComponent
+              width={iconSizePx}
+              height={iconSizePx}
+              fill={typeof glyphFill === 'string' ? glyphFill : undefined}
+              color={glyphFill}
+              style={iconGlyphStyle}
+            />
+          )}
+          {!isSkeleton && resolvedIconUrl && (
+            <SvgUri
+              width={iconSizePx}
+              height={iconSizePx}
+              fill={typeof glyphFill === 'string' ? glyphFill : undefined}
+              color={glyphFill}
+              style={iconGlyphStyle}
+              uri={resolvedIconUrl}
+            />
+          )}
+
+          {hasBadge ? (
+            <Badge
+              appearance={mergeAppearanceKeys(
+                badgeAppearance,
+                badgeAppearanceSize,
+              )}
+              type={badgeType}
+              size={badgeSize}
+              text={resolvedBadgeValue}
+              badgeTextColor={badgeTextColor}
+              badgeTextSize={badgeTextSize}
+              shape={badgeShape}
+              style={badgeStyle}
+            />
+          ) : null}
+        </View>
       </View>
     </WrapperComponent>
   )
 }
 
-export { Icon }
+export { Icon, iconAppearance, iconConfig }

package/src/components/Icon/appearance/iconAccent.ts

@@ -0,0 +1,19 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceAccent = {
+  accentPrimary: {
+    fill: 'accentPrimary',
+    fillHover: 'accentHoverPrimary',
+    borderColor: 'accentBorderPrimary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'accentItemPrimary',
+  },
+  accentSecondary: {
+    fill: 'accentPrimary',
+    fillHover: 'accentHoverPrimary',
+    borderColor: 'accentBorderPrimary',
+    iconFill: 'accentItemPrimary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceAccent }

package/src/components/Icon/appearance/iconDanger.ts

@@ -0,0 +1,13 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceDanger = {
+  dangerPrimary: {
+    fill: 'dangerPrimary',
+    fillHover: 'dangerHoverPrimary',
+    borderColor: 'dangerBorderSecondary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'dangerItemPrimary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceDanger }

package/src/components/Icon/appearance/iconDisabled.ts

@@ -0,0 +1,12 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'surfaceItemQuaternary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceDisabled }

package/src/components/Icon/appearance/iconError.ts

@@ -0,0 +1,13 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceError = {
+  errorPrimary: {
+    fill: 'errorPrimary',
+    fillHover: 'errorHoverPrimary',
+    borderColor: 'errorBorderPrimary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'errorItemPrimary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceError }

package/src/components/Icon/appearance/iconExtra.ts

@@ -0,0 +1,13 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceExtra = {
+  extraPrimary: {
+    fill: 'extraPrimary',
+    fillHover: 'extraHoverPrimary',
+    borderColor: 'extraBorderQuaternary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'extraItemPrimary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceExtra }

package/src/components/Icon/appearance/iconInfo.ts

@@ -0,0 +1,18 @@
+import type { IconAppearance } from '../Icon.interface'
+
+const iconAppearanceInfo = {
+  infoPrimary: {
+    fill: 'infoPrimary',
+    borderColor: 'infoBorderPrimary',
+    badgeAppearance: 'surfacePrimary sizeM solid rounded',
+    iconFill: 'infoItemPrimary',
+  },
+  infoSecondary: {
+    fill: 'accentPrimary',
+    fillHover: 'accentHoverPrimary',
+    borderColor: 'accentBorderPrimary',
+    iconFill: 'infoItemSecondary',
+  },
+} satisfies IconAppearance
+
+export { iconAppearanceInfo }

package/src/components/Icon/appearance/iconShape.ts

@@ -0,0 +1,24 @@
+import type { IconAppearanceShape } from '../Icon.interface'
+
+const iconAppearanceShape = {
+  circular: {
+    shape: 'circular',
+  },
+  rounded: {
+    shape: 'rounded',
+  },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
+} satisfies IconAppearanceShape
+
+export { iconAppearanceShape }