@itcase/ui-react-native 1.10.85 → 1.10.86

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

@@ -0,0 +1,200 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Avatar } from '../Avatar'
+import type { AvatarGalleryStory } from '../Avatar.interface'
+import { avatarGallery, avatarStoryImage } from './AvatarStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar',
+  args: {
+    appearance: 'surface',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'circular',
+    count: '5',
+    badgeValue: '3',
+    firstName: 'John',
+    secondName: 'Doe',
+    badge: false,
+    imageSrc: avatarStoryImage,
+    isSkeleton: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2',
+    },
+    layout: 'padded',
+    controls: {
+      include: ['appearance', 'firstName', 'secondName'],
+    },
+  },
+  argTypes: {
+    appearance: avatarGallery.argTypes.appearance,
+    tier: avatarGallery.argTypes.tier,
+    style: avatarGallery.argTypes.style,
+    shape: avatarGallery.argTypes.shape,
+  },
+} satisfies Meta<AvatarGalleryStory>
+
+export default meta
+
+type Story = StoryObj<AvatarGalleryStory>
+
+const renderAvatarGallery = (
+  args: AvatarGalleryStory,
+  options: {
+    badge?: AvatarGalleryStory['badge']
+    badgeValue?: AvatarGalleryStory['badgeValue']
+    count?: AvatarGalleryStory['count']
+    firstName?: AvatarGalleryStory['firstName']
+    imageSrc?: AvatarGalleryStory['imageSrc']
+    secondName?: AvatarGalleryStory['secondName']
+  } = {},
+) =>
+  avatarGallery.render(args, ({ appearance, args: storyArgs }) => (
+    <Avatar
+      appearance={appearance}
+      firstName={
+        options.firstName !== undefined
+          ? options.firstName
+          : storyArgs.firstName
+      }
+      secondName={
+        options.secondName !== undefined
+          ? options.secondName
+          : storyArgs.secondName
+      }
+      badge={options.badge !== undefined ? options.badge : storyArgs.badge}
+      badgeValue={
+        options.badgeValue !== undefined
+          ? options.badgeValue
+          : storyArgs.badgeValue
+      }
+      count={options.count !== undefined ? options.count : storyArgs.count}
+      imageSrc={
+        options.imageSrc !== undefined ? options.imageSrc : storyArgs.imageSrc
+      }
+      isSkeleton={storyArgs.isSkeleton}
+    />
+  ))
+
+export const Letters: Story = {
+  name: 'Letters',
+  args: {
+    imageSrc: undefined,
+    count: undefined,
+    badge: false,
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: undefined,
+      count: undefined,
+      firstName: args.firstName,
+      secondName: args.secondName,
+      badge: false,
+      badgeValue: undefined,
+    }),
+}
+
+export const LettersBadge: Story = {
+  name: 'Letters + Badge',
+  args: {
+    imageSrc: undefined,
+    count: undefined,
+    badge: true,
+    badgeValue: '3',
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: undefined,
+      count: undefined,
+      firstName: args.firstName,
+      secondName: args.secondName,
+      badge: true,
+      badgeValue: args.badgeValue,
+    }),
+}
+
+export const Image: Story = {
+  name: 'Image',
+  args: {
+    imageSrc: avatarStoryImage,
+    firstName: undefined,
+    secondName: undefined,
+    count: undefined,
+    badge: false,
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: args.imageSrc,
+      firstName: undefined,
+      secondName: undefined,
+      count: undefined,
+      badge: false,
+      badgeValue: undefined,
+    }),
+}
+
+export const ImageBadge: Story = {
+  name: 'Image + Badge',
+  args: {
+    imageSrc: avatarStoryImage,
+    firstName: undefined,
+    secondName: undefined,
+    count: undefined,
+    badge: true,
+    badgeValue: '3',
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: args.imageSrc,
+      firstName: undefined,
+      secondName: undefined,
+      count: undefined,
+      badge: true,
+      badgeValue: args.badgeValue,
+    }),
+}
+
+export const Count: Story = {
+  name: 'Count',
+  args: {
+    imageSrc: undefined,
+    firstName: undefined,
+    secondName: undefined,
+    count: '5',
+    badge: false,
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: undefined,
+      firstName: undefined,
+      secondName: undefined,
+      count: args.count,
+      badge: false,
+      badgeValue: undefined,
+    }),
+}
+
+export const CountBadge: Story = {
+  name: 'Count + Badge',
+  args: {
+    imageSrc: undefined,
+    firstName: undefined,
+    secondName: undefined,
+    count: '5',
+    badge: true,
+    badgeValue: '3',
+  },
+  render: (args) =>
+    renderAvatarGallery(args, {
+      imageSrc: undefined,
+      firstName: undefined,
+      secondName: undefined,
+      count: args.count,
+      badge: true,
+      badgeValue: args.badgeValue,
+    }),
+}

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

