chore: restructure project into yarn workspaces, remove next

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

@@ -0,0 +1,34 @@
+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',
+    },
+};
+
+type StoryArgs = {
+    initials?: string;
+} & AvatarProps;
+
+export const WithInitials = ({ initials, ...rest }: StoryArgs) => (
+    <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>
+);
+export const Empty = (args: StoryArgs) => <Avatar size={48} {...args}></Avatar>;
+export const DeliberatelyEmpty = (args: StoryArgs) => (
+    <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
+);

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

@@ -0,0 +1,44 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+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};
+        `}
+`;
+
+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%;
+`;

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

@@ -0,0 +1,29 @@
+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;
+};
+
+/** 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>
+);

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

@@ -0,0 +1,16 @@
+export const initialsFromName = (name: string) =>
+    !!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
+) => `https://cdn.discordapp.com/${bucket}/${id}/${hash}.webp?size=${size}`;

packages/design-system/atoms/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * as utils from './avatarUtils';