storybook and template fixes

.github/workflows/build.yml

@@ -62,6 +62,8 @@ jobs:
                     - ui
                     - bot
         steps:
+            - uses: actions/checkout@master
+
             - uses: actions/cache@v2
               with:
                   path: /tmp/.buildx-cache

.storybook/main.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { NormalModuleReplacementPlugin } = require('webpack');
 
 module.exports = {
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -11,6 +12,11 @@ module.exports = {
             }),
         ];
 
+        config.resolve.alias['next/link'] = path.resolve(
+            __dirname,
+            'mocks/next_link.tsx'
+        );
+
         return config;
     },
     typescript: {

.storybook/mocks/next_link.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+};
+const Link = (props: Props) => <>{props.children}</>;
+
+export default Link;

docs/getting-started.md

@@ -31,6 +31,7 @@ As for infrastructure:
 
 - CI/CD process deploys all pieces.
 - Discord Bot is deployed on a Google Cloud VM
-- UI & Backend is deployed via a Cloudflare Worker
+- Backend is deployed via a Cloudflare Worker
+- UI is deployed via Google Cloud Run
 
 Biggest thing to note: this "discord bot" is an optional piece of the system, and should always remain as such. Giving it responsibility has actual engineering and dollar cost.

src/common/types/storyData.ts

@@ -10,6 +10,7 @@ import {
     RoleSafety,
     RoleypolyUser,
     CategoryType,
+    GuildSlug,
 } from '.';
 
 export const roleCategory: Role[] = [
@@ -139,9 +140,8 @@ export const roleWikiData = {
 
 export const guild: Guild = {
     name: 'emoji megaporium',
-    id: 'aaa',
+    id: '421896162539470888',
-    icon:
+    icon: '3372fd895ed913b55616c5e49cd50e60',
-        'https://cdn.discordapp.com/icons/421896162539470888/3372fd895ed913b55616c5e49cd50e60.png?size=256',
     ownerid: 'bbb',
     membercount: 23453,
     splash: '',
@@ -151,9 +151,8 @@ export const guildMap: { [x: string]: Guild } = {
     'emoji megaporium': guild,
     Roleypoly: {
         name: 'Roleypoly',
-        id: 'aaa',
+        id: '203493697696956418',
-        icon:
+        icon: 'ff08d36f5aee1ff48f8377b65d031ab0',
-            'https://cdn.discordapp.com/icons/203493697696956418/ff08d36f5aee1ff48f8377b65d031ab0.png?size=256',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -168,9 +167,8 @@ export const guildMap: { [x: string]: Guild } = {
     },
     Eclipse: {
         name: 'Eclipse',
-        id: 'aaa',
+        id: '408821059161423873',
-        icon:
+        icon: '49dfdd8b2456e2977e80a8b577b19c0d',
-            'https://cdn.discordapp.com/icons/408821059161423873/49dfdd8b2456e2977e80a8b577b19c0d.png?size=256',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -185,11 +183,10 @@ export const guildData: GuildData = {
 };
 
 export const user: DiscordUser = {
-    id: '123',
+    id: '62601275618889728',
-    username: 'okano cat',
+    username: 'okano',
-    discriminator: '3266',
+    discriminator: '0001',
-    avatar:
+    avatar: 'ca2028bab0fe30e1af4392f3fa3576e2',
-        'https://cdn.discordapp.com/avatars/62601275618889728/b1292bb974557337702cb941fc038085.png',
     bot: false,
 };
 
@@ -239,3 +236,12 @@ export const guildEnum: GuildEnumeration = {
         },
     ],
 };
+
+export const mastheadSlugs: GuildSlug[] = guildEnum.guildsList.map<GuildSlug>(
+    (guild, idx) => ({
+        id: guild.guild.id,
+        name: guild.guild.name,
+        icon: guild.guild.icon,
+        permissionLevel: idx % 3,
+    })
+);

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

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

src/design-system/atoms/branding/DynamicBranding.tsx

@@ -276,7 +276,7 @@ export const BicycleDay: Variant = {
 export const Christmas: Variant = {
     // Dec 20-27
     activeIf: (currentDate?: Date) =>
-        true || matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
+        matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
     sharedProps: {
         circleFill: palette.green200,
         circleOuterFill: palette.red200,

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

@@ -16,7 +16,10 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
     return (
         <Wrapper>
             <Icon>
-                <Avatar size={props.editable ? 60 : 48} src={guild.icon}>
+                <Avatar
+                    size={props.editable ? 60 : 48}
+                    src={utils.avatarHash(guild.id, guild.icon, 'icons', 512)}
+                >
                     {utils.initialsFromName(props.guild.name)}
                 </Avatar>
             </Icon>

src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx

@@ -17,7 +17,10 @@ export const UserAvatarGroup = (props: Props) => (
             </GroupText>
             &nbsp;
         </Collapse>
-        <Avatar size={34} src={props.user.avatar}>
+        <Avatar
+            size={34}
+            src={utils.avatarHash(props.user.id, props.user.avatar, 'avatars')}
+        >
             {utils.initialsFromName(props.user.username)}
         </Avatar>
     </Group>

src/design-system/organisms/masthead/Authed.tsx

@@ -32,7 +32,7 @@ export const Authed = (props: Props) => {
         <MastheadBase>
             <MastheadAlignment>
                 <MastheadLeft>
-                    <Link href="/dashboard" passHref>
+                    <Link href="/dashboard" passHref prefetch={false}>
                         <MastheadA>
                             <DynamicLogomark height={35} />
                         </MastheadA>
@@ -75,7 +75,9 @@ export const Authed = (props: Props) => {
                         }}
                         hide={!userPopoverState}
                     >
-                        {props.user && <UserAvatarGroup user={props.user} />}
+                        {props.user !== undefined && (
+                            <UserAvatarGroup user={props.user} />
+                        )}
                     </InteractionBase>
                     <Popover
                         headContent={<></>}

src/design-system/templates/role-picker/RolePicker.stories.tsx

@@ -5,8 +5,9 @@ import {
     member,
     guildRoles,
     guild,
-    rpUser,
+    user,
     guildEnum,
+    mastheadSlugs,
 } from 'roleypoly/common/types/storyData';
 
 const props: RolePickerTemplateProps = {
@@ -17,9 +18,10 @@ const props: RolePickerTemplateProps = {
     },
     member: member,
     guild: guild,
+    guilds: mastheadSlugs,
     roles: guildRoles,
     editable: false,
-    user: rpUser,
+    user: user,
     guildEnumeration: guildEnum,
     activeGuildId: guild.id,
     onSubmit: () => {},