feat: add server-setup page

src/design-system/organisms/server-setup/ServerSetup.stories.tsx

@@ -0,0 +1,25 @@
+import { UserGuildPermissions } from 'roleypoly/common/types';
+import { mastheadSlugs } from 'roleypoly/common/types/storyData';
+import { ServerSetup } from './ServerSetup';
+
+export default {
+    title: 'Organisms/Server Setup',
+    component: ServerSetup,
+};
+
+export const asAdmin = () => (
+    <ServerSetup
+        guildSlug={{ ...mastheadSlugs[1], permissionLevel: UserGuildPermissions.Admin }}
+    />
+);
+export const asManager = () => (
+    <ServerSetup
+        guildSlug={{
+            ...mastheadSlugs[1],
+            permissionLevel: UserGuildPermissions.Manager,
+        }}
+    />
+);
+export const asUser = () => (
+    <ServerSetup guildSlug={{ ...mastheadSlugs[1], permissionLevel: 0 }} />
+);

src/design-system/organisms/server-setup/ServerSetup.styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const FlexLine = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+`;
+
+export const FlexWrap = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+`;

src/design-system/organisms/server-setup/ServerSetup.tsx

@@ -0,0 +1,124 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import * as React from 'react';
+import { FaDiscord } from 'react-icons/fa';
+import { GoArrowLeft } from 'react-icons/go';
+import { GuildSlug, UserGuildPermissions } from 'roleypoly/common/types';
+import { evaluatePermission } from 'roleypoly/common/utils/hasPermission';
+import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { Button } from 'roleypoly/design-system/atoms/button';
+import { DotOverlay } from 'roleypoly/design-system/atoms/dot-overlay';
+import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { AccentTitle, SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { FlexLine, FlexWrap } from './ServerSetup.styled';
+
+export type ServerSetupProps = {
+    guildSlug: GuildSlug;
+};
+
+export const ServerSetup = (props: ServerSetupProps) => (
+    <>
+        <DotOverlay />
+        <Hero>
+            <FlexWrap>
+                <FlexLine>
+                    <div>
+                        <Avatar
+                            hash={props.guildSlug.icon}
+                            src={utils.avatarHash(
+                                props.guildSlug.id,
+                                props.guildSlug.icon,
+                                'icons'
+                            )}
+                        >
+                            {utils.initialsFromName(props.guildSlug.name)}
+                        </Avatar>
+                    </div>
+                    <div>
+                        <SmallTitle>
+                            &nbsp;&nbsp;Roleypoly isn't in {props.guildSlug.name}
+                        </SmallTitle>
+                    </div>
+                </FlexLine>
+                {renderMessage(props.guildSlug)}
+            </FlexWrap>
+        </Hero>
+    </>
+);
+
+const renderMessage = ({ id, permissionLevel, name }: GuildSlug) => {
+    if (evaluatePermission(permissionLevel, UserGuildPermissions.Admin)) {
+        return adminMessage(id);
+    } else if (evaluatePermission(permissionLevel, UserGuildPermissions.Manager)) {
+        return managerMessage(id);
+    } else {
+        return userMessage(name);
+    }
+};
+
+const adminMessage = (id: string) => (
+    <>
+        <FlexLine>
+            <AccentTitle>
+                You're an admin of this server, click the button to get started!
+            </AccentTitle>
+        </FlexLine>
+        <FlexLine>
+            <div>
+                <Link href={`/machinery/bot-join?id=${id}`}>
+                    <a>
+                        <Button color="discord" icon={<FaDiscord />}>
+                            Add Roleypoly
+                        </Button>
+                    </a>
+                </Link>
+            </div>
+        </FlexLine>
+    </>
+);
+
+const managerMessage = (id: string) => (
+    <>
+        <FlexLine>
+            <AccentTitle>
+                You might have the permissions to add it to the server.
+            </AccentTitle>
+        </FlexLine>
+        <FlexLine>
+            <div>
+                <Link href={`/machinery/bot-join?id=${id}`}>
+                    <a>
+                        <Button color="discord" icon={<FaDiscord />}>
+                            Add Roleypoly
+                        </Button>
+                    </a>
+                </Link>
+            </div>
+        </FlexLine>
+    </>
+);
+
+const userMessage = (name: string) => {
+    const router = useRouter();
+    return (
+        <>
+            <FlexLine>
+                <AccentTitle>
+                    If you think this is a mistake, please contact staff for {name}.
+                </AccentTitle>
+            </FlexLine>
+            <FlexLine>
+                <Button
+                    onClick={() => {
+                        void router.push('/');
+                    }}
+                    color="muted"
+                    size="small"
+                    icon={<GoArrowLeft />}
+                >
+                    Go back
+                </Button>
+            </FlexLine>
+        </>
+    );
+};

src/design-system/organisms/server-setup/index.ts

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

src/design-system/templates/server-setup/ServerSetup.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { mastheadSlugs, user } from 'roleypoly/common/types/storyData';
+import { ServerSetupTemplate } from './ServerSetup';
+
+export default {
+    title: 'Templates/Server Setup',
+    component: ServerSetupTemplate,
+    args: {
+        guilds: mastheadSlugs,
+        user: user,
+        guildSlug: mastheadSlugs[1],
+    },
+};
+
+export const serverSetup = (args) => <ServerSetupTemplate {...args} />;

src/design-system/templates/server-setup/ServerSetup.tsx

@@ -0,0 +1,18 @@
+import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
+import {
+    ServerSetup,
+    ServerSetupProps,
+} from 'roleypoly/design-system/organisms/server-setup/ServerSetup';
+
+type ServerSetupTemplateProps = Omit<AppShellProps, 'children'> & ServerSetupProps;
+
+export const ServerSetupTemplate = ({
+    guildSlug,
+    ...appShellProps
+}: ServerSetupTemplateProps) => {
+    return (
+        <AppShell {...appShellProps} activeGuildId={guildSlug.id}>
+            <ServerSetup guildSlug={guildSlug} />
+        </AppShell>
+    );
+};

src/pages/s/[id]/setup.tsx

@@ -0,0 +1,33 @@
+import { NextPageContext } from 'next';
+import { useRouter } from 'next/router';
+import * as React from 'react';
+import { ServerSetupTemplate } from 'roleypoly/design-system/templates/server-setup/ServerSetup';
+import { useAppShellProps } from 'roleypoly/providers/appShellData';
+
+const serverSetup = (props: { guildID: string }) => {
+    const { appShellProps } = useAppShellProps();
+
+    const guildSlug = appShellProps.guilds?.find((guild) => guild.id === props.guildID);
+
+    if (!guildSlug) {
+        const router = useRouter();
+        void router.push('/machinery/error?error_code=404');
+        return null;
+    }
+
+    return (
+        <ServerSetupTemplate
+            {...appShellProps}
+            activeGuildId={props.guildID}
+            guildSlug={guildSlug}
+        />
+    );
+};
+
+serverSetup.getInitialProps = async (context: NextPageContext) => {
+    return {
+        guildID: context.query.id,
+    };
+};
+
+export default serverSetup;