add role search prototype

packages/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -45,17 +45,17 @@ export const RoleContainer = styled.div`
   }
 `;
 
-export const AddRoleButton = styled.div`
+export const AddRoleButton = styled.div<{ long?: boolean }>`
   border: 2px solid ${palette.taupe500};
   color: ${palette.taupe500};
   border-radius: 24px;
-  width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all ${transitions.actionable}s ease-in-out;
+
   &:hover {
     background-color: ${palette.taupe100};
     transform: translateY(-2px);
@@ -66,4 +66,13 @@ export const AddRoleButton = styled.div`
     transform: translateY(0);
     box-shadow: none;
   }
+
+  ${(props) =>
+    props.long
+      ? css`
+          padding: 0 14px;
+        `
+      : css`
+          width: 32px;
+        `};
 `;

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -1,9 +1,11 @@
+import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { Role } from '@roleypoly/design-system/atoms/role';
 import { TextInput } from '@roleypoly/design-system/atoms/text-input';
 import { Toggle } from '@roleypoly/design-system/atoms/toggle';
 import { Text } from '@roleypoly/design-system/atoms/typography';
+import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
 import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
-import { sortBy } from 'lodash';
+import { sortBy, uniq } from 'lodash';
 import * as React from 'react';
 import { GoPlus } from 'react-icons/go';
 import ReactTooltip from 'react-tooltip';
@@ -13,10 +15,13 @@ export type CategoryProps = {
   title: string;
   roles: RoleT[];
   category: CategoryT;
+  unselectedRoles: RoleT[];
   onChange: (updatedCategory: CategoryT) => void;
 };
 
 export const EditorCategory = (props: CategoryProps) => {
+  const [searchOpen, setSearchOpen] = React.useState(false);
+
   const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
     props.onChange({ ...props.category, [key]: value });
   };
@@ -26,6 +31,16 @@ export const EditorCategory = (props: CategoryProps) => {
     updateValue('roles', updatedRoles);
   };
 
+  const handleRoleAdd = (role: RoleT) => {
+    const updatedRoles = uniq([...props.category.roles, role.id]);
+    updateValue('roles', updatedRoles);
+    setSearchOpen(false);
+  };
+
+  const handleSearchOpen = () => {
+    setSearchOpen(true);
+  };
+
   return (
     <Box>
       <Section>
@@ -65,21 +80,32 @@ export const EditorCategory = (props: CategoryProps) => {
           <Text>Roles</Text>
         </div>
         <RoleContainer>
-          {sortBy(props.roles, 'position').map((role) => (
-            <Role
-              key={role.id}
-              role={role}
-              selected={false}
-              type="delete"
-              onClick={handleRoleDelete(role)}
+          {props.roles.length > 0 ? (
+            <>
+              {sortBy(props.roles, 'position').map((role) => (
+                <Role
+                  key={role.id}
+                  role={role}
+                  selected={false}
+                  type="delete"
+                  onClick={handleRoleDelete(role)}
+                />
+              ))}
+              <RoleAddButton onClick={handleSearchOpen} tooltipId={props.category.id} />
+            </>
+          ) : (
+            <RoleAddButton
+              long
+              onClick={handleSearchOpen}
+              tooltipId={props.category.id}
             />
-          ))}
-          <AddRoleButton
-            data-tip="Add a role to the category"
-            data-for={props.category.id}
-          >
-            <GoPlus />
-          </AddRoleButton>
+          )}
+          <RoleSearchPopover
+            isOpen={searchOpen}
+            onExit={() => setSearchOpen(false)}
+            unselectedRoles={props.unselectedRoles}
+            onSelect={handleRoleAdd}
+          />
         </RoleContainer>
       </Section>
 
@@ -87,3 +113,47 @@ export const EditorCategory = (props: CategoryProps) => {
     </Box>
   );
 };
+
+const RoleAddButton = (props: {
+  onClick: () => void;
+  tooltipId: string;
+  long?: boolean;
+}) => (
+  <AddRoleButton
+    data-tip="Add a role to the category"
+    data-for={props.tooltipId}
+    onClick={props.onClick}
+    long={props.long}
+  >
+    {props.long && <>Add a role&nbsp;&nbsp;</>}
+    <GoPlus />
+  </AddRoleButton>
+);
+
+const RoleSearchPopover = (props: {
+  onSelect: (role: RoleT) => void;
+  onExit: (type: string) => void;
+  isOpen: boolean;
+  unselectedRoles: RoleT[];
+}) => {
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  return (
+    <Popover
+      position="top left"
+      active={props.isOpen}
+      canDefocus
+      onExit={props.onExit}
+      headContent={null}
+    >
+      {() => (
+        <RoleSearch
+          onSelect={props.onSelect}
+          roles={props.unselectedRoles}
+          searchTerm={searchTerm}
+          onSearchUpdate={setSearchTerm}
+        />
+      )}
+    </Popover>
+  );
+};