feat(design-system): port molecules

src/design-system/molecules/user-popover/BUILD.bazel

@@ -0,0 +1,20 @@
+load("//:hack/react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "user-popover",
+    deps = [
+        "next",
+        "react",
+        "react-icons",
+        "styled-components",
+        "//src/design-system/atoms/breakpoints",
+        "//src/design-system/atoms/colors",
+        "//src/design-system/atoms/timings",
+        "//src/design-system/molecules/user-avatar-group",
+        "//src/design-system/shared-types",
+        "@types/react",
+        "@types/styled-components",
+    ],
+)

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

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

src/design-system/molecules/user-popover/UserPopover.story.tsx

@@ -1,13 +0,0 @@
-import { user } from 'hack/fixtures/storyData';
-import { moleculeStories } from 'molecules/molecules.story';
-import * as React from 'react';
-import { UserPopover } from './UserPopover';
-import { PopoverBase } from 'atoms/popover/Popover.styled';
-
-const story = moleculeStories('User Popover', module);
-
-story.add('User Popover', () => (
-    <PopoverBase active>
-        <UserPopover user={user} />
-    </PopoverBase>
-));

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { palette } from 'atoms/colors';
-import { transitions } from 'atoms/timings';
+import { palette } from 'roleypoly/src/design-system/atoms/colors';
+import { transitions } from 'roleypoly/src/design-system/atoms/timings';
 
 export const Base = styled.div`
     text-align: right;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { DiscordUser } from '@roleypoly/rpc/shared';
-import { UserAvatarGroup } from 'molecules/user-avatar-group';
+import { DiscordUser } from 'roleypoly/src/design-system/shared-types';
+import { UserAvatarGroup } from 'roleypoly/src/design-system/molecules/user-avatar-group';
 import { Base, NavAction } from './UserPopover.styled';
 import { GoGear, GoSignOut } from 'react-icons/go';
 import Link from 'next/link';
 
 type UserPopoverProps = {
-    user: DiscordUser.AsObject;
+    user: DiscordUser;
 };
 
 export const UserPopover = (props: UserPopoverProps) => (