@itcase/ui-react-native 1.10.81

package/demoApp/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "demoApp",
+  "version": "1.0.0",
+  "private": true,
+  "engines": {
+    "node": ">= 22.11.0"
+  },
+  "scripts": {
+    "android": "react-native run-android",
+    "android:storybook": "STORYBOOK=true react-native start --reset-cache & react-native run-android --no-packager && wait",
+    "ios": "react-native run-ios",
+    "ios:storybook": "STORYBOOK=true react-native start --reset-cache & react-native run-ios --no-packager && wait",
+    "start": "react-native start --reset-cache",
+    "start:storybook": "STORYBOOK=true react-native start --reset-cache"
+  },
+  "overrides": {
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native-reanimated": "4.6.0-nightly-20260817-b15bb32ab",
+    "react-native-worklets": "0.12.0"
+  },
+  "dependencies": {
+    "@itcase/ui-core": "^1.10.74",
+    "@react-native-community/datetimepicker": "^8.6.0",
+    "@react-native-community/slider": "5.2.0",
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native/new-app-screen": "0.87.0",
+    "react-native-safe-area-context": "^5.5.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.87.0",
+    "react-native-linear-gradient": "2.8.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@itcase/storybook-config": "^1.3.8",
+    "@storybook/react-native-ui-lite": "10.5.4",
+    "@react-native-community/cli": "20.2.0",
+    "@react-native-community/cli-platform-android": "20.2.0",
+    "@react-native-community/cli-platform-ios": "20.2.0",
+    "@react-native/babel-preset": "0.87.0",
+    "@react-native/eslint-config": "0.87.0",
+    "@react-native/metro-config": "0.87.0",
+    "@react-native/typescript-config": "0.87.0",
+    "@types/react": "^19.2.0",
+    "react-native-gesture-handler": "2.32.0",
+    "react-native-reanimated": "4.6.0-nightly-20260817-b15bb32ab",
+    "react-native-svg": "^15.15.5",
+    "react-native-svg-transformer": "^1.5.3",
+    "react-native-worklets": "0.12.0",
+    "typescript": "^6.0.3"
+  }
+}

package/demoApp/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@itcase/ui-react-native",
+  "version": "1.10.81",
+  "license": "MIT",
+  "private": false,
+  "main": "src/index.tsx",
+  "react-native": "src/index.tsx",
+  "types": "src/index.tsx",
+  "engines": {
+    "node": ">= 22.11.0"
+  },
+  "scripts": {
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "storybook-web": "rm -rf node_modules/.cache/ && storybook dev -p 6006 --config-dir .storybook-react-native-web --disable-telemetry",
+    "storybook:build": "storybook build --config-dir .storybook-react-native-web --disable-telemetry",
+    "storybook-react-native-ios": "sb-rn-get-stories --config-path .storybook-react-native && npm run ios:storybook --prefix demoApp",
+    "storybook-react-native-android": "sb-rn-get-stories --config-path .storybook-react-native && npm run android:storybook --prefix demoApp",
+    "react-native-ios": "npm run ios --prefix demoApp",
+    "react-native-android": "npm run android --prefix demoApp"
+  },
+  "dependencies": {
+    "@itcase/icons-default": "^1.2.35",
+    "@itcase/tokens-am": "^1.1.60",
+    "@itcase/types-ui": "^1.1.98",
+    "@itcase/ui-core": "^1.10.79",
+    "react-native-linear-gradient": "2.8.3",
+    "react-native-svg": "^15.15.5"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@itcase/storybook-config": "^1.3.9",
+    "@react-native/assets-registry": "0.87.0",
+    "@react-native/typescript-config": "0.87.0",
+    "@storybook/addon-ondevice-actions": "^10.5.4",
+    "@storybook/addon-ondevice-backgrounds": "^10.5.4",
+    "@storybook/addon-ondevice-controls": "^10.5.4",
+    "@storybook/react": "^10.5.9",
+    "@storybook/react-native": "^10.5.4",
+    "@storybook/react-native-ui-lite": "^10.5.4",
+    "@storybook/react-native-web-vite": "^10.5.9",
+    "@storybook/react-vite": "^10.5.9",
+    "@types/react": "^18.3.12",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.87.0",
+    "react-native-svg-transformer": "^1.5.3",
+    "react-native-web": "^0.21.2",
+    "storybook": "^10.5.9",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.2.1"
+  },
+  "gitHead": "30885ce67532ec321177fc0cf28fa7d7337b7cf7"
+}

package/postcss.config.mjs

@@ -0,0 +1 @@
+export default {}

