From 00dff464df291ea51c28e1daff9094933c9d0814 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Sat, 10 Oct 2020 12:52:26 -0400
Subject: [PATCH] feat(design-system): use rpcs

---
 hack/fixtures/BUILD.bazel                    | 4 +++-
 hack/fixtures/demoData.ts                    | 2 +-
 hack/fixtures/storyData.ts                   | 6 +++---
 hack/react.bzl                               | 4 +++-
 src/design-system/atoms/role/BUILD.bazel     | 2 +-
 src/design-system/atoms/role/Role.tsx        | 2 +-
 src/design-system/atoms/tab-view/TabView.tsx | 4 ++--
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/hack/fixtures/BUILD.bazel b/hack/fixtures/BUILD.bazel
index b7d5812..e512301 100644
--- a/hack/fixtures/BUILD.bazel
+++ b/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",
     ],
 )
diff --git a/hack/fixtures/demoData.ts b/hack/fixtures/demoData.ts
index bc68aa5..77d710b 100644
--- a/hack/fixtures/demoData.ts
+++ b/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[] = [
     {
diff --git a/hack/fixtures/storyData.ts b/hack/fixtures/storyData.ts
index d303557..0a029f1 100644
--- a/hack/fixtures/storyData.ts
+++ b/hack/fixtures/storyData.ts
@@ -1,12 +1,12 @@
-import { Member } from '@roleypoly/rpc/discord';
-import { Category, GuildData, GuildEnumeration } from '@roleypoly/rpc/platform';
+import { Member } from 'roleypoly/src/rpc/discord';
+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[] = [
     {
diff --git a/hack/react.bzl b/hack/react.bzl
index 67ddb81..e57d350 100644
--- a/hack/react.bzl
+++ b/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)
diff --git a/src/design-system/atoms/role/BUILD.bazel b/src/design-system/atoms/role/BUILD.bazel
index 1cf08f0..8ffaa28 100644
--- a/src/design-system/atoms/role/BUILD.bazel
+++ b/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",
diff --git a/src/design-system/atoms/role/Role.tsx b/src/design-system/atoms/role/Role.tsx
index 99575e0..fc193a9 100644
--- a/src/design-system/atoms/role/Role.tsx
+++ b/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';
diff --git a/src/design-system/atoms/tab-view/TabView.tsx b/src/design-system/atoms/tab-view/TabView.tsx
index 3cb4a7b..4db1a6e 100644
--- a/src/design-system/atoms/tab-view/TabView.tsx
+++ b/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;