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

packages/design-system/atoms/avatar/Avatar.stories.tsx

@@ -2,33 +2,33 @@ import * as React from 'react';
 import { Avatar, AvatarProps } from './Avatar';
 
 export default {
-    title: 'Atoms/Avatar',
-    component: Avatar,
-    argTypes: {
-        initials: { control: 'text' },
-    },
-    args: {
-        initials: 'KR',
-        hash: 'aa',
-    },
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  argTypes: {
+    initials: { control: 'text' },
+  },
+  args: {
+    initials: 'KR',
+    hash: 'aa',
+  },
 };
 
 type StoryArgs = {
-    initials?: string;
+  initials?: string;
 } & AvatarProps;
 
 export const WithInitials = ({ initials, ...rest }: StoryArgs) => (
-    <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
-        {initials}
-    </Avatar>
+  <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
+    {initials}
+  </Avatar>
 );
 
 export const WithText = ({ initials, ...rest }: StoryArgs) => (
-    <Avatar size={48} {...rest}>
-        {initials}
-    </Avatar>
+  <Avatar size={48} {...rest}>
+    {initials}
+  </Avatar>
 );
 export const Empty = (args: StoryArgs) => <Avatar size={48} {...args}></Avatar>;
 export const DeliberatelyEmpty = (args: StoryArgs) => (
-    <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
+  <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
 );

packages/design-system/atoms/avatar/Avatar.styled.ts

@@ -4,41 +4,41 @@ import { AvatarProps } from './Avatar';
 
 type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
 export const Container = styled.div<ContainerProps>`
-    border-radius: 100%;
-    box-sizing: border-box;
-    width: ${(props: ContainerProps) => props.size || 48}px;
-    height: ${(props: ContainerProps) => props.size || 48}px;
-    min-width: ${(props: ContainerProps) => props.size || 48}px;
-    min-height: ${(props: ContainerProps) => props.size || 48}px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${palette.grey100};
-    position: relative;
-    background-color: ${palette.grey500};
-    font-weight: bold;
-    text-align: center;
-    line-height: 1;
-    overflow: hidden;
-    font-size: ${(props: ContainerProps) => props.size};
-    ${(props) =>
-        props.deliberatelyEmpty &&
-        css`
-            border: 4px solid rgba(0, 0, 0, 0.25);
-            background-color: ${palette.taupe400};
-            color: ${palette.taupe600};
-        `}
+  border-radius: 100%;
+  box-sizing: border-box;
+  width: ${(props: ContainerProps) => props.size || 48}px;
+  height: ${(props: ContainerProps) => props.size || 48}px;
+  min-width: ${(props: ContainerProps) => props.size || 48}px;
+  min-height: ${(props: ContainerProps) => props.size || 48}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${palette.grey100};
+  position: relative;
+  background-color: ${palette.grey500};
+  font-weight: bold;
+  text-align: center;
+  line-height: 1;
+  overflow: hidden;
+  font-size: ${(props: ContainerProps) => props.size};
+  ${(props) =>
+    props.deliberatelyEmpty &&
+    css`
+      border: 4px solid rgba(0, 0, 0, 0.25);
+      background-color: ${palette.taupe400};
+      color: ${palette.taupe600};
+    `}
 `;
 
 type ImageProps = Pick<AvatarProps, 'src'>;
 export const Image = styled.div<ImageProps>`
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    border-radius: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 100%;
 `;

packages/design-system/atoms/avatar/Avatar.tsx

@@ -2,28 +2,28 @@ import React from 'react';
 import { Container, Image } from './Avatar.styled';
 
 export type AvatarProps = {
-    src?: string;
-    children?: string | React.ReactNode;
-    size?: number;
-    hash?: string;
-    deliberatelyEmpty?: boolean;
+  src?: string;
+  children?: string | React.ReactNode;
+  size?: number;
+  hash?: string;
+  deliberatelyEmpty?: boolean;
 };
 
 /** Chuldren is recommended to not be larger than 2 uppercase letters. */
 export const Avatar = (props: AvatarProps) => (
-    <Container size={props.size} deliberatelyEmpty={props.deliberatelyEmpty}>
-        {props.src && props.hash && (
-            <Image
-                style={{
-                    backgroundImage: `url(${props.src})`,
-                }}
-            />
-        )}
-        <div>
-            {props.children || (
-                /* needs specifically &nbsp; to prevent layout issues. */
-                <>&nbsp;</>
-            )}
-        </div>
-    </Container>
+  <Container size={props.size} deliberatelyEmpty={props.deliberatelyEmpty}>
+    {props.src && props.hash && (
+      <Image
+        style={{
+          backgroundImage: `url(${props.src})`,
+        }}
+      />
+    )}
+    <div>
+      {props.children || (
+        /* needs specifically &nbsp; to prevent layout issues. */
+        <>&nbsp;</>
+      )}
+    </div>
+  </Container>
 );

packages/design-system/atoms/avatar/avatarUtils.tsx

@@ -1,16 +1,16 @@
 export const initialsFromName = (name: string) =>
-    !!name
-        ? name
-              .split(' ')
-              .slice(0, 2)
-              .map((x) => x[0])
-              .join('')
-              .toUpperCase()
-        : '';
+  !!name
+    ? name
+        .split(' ')
+        .slice(0, 2)
+        .map((x) => x[0])
+        .join('')
+        .toUpperCase()
+    : '';
 
 export const avatarHash = (
-    id: string,
-    hash: string,
-    bucket: 'icons' | 'avatars' = 'icons',
-    size: number = 256
+  id: string,
+  hash: string,
+  bucket: 'icons' | 'avatars' = 'icons',
+  size: number = 256
 ) => `https://cdn.discordapp.com/${bucket}/${id}/${hash}.webp?size=${size}`;