package/src/components/Avatar/Avatar.appearance.ts

@@ -0,0 +1,14 @@
+import { avatarAppearanceShape } from './appearance/avatarShape'
+import { avatarAppearanceSize } from './appearance/avatarSize'
+import { avatarAppearanceStyle } from './appearance/avatarStyle'
+import { avatarAppearanceSurface } from './appearance/avatarSurface'
+import type { AvatarAppearance } from './Avatar.interface'
+
+const avatarAppearance = {
+  ...avatarAppearanceSize,
+  ...avatarAppearanceStyle,
+  ...avatarAppearanceShape,
+  ...avatarAppearanceSurface,
+} satisfies AvatarAppearance
+
+export { avatarAppearance }

package/src/components/Avatar/Avatar.interface.ts

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react'
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysPx,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizePxKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearancePxKeys,
+  FillProps,
+  ShapeProps,
+  SizePXProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+} from '@itcase/types-ui'
+
+import type { BadgeProps } from '../Badge/Badge.interface'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
+import type { avatarSizesPropsType } from './styles/avatarSize'
+
+interface AvatarAppearanceProps {
+  badge?: boolean
+  badgeAppearance?: BadgeProps['appearance']
+  badgeShape?: BadgeProps['shape']
+  badgeSize?: BadgeProps['size']
+  badgeTextColor?: BadgeProps['badgeTextColor']
+  badgeTextSize?: BadgeProps['badgeTextSize']
+  badgeValue?: BadgeProps['text']
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  icon?: SvgIconComponent
+  iconFill?: IconProps['fill']
+  iconItemFill?: IconProps['iconFill']
+  iconShape?: IconProps['shape']
+  iconSize?: IconProps['iconSize']
+  iconSrc?: string
+  shape?: ShapeProps
+  size?: avatarSizesPropsType | SizePXProps
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+  textWeight?: TextWeightProps
+}
+
+type AvatarConfig = AppearanceConfig<AppearanceKeysPx, AvatarAppearanceProps>
+type AvatarAppearance = AvatarConfig['appearance']
+type AvatarAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  AvatarAppearanceProps,
+  'borderColor' | 'fill'
+>
+type AvatarAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  AvatarAppearanceProps,
+  'shape'
+>
+type AvatarAppearanceSize = AppearancePartialRecord<
+  AppearanceSizePxKey,
+  AvatarAppearanceProps,
+  'badgeSize' | 'iconSize' | 'size' | 'textSize'
+>
+type AvatarAppearanceKey = AppearanceKeysPx | CompositeAppearancePxKeys
+
+interface AvatarProps extends AvatarAppearanceProps {
+  onPress?: (event: GestureResponderEvent) => void
+  after?: ReactNode
+  appearance?: AvatarAppearanceKey
+  before?: ReactNode
+  charsTextColor?: TextColorProps
+  charsTextSize?: TextSizeProps
+  charsWeight?: TextWeightProps
+  count?: number | string
+  fillColor?: ColorValue
+  firstName?: string
+  imageSrc?: ImageSourcePropType
+  secondName?: string
+  style?: StyleProp<ViewStyle>
+}
+
+export type {
+  AvatarAppearance,
+  AvatarAppearanceKey,
+  AvatarAppearanceProps,
+  AvatarAppearanceShape,
+  AvatarAppearanceSize,
+  AvatarAppearanceStyle,
+  AvatarConfig,
+  AvatarProps,
+}

