feat(design-system): use rpcs

hack/fixtures/BUILD.bazel

@@ -5,6 +5,8 @@ package(default_visibility = ["//visibility:public"])
 react_library(
     name = "fixtures",
     deps = [
-        "@roleypoly/rpc",
+        "//src/rpc/discord",
+        "//src/rpc/platform",
+        "//src/rpc/shared",
     ],
 )

hack/fixtures/demoData.ts

@@ -1,4 +1,4 @@
-import { Role } from '@roleypoly/rpc/shared';
+import { Role } from 'roleypoly/src/rpc/shared';
 
 export const demoData: Role.AsObject[] = [
     {

hack/fixtures/storyData.ts

@@ -1,12 +1,12 @@
-import { Member } from '@roleypoly/rpc/discord';
+import { Member } from 'roleypoly/src/rpc/discord';
-import { Category, GuildData, GuildEnumeration } from '@roleypoly/rpc/platform';
+import { Category, GuildData, GuildEnumeration } from 'roleypoly/src/rpc/platform';
 import {
     DiscordUser,
     Guild,
     GuildRoles,
     Role,
     RoleypolyUser,
-} from '@roleypoly/rpc/shared';
+} from 'roleypoly/src/rpc/shared';
 
 export const roleCategory: Role.AsObject[] = [
     {

hack/react.bzl

@@ -4,7 +4,9 @@ def _render_deps(deps = []):
     output_deps = []
 
     for dep in deps:
-        if dep.startswith("//"):
+        if dep.startswith("//src/rpc"):
+            output_deps.append(dep + ":ts")
+        elif dep.startswith("//"):
             output_deps.append(dep)
         else:
             output_deps.append("@npm//" + dep)

src/design-system/atoms/role/BUILD.bazel

@@ -11,7 +11,7 @@ react_library(
         "styled-components",
         "//src/design-system/atoms/colors",
         "//src/design-system/atoms/timings",
-        "@roleypoly/rpc",
+        "//src/rpc/shared",
         "@types/chroma-js",
         "@types/react",
         "@types/styled-components",

src/design-system/atoms/role/Role.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Role as RPCRole } from '@roleypoly/rpc/shared';
+import { Role as RPCRole } from 'roleypoly/src/rpc/shared';
 import * as styled from './Role.styled';
 import { FaCheck, FaTimes } from 'react-icons/fa';
 import { numberToChroma } from 'roleypoly/src/design-system/atoms/colors';

src/design-system/atoms/tab-view/TabView.tsx

@@ -14,11 +14,11 @@ type TabProps = {
 export const TabView = (props: TabViewProps) => {
     const tabNames = React.Children.map(props.children, (child) => {
         if (!React.isValidElement(child)) {
-            return null;
+            return '(Oops)';
         }
 
         return child.props.title;
-    });
+    }) as string[];
 
     if (tabNames.length === 0) {
         return null;