chore: update prettier tab width for consistency (#175)

packages/design-system/organisms/role-picker/RolePicker.spec.tsx

@@ -1,7 +1,8 @@
-jest.unmock('@roleypoly/design-system/atoms/role')
-    .unmock('@roleypoly/design-system/atoms/button')
-    .unmock('@roleypoly/design-system/molecules/picker-category')
-    .unmock('@roleypoly/design-system/organisms/role-picker');
+jest
+  .unmock('@roleypoly/design-system/atoms/role')
+  .unmock('@roleypoly/design-system/atoms/button')
+  .unmock('@roleypoly/design-system/molecules/picker-category')
+  .unmock('@roleypoly/design-system/organisms/role-picker');
 
 import { Role } from '@roleypoly/design-system/atoms/role';
 import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
@@ -9,36 +10,36 @@ import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit';
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
-    guildData,
-    mastheadSlugs,
-    member,
-    mockCategorySingle,
-    roleCategory,
-    roleCategory2,
+  guildData,
+  mastheadSlugs,
+  member,
+  mockCategorySingle,
+  roleCategory,
+  roleCategory2,
 } from '../../fixtures/storyData';
 import { RolePicker, RolePickerProps } from './RolePicker';
 
 it('unselects the rest of a category in single mode', () => {
-    const props: RolePickerProps = {
-        guildData: { ...guildData, categories: [mockCategorySingle] },
-        member: { ...member, roles: [] },
-        roles: [...roleCategory, ...roleCategory2],
-        guild: mastheadSlugs[0],
-        onSubmit: jest.fn(),
-        editable: false,
-    };
+  const props: RolePickerProps = {
+    guildData: { ...guildData, categories: [mockCategorySingle] },
+    member: { ...member, roles: [] },
+    roles: [...roleCategory, ...roleCategory2],
+    guild: mastheadSlugs[0],
+    onSubmit: jest.fn(),
+    editable: false,
+  };
 
-    const view = shallow(<RolePicker {...props} />);
+  const view = shallow(<RolePicker {...props} />);
 
-    const roles = view.find(PickerCategory).dive().find(Role);
+  const roles = view.find(PickerCategory).dive().find(Role);
 
-    roles.first().props().onClick?.(true);
+  roles.first().props().onClick?.(true);
 
-    view.find(ResetSubmit).props().onSubmit();
-    expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[0]]);
+  view.find(ResetSubmit).props().onSubmit();
+  expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[0]]);
 
-    roles.at(1).props().onClick?.(true);
+  roles.at(1).props().onClick?.(true);
 
-    view.find(ResetSubmit).props().onSubmit();
-    expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[1]]);
+  view.find(ResetSubmit).props().onSubmit();
+  expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[1]]);
 });

packages/design-system/organisms/role-picker/RolePicker.stories.tsx

@@ -1,56 +1,56 @@
 import * as React from 'react';
 import {
-    guild,
-    guildData,
-    member,
-    roleCategory,
-    roleCategory2,
+  guild,
+  guildData,
+  member,
+  roleCategory,
+  roleCategory2,
 } from '../../fixtures/storyData';
 import { RolePicker, RolePickerProps } from './RolePicker';
 
 const props: Partial<RolePickerProps> = {
-    guildData: guildData,
-    member: member,
-    guild: guild,
-    roles: [...roleCategory, ...roleCategory2],
-    editable: false,
+  guildData: guildData,
+  member: member,
+  guild: guild,
+  roles: [...roleCategory, ...roleCategory2],
+  editable: false,
 };
 
 const noMessageArgs: Partial<RolePickerProps> = {
-    ...props,
-    guildData: {
-        ...guildData,
-        message: '',
-    },
+  ...props,
+  guildData: {
+    ...guildData,
+    message: '',
+  },
 };
 
 const noCategoriesArgs: Partial<RolePickerProps> = {
-    ...props,
-    guildData: {
-        ...guildData,
-        categoriesList: [],
-    },
+  ...props,
+  guildData: {
+    ...guildData,
+    categoriesList: [],
+  },
 };
 
 const emptyArgs = {
-    ...props,
-    guildData: {
-        ...guildData,
-        categoriesList: [],
-        message: '',
-    },
+  ...props,
+  guildData: {
+    ...guildData,
+    categoriesList: [],
+    message: '',
+  },
 };
 
 export default {
-    title: 'Organisms/Role Picker',
-    args: props,
-    component: RolePicker,
+  title: 'Organisms/Role Picker',
+  args: props,
+  component: RolePicker,
 };
 
 export const Full = (args) => <RolePicker {...args} />;
 export const EditableFull = (args) => <RolePicker {...args} />;
 EditableFull.args = {
-    editable: true,
+  editable: true,
 };
 export const NoMessage = (args) => <RolePicker {...args} />;
 NoMessage.args = noMessageArgs;