package/src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,11 @@
+import { avatarStyles as avatarBaseStyles } from './styles/avatar'
+import { avatarShapeStyles } from './styles/avatarShape'
+import { avatarSizeStyles } from './styles/avatarSize'
+
+const styles = {
+  ...avatarBaseStyles,
+  ...avatarShapeStyles,
+  ...avatarSizeStyles,
+}
+
+export { styles }

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,181 @@
+import { useMemo } from 'react'
+import { Image, Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Badge } from '../Badge'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+import { avatarAppearance } from './Avatar.appearance'
+import type {
+  AvatarAppearanceProps,
+  AvatarConfig,
+  AvatarProps,
+} from './Avatar.interface'
+import { styles } from './Avatar.styles'
+
+const DEFAULT_AVATAR_SHAPE = 'circular'
+
+const avatarConfig: AvatarConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    avatarConfig.appearance = newComponent
+  },
+}
+
+avatarConfig.setAppearance(avatarAppearance)
+
+function Avatar(props: AvatarProps) {
+  const {
+    appearance,
+    size,
+    fill,
+    fillColor,
+    borderColor,
+    textColor,
+    textSize,
+    textWeight,
+    firstName = '',
+    secondName = '',
+    badge,
+    badgeAppearance,
+    badgeShape,
+    badgeSize,
+    badgeTextColor,
+    badgeTextSize,
+    badgeValue,
+    charsTextColor,
+    charsTextSize,
+    charsWeight,
+    count,
+    icon,
+    iconFill,
+    iconItemFill,
+    iconShape,
+    iconSize,
+    iconSrc,
+    imageSrc,
+    shape,
+    style,
+    before,
+    after,
+    onPress,
+  } = props
+
+  const avatarChars = useMemo(() => {
+    const firstChar = (firstName[0] || '').toUpperCase()
+    const secondChar = (secondName[0] || '').toUpperCase()
+    return `${firstChar}${secondChar}`
+  }, [firstName, secondName])
+
+  const appearanceConfig = useMemo(() => {
+    if (!appearance || !avatarConfig.appearance) {
+      return undefined
+    }
+
+    const appearanceKeysList = appearance.split(' ')
+
+    return appearanceKeysList.reduce<AvatarAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        const appearanceMap = avatarConfig.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 sizeKey = size != null ? size : appearanceConfig?.size
+  const shapeKey = shape || appearanceConfig?.shape || DEFAULT_AVATAR_SHAPE
+  const borderColorKey = borderColor || appearanceConfig?.borderColor
+  const textColorKey =
+    charsTextColor || textColor || appearanceConfig?.textColor
+  const textSizeKey = charsTextSize || textSize || appearanceConfig?.textSize
+  const textWeightKey =
+    charsWeight || textWeight || appearanceConfig?.textWeight
+  const iconSizeKey = iconSize || appearanceConfig?.iconSize
+  const showIcon = Boolean(icon || iconSrc)
+  const avatarLabel = avatarChars || count
+  const rootStyle = [styles.avatar, style]
+  const avatarContent = (
+    <View
+      style={[
+        styles.avatar__wrapper,
+        fillKey && tokens[`fill_${fillKey}`],
+        fillColor && { backgroundColor: fillColor },
+        borderColorKey && tokens[`border_color_${borderColorKey}`],
+        sizeKey != null && styles[`avatar_size_${sizeKey}`],
+        shapeKey && styles[`avatar_shape_${shapeKey}`],
+      ]}
+    >
+      {before}
+      {imageSrc && (
+        <Image
+          resizeMode="cover"
+          source={imageSrc}
+          style={[
+            styles.avatar__image,
+            shapeKey && styles[`avatar_shape_${shapeKey}`],
+          ]}
+        />
+      )}
+      {!imageSrc && avatarLabel && (
+        <Text
+          size={textSizeKey}
+          textColor={textColorKey}
+          weight={textWeightKey}
+        >
+          {avatarLabel}
+        </Text>
+      )}
+      {showIcon && (
+        <Icon
+          size={iconSizeKey}
+          fill={iconFill || appearanceConfig?.iconFill}
+          iconFill={iconItemFill || appearanceConfig?.iconItemFill}
+          iconSize={iconSizeKey}
+          iconUrl={iconSrc}
+          shape={iconShape || appearanceConfig?.iconShape}
+          style={styles.avatar__icon}
+          SVGIcon={icon}
+        />
+      )}
+      {badge && (
+        <Badge
+          appearance={badgeAppearance || appearanceConfig?.badgeAppearance}
+          size={badgeSize || appearanceConfig?.badgeSize}
+          text={badgeValue}
+          badgeTextColor={badgeTextColor || appearanceConfig?.badgeTextColor}
+          badgeTextSize={badgeTextSize || appearanceConfig?.badgeTextSize}
+          shape={badgeShape || appearanceConfig?.badgeShape}
+          style={styles.avatar__badge}
+        />
+      )}
+      {after}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable style={rootStyle} onPress={onPress}>
+        {avatarContent}
+      </Pressable>
+    )
+  }
+
+  return <View style={rootStyle}>{avatarContent}</View>
+}
+
+export { Avatar, avatarConfig }

package/src/components/Avatar/appearance/avatarShape.ts

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

package/src/components/Avatar/appearance/avatarSize.ts

@@ -0,0 +1,66 @@
+import type { AvatarAppearanceSize } from '../Avatar.interface'
+
+const avatarAppearanceSize = {
+  size16: {
+    size: '16',
+    textSize: 'xs',
+    badgeSize: 's',
+    iconSize: '8',
+  },
+  size20: {
+    size: '20',
+    textSize: 'xs',
+    badgeSize: 's',
+    iconSize: '8',
+  },
+  size24: {
+    size: '24',
+    textSize: 's',
+    badgeSize: 's',
+    iconSize: '8',
+  },
+  size32: {
+    size: '32',
+    textSize: 'm',
+    badgeSize: 's',
+    iconSize: '16',
+  },
+  size40: {
+    size: '40',
+    textSize: 'l',
+    badgeSize: 's',
+    iconSize: '16',
+  },
+  size48: {
+    size: '48',
+    textSize: 'l',
+    badgeSize: 's',
+    iconSize: '16',
+  },
+  size56: {
+    size: '56',
+    textSize: 'xl',
+    badgeSize: 'm',
+    iconSize: '16',
+  },
+  size96: {
+    size: '96',
+    textSize: 'xxl',
+    badgeSize: 'm',
+    iconSize: '32',
+  },
+  size144: {
+    size: '144',
+    textSize: 'xxl',
+    badgeSize: 'm',
+    iconSize: '40',
+  },
+  size240: {
+    size: '240',
+    textSize: 'xxl',
+    badgeSize: 'm',
+    iconSize: '40',
+  },
+} satisfies AvatarAppearanceSize
+
+export { avatarAppearanceSize }

package/src/components/Avatar/appearance/avatarStyle.ts

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

package/src/components/Avatar/appearance/avatarSurface.ts

@@ -0,0 +1,42 @@
+import type { AvatarAppearance } from '../Avatar.interface'
+
+const avatarAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    textColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary solid circular',
+    iconFill: 'surfaceSecondary',
+    iconItemFill: 'surfaceItemPrimary',
+    iconShape: 'circular',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    borderColor: 'surfaceBorderPrimary',
+    textColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary solid circular',
+    iconFill: 'surfaceSecondary',
+    iconItemFill: 'surfaceItemPrimary',
+    iconShape: 'circular',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderPrimary',
+    textColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary solid circular',
+    iconFill: 'surfaceSecondary',
+    iconItemFill: 'surfaceItemPrimary',
+    iconShape: 'circular',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    borderColor: 'surfaceBorderPrimary',
+    textColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary solid circular',
+    iconFill: 'surfaceSecondary',
+    iconItemFill: 'surfaceItemPrimary',
+    iconShape: 'circular',
+  },
+} satisfies AvatarAppearance
+
+export { avatarAppearanceSurface }

