feat: adds the avatar component to the storybook

src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+
+import { Avatar, AvatarProps } from '.';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+} as Meta;
+
+const Template: Story<AvatarProps> = (args) => <Avatar {...args} />;
+
+export const DefaultAvatar = Template.bind({});
+DefaultAvatar.storyName = 'Default';
+DefaultAvatar.args = {
+  img: 'https://i.pravatar.cc/100',
+};

src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup';
+import { Avatar } from '../Avatar';
+
+export default {
+  title: 'Components/AvatarGroup',
+  component: AvatarGroup,
+} as Meta;
+
+const Template: Story<AvatarGroupProps> = (args) => (
+  <AvatarGroup {...args}>
+    <Avatar img="https://i.pravatar.cc/100" rounded stacked />
+    <Avatar img="https://i.pravatar.cc/100" rounded stacked />
+    <Avatar img="https://i.pravatar.cc/100" rounded stacked />
+    <Avatar img="https://i.pravatar.cc/100" rounded stacked />
+    <AvatarGroup.Counter total={99} href="#" />
+  </AvatarGroup>
+);
+
+export const DefaultAvatarGroup = Template.bind({});
+DefaultAvatarGroup.storyName = 'Default';
+DefaultAvatarGroup.args = {};