chore: update prettier tab width for consistency

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

@@ -3,17 +3,17 @@ import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyD
 import { EditorCategory } from './EditorCategory';
 
 export default {
-    title: 'Molecules/Editor/Category',
+  title: 'Molecules/Editor/Category',
 };
 
 export const CategoryEditor = () => {
-    const [categoryData, setCategoryData] = React.useState(mockCategory);
-    return (
-        <EditorCategory
-            category={categoryData}
-            onChange={(category) => setCategoryData(category)}
-            uncategorizedRoles={roleCategory}
-            guildRoles={[...roleCategory, ...roleCategory2]}
-        />
-    );
+  const [categoryData, setCategoryData] = React.useState(mockCategory);
+  return (
+    <EditorCategory
+      category={categoryData}
+      onChange={(category) => setCategoryData(category)}
+      uncategorizedRoles={roleCategory}
+      guildRoles={[...roleCategory, ...roleCategory2]}
+    />
+  );
 };

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
 export const RoleContainer = styled.div`
-    display: flex;
-    margin: 10px;
+  display: flex;
+  margin: 10px;
 `;

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

@@ -12,134 +12,133 @@ import { GoSearch } from 'react-icons/go';
 import { RoleContainer } from './EditorCategory.styled';
 
 type Props = {
-    category: Category;
-    uncategorizedRoles: RoleType[];
-    guildRoles: RoleType[];
-    onChange: (category: Category) => void;
+  category: Category;
+  uncategorizedRoles: RoleType[];
+  guildRoles: RoleType[];
+  onChange: (category: Category) => void;
 };
 
 const typeEnumToSwitch = (typeData: CategoryType) => {
-    if (typeData === CategoryType.Single) {
-        return 'Single';
-    } else {
-        return 'Multiple';
-    }
+  if (typeData === CategoryType.Single) {
+    return 'Single';
+  } else {
+    return 'Multiple';
+  }
 };
 
 const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