package/src/components/Avatar/index.ts

@@ -0,0 +1,36 @@
+import { Avatar, avatarConfig } from './Avatar'
+import { avatarAppearance } from './Avatar.appearance'
+import type {
+  AvatarAppearance,
+  AvatarAppearanceKey,
+  AvatarAppearanceProps,
+  AvatarAppearanceShape,
+  AvatarAppearanceSize,
+  AvatarAppearanceStyle,
+  AvatarConfig,
+  AvatarProps,
+} from './Avatar.interface'
+import { avatarShapeList } from './styles/avatarShape'
+import type { avatarShapePropsType } from './styles/avatarShape'
+import { avatarSizesList } from './styles/avatarSize'
+import type { avatarSizesPropsType } from './styles/avatarSize'
+
+export {
+  Avatar,
+  avatarAppearance,
+  avatarConfig,
+  avatarShapeList,
+  avatarSizesList,
+}
+export type {
+  AvatarAppearance,
+  AvatarAppearanceKey,
+  AvatarAppearanceProps,
+  AvatarAppearanceShape,
+  AvatarAppearanceSize,
+  AvatarAppearanceStyle,
+  AvatarConfig,
+  AvatarProps,
+  avatarShapePropsType,
+  avatarSizesPropsType,
+}

package/src/components/Avatar/stories/AvatarCount.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons24 } from '@itcase/icons-default/default/svg'
+
+import { Avatar } from '../Avatar'
+import { avatarStoryParameters } from './AvatarStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar / Count',
+  component: Avatar,
+  args: {
+    appearance: 'surfaceSecondary size96 full circular',
+    count: '5',
+  },
+  parameters: avatarStoryParameters,
+} satisfies Meta<typeof Avatar>
+
+export default meta
+
+type Story = StoryObj<typeof Avatar>
+
+export const Count: Story = {}
+
+export const CountWithIcon: Story = {
+  args: {
+    icon: icons24.Placeholder.Default,
+  },
+}
+
+export const CountWithBadge: Story = {
+  args: {
+    badge: true,
+    badgeValue: '3',
+  },
+}