chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/server-masthead/ServerMasthead.spec.tsx

@@ -0,0 +1,19 @@
+jest.unmock('./ServerMasthead');
+
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { ServerMasthead } from './ServerMasthead';
+import { Editable } from './ServerMasthead.styled';
+
+it('shows Edit Server when editable is true', () => {
+    const view = shallow(<ServerMasthead editable={true} guild={mastheadSlugs[0]} />);
+
+    expect(view.find(Editable).length).not.toBe(0);
+});
+
+it('hides Edit Server when editable is true', () => {
+    const view = shallow(<ServerMasthead editable={false} guild={mastheadSlugs[0]} />);
+
+    expect(view.find(Editable).length).toBe(0);
+});

packages/design-system/molecules/server-masthead/ServerMasthead.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { guild } from '../../fixtures/storyData';
+import { ServerMasthead } from './ServerMasthead';
+
+export default {
+    title: 'Molecules/Server Masthead',
+    args: {
+        editable: false,
+        guild,
+    },
+};
+
+export const Default = (args) => <ServerMasthead {...args} />;
+export const Editable = (args) => <ServerMasthead {...args} />;
+Editable.args = {
+    editable: true,
+};

packages/design-system/molecules/server-masthead/ServerMasthead.styled.ts

@@ -0,0 +1,36 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const Name = styled.div`
+    margin: 0 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: flex-start;
+`;
+
+export const Icon = styled.div`
+    flex-shrink: 0;
+`;
+
+export const Editable = styled.div`
+    color: ${palette.taupe500};
+    display: flex;
+    align-items: center;
+    user-select: none;
+    transition: color ${transitions.actionable}s ease-in-out;
+    cursor: pointer;
+    &:hover {
+        color: ${palette.taupe600};
+    }
+`;

packages/design-system/molecules/server-masthead/ServerMasthead.tsx

@@ -0,0 +1,38 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import { AccentTitle, AmbientLarge } from '@roleypoly/design-system/atoms/typography';
+import * as React from 'react';
+import { GoPencil } from 'react-icons/go';
+import { GuildSlug } from '../../../../src/common/types';
+import { Editable, Icon, Name, Wrapper } from './ServerMasthead.styled';
+
+export type ServerMastheadProps = {
+    guild: GuildSlug;
+    editable: boolean;
+};
+
+export const ServerMasthead = (props: ServerMastheadProps) => {
+    return (
+        <Wrapper>
+            <Icon>
+                <Avatar
+                    hash={props.guild.icon}
+                    size={props.editable ? 60 : 48}
+                    src={utils.avatarHash(props.guild.id, props.guild.icon, 'icons', 512)}
+                >
+                    {utils.initialsFromName(props.guild.name)}
+                </Avatar>
+            </Icon>
+            <Name>
+                <AccentTitle>{props.guild.name}</AccentTitle>
+                {props.editable && (
+                    <a href={`/s/${props.guild.id}/edit`}>
+                        <Editable role="button">
+                            <GoPencil />
+                            &nbsp; <AmbientLarge>Edit Server</AmbientLarge>
+                        </Editable>
+                    </a>
+                )}
+            </Name>
+        </Wrapper>
+    );
+};

packages/design-system/molecules/server-masthead/index.ts

@@ -0,0 +1 @@
+export * from './ServerMasthead';