-    if (typeData === 'Single') {
-        return CategoryType.Single;
-    } else {
-        return CategoryType.Multi;
-    }
+  if (typeData === 'Single') {
+    return CategoryType.Single;
+  } else {
+    return CategoryType.Multi;
+  }
 };
 
 export const EditorCategory = (props: Props) => {
-    const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
-    const [roleSearchTerm, updateSearchTerm] = React.useState('');
+  const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
+  const [roleSearchTerm, updateSearchTerm] = React.useState('');
 
-    const onUpdate = (
-        key: keyof typeof props.category,
-        pred?: (newValue: any) => any
-    ) => (newValue: any) => {
-        props.onChange({
-            ...props.category,
-            [key]: pred ? pred(newValue) : newValue,
-        });
-    };
+  const onUpdate = (key: keyof typeof props.category, pred?: (newValue: any) => any) => (
+    newValue: any
+  ) => {
+    props.onChange({
+      ...props.category,
+      [key]: pred ? pred(newValue) : newValue,
+    });
+  };
 
-    const handleRoleSelect = (role: RoleType) => {
-        setRoleSearchPopoverActive(false);
-        updateSearchTerm('');
-        props.onChange({
-            ...props.category,
-            roles: [...props.category.roles, role.id],
-        });
-    };
+  const handleRoleSelect = (role: RoleType) => {
+    setRoleSearchPopoverActive(false);
+    updateSearchTerm('');
+    props.onChange({
+      ...props.category,
+      roles: [...props.category.roles, role.id],
+    });
+  };
 
-    const handleRoleDeselect = (role: RoleType) => () => {
-        props.onChange({
-            ...props.category,
-            roles: props.category.roles.filter((x) => x !== role.id),
-        });
-    };
+  const handleRoleDeselect = (role: RoleType) => () => {
+    props.onChange({
+      ...props.category,
+      roles: props.category.roles.filter((x) => x !== role.id),
+    });
+  };
 
-    return (
-        <div>
-            <Text>Category Name</Text>
-            <TextInput
-                placeholder="Pronouns, Political, Colors..."
-                value={props.category.name}
-                onChange={onUpdate('name', (x) => x.target.value)}
-            />
+  return (
+    <div>
+      <Text>Category Name</Text>
+      <TextInput
+        placeholder="Pronouns, Political, Colors..."
+        value={props.category.name}
+        onChange={onUpdate('name', (x) => x.target.value)}
+      />
 
-            <Space />
+      <Space />
 
-            <Text>Selection Type</Text>
-            <div>
-                <HorizontalSwitch
-                    items={['Multiple', 'Single']}
-                    value={typeEnumToSwitch(props.category.type)}
-                    onChange={onUpdate('type', switchToTypeEnum)}
-                />
-            </div>
+      <Text>Selection Type</Text>
+      <div>
+        <HorizontalSwitch
+          items={['Multiple', 'Single']}
+          value={typeEnumToSwitch(props.category.type)}
+          onChange={onUpdate('type', switchToTypeEnum)}
+        />
+      </div>
 
-            <Space />
+      <Space />
 
-            <Text>Visiblity</Text>
-            <div>
-                <HorizontalSwitch
-                    items={['Visible', 'Hidden']}
-                    value={props.category.hidden ? 'Hidden' : 'Visible'}
-                    onChange={onUpdate('hidden', (a) => a === 'Hidden')}
-                />
-            </div>
+      <Text>Visiblity</Text>
+      <div>
+        <HorizontalSwitch
+          items={['Visible', 'Hidden']}
+          value={props.category.hidden ? 'Hidden' : 'Visible'}
+          onChange={onUpdate('hidden', (a) => a === 'Hidden')}
+        />
+      </div>
 
-            <Space />
-            <Text>Roles</Text>
-            <Popover
-                position={'top left'}
-                headContent={null}
-                active={roleSearchPopoverActive}
-                onExit={() => setRoleSearchPopoverActive(false)}
-            >
-                {() => (
-                    <RoleSearch
-                        placeholder={'Type or drag a role...'}
-                        roles={props.uncategorizedRoles}
-                        onSelect={handleRoleSelect}
-                        searchTerm={roleSearchTerm}
-                        onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
-                    />
-                )}
-            </Popover>
-            <FaderOpacity isVisible={!roleSearchPopoverActive}>
-                <TextInputWithIcon
-                    icon={<GoSearch />}
-                    placeholder={'Type or drag a role...'}
-                    onFocus={() => setRoleSearchPopoverActive(true)}
-                    value={roleSearchTerm}
-                    onChange={(x) => updateSearchTerm(x.target.value)}
-                />
-                <RoleContainer>
-                    {props.category.roles.map((id) => {
-                        const role = props.guildRoles.find((x) => x.id === id);
-                        if (!role) {
-                            return <></>;
-                        }
+      <Space />
+      <Text>Roles</Text>
+      <Popover
+        position={'top left'}
+        headContent={null}
+        active={roleSearchPopoverActive}
+        onExit={() => setRoleSearchPopoverActive(false)}
+      >
+        {() => (
+          <RoleSearch
+            placeholder={'Type or drag a role...'}
+            roles={props.uncategorizedRoles}
+            onSelect={handleRoleSelect}
+            searchTerm={roleSearchTerm}
+            onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
+          />
+        )}
+      </Popover>
+      <FaderOpacity isVisible={!roleSearchPopoverActive}>
+        <TextInputWithIcon
+          icon={<GoSearch />}
+          placeholder={'Type or drag a role...'}
+          onFocus={() => setRoleSearchPopoverActive(true)}
+          value={roleSearchTerm}
+          onChange={(x) => updateSearchTerm(x.target.value)}
+        />
+        <RoleContainer>
+          {props.category.roles.map((id) => {
+            const role = props.guildRoles.find((x) => x.id === id);
+            if (!role) {
+              return <></>;
+            }
 
-                        return (
-                            <Role
-                                role={role}
-                                selected={false}
-                                key={id}
-                                type="delete"
-                                onClick={handleRoleDeselect(role)}
-                            />
-                        );
-                    })}
-                </RoleContainer>
-            </FaderOpacity>
-        </div>
-    );
+            return (
+              <Role
+                role={role}
+                selected={false}
+                key={id}
+                type="delete"
+                onClick={handleRoleDeselect(role)}
+              />
+            );
+          })}
+        </RoleContainer>
+      </FaderOpacity>
+    </div>
+  );
 };