@@ -2,30 +2,36 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { icons24 } from '@itcase/icons-default'
 
-import image from '../../../images/manager.png'
 import { Avatar } from '../Avatar'
-import { avatarStoryParameters } from './AvatarStories.config'
+import type { AvatarProps } from '../Avatar.interface'
+import { avatarStoryImage, avatarStoryParameters } from './AvatarStories.config'
 
 const meta = {
   title: 'Molecules / Avatar / Image',
   component: Avatar,
   args: {
     appearance: 'surfacePrimary size96 full circular',
-    imageSrc: image,
+    imageSrc: avatarStoryImage,
   },
   parameters: avatarStoryParameters,
 } satisfies Meta<typeof Avatar>
-
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
-export const Image: Story = {}
+export const Image: Story = {
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
+}
 
 export const ImageWithIcon: Story = {
   args: {
     icon: icons24.Placeholder.Default,
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const ImageWithBadge: Story = {
@@ -33,4 +39,7 @@ export const ImageWithBadge: Story = {
     badge: true,
     badgeValue: '5',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

package/src/components/Avatar/stories/AvatarInteraction.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 = {
@@ -16,10 +17,13 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
 export const onClick: Story = {
   args: {
     onPress: () => undefined,
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

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

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { icons24 } from '@itcase/icons-default'
 
 import { Avatar } from '../Avatar'
+import type { AvatarProps } from '../Avatar.interface'
 import { avatarStoryParameters } from './AvatarStories.config'
 
 const meta = {
@@ -15,17 +16,23 @@ const meta = {
   },
   parameters: avatarStoryParameters,
 } satisfies Meta<typeof Avatar>
-
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
-export const Letters: Story = {}
+export const Letters: Story = {
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
+}
 
 export const LettersWithIcon: Story = {
   args: {
     icon: icons24.Placeholder.Default,
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const LettersWithBadge: Story = {
@@ -33,4 +40,7 @@ export const LettersWithBadge: Story = {
     badge: true,
     badgeValue: '5',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

package/src/components/Avatar/stories/AvatarShape.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,43 +13,60 @@ const meta = {
   },
   parameters: avatarStoryParameters,
 } satisfies Meta<typeof Avatar>
-
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
 export const Circular: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Rounded: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid rounded',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const RoundedXL: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid roundedXL',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const RoundedL: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid roundedL',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const RoundedM: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid roundedM',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const RoundedS: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid roundedS',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

package/src/components/Avatar/stories/AvatarSize.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,67 +13,96 @@ const meta = {
   },
   parameters: avatarStoryParameters,
 } satisfies Meta<typeof Avatar>
-
 export default meta
 
-type Story = StoryObj<typeof Avatar>
+type Story = StoryObj<typeof meta>
 
 export const Size16: Story = {
   args: {
     appearance: 'surfacePrimary size16 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size20: Story = {
   args: {
     appearance: 'surfacePrimary size20 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size24: Story = {
   args: {
     appearance: 'surfacePrimary size24 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size32: Story = {
   args: {
     appearance: 'surfacePrimary size32 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size40: Story = {
   args: {
     appearance: 'surfacePrimary size40 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size48: Story = {
   args: {
     appearance: 'surfacePrimary size48 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size56: Story = {
   args: {
     appearance: 'surfacePrimary size56 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size96: Story = {
   args: {
     appearance: 'surfacePrimary size96 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size144: Story = {
   args: {
     appearance: 'surfacePrimary size144 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }
 
 export const Size240: Story = {
   args: {
     appearance: 'surfacePrimary size240 solid circular',
   },
+  render: (args: AvatarProps) => {
+    return <Avatar {...args} />
+  },
 }

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { Avatar } from '../Avatar'
+import type { AvatarProps } from '../Avatar.interface'
+import {
+  avatarSizeKeys,
+  avatarStoryParameters,
+  avatarTypeOptions,
+  getAvatarTypeProps,
+} from './AvatarStories.config'
+
+const meta = {
+  title: 'Molecules / Avatar / Skeleton',
+  parameters: {
+    ...avatarStoryParameters,
+    controls: {
+      include: [],
+    },
+  },
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Skeleton: Story = {
+  render: () => (
+    <Group width="fill" direction="vertical" gap={24}>
+      {avatarTypeOptions.map((type) => (
+        <Group key={type} direction="vertical" gap={16}>
+          <Text size="l" textColor="surfaceTextQuaternary" weight="bold">
+            {type}
+          </Text>
+          <Group direction="horizontal" gap={16} wrap="wrap">
+            {avatarSizeKeys.map((sizeKey) => {
+              const appearance =
+                `surfacePrimary ${sizeKey} solid circular` as AvatarProps['appearance']
+
+              return (
+                <Group
+                  key={sizeKey}
+                  direction="vertical"
+                  alignItems="center"
+                  gap={8}
+                >
+                  <Text
+                    size="xs"
+                    textColor="surfaceTextQuaternary"
+                    weight="bold"
+                  >
+                    {sizeKey.replace(/^size/, '')}
+                  </Text>
+                  <Avatar
+                    {...getAvatarTypeProps(type)}
+                    appearance={appearance}
+                    isSkeleton={true}
+                  />
+                </Group>
+              )
+            })}
+          </Group>
+        </Group>
+      ))}
+    </Group>
+  ),
+}

package/src/components/Avatar/stories/AvatarStories.config.ts

@@ -1,3 +1,100 @@
+import avatarStoryImage from '../../../images/manager.png'
+import { createComponentGallery } from '../../../storybook'
+import { avatarAppearanceShape } from '../appearance/avatarShape'
+import { avatarAppearanceSize } from '../appearance/avatarSize'
+import { avatarAppearanceStyle } from '../appearance/avatarStyle'
+import { avatarAppearanceSurface } from '../appearance/avatarSurface'
+import type { AvatarAppearanceKey, AvatarProps } from '../Avatar.interface'
+
+type AvatarSizeKey = keyof typeof avatarAppearanceSize
+
+const isAvatarSizeKey = (value: string): value is AvatarSizeKey =>
+  value in avatarAppearanceSize
+
+const avatarSizeKeys = Object.keys(avatarAppearanceSize).filter(isAvatarSizeKey)
+
+const avatarTypeOptions = [
+  'letters',
+  'letters-badge',
+  'image',
+  'image-badge',
+  'count',
+  'count-badge',
+] as const
+
+const getAvatarTypeProps = (
+  type: (typeof avatarTypeOptions)[number],
+): Pick<
+  AvatarProps,
+  'badge' | 'badgeValue' | 'count' | 'firstName' | 'imageSrc' | 'secondName'
+> => {
+  switch (type) {
+    case 'letters':
+      return {
+        firstName: 'John',
+        secondName: 'Doe',
+        badge: false,
+        badgeValue: undefined,
+        count: undefined,
+        imageSrc: undefined,
+      }
+    case 'letters-badge':
+      return {
+        firstName: 'John',
+        secondName: 'Doe',
+        badge: true,
+        badgeValue: '3',
+        count: undefined,
+        imageSrc: undefined,
+      }
+    case 'image':
+      return {
+        firstName: undefined,
+        secondName: undefined,
+        badge: false,
+        badgeValue: undefined,
+        count: undefined,
+        imageSrc: avatarStoryImage,
+      }
+    case 'image-badge':
+      return {
+        firstName: undefined,
+        secondName: undefined,
+        badge: true,
+        badgeValue: '3',
+        count: undefined,
+        imageSrc: avatarStoryImage,
+      }
+    case 'count':
+      return {
+        firstName: undefined,
+        secondName: undefined,
+        badge: false,
+        badgeValue: undefined,
+        count: '5',
+        imageSrc: undefined,
+      }
+    case 'count-badge':
+      return {
+        firstName: undefined,
+        secondName: undefined,
+        badge: true,
+        badgeValue: '3',
+        count: '5',
+        imageSrc: undefined,
+      }
+  }
+}
+
+const avatarGallery = createComponentGallery<AvatarAppearanceKey>({
+  size: avatarAppearanceSize,
+  appearanceGroups: {
+    surface: avatarAppearanceSurface,
+  },
+  shape: avatarAppearanceShape,
+  style: avatarAppearanceStyle,
+})
+
 const AVATAR_FIGMA_URL =
   'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2'
 
@@ -9,4 +106,13 @@ const avatarStoryParameters = {
   },
 }
 
-export { AVATAR_FIGMA_URL, avatarStoryParameters }
+export {
+  AVATAR_FIGMA_URL,
+  avatarGallery,
+  avatarSizeKeys,
+  avatarStoryImage,
+  avatarStoryParameters,
+  avatarTypeOptions,
+  getAvatarTypeProps,
+}
+export type { AvatarSizeKey }