feat(design-system): convert roles to monorepo and stories, add legacy rpc package

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

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

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Role as RoleComponent } from "./Role";
+import { roleCategory } from "roleypoly/hack/fixtures/storyData";
+import { withColors } from "roleypoly/src/design-system/atoms/colors/withColors";
+import styled from "styled-components";
+
+export default {
+  title: "Atoms/Role",
+  component: RoleComponent,
+  decorators: [withColors],
+};
+
+const Demo = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const RoleWithState = (props: any) => {
+  const [selected, updateSelected] = React.useState(false);
+  return (
+    <div style={{ padding: 5 }}>
+      <RoleComponent
+        {...props}
+        selected={selected}
+        onClick={(next) => updateSelected(next)}
+      />
+    </div>
+  );
+};
+
+export const Role = () => (
+  <Demo>
+    {roleCategory.map((c, idx) => (
+      <RoleWithState key={idx} role={c} />
+    ))}
+  </Demo>
+);
+
+export const Selected = () => (
+  <Demo>
+    {roleCategory.map((c, idx) => (
+      <RoleComponent key={idx} role={c} selected={true} />
+    ))}
+  </Demo>
+);
+
+export const Unselected = () => (
+  <Demo>
+    {roleCategory.map((c, idx) => (
+      <RoleComponent key={idx} role={c} selected={false} />
+    ))}
+  </Demo>
+);
+
+export const DisabledByPosition = () => (
+  <Demo>
+    {roleCategory.map((c, idx) => (
+      <RoleComponent
+        key={idx}
+        role={{ ...c, safety: 1 }}
+        selected={false}
+        disabled
+      />
+    ))}
+  </Demo>
+);
+
+export const DisabledByDanger = () => (
+  <Demo>
+    {roleCategory.map((c, idx) => (
+      <RoleComponent
+        key={idx}
+        role={{ ...c, safety: 2 }}
+        selected={false}
+        disabled
+      />
+    ))}
+  </Demo>
+);

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

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { atomStories } from 'atoms/atoms.story';
-import { Role } from './Role';
-import { roleCategory } from 'hack/fixtures/storyData';
-import { withColors } from 'atoms/colors/withColors';
-import styled from 'styled-components';
-
-const story = atomStories('Role', module);
-
-story.addDecorator(withColors);
-
-const Demo = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-`;
-
-const RoleWithState = (props: any) => {
-    const [selected, updateSelected] = React.useState(false);
-    return (
-        <div style={{ padding: 5 }}>
-            <Role
-                {...props}
-                selected={selected}
-                onClick={(next) => updateSelected(next)}
-            />
-        </div>
-    );
-};
-
-story.add('Role', () => {
-    return (
-        <Demo>
-            {roleCategory.map((c, idx) => (
-                <RoleWithState key={idx} role={c} />
-            ))}
-        </Demo>
-    );
-});
-
-story.add('Selected', () => (
-    <Demo>
-        {roleCategory.map((c, idx) => (
-            <Role key={idx} role={c} selected={true} />
-        ))}
-    </Demo>
-));
-
-story.add('Unselected', () => (
-    <Demo>
-        {roleCategory.map((c, idx) => (
-            <Role key={idx} role={c} selected={false} />
-        ))}
-    </Demo>
-));
-
-story.add('Disabled (Position)', () => (
-    <Demo>
-        {roleCategory.map((c, idx) => (
-            <Role key={idx} role={{ ...c, safety: 1 }} selected={false} disabled />
-        ))}
-    </Demo>
-));
-
-story.add('Disabled (Dangerous)', () => (
-    <Demo>
-        {roleCategory.map((c, idx) => (
-            <Role key={idx} role={{ ...c, safety: 2 }} selected={false} disabled />
-        ))}
-    </Demo>
-));

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

@@ -1,11 +1,12 @@
 import * as React from "react";
+import { Role as RPCRole } from "@roleypoly/rpc/shared";
 import * as styled from "./Role.styled";
 import { FaCheck, FaTimes } from "react-icons/fa";
 import { numberToChroma } from "roleypoly/src/design-system/atoms/colors";
 import chroma from "chroma-js";
 
 type Props = {
-  role: any; // TODO: rpc types
+  role: RPCRole.AsObject;
   selected: boolean;
   disabled?: boolean;
   onClick?: (newState: boolean) => void;
@@ -59,11 +60,11 @@ export const Role = (props: Props) => {
   );
 };
 
-const disabledReason = (role: any) => {
+const disabledReason = (role: RPCRole.AsObject) => {
   switch (role.safety) {
-    case 1:
+    case RPCRole.RoleSafety.HIGHERTHANBOT:
       return `This role is above Roleypoly's own role.`;
-    case 2:
+    case RPCRole.RoleSafety.DANGEROUSPERMISSIONS:
       const { permissions } = role;
       let permissionHits: string[] = [];