feat(avatarGroup): introduce

components/Common/AvatarGroup/Avatar/index.module.css

@@ -0,0 +1,22 @@
+.avatar {
+  @apply flex
+    h-8
+    w-8
+    items-center
+    justify-center
+    rounded-full
+    border-2
+    border-white
+    bg-neutral-100
+    object-cover
+    text-xs
+    text-neutral-800
+    dark:border-neutral-950
+    dark:bg-neutral-900
+    dark:text-neutral-300;
+}
+
+.avatarRoot {
+  @apply -ml-2
+    first:ml-0;
+}

components/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import { githubProfileAvatarUrl } from '@/util/github';
+
+import Avatar from './';
+
+type Story = StoryObj<typeof Avatar>;
+type Meta = MetaObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    src: githubProfileAvatarUrl('ovflowd'),
+    alt: 'ovflowd',
+  },
+};
+
+export const NoSquare: Story = {
+  args: {
+    src: '/static/images/logos/stacked-dark.svg',
+    alt: 'SD',
+  },
+};
+
+export const FallBack: Story = {
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/',
+    alt: 'UA',
+  },
+};
+
+export default { component: Avatar } as Meta;

components/Common/AvatarGroup/Avatar/index.tsx

@@ -0,0 +1,20 @@
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+};
+
+const Avatar: FC<AvatarProps> = ({ src, alt }) => (
+  <RadixAvatar.Root className={styles.avatarRoot}>
+    <RadixAvatar.Image src={src} alt={alt} className={styles.avatar} />
+    <RadixAvatar.Fallback delayMs={500} className={styles.avatar}>
+      {alt}
+    </RadixAvatar.Fallback>
+  </RadixAvatar.Root>
+);
+
+export default Avatar;

components/Common/AvatarGroup/index.module.css

@@ -0,0 +1,4 @@
+.avatarGroup {
+  @apply flex
+    items-center;
+}

components/Common/AvatarGroup/index.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import { githubProfileAvatarUrl } from '@/util/github';
+
+import AvatarGroup from './';
+
+type Story = StoryObj<typeof AvatarGroup>;
+type Meta = MetaObj<typeof AvatarGroup>;
+
+const names = [
+  'ovflowd',
+  'bmuenzenmeyer',
+  'AugustinMauroy',
+  'HinataKah0',
+  'Harkunwar',
+  'rodion-arr',
+  'mikeesto',
+  'bnb',
+  'benhalverson',
+  'aymen94',
+  'shanpriyan',
+  'Wai-Dung',
+  'manishprivet',
+  'araujogui',
+];
+
+const unknownAvatar = {
+  src: 'https://avatars.githubusercontent.com/u/',
+  alt: 'unknown-avatar',
+};
+
+const defaultProps = {
+  avatars: [
+    unknownAvatar,
+    ...names.map(name => ({ src: githubProfileAvatarUrl(name), alt: name })),
+  ],
+};
+
+export const Default: Story = {
+  args: { ...defaultProps },
+};
+
+export const WithCustomLimit: Story = {
+  args: {
+    ...defaultProps,
+    limit: 5,
+  },
+};
+
+export const InSmallContainer: Story = {
+  decorators: [
+    Story => (
+      <div className="w-[150px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: { ...defaultProps, limit: 5 },
+};
+
+export default { component: AvatarGroup } as Meta;

components/Common/AvatarGroup/index.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import type { ComponentProps, FC } from 'react';
+import { useState, useMemo } from 'react';
+
+import { getAcronymFromString } from '@/util/stringutils';
+
+import Avatar from './Avatar';
+import avatarstyles from './Avatar/index.module.css';
+import styles from './index.module.css';
+
+type AvatarGroupProps = {
+  avatars: ComponentProps<typeof Avatar>[];
+  limit?: number;
+};
+
+const AvatarGroup: FC<AvatarGroupProps> = ({ avatars, limit = 10 }) => {
+  const [showMore, setShowMore] = useState(false);
+
+  const renderAvatars = useMemo(
+    () => avatars.slice(0, showMore ? avatars.length : limit),
+    [showMore, avatars, limit]
+  );
+
+  return (
+    <div className={styles.avatarGroup}>
+      {renderAvatars.map((avatar, index) => (
+        <Avatar
+          src={avatar.src}
+          alt={getAcronymFromString(avatar.alt)}
+          key={index}
+        />
+      ))}
+
+      {avatars.length > limit && (
+        <span
+          onClick={() => setShowMore(!showMore)}
+          className={classNames(avatarstyles.avatarRoot, 'cursor-pointer')}
+        >
+          <span className={avatarstyles.avatar}>
+            {`${showMore ? '-' : '+'}${avatars.length - limit}`}
+          </span>
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default AvatarGroup;

package.json

@@ -43,6 +43,7 @@
     "@heroicons/react": "~2.0.18",
     "@mdx-js/react": "^2.3.0",
     "@nodevu/core": "~0.1.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-toast": "^1.1.5",
     "@types/node": "18.18.3",

util/__tests__/github.mjs

@@ -0,0 +1,9 @@
+import { githubProfileAvatarUrl } from '@/util/github';
+
+describe('Github utils', () => {
+  it('githubProfileAvatarUrl returns the correct URL', () => {
+    expect(githubProfileAvatarUrl('octocat')).toBe(
+      'https://avatars.githubusercontent.com/octocat'
+    );
+  });
+});

util/__tests__/string.mjs

@@ -0,0 +1,15 @@
+import { getAcronymFromString } from '@/util/stringUtils';
+
+describe('String utils', () => {
+  it('getAcronymFromString returns the correct acronym', () => {
+    expect(getAcronymFromString('John Doe')).toBe('JD');
+  });
+
+  it('getAcronymFromString returns the correct acronym for a single word', () => {
+    expect(getAcronymFromString('John')).toBe('J');
+  });
+
+  it('getAcronymFromString if the string is empty, it returns NA', () => {
+    expect(getAcronymFromString('')).toBe('NA');
+  });
+});

util/github.ts

@@ -0,0 +1,2 @@
+export const githubProfileAvatarUrl = (username: string): string =>
+  `https://avatars.githubusercontent.com/${username}`;

util/stringutils.ts

@@ -0,0 +1,2 @@
+export const getAcronymFromString = (str: string) =>
+  [...(str.trim().match(/\b(\w)/g) || '')].join('').toUpperCase();