chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx

@@ -0,0 +1,19 @@
+import { Hero } from '@roleypoly/design-system/atoms/hero';
+import * as React from 'react';
+import { user } from '../../fixtures/storyData';
+import { UserAvatarGroup } from './UserAvatarGroup';
+
+export default {
+    title: 'Molecules/User Avatar Group',
+    component: UserAvatarGroup,
+    args: {
+        user,
+        preventCollapse: true,
+    },
+};
+
+export const Default = (args) => (
+    <Hero>
+        <UserAvatarGroup {...args} />
+    </Hero>
+);

packages/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts

@@ -0,0 +1,29 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+
+export const Collapse = styled.div<{ preventCollapse: boolean }>`
+    ${(props) =>
+        !props.preventCollapse &&
+        onSmallScreen(css`
+            display: none;
+        `)}
+`;
+
+export const Group = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    white-space: nowrap;
+`;
+
+export const Discriminator = styled.span`
+    color: ${palette.taupe500};
+    font-size: 75%;
+    padding: 0 5px;
+`;
+
+export const GroupText = styled.span`
+    position: relative;
+    top: -2px;
+`;

packages/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx

@@ -0,0 +1,28 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import * as React from 'react';
+import { DiscordUser } from '../../../../src/common/types';
+import { Collapse, Discriminator, Group, GroupText } from './UserAvatarGroup.styled';
+
+type Props = {
+    user: DiscordUser;
+    preventCollapse?: boolean;
+};
+
+export const UserAvatarGroup = (props: Props) => (
+    <Group>
+        <Collapse preventCollapse={props.preventCollapse || false}>
+            <GroupText>
+                {props.user.username}
+                <Discriminator>#{props.user.discriminator}</Discriminator>
+            </GroupText>
+            &nbsp;
+        </Collapse>
+        <Avatar
+            size={34}
+            hash={props.user.avatar}
+            src={utils.avatarHash(props.user.id, props.user.avatar, 'avatars')}
+        >
+            {utils.initialsFromName(props.user.username)}
+        </Avatar>
+    </Group>
+);

packages/design-system/molecules/user-avatar-group/index.ts

@@ -0,0 +1 @@
+export * from './UserAvatarGroup';