storybook and template fixes

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',
-    icon:
-        'https://cdn.discordapp.com/icons/421896162539470888/3372fd895ed913b55616c5e49cd50e60.png?size=256',
+    id: '421896162539470888',
+    icon: '3372fd895ed913b55616c5e49cd50e60',
     ownerid: 'bbb',
     membercount: 23453,
     splash: '',
@@ -151,9 +151,8 @@ export const guildMap: { [x: string]: Guild } = {
     'emoji megaporium': guild,
     Roleypoly: {
         name: 'Roleypoly',
-        id: 'aaa',
-        icon:
-            'https://cdn.discordapp.com/icons/203493697696956418/ff08d36f5aee1ff48f8377b65d031ab0.png?size=256',
+        id: '203493697696956418',
+        icon: 'ff08d36f5aee1ff48f8377b65d031ab0',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -168,9 +167,8 @@ export const guildMap: { [x: string]: Guild } = {
     },
     Eclipse: {
         name: 'Eclipse',
-        id: 'aaa',
-        icon:
-            'https://cdn.discordapp.com/icons/408821059161423873/49dfdd8b2456e2977e80a8b577b19c0d.png?size=256',
+        id: '408821059161423873',
+        icon: '49dfdd8b2456e2977e80a8b577b19c0d',
         ownerid: 'bbb',
         membercount: 23453,
         splash: '',
@@ -185,11 +183,10 @@ export const guildData: GuildData = {
 };
 
 export const user: DiscordUser = {
-    id: '123',
-    username: 'okano cat',
-    discriminator: '3266',
-    avatar:
-        'https://cdn.discordapp.com/avatars/62601275618889728/b1292bb974557337702cb941fc038085.png',
+    id: '62601275618889728',
+    username: 'okano',
+    discriminator: '0001',
+    avatar: 'ca2028bab0fe30e1af4392f3fa3576e2',
     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
-        .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) =>
-    `https://cdn.discordapp.com/icons/${id}/${hash}.webp?size=256`;
+export const avatarHash = (
+    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: () => {},