packages/design-system/organisms/role-picker/RolePicker.styled.tsx

@@ -4,31 +4,31 @@ import styled from 'styled-components';
 export const Container = styled.div``;
 
 export const Box = styled.div`
-    background-color: ${palette.taupe300};
-    padding: 5px;
-    margin: 5px 0;
+  background-color: ${palette.taupe300};
+  padding: 5px;
+  margin: 5px 0;
 `;
 
 export const MessageBox = styled(Box)`
-    padding: 10px;
+  padding: 10px;
 `;
 
 export const CategoryContainer = styled(Box)``;
 
 export const InfoBox = styled(MessageBox)`
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 `;
 
 export const InfoIcon = styled.div`
-    flex-shrink: 0;
-    font-size: 1.75em;
-    margin-right: 10px;
-    display: flex;
-    align-items: center;
-    color: ${palette.taupe500};
+  flex-shrink: 0;
+  font-size: 1.75em;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  color: ${palette.taupe500};
 `;
 
 export const Buttons = styled.div`
-    display: flex;
+  display: flex;
 `;

packages/design-system/organisms/role-picker/RolePicker.tsx

@@ -7,145 +7,130 @@ import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthe
 import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
 import { sortBy } from '@roleypoly/misc-utils/sortBy';
 import {
-    Category,
-    CategoryType,
-    GuildData,
-    GuildSlug,
-    Member,
-    Role,
+  Category,
+  CategoryType,
+  GuildData,
+  GuildSlug,
+  Member,
+  Role,
 } from '@roleypoly/types';
 import { isEqual, xor } from 'lodash';
 import * as React from 'react';
 import { GoInfo } from 'react-icons/go';
 import {
-    CategoryContainer,
-    Container,
-    InfoBox,
-    InfoIcon,
-    MessageBox,
+  CategoryContainer,
+  Container,
+  InfoBox,
+  InfoIcon,
+  MessageBox,
 } from './RolePicker.styled';
 
 export type RolePickerProps = {
-    guild: GuildSlug;
-    guildData: GuildData;
-    member: Member;
-    roles: Role[];
-    onSubmit: (selectedRoles: string[]) => void;
-    editable: boolean;
+  guild: GuildSlug;
+  guildData: GuildData;
+  member: Member;
+  roles: Role[];
+  onSubmit: (selectedRoles: string[]) => void;
+  editable: boolean;
 };
 
 export const RolePicker = (props: RolePickerProps) => {
-    const [selectedRoles, updateSelectedRoles] = React.useState<string[]>(
-        props.member.roles
-    );
+  const [selectedRoles, updateSelectedRoles] = React.useState<string[]>(
+    props.member.roles
+  );
 
-    React.useEffect(() => {
-        if (!isEqual(props.member.roles, selectedRoles)) {
-            updateSelectedRoles(props.member.roles);
-        }
-    }, [props.member.roles]);
+  React.useEffect(() => {
+    if (!isEqual(props.member.roles, selectedRoles)) {
+      updateSelectedRoles(props.member.roles);
+    }
+  }, [props.member.roles]);
 
-    const handleChange = (category: Category) => (role: Role) => (newState: boolean) => {
-        if (category.type === CategoryType.Single) {
-            updateSelectedRoles(
-                newState === true
-                    ? [
-                          ...selectedRoles.filter((x) => !category.roles.includes(x)),
-                          role.id,
-                      ]
-                    : selectedRoles.filter((x) => x !== role.id)
-            );
-        } else {
-            updateSelectedRoles(
-                newState === true
-                    ? [...selectedRoles, role.id]
-                    : selectedRoles.filter((x) => x !== role.id)
-            );
-        }
-    };
+  const handleChange = (category: Category) => (role: Role) => (newState: boolean) => {
+    if (category.type === CategoryType.Single) {
+      updateSelectedRoles(
+        newState === true
+          ? [...selectedRoles.filter((x) => !category.roles.includes(x)), role.id]
+          : selectedRoles.filter((x) => x !== role.id)
+      );
+    } else {
+      updateSelectedRoles(
+        newState === true
+          ? [...selectedRoles, role.id]
+          : selectedRoles.filter((x) => x !== role.id)
+      );
+    }
+  };
 
-    return (
-        <Container>
-            <Space />
-            <ServerMasthead guild={props.guild} editable={props.editable} />
-            <Space />
-            {props.guildData.message && (
-                <>
-                    <MessageBox>
-                        <ReactifyNewlines>{props.guildData.message}</ReactifyNewlines>
-                    </MessageBox>
-                    <Space />
-                </>
+  return (
+    <Container>
+      <Space />
+      <ServerMasthead guild={props.guild} editable={props.editable} />
+      <Space />
+      {props.guildData.message && (
+        <>
+          <MessageBox>
+            <ReactifyNewlines>{props.guildData.message}</ReactifyNewlines>
+          </MessageBox>
+          <Space />
+        </>
+      )}
+
+      {props.guildData.categories.length !== 0 ? (
+        <>
+          <div>
+            {sortBy(
+              props.guildData.categories.filter((category) => !category.hidden),
+              'position'
+            ).map((category, idx) => (
+              <CategoryContainer key={idx}>
+                <PickerCategory
+                  key={idx}
+                  category={category}
+                  title={category.name}
+                  selectedRoles={selectedRoles.filter((roleId) =>
+                    category.roles.includes(roleId)
+                  )}
+                  roles={
+                    category.roles
+                      .map((role) => props.roles.find((r) => r.id === role))
+                      .filter((r) => r !== undefined) as Role[]
+                  }
+                  onChange={handleChange(category)}
+                  wikiMode={false}
+                  type={category.type === CategoryType.Single ? 'single' : 'multi'}
+                />
+              </CategoryContainer>
+            ))}
+          </div>
+          <div>
+            <FaderOpacity isVisible={xor(selectedRoles, props.member.roles).length !== 0}>
+              <ResetSubmit
+                onSubmit={() => props.onSubmit(selectedRoles)}
+                onReset={() => {
+                  updateSelectedRoles(props.member.roles);
+                }}
+              />
+            </FaderOpacity>
+          </div>
+        </>
+      ) : (
+        <InfoBox>
+          <InfoIcon>
+            <GoInfo />
+          </InfoIcon>
+          <div>
+            There are currently no roles available for you to choose from.
+            {props.editable && (
+              <>
+                {' '}
+                <a href={`/s/${props.guild.id}/edit`}>
+                  <Link>Add some roles!</Link>
+                </a>
+              </>
             )}
-
-            {props.guildData.categories.length !== 0 ? (
-                <>
-                    <div>
-                        {sortBy(
-                            props.guildData.categories.filter(
-                                (category) => !category.hidden
-                            ),
-                            'position'
-                        ).map((category, idx) => (
-                            <CategoryContainer key={idx}>
-                                <PickerCategory
-                                    key={idx}
-                                    category={category}
-                                    title={category.name}
-                                    selectedRoles={selectedRoles.filter((roleId) =>
-                                        category.roles.includes(roleId)
-                                    )}
-                                    roles={
-                                        category.roles
-                                            .map((role) =>
-                                                props.roles.find((r) => r.id === role)
-                                            )
-                                            .filter((r) => r !== undefined) as Role[]
-                                    }
-                                    onChange={handleChange(category)}
-                                    wikiMode={false}
-                                    type={
-                                        category.type === CategoryType.Single
-                                            ? 'single'
-                                            : 'multi'
-                                    }
-                                />
-                            </CategoryContainer>
-                        ))}
-                    </div>
-                    <div>
-                        <FaderOpacity
-                            isVisible={
-                                xor(selectedRoles, props.member.roles).length !== 0
-                            }
-                        >
-                            <ResetSubmit
-                                onSubmit={() => props.onSubmit(selectedRoles)}
-                                onReset={() => {
-                                    updateSelectedRoles(props.member.roles);
-                                }}
-                            />
-                        </FaderOpacity>
-                    </div>
-                </>
-            ) : (
-                <InfoBox>
-                    <InfoIcon>
-                        <GoInfo />
-                    </InfoIcon>
-                    <div>
-                        There are currently no roles available for you to choose from.
-                        {props.editable && (
-                            <>
-                                {' '}
-                                <a href={`/s/${props.guild.id}/edit`}>
-                                    <Link>Add some roles!</Link>
-                                </a>
-                            </>
-                        )}
-                    </div>
-                </InfoBox>
-            )}
-        </Container>
-    );
+          </div>
+        </InfoBox>
+      )}
+    </Container>
+  );
 };