fix(Editor): add reset/delete actions to each category (fixes #302)

packages/design-system/atoms/button/Button.styled.ts

@@ -3,9 +3,18 @@ import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
 import styled, { css } from 'styled-components';
 
-export const IconContainer = styled.div`
+export const IconContainer = styled.div<{ small?: boolean }>`
   margin-right: 0.6rem;
   font-size: 1.75em;
+
+  ${(props) =>
+    props.small &&
+    css`
+      margin-right: 0.2rem;
+      font-size: 1.25em;
+      position: relative;
+      top: 2px;
+    `}
 `;
 
 const base = css`

packages/design-system/atoms/button/Button.tsx

@@ -31,7 +31,9 @@ export const Button = (props: ButtonProps) => {
       onClick={props.onClick}
       disabled={props.disabled}
     >
-      {props.icon && <IconContainer>{props.icon}</IconContainer>}
+      {props.icon && (
+        <IconContainer small={props.size === 'small'}>{props.icon}</IconContainer>
+      )}
       <div>{props.children}</div>
     </StyledButton>
   );

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

@@ -29,12 +29,18 @@ export const Box = styled.div`
   flex-wrap: wrap;
 `;
 
-export const Section = styled.div<{ big?: boolean }>`
+export const Section = styled.div<{ big?: boolean; actions?: boolean }>`
   padding: 7px 5px;
   flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
   ${onSmallScreen(css`
     flex-basis: 100%;
   `)}
+
+  ${(props) =>
+    props.actions &&
+    css`
+      display: flex;
+    `};
 `;
 
 export const RoleContainer = styled.div`

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

@@ -1,3 +1,4 @@
+import { Button } from '@roleypoly/design-system/atoms/button';
 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';
@@ -7,7 +8,7 @@ import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
 import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
 import { sortBy, uniq } from 'lodash';
 import * as React from 'react';
-import { GoPlus } from 'react-icons/go';
+import { GoHistory, GoPlus, GoTrashcan } from 'react-icons/go';
 import ReactTooltip from 'react-tooltip';
 import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled';
 
@@ -17,6 +18,8 @@ export type CategoryProps = {
   category: CategoryT;
   unselectedRoles: RoleT[];
   onChange: (updatedCategory: CategoryT) => void;
+  onReset: () => void;
+  onDelete: () => void;
 };
 
 export const EditorCategory = (props: CategoryProps) => {
@@ -43,6 +46,16 @@ export const EditorCategory = (props: CategoryProps) => {
 
   return (
     <Box>
+      <Section big actions>
+        <Button size="small" color="muted" icon={<GoHistory />} onClick={props.onReset}>
+          Reset to Default
+        </Button>
+        &nbsp;
+        <Button size="small" color="muted" icon={<GoTrashcan />} onClick={props.onDelete}>
+          Delete Category
+        </Button>
+      </Section>
+
       <Section>
         <div>
           <Text>Category Name</Text>

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx

@@ -34,6 +34,13 @@ const resetOrder = (categories: Category[]) =>
 const forceOrder = (categories: Category[]) =>
   categories.map((c, index) => ({ ...c, position: index }));
 
+const defaultCategory: Omit<Omit<Category, 'id'>, 'position'> = {
+  name: 'New Category',
+  type: CategoryType.Multi,
+  roles: [],
+  hidden: false,
+};
+
 export const ServerCategoryEditor = (props: Props) => {
   const [reorderMode, setReorderMode] = React.useState(false);
 
@@ -62,12 +69,9 @@ export const ServerCategoryEditor = (props: Props) => {
     const categories = resetOrder(props.guild.data.categories);
 
     const newCategory: Category = {
+      ...defaultCategory,
       id: KSUID.randomSync().string,
-      name: 'New Category',
-      type: CategoryType.Multi,
       position: categories.length,
-      roles: [],
-      hidden: false,
     };
 
     props.onChange([...categories, newCategory]);
@@ -82,6 +86,25 @@ export const ServerCategoryEditor = (props: Props) => {
     props.onChange(resetOrder(categories));
   };
 
+  const onCategoryDelete = (category: Category) => () => {
+    const newCategories = props.guild.data.categories.filter((c) => c.id !== category.id);
+    props.onChange(resetOrder(newCategories));
+  };
+
+  const onCategoryReset = (category: Category) => () => {
+    const newCategories = props.guild.data.categories.map((c) => {
+      if (c.id === category.id) {
+        return {
+          ...defaultCategory,
+          id: KSUID.randomSync().string,
+          position: category.position,
+        };
+      }
+      return c;
+    });
+    props.onChange(resetOrder(newCategories));
+  };
+
   if (reorderMode) {
     return <ReorderMode {...props} exitReorderMode={onReorder} />;
   }
@@ -109,6 +132,8 @@ export const ServerCategoryEditor = (props: Props) => {
                   .filter((r) => r !== undefined) as Role[]
               }
               onChange={updateSingleCategory}
+              onDelete={onCategoryDelete(category)}
+              onReset={onCategoryReset(category)}
             />
           </CategoryContainer>
         ))