chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/user-popover/UserPopover.stories.tsx

@@ -0,0 +1,18 @@
+import { PopoverBase } from '@roleypoly/design-system/atoms/popover/Popover.styled';
+import * as React from 'react';
+import { user } from '../../fixtures/storyData';
+import { UserPopover as UserPopoverComponent } from './UserPopover';
+
+export default {
+    title: 'Molecules/User Popover',
+    component: UserPopoverComponent,
+    args: {
+        user,
+    },
+};
+
+export const UserPopover = (args) => (
+    <PopoverBase active>
+        <UserPopoverComponent {...args} />
+    </PopoverBase>
+);

packages/design-system/molecules/user-popover/UserPopover.styled.ts

@@ -0,0 +1,33 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
+
+export const Base = styled.div`
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+`;
+
+export const NavAction = styled.div`
+    height: 2.25em;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    transition: color ${transitions.actionable}s ease-in-out;
+    color: ${palette.taupe500};
+    box-sizing: border-box;
+
+    &:hover {
+        cursor: pointer;
+        color: ${palette.taupe600};
+    }
+
+    svg {
+        font-size: 120%;
+        box-sizing: content-box;
+        padding: 5px 8px;
+        position: relative;
+        top: 0.1em;
+    }
+`;

packages/design-system/molecules/user-popover/UserPopover.tsx

@@ -0,0 +1,30 @@
+import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
+import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
+import * as React from 'react';
+import { GoGear, GoSignOut } from 'react-icons/go';
+import { DiscordUser } from '../../../../src/common/types';
+import { Base, NavAction } from './UserPopover.styled';
+
+type UserPopoverProps = {
+    user: DiscordUser;
+};
+
+export const UserPopover = (props: UserPopoverProps) => (
+    <Base>
+        <UserAvatarGroup user={props.user} preventCollapse={true} />
+        <NavAction>
+            <a href="/user/settings">
+                <CompletelyStylelessLink>
+                    Settings <GoGear />
+                </CompletelyStylelessLink>
+            </a>
+        </NavAction>
+        <NavAction>
+            <a href="/machinery/logout">
+                <CompletelyStylelessLink>
+                    Log Out <GoSignOut />
+                </CompletelyStylelessLink>
+            </a>
+        </NavAction>
+    </Base>
+);

packages/design-system/molecules/user-popover/index.ts

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