feat: add access control

packages/design-system/molecules/editable-role-list/EditableRoleList.tsx

@@ -0,0 +1,103 @@
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
+import { Role as RoleT } from '@roleypoly/types';
+import { sortBy, uniq } from 'lodash';
+import React from 'react';
+import { GoPlus } from 'react-icons/go';
+import { AddRoleButton, EditableRoleListStyled } from './EditableRoleList.styled';
+
+type Props = {
+  roles: RoleT[];
+  selectedRoles: RoleT['id'][];
+  unselectedRoles: RoleT[];
+  onChange: (roles: RoleT['id'][]) => void;
+};
+
+export const EditableRoleList = (props: Props) => {
+  const [searchOpen, setSearchOpen] = React.useState(false);
+
+  const handleRoleDelete = (role: RoleT) => () => {
+    const updatedRoles = props.selectedRoles.filter((r) => r !== role.id);
+    props.onChange(updatedRoles);
+  };
+
+  const handleRoleAdd = (role: RoleT) => {
+    const updatedRoles = uniq([...props.selectedRoles, role.id]);
+    props.onChange(updatedRoles);
+    setSearchOpen(false);
+  };
+
+  const handleSearchOpen = () => {
+    setSearchOpen(true);
+  };
+
+  return (
+    <EditableRoleListStyled>
+      {props.selectedRoles.length !== 0 ? (
+        <>
+          {sortBy(
+            props.roles.filter((r) => props.selectedRoles.includes(r.id)),
+            'position'
+          ).map((role) => (
+            <Role
+              key={role.id}
+              role={role}
+              selected={false}
+              type="delete"
+              onClick={handleRoleDelete(role)}
+            />
+          ))}
+          <RoleAddButton onClick={handleSearchOpen} />
+        </>
+      ) : (
+        <RoleAddButton long onClick={handleSearchOpen} />
+      )}
+      <RoleSearchPopover
+        isOpen={searchOpen}
+        onExit={() => setSearchOpen(false)}
+        unselectedRoles={props.unselectedRoles}
+        onSelect={handleRoleAdd}
+      />
+    </EditableRoleListStyled>
+  );
+};
+
+const RoleAddButton = (props: { onClick: () => void; long?: boolean }) => (
+  <AddRoleButton
+    data-tip="Add a role to the category"
+    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>
+  );
+};