@itcase/ui-react-native 1.10.84 → 1.10.86

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Avatar } from '../Avatar'
+import type { AvatarProps } from '../Avatar.interface'
 import { avatarStoryParameters } from './AvatarStories.config'
 
 const meta = {
@@ -12,31 +13,42 @@ const meta = {
   },
   parameters: avatarStoryParameters,
 } satisfies Meta<typeof Avatar>
-
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
 export const Solid: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Outlined: Story = {
   args: {
     appearance: 'surfacePrimary size96 outlined circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Full: Story = {
   args: {
     appearance: 'surfacePrimary size96 full circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Ghost: Story = {
   args: {
     appearance: 'surfacePrimary size96 ghost circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

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

@@ -27,6 +27,9 @@ const avatarStyles = StyleSheet.create({
     position: 'relative',
     overflow: 'visible',
   },
+  avatar_skeleton: {
+    overflow: 'hidden',
+  },
 })
 
 export { avatarStyles }

package/src/components/AvatarStack/AvatarStack.interface.ts

@@ -1,19 +1,51 @@
 import type { StyleProp, ViewStyle } from 'react-native'
 
+import type { CompositeAppearanceWithoutSizeKeys } from '@itcase/types-ui'
+
+import type { ComponentGalleryArgs } from '../../storybook'
 import type { AvatarProps } from '../Avatar/Avatar.interface'
 import type { avatarSizesPropsType } from '../Avatar/styles/avatarSize'
 import type { avatarStackDirectionPropsType } from './styles/avatarStackDirection'
 
-interface AvatarStackItem extends AvatarProps {
-  id?: string
+interface AvatarsItem {
+  id: string
+  firstName: string
+  imageSrc?: AvatarProps['imageSrc']
+  lastName?: string
+  secondName?: string
+  src?: AvatarProps['imageSrc']
 }
 
 interface AvatarStackProps {
+  isSkeleton?: boolean
+  avatarAppearance?: CompositeAppearanceWithoutSizeKeys
+  avatarsList: AvatarsItem[]
+  dataTestId?: string
   direction?: avatarStackDirectionPropsType
-  itemsList: AvatarStackItem[]
-  maxCount?: number
+  length?: number
   size?: avatarSizesPropsType
   style?: StyleProp<ViewStyle>
 }
 
-export type { AvatarStackItem, AvatarStackProps }
+type AvatarStackGalleryStory = ComponentGalleryArgs &
+  Pick<
+    AvatarStackProps,
+    'avatarsList' | 'dataTestId' | 'direction' | 'isSkeleton' | 'length'
+  >
+
+type AvatarStackStoryArgs = Omit<
+  AvatarStackProps,
+  'avatarAppearance' | 'size'
+> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
+export type {
+  AvatarsItem,
+  AvatarStackGalleryStory,
+  AvatarStackProps,
+  AvatarStackStoryArgs,
+}

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

@@ -6,6 +6,8 @@ const styles = {
   ...avatarStackBaseStyles,
   ...avatarStackDirectionStyles,
   ...avatarStackSizeStyles,
-}
+} as typeof avatarStackBaseStyles &
+  typeof avatarStackDirectionStyles &
+  typeof avatarStackSizeStyles
 
 export { styles }

package/src/components/AvatarStack/AvatarStack.tsx

@@ -1,61 +1,63 @@
 import { View } from 'react-native'
 
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
+
 import { tokens } from '../../styles/tokens'
 import { Avatar } from '../Avatar'
 import { Text } from '../Text'
 import type { AvatarStackProps } from './AvatarStack.interface'
 import { styles } from './AvatarStack.styles'
 
-const DEFAULT_AVATAR_STACK_DIRECTION = 'horizontal'
-const DEFAULT_AVATAR_STACK_SIZE = 40
-
 function AvatarStack(props: AvatarStackProps) {
   const {
-    direction = DEFAULT_AVATAR_STACK_DIRECTION,
-    maxCount,
-    size = DEFAULT_AVATAR_STACK_SIZE,
-    itemsList,
+    dataTestId,
+    direction = 'horizontal',
+    size = 56,
+    avatarAppearance = 'surfaceSecondary solid circular',
+    avatarsList,
+    length = 3,
     style,
+    isSkeleton,
   } = props
 
-  if (!itemsList.length) {
+  if (!avatarsList.length) {
     return null
   }
 
-  const visibleCount =
-    maxCount != null ? Math.min(maxCount, itemsList.length) : itemsList.length
-  const leftoverCount = itemsList.length - visibleCount
-  const visibleItemsList = itemsList.slice(0, visibleCount)
+  const resolvedAppearance = mergeAppearanceKeys(
+    avatarAppearance,
+    `size${size}`,
+  )
+  const visibleItemsList = avatarsList.slice(0, length)
+  const leftoverCount = avatarsList.length - visibleItemsList.length
 
   return (
     <View
       style={[
         styles.avatarStack,
         styles[`avatarStack_direction_${direction}`],
-        style && style,
+        style,
       ]}
+      testID={dataTestId}
     >
       {visibleItemsList.map((item, index) => {
-        const itemKey =
-          item.id || `${item.firstName}-${item.secondName}-${index}`
+        const itemKey = item.id
 
         return (
           <View
             key={itemKey}
-            style={
-              index > 0 && styles[`avatarStack_size_${size}__item_${direction}`]
-            }
+            style={[
+              styles.avatarStack__item,
+              index > 0 &&
+                styles[`avatarStack_size_${size}__item_${direction}`],
+            ]}
           >
             <Avatar
-              size={item.size || size}
-              fill={item.fill || 'surfaceSecondary'}
-              fillColor={item.fillColor}
+              appearance={resolvedAppearance}
               firstName={item.firstName}
-              secondName={item.secondName}
-              charsTextColor={item.charsTextColor}
-              charsTextSize={item.charsTextSize}
-              charsWeight={item.charsWeight}
-              imageSrc={item.imageSrc}
+              secondName={item.lastName ?? item.secondName}
+              imageSrc={item.src ?? item.imageSrc}
+              isSkeleton={isSkeleton}
             />
           </View>
         )
@@ -63,11 +65,12 @@ function AvatarStack(props: AvatarStackProps) {
       {leftoverCount > 0 && (
         <View
           style={[
-            styles.avatarStack__leftover,
+            styles.avatarStack__item,
+            styles.avatarStack__item_text,
             styles[`avatarStack_size_${size}__leftover`],
-            tokens[`fill_surfaceSecondary`],
             visibleItemsList.length > 0 &&
               styles[`avatarStack_size_${size}__item_${direction}`],
+            tokens[`fill_surfaceSecondary`],
           ]}
         >
           <Text size="xs" textColor="surfaceTextPrimary" weight="600">

package/src/components/AvatarStack/index.ts

@@ -1,7 +1,18 @@
 import { AvatarStack } from './AvatarStack'
-import type { AvatarStackItem, AvatarStackProps } from './AvatarStack.interface'
+import type {
+  AvatarsItem,
+  AvatarStackGalleryStory,
+  AvatarStackProps,
+  AvatarStackStoryArgs,
+} from './AvatarStack.interface'
 import { avatarStackDirectionList } from './styles/avatarStackDirection'
 import type { avatarStackDirectionPropsType } from './styles/avatarStackDirection'
 
 export { AvatarStack, avatarStackDirectionList }
-export type { avatarStackDirectionPropsType, AvatarStackItem, AvatarStackProps }
+export type {
+  AvatarsItem,
+  avatarStackDirectionPropsType,
+  AvatarStackGalleryStory,
+  AvatarStackProps,
+  AvatarStackStoryArgs,
+}

package/src/components/AvatarStack/stories/AvatarStackDemo.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { avatarAppearanceShape } from '../../Avatar/appearance/avatarShape'
+import { avatarAppearanceStyle } from '../../Avatar/appearance/avatarStyle'
+import { avatarAppearance } from '../../Avatar/Avatar.appearance'
+import { AvatarStack } from '../AvatarStack'
+import type {
+  AvatarStackProps,
+  AvatarStackStoryArgs,
+} from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+import {
+  avatarStackAppearanceSize,
+  avatarStackStoryParameters,
+} from './AvatarStackStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(avatarAppearance, {
+  appearanceShape: avatarAppearanceShape,
+  appearanceSize: avatarStackAppearanceSize,
+  appearanceStyle: avatarAppearanceStyle,
+})
+
+const meta = {
+  title: 'Molecules / Avatar Stack',
+  component: AvatarStack,
+  args: {
+    direction: 'horizontal',
+    appearanceShape: 'circular',
+    appearanceSize: 'size56',
+    appearanceStyle: 'solid',
+    appearanceType: 'surfaceSecondary',
+    avatarsList: avatarsListMock,
+    length: 3,
+  },
+  parameters: {
+    ...avatarStackStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'length',
+        'direction',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceSize: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceSize'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<AvatarStackStoryArgs>
+
+export default meta
+
+export const Demo: StoryObj<AvatarStackStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <AvatarStack
+      {...rest}
+      size={
+        Number(appearanceSize.replace(/^size/, '')) as AvatarStackProps['size']
+      }
+      avatarAppearance={
+        `${appearanceType} ${appearanceStyle} ${appearanceShape}` as AvatarStackProps['avatarAppearance']
+      }
+    />
+  ),
+}

package/src/components/AvatarStack/stories/AvatarStackDirection.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { AvatarStack } from '../AvatarStack'
+import type { AvatarStackProps } from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+import { avatarStackStoryParameters } from './AvatarStackStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar Stack / Direction',
+  component: AvatarStack,
+  args: {
+    size: 56,
+    avatarAppearance: 'surfaceSecondary solid circular',
+    avatarsList: avatarsListMock,
+    length: 3,
+  },
+  parameters: avatarStackStoryParameters,
+} satisfies Meta<typeof AvatarStack>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Horizontal: Story = {
+  args: {
+    direction: 'horizontal',
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Vertical: Story = {
+  args: {
+    direction: 'vertical',
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}

package/src/components/AvatarStack/stories/AvatarStackGallery.stories.tsx

@@ -0,0 +1,126 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { avatarSizesList } from '../../Avatar/styles/avatarSize'
+import { AvatarStack } from '../AvatarStack'
+import type {
+  AvatarStackGalleryStory,
+  AvatarStackProps,
+} from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+import { avatarStackGallery } from './AvatarStackStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar Stack / Gallery',
+  args: {
+    appearance: 'surface',
+    tier: 'Secondary',
+    style: 'solid',
+    shape: 'circular',
+    avatarsList: avatarsListMock,
+    length: 3,
+    direction: 'horizontal',
+    isSkeleton: false,
+  },
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
+    },
+  },
+  argTypes: {
+    appearance: avatarStackGallery.argTypes.appearance,
+    tier: avatarStackGallery.argTypes.tier,
+    style: avatarStackGallery.argTypes.style,
+    shape: avatarStackGallery.argTypes.shape,
+  },
+} satisfies Meta<AvatarStackGalleryStory>
+
+export default meta
+
+type Story = StoryObj<AvatarStackGalleryStory>
+
+const toStackSize = (
+  sizeKey: string,
+): NonNullable<AvatarStackProps['size']> => {
+  const size = Number(sizeKey.replace(/^size/, ''))
+
+  if ((avatarSizesList as readonly number[]).includes(size)) {
+    return size as NonNullable<AvatarStackProps['size']>
+  }
+
+  return 56
+}
+
+const toAvatarAppearance = (appearance: string, sizeKey: string) =>
+  appearance
+    .split(' ')
+    .filter((token) => token !== sizeKey)
+    .join(' ') as AvatarStackProps['avatarAppearance']
+
+const renderAvatarStackGallery = (
+  args: AvatarStackGalleryStory,
+  options: {
+    direction?: AvatarStackGalleryStory['direction']
+    length?: AvatarStackGalleryStory['length']
+  } = {},
+) =>
+  avatarStackGallery.render(
+    args,
+    ({ appearance, args: storyArgs, sizeKey }) => (
+      <AvatarStack
+        direction={
+          options.direction !== undefined
+            ? options.direction
+            : storyArgs.direction
+        }
+        size={toStackSize(sizeKey)}
+        avatarAppearance={toAvatarAppearance(appearance, sizeKey)}
+        avatarsList={storyArgs.avatarsList}
+        length={
+          options.length !== undefined ? options.length : storyArgs.length
+        }
+        isSkeleton={storyArgs.isSkeleton}
+      />
+    ),
+  )
+
+export const Overflow: Story = {
+  name: 'Overflow',
+  args: {
+    length: 3,
+    direction: 'horizontal',
+  },
+  render: (args) =>
+    renderAvatarStackGallery(args, {
+      length: 3,
+      direction: 'horizontal',
+    }),
+}
+
+export const All: Story = {
+  name: 'All',
+  args: {
+    length: avatarsListMock.length,
+    direction: 'horizontal',
+  },
+  render: (args) =>
+    renderAvatarStackGallery(args, {
+      length: avatarsListMock.length,
+      direction: 'horizontal',
+    }),
+}
+
+export const Vertical: Story = {
+  name: 'Vertical',
+  args: {
+    length: 3,
+    direction: 'vertical',
+  },
+  render: (args) =>
+    renderAvatarStackGallery(args, {
+      length: 3,
+      direction: 'vertical',
+    }),
+}

package/src/components/AvatarStack/stories/AvatarStackLength.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { AvatarStack } from '../AvatarStack'
+import type { AvatarStackProps } from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+import { avatarStackStoryParameters } from './AvatarStackStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar Stack / Length',
+  component: AvatarStack,
+  args: {
+    size: 56,
+    avatarAppearance: 'surfaceSecondary solid circular',
+    avatarsList: avatarsListMock,
+  },
+  parameters: avatarStackStoryParameters,
+} satisfies Meta<typeof AvatarStack>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Length1: Story = {
+  args: {
+    length: 1,
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Length2: Story = {
+  args: {
+    length: 2,
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Length3: Story = {
+  args: {
+    length: 3,
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Length4: Story = {
+  args: {
+    length: 4,
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Length5: Story = {
+  args: {
+    length: 5,
+  },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}

package/src/components/AvatarStack/stories/AvatarStackSize.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { AvatarStack } from '../AvatarStack'
+import type { AvatarStackProps } from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+import { avatarStackStoryParameters } from './AvatarStackStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar Stack / Size',
+  component: AvatarStack,
+  args: {
+    avatarAppearance: 'surfaceSecondary solid circular',
+    avatarsList: avatarsListMock,
+    length: 1,
+  },
+  parameters: avatarStackStoryParameters,
+} satisfies Meta<typeof AvatarStack>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Size56: Story = {
+  args: { size: 56 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Size40: Story = {
+  args: { size: 40 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Size32: Story = {
+  args: { size: 32 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Size24: Story = {
+  args: { size: 24 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Size20: Story = {
+  args: { size: 20 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}
+
+export const Size16: Story = {
+  args: { size: 16 },
+  render: (args: AvatarStackProps) => <AvatarStack {...args} />,
+}

package/src/components/AvatarStack/stories/AvatarStackStories.config.ts

@@ -0,0 +1,74 @@
+import { createComponentGallery } from '../../../storybook'
+import { avatarAppearanceShape } from '../../Avatar/appearance/avatarShape'
+import { avatarAppearanceSize } from '../../Avatar/appearance/avatarSize'
+import { avatarAppearanceStyle } from '../../Avatar/appearance/avatarStyle'
+import { avatarAppearanceSurface } from '../../Avatar/appearance/avatarSurface'
+import type { AvatarAppearanceKey } from '../../Avatar/Avatar.interface'
+import type { AvatarStackProps } from '../AvatarStack.interface'
+import { avatarsListMock } from './__mock__'
+
+const avatarStackAppearanceSize = {
+  size16: avatarAppearanceSize.size16,
+  size20: avatarAppearanceSize.size20,
+  size24: avatarAppearanceSize.size24,
+  size32: avatarAppearanceSize.size32,
+  size40: avatarAppearanceSize.size40,
+  size56: avatarAppearanceSize.size56,
+}
+
+type AvatarStackSizeKey = keyof typeof avatarStackAppearanceSize
+
+const isAvatarStackSizeKey = (value: string): value is AvatarStackSizeKey =>
+  value in avatarStackAppearanceSize
+
+const avatarStackSizeKeys = Object.keys(avatarStackAppearanceSize).filter(
+  isAvatarStackSizeKey,
+)
+
+const avatarStackTypeOptions = ['overflow', 'all'] as const
+
+const getAvatarStackTypeProps = (
+  type: (typeof avatarStackTypeOptions)[number],
+): Pick<AvatarStackProps, 'length'> => {
+  switch (type) {
+    case 'overflow':
+      return { length: 3 }
+    case 'all':
+      return { length: avatarsListMock.length }
+  }
+}
+
+const toAvatarStackSize = (sizeKey: AvatarStackSizeKey) =>
+  Number(sizeKey.replace(/^size/, '')) as NonNullable<AvatarStackProps['size']>
+
+const avatarStackGallery = createComponentGallery<AvatarAppearanceKey>({
+  size: avatarStackAppearanceSize,
+  appearanceGroups: {
+    surface: avatarAppearanceSurface,
+  },
+  shape: avatarAppearanceShape,
+  style: avatarAppearanceStyle,
+})
+
+const AVATAR_STACK_FIGMA_URL =
+  'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1'
+
+const avatarStackStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: AVATAR_STACK_FIGMA_URL,
+  },
+}
+
+export {
+  AVATAR_STACK_FIGMA_URL,
+  avatarStackAppearanceSize,
+  avatarStackGallery,
+  avatarStackSizeKeys,
+  avatarStackStoryParameters,
+  avatarStackTypeOptions,
+  getAvatarStackTypeProps,
+  toAvatarStackSize,
+}
+export type { AvatarStackSizeKey }